Photographer About Section with Stats Sidebar

<section class="mt-12 max-w-4xl">
    <div class="flex sm:mb-8 mb-6 items-end justify-between">
        <div class="">
            <p class="text-[11px] sm:text-xs uppercase text-neutral-500 tracking-widest font-geist">(02) About</p>
            <h3 class="mt-2 text-2xl sm:text-3xl tracking-tight font-geist font-medium">Behind the lens.</h3>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8">
        <!-- Main Content -->
        <div class="lg:col-span-8">
            <div class="relative overflow-hidden bg-white ring-1 ring-neutral-200 rounded-3xl shadow-sm">
                <img src="https://cdn.midjourney.com/26957251-c518-41f9-b07c-022d19666ca2/0_0.png?w=800&amp;q=80" alt="Sarah Chen at work" class="h-80 sm:h-96 w-full object-cover">
                <div class="p-6 sm:p-8">
                    <div class="prose prose-neutral max-w-none">
                        <p class="text-lg text-neutral-700 font-geist leading-relaxed mb-4">
                            With over eight years of experience capturing life's most precious moments, I believe that every photograph should tell a story worth remembering.
                        </p>
                        <p class="text-neutral-600 font-geist mb-4">
                            My journey into photography began during college when I discovered the power of freezing time through the lens. What started as a hobby quickly became my passion, and eventually, my calling. I've had the privilege of documenting hundreds of weddings, family milestones, and corporate events across New York and beyond.
                        </p>
                        <p class="text-neutral-600 font-geist">
                            My approach is rooted in authenticity and connection. I strive to create an environment where you feel comfortable being yourself, allowing genuine emotions and natural interactions to unfold. The result is imagery that feels timeless, honest, and uniquely yours.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="lg:col-span-4 flex flex-col gap-4 sm:gap-5">
            <!-- Stats Card -->
            <div class="ring-1 ring-neutral-200 bg-white 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">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5" style="stroke-width: 1.5;"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M7 11h8" class=""></path><path d="M7 16h12" class=""></path><path d="M7 6h3" class=""></path></svg>
                    <span class="font-geist">By the Numbers</span>
                </div>
                <div class="space-y-4">
                    <div class="">
                        <p class="text-2xl font-medium tracking-tight text-neutral-900 font-geist">500+</p>
                        <p class="text-sm text-neutral-600 font-geist">Weddings Captured</p>
                    </div>
                    <div class="">
                        <p class="text-2xl font-medium tracking-tight text-neutral-900 font-geist">8</p>
                        <p class="text-sm text-neutral-600 font-geist">Years Experience</p>
                    </div>
                    <div class="">
                        <p class="text-2xl font-medium tracking-tight text-neutral-900 font-geist">15+</p>
                        <p class="text-sm text-neutral-600 font-geist">Countries Visited</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">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5" style="stroke-width: 1.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 class="font-geist">Equipment</span>
                </div>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-white/90 text-sm font-geist">Canon R5</span>
                        <span class="text-white/60 text-xs font-geist">Primary</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-white/90 text-sm font-geist">Canon R6 Mark II</span>
                        <span class="text-white/60 text-xs font-geist">Backup</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-white/90 text-sm font-geist">70-200mm f/2.8</span>
                        <span class="text-white/60 text-xs font-geist">Telephoto</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-white/90 text-sm font-geist">24-70mm f/2.8</span>
                        <span class="text-white/60 text-xs font-geist">Standard</span>
                    </div>
                </div>
            </div>

            <!-- Recognition Card -->
            <div class="ring-1 ring-neutral-200 bg-white 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">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5" style="stroke-width: 1.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 class="font-geist">Recognition</span>
                </div>
                <div class="space-y-2">
                    <p class="text-sm text-neutral-600 font-geist">Featured in  Magazine</p>
                    <p class="text-sm text-neutral-600 font-geist">Winner - NYC Wedding Awards 2023</p>
                    <p class="text-sm text-neutral-600 font-geist">Top 10 NYC Photographers - The Knot</p>
                </div>
            </div>
        </div>
    </div>
</section>