Security Hero Section with Image & CTAs

<section
  class="grid md:grid-cols-2 gap-6 md:p-8 ring-1 ring-white/15 bg-white/10 rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-sm backdrop-blur-xl items-stretch max-w-5xl">
  <!-- Left image -->
  <div class="md:order-1" style="animation: fadeIn .8s ease-out both; animation-delay: .12s;">
    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ec79d014-d7ca-4526-b496-b6bb9ba0a50c_1600w.jpg" alt="Dashboard abstract render" class="w-full h-full object-cover rounded-2xl" style="aspect-ratio: 4 / 3; display:block;">
  </div>

  <!-- Right content -->
  <div class="md:order-2 flex flex-col justify-center px-2 sm:px-6"
    style="animation: slideIn .7s ease-out both; animation-delay: .05s;">
    <span class="inline-flex items-center gap-1 text-xs uppercase text-pink-300 tracking-tight mb-2 font-geist">
          <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="lock-keyhole" style="width:14px;height:14px;stroke-width:1.5;" class="lucide lucide-lock-keyhole"><circle cx="12" cy="16" r="1" class=""></circle><rect x="3" y="10" width="18" height="12" rx="2" class=""></rect><path d="M7 10V7a5 5 0 0 1 10 0v3" class=""></path></svg>
          Quanta Security
        </span>
    <h1 class="text-4xl md:text-5xl tracking-tight leading-tight mb-4 font-space-grotesk font-semibold text-gray-100"
      style="letter-spacing:-0.01em;">
      Trust by design, privacy by default
    </h1>
    <p class="text-gray-300 text-sm md:text-base mb-6 font-geist">
      QuantaBase is secure, transparent, and community-driven. Audit every change, export at any time, and stay in
      control of your data lifecycle.
    </p>

    <div class="flex flex-wrap items-center gap-3 mb-4">
      <button class="hover:bg-white/90 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] text-sm text-gray-900 bg-white/90 rounded-full pt-2 pr-4 pb-2 pl-4 font-geist">
            Get started
          </button>
      <button class="px-3 py-2 rounded-full border border-white/15 text-sm text-gray-100 bg-white/10 hover:bg-white/20 backdrop-blur font-geist">
            Learn more
          </button>
    </div>

    <!-- Small detail cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-2">
      <div class="bg-white/10 backdrop-blur-xl rounded-xl p-4 flex items-start gap-3 ring-1 ring-white/15"
        style="animation: fadeUp .7s ease-out both; animation-delay: .18s;">
        <span class="flex-none w-9 h-9 rounded-lg bg-white/10 border border-white/15 flex items-center justify-center backdrop-blur">
              <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="shield-check" style="width:20px;height:20px;stroke-width:1.5;" class="lucide lucide-shield-check text-gray-200"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
            </span>
        <div class="">
          <div class="text-xs text-gray-400 mb-1 font-geist">Defense-in-depth</div>
          <p class="text-sm text-gray-300 font-geist">Strong encryption, SSO/SAML, and granular API keys with rotation
            policies.</p>
        </div>
      </div>

      <div class="bg-white/10 backdrop-blur-xl rounded-xl p-4 flex items-start gap-3 ring-1 ring-white/15"
        style="animation: fadeUp .7s ease-out both; animation-delay: .24s;">
        <span class="flex-none w-9 h-9 rounded-lg bg-white/10 border border-white/15 flex items-center justify-center backdrop-blur">
              <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="globe" style="width:20px;height:20px;stroke-width:1.5;" class="lucide lucide-globe text-gray-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
            </span>
        <div class="">
          <div class="text-xs text-gray-400 mb-1 font-geist">Built in public</div>
          <p class="text-sm text-gray-300 font-geist">Transparent roadmaps, open audits, and community-driven RFCs.</p>
        </div>
      </div>
    </div>
  </div>
</section>