Responsive About Section with Image, Stats & CTA

<section id="about" class="max-w-7xl sm:px-6 sm:mt-20 border-black/5 border-t mt-16 pt-10">
      <div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
        <div class="md:col-span-5">
          <div class="relative aspect-[16/12] md:aspect-[4/5] rounded-3xl overflow-hidden border border-white/60 bg-white shadow-[0_8px_30px_rgba(0,0,0,0.08)]">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f0f33052-7e87-44a7-9c52-a02692aceec9_800w.jpg" alt="Workspace" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-tr from-black/10 via-transparent to-transparent"></div>
          </div>
        </div>
        <div class="md:col-span-7 md:pl-8 md:border-l md:border-black/5">
  <h2 class="text-2xl sm:text-3xl tracking-tight">About</h2>
  <p class="mt-3 text-sm sm:text-base leading-relaxed text-gray-700">
    I design and build digital products end‑to‑end—from discovery and systems to polished interfaces and production‑ready frontend. I've partnered with startups and enterprise teams to launch onboarding flows, design systems, and data‑heavy dashboards that scale.
  </p>
  
  <p class="mt-4 text-sm sm:text-base leading-relaxed text-gray-700">
    My approach centers on accessibility-first design, performance optimization, and creating cohesive user experiences. I bridge the gap between design and engineering, ensuring pixel-perfect implementations that maintain design integrity while meeting technical requirements.
  </p>

  <div class="mt-6 space-y-4">
    <div class="">
      <h3 class="text-sm font-medium tracking-tight text-gray-900">Recent Focus Areas</h3>
      <div class="mt-2 flex flex-wrap gap-2">
        <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">Design Systems</span>
        <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">Data Visualization</span>
        <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">Accessibility</span>
        <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">Performance</span>
      </div>
    </div>

    <div class="">
      <h3 class="text-sm font-medium tracking-tight text-gray-900">Notable Clients</h3>
      <p class="mt-1 text-sm text-gray-600">Stripe, Linear, Notion, early-stage YC companies, and Fortune 500 enterprises</p>
    </div>
  </div>

  <div class="mt-6 grid grid-cols-3 gap-4">
    <div class="">
      <div class="text-2xl tracking-tight">8+</div>
      <p class="text-[11px] text-gray-500 mt-0.5">Years</p>
    </div>
    <div class="">
      <div class="text-2xl tracking-tight">120+</div>
      <p class="text-[11px] text-gray-500 mt-0.5">Projects</p>
    </div>
    <div class="">
      <div class="text-2xl tracking-tight">50+</div>
      <p class="text-[11px] text-gray-500 mt-0.5">Clients</p>
    </div>
  </div>

  <div class="mt-6 p-4 bg-gray-50 rounded-xl border border-gray-100">
    <h3 class="text-sm font-medium tracking-tight text-gray-900 mb-2">Currently Learning</h3>
    <p class="text-sm text-gray-600">Exploring AI-powered design tools, advanced animation techniques with Framer Motion, and WebGL for interactive experiences.</p>
  </div>

  <div class="mt-6 inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-white bg-gray-900 hover:bg-gray-800 border border-gray-900">
    
    <span class="">Let's collaborate</span>
  </div>
</div>
      </div>
    </section>