Photographer About Section with Stats Sidebar

<section class="bg-white rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 max-w-5xl">
  <div class="flex items-center justify-between mb-6">
    <p class="text-xs font-medium text-neutral-500 uppercase tracking-wide" style="">/About</p>
    <span class="text-xs font-medium text-neutral-500" style="">(03)</span>
  </div>

  <h3 class="text-4xl md:text-6xl text-neutral-900 mb-8 font-light tracking-tight" style="">Behind the lens.</h3>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
    <!-- Main Content -->
    <div class="lg:col-span-8">
      <div class="relative overflow-hidden bg-neutral-50 ring-1 ring-neutral-200 rounded-3xl shadow-sm">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0c1c4611-4743-407c-9375-ca363769720b_1600w.jpg" alt="Suzy Liu at work" class="h-80 sm:h-96 w-full object-cover">
        <div class="bg-white pt-6 pr-6 pb-6 pl-6">
          <div class="prose prose-neutral max-w-none">
            <p class="text-lg text-neutral-700 leading-relaxed mb-4" style="">
              Creating minimal, calm, and intentional photography that tells authentic stories through light and
              composition.
            </p>
            <p class="text-neutral-600 mb-4" style="">
              My approach blends clean minimalism with soft emotion, capturing genuine moments that feel both timeless
              and deeply personal. Every frame is composed with intention, focusing on the subtle interplay between
              light, shadow, and human expression.
            </p>
            <p class="text-neutral-600" style="">
              Based in California, I work with clients who value thoughtful direction and meticulous attention to
              detail. Whether it's portraits, editorials, or brand photography, my goal is to create imagery that
              resonates with quiet strength and authentic beauty.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="lg:col-span-4 flex flex-col gap-6">
      <!-- Stats Card -->
      <div class="ring-1 ring-neutral-200 bg-neutral-50 rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-sm">

        <div class="space-y-4">
          <div class="">
            <p class="text-2xl text-neutral-900 font-light tracking-tight" style="">200+</p>
            <p class="text-sm text-neutral-600" style="">Projects Completed</p>
          </div>
          <div class="">
            <p class="text-2xl text-neutral-900 font-light tracking-tight" style="">6</p>
            <p class="text-sm text-neutral-600" style="">Years Experience</p>
          </div>
          <div class="">
            <p class="text-2xl text-neutral-900 font-light tracking-tight" style="">25+</p>
            <p class="text-sm text-neutral-600" style="">Brands Collaborated</p>
          </div>
        </div>
      </div>

      <!-- Equipment Card -->
      <div class="bg-neutral-900 rounded-3xl shadow-sm p-6">
        <div class="flex items-center gap-2 text-white/80 text-xs mb-4 uppercase tracking-wide">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
            <path
              d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"
              class=""></path>
            <circle cx="12" cy="13" r="3" class=""></circle>
          </svg>
          <span style="">Equipment</span>
        </div>
        <div class="space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-white/90 text-sm" style="">Canon R5</span>
            <span class="text-white/60 text-xs" style="">Primary</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-white/90 text-sm" style="">Sony A7R V</span>
            <span class="text-white/60 text-xs" style="">Backup</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-white/90 text-sm" style="">85mm f/1.4</span>
            <span class="text-white/60 text-xs" style="">Portrait</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-white/90 text-sm" style="">35mm f/1.4</span>
            <span class="text-white/60 text-xs" style="">Editorial</span>
          </div>
        </div>
      </div>

      <!-- Recognition Card -->
      <div class="ring-1 ring-neutral-200 bg-neutral-50 rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-sm">
        <div class="flex gap-2 text-xs text-neutral-500 mb-4 items-center uppercase tracking-wide">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
            <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" class=""></path>
            <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" class=""></path>
            <path d="M4 22h16" class=""></path>
            <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" class=""></path>
            <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" class=""></path>
            <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" class=""></path>
          </svg>
          <span style="">Recognition</span>
        </div>
        <div class="space-y-2">
          <p class="text-sm text-neutral-600" style="">Featured in Vogue Magazine</p>
          <p class="text-sm text-neutral-600" style="">Winner - CA Photography Awards 2024</p>
          <p class="text-sm text-neutral-600" style="">Top 50 Portrait Photographers - PDN</p>
        </div>
      </div>
    </div>
  </div>
</section>