Responsive Two-Column About Section with Stats

<div class="sm:pl-6 sm:pr-6 lg:pl-8 lg:pr-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
        <div class="grid lg:grid-cols-2 gap-0 border-t border-white/10">
          <!-- Left Column -->
          <div class="divide-y divide-white/10 lg:border-r border-white/10">
            <div class="p-8">
              <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-white mb-8">
                Design is storytelling through experience
              </h2>
              <div class="space-y-6 text-lg text-neutral-300 leading-relaxed">
                <p class="">
                  I'm a passionate UI/UX designer with over 8 years of experience crafting digital experiences that connect brands with their audiences. My approach combines strategic thinking with creative execution.
                </p>
                <p class="">
                  From startups to enterprise companies, I've helped organizations tell their stories through thoughtful design, intuitive interfaces, and meaningful user experiences.
                </p>
              </div>
            </div>
            <div class="p-8">
              <div class="space-y-6 text-lg text-neutral-300 leading-relaxed">
                <p>
                  When I'm not designing, you'll find me exploring new technologies, reading about behavioral psychology, or traveling to discover new perspectives.
                </p>
              </div>
              <div class="mt-8 flex flex-wrap gap-4">
                <span class="px-4 py-2 bg-neutral-800 text-neutral-200 rounded-full text-sm font-medium">UI/UX Design</span>
                <span class="px-4 py-2 bg-neutral-800 text-neutral-200 rounded-full text-sm font-medium">Brand Strategy</span>
                <span class="px-4 py-2 bg-neutral-800 text-neutral-200 rounded-full text-sm font-medium">Product Design</span>
                <span class="px-4 py-2 bg-neutral-800 text-neutral-200 rounded-full text-sm font-medium">Prototyping</span>
              </div>
            </div>
          </div>

          <!-- Right Column -->
          <div class="divide-y divide-white/10">
            <div class="p-8">
              <div class="relative rounded-2xl overflow-hidden mb-6">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3bcedbb5-cc5d-4c95-9f89-99282d6e2287_800w.jpg" alt="Designer portrait" class="w-full h-96 lg:h-[500px] object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
              </div>
              <div class="flex items-center gap-4 mb-6">
                <div>
                  <div class="text-white font-medium">Creative Designer</div>
                  <div class="text-sm text-neutral-400">8+ Years Experience</div>
                </div>
              </div>
            </div>
            <div class="p-8 relative">
              <!-- Floating stats positioned within the padded area -->
              <div class="absolute top-12 left-12 bg-white text-black p-6 rounded-2xl z-10">
                <div class="text-3xl font-semibold mb-1">50+</div>
                <div class="text-sm text-neutral-600">Projects Completed</div>
              </div>
              <div class="absolute top-12 right-12 bg-neutral-900 border border-white/10 text-white p-6 rounded-2xl z-10">
                <div class="text-3xl font-semibold mb-1">8+</div>
                <div class="text-sm text-neutral-400">Years Experience</div>
              </div>
              <!-- Spacer to maintain layout -->
              <div class="h-24"></div>
            </div>
          </div>
        </div>
      </div>