About Section with Image, Stats & CTA (Tailwind)

<section class="max-w-7xl sm:px-6 mt-10 mb-8 px-4">
  <div class="relative sm:mt-12 overflow-hidden shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.3),0px_12px_24px_-12px_rgba(0,0,0,0.5)] bg-black/80 border-white/10 border rounded-[40px] backdrop-blur">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
    </div>

    <div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
      <div class="grid lg:grid-cols-3 gap-8">
        <!-- Left: Media + Story copy -->
        <div class="lg:col-span-2 space-y-6">
          <div class="relative rounded-2xl overflow-hidden border border-white/10">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/da666542-bfa8-493a-af68-db5a713dc548_1600w.jpg" alt="Clients touring a modern property" class="w-full h-[260px] sm:h-[360px] object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
          </div>

          <div class="max-w-2xl">
            <div class="flex items-center gap-3">
              <span class="h-px w-8 bg-white/20"></span>
              <span class="text-sm text-neutral-300 font-geist">About EstateVault</span>
            </div>
            <h2 class="mt-2 text-2xl sm:text-3xl text-neutral-100 font-geist tracking-tight font-medium">Our Story</h2>
            <p class="mt-3 text-sm sm:text-base leading-relaxed text-neutral-400 font-geist">
              EstateVault began with a simple idea: make finding an extraordinary home feel effortless. What started as a small collective of agents and designers has grown into a nationwide network known for precision, transparency, and taste. 
              From beachfront villas to skyline penthouses, we curate every listing, verify every document, and guide you from first tour to final signature.
            </p>
            <p class="mt-3 text-sm sm:text-base leading-relaxed text-neutral-400 font-geist">
              Today, our platform blends expert local insight with real‑time data, immersive media, and concierge‑level service—so you can move with confidence.
            </p>

            <a href="#" class="mt-4 inline-flex items-center gap-2 text-sm font-medium tracking-tight text-neutral-200 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10">
              <span class="font-geist">See details</span>
              <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" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 stroke-[1.5]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </a>
          </div>
        </div>

        <!-- Right: Key stats + secondary card -->
        <div class="lg:col-span-1">
          <ul class="space-y-6 sm:space-y-8">
            <li class="">
              <div class="text-4xl sm:text-5xl text-neutral-100 font-geist tracking-tight font-medium">12,000+</div>
              <p class="text-[11px] tracking-wider uppercase text-neutral-400 mt-1 font-geist">Active Listings</p>
            </li>
            <li class="">
              <div class="text-4xl sm:text-5xl text-neutral-100 font-geist tracking-tight font-medium">28</div>
              <p class="text-[11px] tracking-wider uppercase text-neutral-400 mt-1 font-geist">Markets Served</p>
            </li>
            <li>
              <div class="text-4xl sm:text-5xl text-neutral-100 font-geist tracking-tight font-medium">350+</div>
              <p class="text-[11px] tracking-wider uppercase text-neutral-400 mt-1 font-geist">Virtual Tours</p>
            </li>
            <li class="">
              <div class="text-4xl sm:text-5xl text-neutral-100 font-geist tracking-tight font-medium">4.9</div>
              <p class="text-[11px] tracking-wider uppercase text-neutral-400 mt-1 font-geist">Client Rating</p>
            </li>
          </ul>

          <div class="mt-8 pt-8 border-t border-white/10">
            <h3 class="text-xl text-neutral-100 font-geist tracking-tight font-medium">Concierge by EstateVault</h3>
            <p class="mt-2 text-sm leading-relaxed text-neutral-400 font-geist">
              From private showings to vetted contractors and movers, our team orchestrates every step for a seamless move‑in.
            </p>
            <a href="#" class="mt-4 inline-flex items-center gap-2 text-sm font-medium tracking-tight text-neutral-200 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10">
              <span class="font-geist">Explore more</span>
              <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" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 stroke-[1.5]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>