Portfolio About Section with Stats & CTA

<section class="ssm:py-24 pt-16 pb-16 max-w-5xl">
  <div class="mb-12 fade-in-up animate">
    <div class="text-center mb-12">
      <!-- Top meta row -->
      <div class="mb-6">
        <div
          class="flex items-center justify-between text-[13px] sm:text-sm font-medium uppercase tracking-tight text-black">
          <span class="">ABOUT</span>
          <span class="">(01)</span>
        </div>
        <div class="mt-2 h-px w-full bg-black"></div>
      </div>

      <!-- Header layout -->
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 text-left items-center">
        <!-- Left: Giant word -->
        <div class="lg:col-span-7 fade-in-left animate">
          <h3
            class="text-[40px] sm:text-[56px] lg:text-[72px] xl:text-[80px] leading-[1.05] font-semibold tracking-tight uppercase">
            Recent Work.</h3>
        </div>

        <!-- Right: Description + CTA -->
        <div class="lg:col-span-5 fade-in-right animate">
          <p class="text-base sm:text-lg text-black/60 max-w-2xl mt-0 mx-0 mb-6">A curated set of projects from the past
            months. Clean UI, clear structure, and fast delivery. Designed in Figma and built in React and Tailwind when
            needed.</p>
          <div class="flex justify-start">
            <a href="#"
              class="inline-flex items-center gap-3 ring-1 ring-black/10 hover:shadow-2xl transition bg-black/5 rounded-full pt-2 pr-2 pb-2 pl-2 shadow">
              <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="m22 2-7 20-4-9-9-4Z" class=""></path>
              <path d="M22 2 11 13" class=""></path>
            </svg>
          </span>
              <span class="px-3 text-sm font-medium">Get Started</span>
            </a>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
    <div class="lg:col-span-4 fade-in-left animate">

      <div class="w-full h-[360px] rounded-2xl overflow-hidden ring-1 ring-black/10 bg-gray-50 mb-6">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/853977d3-265d-4013-9af2-b0bf5139dfee_800w.jpg" alt="Portrait" class="w-full h-full object-cover" style="">
      </div>
    </div>
    <div class="lg:col-span-8 fade-in-right animate">
      <div class="space-y-6 text-lg leading-relaxed text-black/70">
        <p class="">I'm a product designer who believes in the power of simplicity. My approach is rooted in
          understanding user needs deeply and crafting solutions that feel effortless and intuitive.</p>
        <p class="">With over 8 years of experience working with startups and Fortune 500 companies, I've learned that
          the best designs are often the ones you don't notice – they just work.</p>
        <p class="">When I'm not designing, you'll find me exploring new cafés, reading about behavioral psychology, or
          practicing minimalist photography.</p>
      </div>
      <div class="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-8">
        <div class="scale-in stagger-delay-1 animate">
          <div class="text-3xl font-semibold tracking-tight">50+</div>
          <div class="text-sm mt-1 text-black/70">Projects Completed</div>
        </div>
        <div class="scale-in stagger-delay-2 animate">
          <div class="text-3xl font-semibold tracking-tight">8</div>
          <div class="text-sm mt-1 text-black/70">Years Experience</div>
        </div>
        <div class="scale-in stagger-delay-3 animate">
          <div class="text-3xl font-semibold tracking-tight">15+</div>
          <div class="text-sm mt-1 text-black/70">Happy Clients</div>
        </div>
        <div class="scale-in stagger-delay-4 animate">
          <div class="text-3xl font-semibold tracking-tight">3</div>
          <div class="text-sm mt-1 text-black/70">Design Awards</div>
        </div>
      </div>
    </div>
  </div>
</section>