Photography SaaS Hero with Dashboard Preview

<div
  class="overflow-hidden z-10 flex flex-col lg:h-[800px] bg-[#0f0f11]/80 w-full h-auto max-w-6xl border-white/10 border rounded-2xl relative shadow-2xl backdrop-blur-xl">

  <!-- Header / Navbar -->
  <header class="flex items-center justify-between px-8 py-6 border-b border-white/5">
    <div class="flex items-center gap-3">
      <!-- Logo -->
      <div
        class="flex bg-gradient-to-l from-orange-400 to-orange-600 w-8 h-8 rounded-lg relative items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24"
          data-icon="solar:camera-minimalistic-linear" data-width="20" class="iconify text-white iconify--solar">
          <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
            <circle cx="12" cy="13" r="3" class=""></circle>
            <path
              d="M10 20h4c2.809 0 4.214 0 5.222-.674a4 4 0 0 0 1.104-1.104C21 17.213 21 15.81 21 13s0-4.213-.674-5.222a4 4 0 0 0-1.104-1.104C18.213 6 16.81 6 14 6h-4c-2.809 0-4.213 0-5.222.674a4 4 0 0 0-1.104 1.104C3 8.787 3 10.19 3 12.998V13c0 2.809 0 4.213.674 5.222a4 4 0 0 0 1.104 1.104C5.787 20 7.19 20 10 20Z"
              class=""></path>
            <path stroke-linecap="round" d="M18 10h-.5M15 3H9" class=""></path>
          </g>
        </svg>
      </div>
      <span class="text-lg font-medium tracking-tight text-white">Lumina</span>
    </div>

    <!-- Navigation -->
    <nav class="hidden md:flex items-center gap-8">
      <a href="#" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Gallery</a>
      <a href="#" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Studio</a>
      <a href="#" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Analytics</a>
    </nav>

    <!-- Actions / Status -->
    <div class="flex items-center gap-4">
      <span class="hidden sm:flex text-xs font-medium text-gray-500 uppercase tracking-widest items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
      System Operational
      </span>
      <button class="p-2 rounded-md hover:bg-white/5 transition-colors text-gray-400 hover:text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="solar:settings-linear" data-width="20" class="iconify iconify--solar"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><circle cx="12" cy="12" r="3" class=""></circle><path d="M13.765 2.152C13.398 2 12.932 2 12 2s-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083c-.092.223-.129.484-.143.863a1.62 1.62 0 0 1-.79 1.353a1.62 1.62 0 0 1-1.567.008c-.336-.178-.579-.276-.82-.308a2 2 0 0 0-1.478.396C4.04 5.79 3.806 6.193 3.34 7s-.7 1.21-.751 1.605a2 2 0 0 0 .396 1.479c.148.192.355.353.676.555c.473.297.777.803.777 1.361s-.304 1.064-.777 1.36c-.321.203-.529.364-.676.556a2 2 0 0 0-.396 1.479c.052.394.285.798.75 1.605c.467.807.7 1.21 1.015 1.453a2 2 0 0 0 1.479.396c.24-.032.483-.13.819-.308a1.62 1.62 0 0 1 1.567.008c.483.28.77.795.79 1.353c.014.38.05.64.143.863a2 2 0 0 0 1.083 1.083C10.602 22 11.068 22 12 22s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.092-.223.129-.483.143-.863c.02-.558.307-1.074.79-1.353a1.62 1.62 0 0 1 1.567-.008c.336.178.579.276.819.308a2 2 0 0 0 1.479-.396c.315-.242.548-.646 1.014-1.453s.7-1.21.751-1.605a2 2 0 0 0-.396-1.479c-.148-.192-.355-.353-.676-.555A1.62 1.62 0 0 1 19.562 12c0-.558.304-1.064.777-1.36c.321-.203.529-.364.676-.556a2 2 0 0 0 .396-1.479c-.052-.394-.285-.798-.75-1.605c-.467-.807-.7-1.21-1.015-1.453a2 2 0 0 0-1.479-.396c-.24.032-.483.13-.82.308a1.62 1.62 0 0 1-1.566-.008a1.62 1.62 0 0 1-.79-1.353c-.014-.38-.05-.64-.143-.863a2 2 0 0 0-1.083-1.083Z" class=""></path></g></svg>
                </button>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="flex-1 flex flex-col lg:p-16 pt-10 pr-10 pb-10 pl-10 relative justify-center">

    <!-- Floating Decorative Gradient Strip -->
    <div
      class="absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-bl from-orange-400/20 via-purple-500/20 to-transparent blur-3xl pointer-events-none rounded-full">
    </div>

    <!-- Hero Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 w-full relative gap-x-12 gap-y-12 items-center">
      <!-- Content Column -->
      <div class="max-w-2xl">
        <h1 class="text-6xl lg:text-7xl font-semibold tracking-tighter text-white leading-[1.1] mb-8">
          Capture visual
          <span class="bg-clip-text text-transparent bg-gradient-to-l from-orange-300 to-red-400">masterpieces.</span>
        </h1>

        <p class="text-xl text-gray-400 leading-relaxed max-w-lg font-light">
          The next-generation platform for photographers. Lossless storage, instant global delivery, and beautiful
          client galleries designed for the modern creator.
        </p>

        <!-- Feature Pills -->
        <div class="grid grid-cols-2 gap-x-4 gap-y-4 mt-10">
          <div class="flex items-center gap-3 group cursor-default">
            <div class="p-1.5 rounded-md bg-white/5 group-hover:bg-white/10 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
                viewBox="0 0 24 24" data-icon="solar:bolt-linear" data-width="18"
                class="iconify text-white iconify--solar">
                <path fill="none" stroke="currentColor" stroke-width="1.5"
                  d="m5.67 9.914l3.062-4.143c1.979-2.678 2.969-4.017 3.892-3.734s.923 1.925.923 5.21v.31c0 1.185 0 1.777.379 2.148l.02.02c.387.363 1.003.363 2.236.363c2.22 0 3.329 0 3.704.673l.018.034c.354.683-.289 1.553-1.574 3.29l-3.062 4.144c-1.98 2.678-2.969 4.017-3.892 3.734s-.923-1.925-.923-5.21v-.31c0-1.185 0-1.777-.379-2.148l-.02-.02c-.387-.363-1.003-.363-2.236-.363c-2.22 0-3.329 0-3.703-.673l-.019-.034c-.354-.683.289-1.552 1.574-3.29Z"
                  class=""></path>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-300">Instant RAW Sync</span>
          </div>
          <div class="flex items-center gap-3 group cursor-default">
            <div class="p-1.5 rounded-md bg-white/5 group-hover:bg-white/10 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
                viewBox="0 0 24 24" data-icon="solar:shield-check-linear" data-width="18"
                class="iconify text-white iconify--solar">
                <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
                  <path
                    d="M3 10.417c0-3.198 0-4.797.378-5.335c.377-.537 1.88-1.052 4.887-2.081l.573-.196C10.405 2.268 11.188 2 12 2s1.595.268 3.162.805l.573.196c3.007 1.029 4.51 1.544 4.887 2.081C21 5.62 21 7.22 21 10.417v1.574c0 5.638-4.239 8.375-6.899 9.536C13.38 21.842 13.02 22 12 22s-1.38-.158-2.101-.473C7.239 20.365 3 17.63 3 11.991z"
                    class=""></path>
                  <path stroke-linecap="round" stroke-linejoin="round" d="m9.5 12.4l1.429 1.6l3.571-4" class=""></path>
                </g>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-300">End-to-End Encrypted</span>
          </div>
          <div class="flex items-center gap-3 group cursor-default">
            <div class="p-1.5 rounded-md bg-white/5 group-hover:bg-white/10 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
                viewBox="0 0 24 24" data-icon="solar:palette-linear" data-width="18"
                class="iconify text-white iconify--solar">
                <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
                  <path
                    d="M2 6c0-1.4 0-2.1.272-2.635a2.5 2.5 0 0 1 1.093-1.093C3.9 2 4.6 2 6 2s2.1 0 2.635.272a2.5 2.5 0 0 1 1.093 1.093C10 3.9 10 4.6 10 6v12c0 1.4 0 2.1-.272 2.635a2.5 2.5 0 0 1-1.093 1.092C8.1 22 7.4 22 6 22s-2.1 0-2.635-.273a2.5 2.5 0 0 1-1.093-1.092C2 20.1 2 19.4 2 18z"
                    class=""></path>
                  <path stroke-linecap="round" d="M7 19H5" class=""></path>
                  <path
                    d="m13.314 4.929l-2.142 2.142c-.578.578-.867.867-1.02 1.235C10 8.673 10 9.082 10 9.9v9.656l8.97-8.97c.99-.99 1.486-1.485 1.671-2.056a2.5 2.5 0 0 0 0-1.545c-.185-.57-.68-1.066-1.67-2.056s-1.486-1.485-2.056-1.67a2.5 2.5 0 0 0-1.545 0c-.571.185-1.066.68-2.056 1.67Z"
                    class=""></path>
                  <path
                    d="M6 22h12c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.092-1.092C22 20.1 22 19.4 22 18s0-2.1-.273-2.635a2.5 2.5 0 0 0-1.092-1.092C20.1 14 19.4 14 18 14h-2.5"
                    class=""></path>
                </g>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-300">Color Grade Tools</span>
          </div>
          <div class="flex items-center gap-3 group cursor-default">
            <div class="p-1.5 rounded-md bg-white/5 group-hover:bg-white/10 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
                viewBox="0 0 24 24" data-icon="solar:server-square-linear" data-width="18"
                class="iconify text-white iconify--solar">
                <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
                  <path
                    d="M2 11c0-3.771 0-5.657 1.172-6.828S6.229 3 10 3h4c3.771 0 5.657 0 6.828 1.172S22 7.229 22 11v2c0 3.771 0 5.657-1.172 6.828S17.771 21 14 21h-4c-3.771 0-5.657 0-6.828-1.172S2 16.771 2 13zm0 1h20"
                    class=""></path>
                  <path stroke-linecap="round" d="M13.5 16.5H18m-4.5-9H18m-12 10v-2m0-7v-2m3 11v-2m0-7v-2" class="">
                  </path>
                </g>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-300">Unlimited Archive</span>
          </div>
        </div>
      </div>

      <!-- Image Column -->
      <div class="hidden lg:block z-10 relative perspective-midrange">
        <div class="group cursor-default relative">
          <!-- Decorative Glow Behind -->
          <div
            class="absolute -inset-1 bg-gradient-to-r from-orange-500/30 to-purple-600/30 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700">
          </div>

          <!-- Main Image Card -->
          <div
            class="overflow-hidden transition-all duration-700 ease-out transform group-hover:rotate-0 group-hover:scale-[1.02] relative rotate-x-5 rotate-y-10">
            <div
              class="absolute inset-0 bg-gradient-to-tr from-orange-500/10 to-purple-500/10 mix-blend-overlay z-10 pointer-events-none">
            </div>
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/71fe2f32-4e59-42cb-af7b-2352e74c0f12_1600w.png" alt="Platform Dashboard" class="group-hover:opacity-100 transition-opacity duration-700 w-full h-auto object-cover">
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Cards Row (Tool Preview) -->
    <div class="mt-auto pt-16">
      <div class="flex overflow-x-auto scrollbar-hide snap-x pt-4 pb-4 gap-x-5 gap-y-5">

        <!-- Card 1: Dashboard -->
        <div
          class="snap-start flex-none group overflow-hidden transition-transform hover:-translate-y-1 duration-300 bg-gradient-to-br from-orange-400 to-pink-500 w-48 h-32 rounded-xl pt-1 pr-1 pb-1 pl-1 relative shadow-lg">
          <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
          <div
            class="flex flex-col bg-white/10 w-full h-full border-white/20 border rounded-lg backdrop-blur-sm items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32"
              viewBox="0 0 24 24" data-icon="solar:widget-2-linear" data-width="32"
              class="iconify text-white mb-2 iconify--solar">
              <path fill="none" stroke="currentColor" stroke-width="1.5"
                d="M2.5 6.5a4 4 0 1 1 8 0a4 4 0 0 1-8 0Zm11 11a4 4 0 1 1 8 0a4 4 0 0 1-8 0Zm8-11c0-1.886 0-2.828-.586-3.414S19.386 2.5 17.5 2.5s-2.828 0-3.414.586S13.5 4.614 13.5 6.5s0 2.828.586 3.414s1.528.586 3.414.586s2.828 0 3.414-.586s.586-1.528.586-3.414Zm-11 11c0-1.886 0-2.828-.586-3.414S8.386 13.5 6.5 13.5s-2.828 0-3.414.586S2.5 15.614 2.5 17.5s0 2.828.586 3.414s1.528.586 3.414.586s2.828 0 3.414-.586s.586-1.528.586-3.414Z"
                class=""></path>
            </svg>
            <span class="text-xs font-medium text-white/90">Studio Panel</span>
          </div>
        </div>

        <!-- Card 2: Cloud -->
        <div
          class="snap-start flex-none group overflow-hidden transition-transform hover:-translate-y-1 duration-300 bg-gradient-to-l from-gray-500/0 via-gray-500/10 to-gray-500/0 w-48 h-32 rounded-xl px-1 py-1 relative shadow-lg">
          <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
          <div
            class="flex flex-col bg-white/10 w-full h-full border-white/20 border rounded-lg backdrop-blur-sm items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32"
              viewBox="0 0 24 24" data-icon="solar:cloud-upload-linear" data-width="32"
              class="iconify text-white mb-2 iconify--solar">
              <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" class="">
                <path
                  d="M6.286 19C3.919 19 2 17.104 2 14.765s1.919-4.236 4.286-4.236q.427.001.83.08m7.265-2.582a5.8 5.8 0 0 1 1.905-.321c.654 0 1.283.109 1.87.309m-11.04 2.594a5.6 5.6 0 0 1-.354-1.962C6.762 5.528 9.32 3 12.476 3c2.94 0 5.361 2.194 5.68 5.015m-11.04 2.594a4.3 4.3 0 0 1 1.55.634m9.49-3.228C20.392 8.78 22 10.881 22 13.353c0 2.707-1.927 4.97-4.5 5.52"
                  class=""></path>
                <path stroke-linejoin="round" d="M12 16v6m0-6l2 2m-2-2l-2 2" class=""></path>
              </g>
            </svg>
            <span class="text-xs font-medium text-white/90">Global CDN</span>
          </div>
        </div>

        <!-- Card 3: Analytics -->
        <div
          class="snap-start flex-none group overflow-hidden transition-transform hover:-translate-y-1 duration-300 bg-gradient-to-l from-gray-500/0 via-gray-500/10 to-gray-500/0 w-48 h-32 rounded-xl px-1 py-1 relative shadow-lg">
          <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
          <div
            class="flex flex-col bg-white/10 w-full h-full border-white/20 border rounded-lg backdrop-blur-sm items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32"
              viewBox="0 0 24 24" data-icon="solar:chart-2-linear" data-width="32"
              class="iconify text-white mb-2 iconify--solar">
              <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 22h18" class=""></path>
                <path
                  d="M3 11c0-.943 0-1.414.293-1.707S4.057 9 5 9s1.414 0 1.707.293S7 10.057 7 11v6c0 .943 0 1.414-.293 1.707S5.943 19 5 19s-1.414 0-1.707-.293S3 17.943 3 17zm7-4c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v10c0 .943 0 1.414-.293 1.707S12.943 19 12 19s-1.414 0-1.707-.293S10 17.943 10 17zm7-3c0-.943 0-1.414.293-1.707S18.057 2 19 2s1.414 0 1.707.293S21 3.057 21 4v13c0 .943 0 1.414-.293 1.707S19.943 19 19 19s-1.414 0-1.707-.293S17 17.943 17 17z"
                  class=""></path>
              </g>
            </svg>
            <span class="text-xs font-medium text-white/90">Client Insights</span>
          </div>
        </div>

        <!-- Card 4: Editor -->
        <div
          class="snap-start flex-none group overflow-hidden transition-transform hover:-translate-y-1 duration-300 bg-gradient-to-l from-gray-500/0 via-gray-500/10 to-gray-500/0 w-48 h-32 rounded-xl px-1 py-1 relative shadow-lg">
          <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
          <div
            class="flex flex-col bg-white/10 w-full h-full border-white/20 border rounded-lg backdrop-blur-sm items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32"
              viewBox="0 0 24 24" data-icon="solar:magic-stick-3-linear" data-width="32"
              class="iconify text-white mb-2 iconify--solar">
              <g fill="none" stroke="currentColor" class="">
                <path stroke-width="1.5"
                  d="M3.845 7.922a2.883 2.883 0 1 1 4.077-4.077l12.234 12.233a2.884 2.884 0 0 1-4.078 4.078z" class="">
                </path>
                <path stroke-linecap="round" stroke-width="1.5" d="m6 10l4-4" class=""></path>
                <path
                  d="M16.1 2.307a.483.483 0 0 1 .9 0l.43 1.095a.48.48 0 0 0 .272.274l1.091.432a.486.486 0 0 1 0 .903l-1.09.432a.5.5 0 0 0-.273.273L17 6.81a.483.483 0 0 1-.9 0l-.43-1.095a.5.5 0 0 0-.273-.273l-1.09-.432a.486.486 0 0 1 0-.903l1.09-.432a.5.5 0 0 0 .273-.274zm3.867 6.823a.483.483 0 0 1 .9 0l.156.399c.05.125.148.224.273.273l.398.158a.486.486 0 0 1 0 .902l-.398.158a.5.5 0 0 0-.273.273l-.156.4a.483.483 0 0 1-.9 0l-.157-.4a.5.5 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.903l.398-.158a.5.5 0 0 0 .272-.273zM5.133 15.307a.483.483 0 0 1 .9 0l.157.4a.48.48 0 0 0 .272.273l.398.157a.486.486 0 0 1 0 .903l-.398.158a.48.48 0 0 0-.272.273l-.157.4a.483.483 0 0 1-.9 0l-.157-.4a.48.48 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.903l.398-.157a.48.48 0 0 0 .272-.274z"
                  class=""></path>
              </g>
            </svg>
            <span class="text-xs font-medium text-white/90">AI Retouch</span>
          </div>
        </div>

        <!-- Card 5: Gallery -->
        <div
          class="snap-start flex-none group overflow-hidden transition-transform hover:-translate-y-1 duration-300 bg-gradient-to-l from-gray-500/0 via-gray-500/10 to-gray-500/0 w-48 h-32 rounded-xl pt-1 pr-1 pb-1 pl-1 relative shadow-lg">
          <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
          <div
            class="flex flex-col bg-white/10 w-full h-full border-white/20 border rounded-lg backdrop-blur-sm items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32"
              viewBox="0 0 24 24" data-icon="solar:gallery-wide-linear" data-width="32"
              class="iconify text-white mb-2 iconify--solar">
              <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
                <path
                  d="M2 14c0-3.771 0-5.657 1.172-6.828S6.229 6 10 6h4c3.771 0 5.657 0 6.828 1.172S22 10.229 22 14s0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14Z"
                  class=""></path>
                <path
                  d="m4 7l-.012-1c.112-.931.347-1.574.837-2.063C5.765 3 7.279 3 10.307 3h3.211c3.028 0 4.541 0 5.482.937c.49.489.725 1.132.837 2.063v1"
                  class=""></path>
                <circle cx="17.5" cy="10.5" r="1.5" class=""></circle>
                <path stroke-linecap="round"
                  d="m2 14.5l1.752-1.533a2.3 2.3 0 0 1 3.14.105l4.29 4.29a2 2 0 0 0 2.564.222l.299-.21a3 3 0 0 1 3.731.225L21 20.5"
                  class=""></path>
              </g>
            </svg>
            <span class="text-xs font-medium text-white/90">Proofing</span>
          </div>
        </div>

        <!-- Card 6: Commerce -->
        <div
          class="snap-start flex-none w-48 h-32 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 p-1 shadow-lg group relative overflow-hidden transition-transform hover:-translate-y-1 duration-300">
          <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
          <div
            class="w-full h-full bg-white/10 backdrop-blur-sm rounded-lg flex flex-col items-center justify-center border border-white/20">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32"
              viewBox="0 0 24 24" data-icon="solar:cart-large-minimalistic-linear" data-width="32"
              class="iconify text-white mb-2 iconify--solar">
              <g fill="none" class="">
                <path stroke="currentColor" stroke-width="1.5"
                  d="M7.5 18a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3Zm9 0a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3Z" class="">
                </path>
                <path fill="currentColor"
                  d="m2.261 3.092l.249-.708zm-.012-.8a.75.75 0 1 0-.498 1.416zm2.337 2.031l.62-.423zm1.302 10.263l-.545.516zm14.77-4.703l.734.151l.001-.004zm-.5 2.425l.735.15zm.576-5.61l-.594.456zm-1.6 8.352l-.474-.581zM5.708 9.76V7.038h-1.5V9.76zM2.51 2.384l-.261-.092l-.498 1.416l.261.091zm8.428 13.866h5.302v-1.5h-5.302zm-5.23-9.212c0-.707.001-1.297-.05-1.776c-.055-.497-.171-.95-.453-1.362l-1.238.846c.09.132.16.314.199.677c.041.38.042.875.042 1.615zM2.012 3.8c.668.235 1.107.39 1.43.55c.303.148.437.268.525.397L5.205 3.9c-.284-.416-.662-.682-1.103-.899c-.42-.206-.958-.394-1.592-.617zm2.196 5.96c0 1.453.014 2.5.15 3.3c.147.854.44 1.466.985 2.042l1.089-1.032c-.32-.338-.493-.668-.595-1.263c-.11-.65-.129-1.558-.129-3.047zm6.73 4.99c-1.417 0-2.4-.002-3.141-.107c-.715-.101-1.092-.285-1.365-.573l-1.089 1.032c.594.627 1.347.9 2.243 1.026c.87.124 1.98.122 3.351.122zm-5.98-7.88h12.13v-1.5H4.959zm14.965 2.861l-.5 2.425l1.47.303l.5-2.425zM17.09 6.87c.856 0 1.61.001 2.205.067q.441.052.672.134c.161.057.187.1.174.083l1.189-.914c-.235-.306-.565-.479-.866-.584a4.6 4.6 0 0 0-1.003-.21c-.695-.077-1.543-.076-2.371-.076zm4.304 3.16c.17-.848.313-1.56.348-2.13c.037-.586-.03-1.164-.412-1.66l-1.189.914c.062.081.13.226.104.654c-.027.444-.144 1.037-.322 1.928zm-5.153 6.22c.762 0 1.401.001 1.917-.062c.535-.065 1.024-.209 1.45-.556l-.947-1.163c-.125.102-.303.184-.686.23c-.403.05-.934.051-1.734.051zm3.184-4.094c-.162.783-.27 1.303-.4 1.688c-.123.366-.239.523-.364.625l.947 1.163c.427-.348.666-.797.838-1.309c.166-.492.294-1.118.448-1.864z"
                  class=""></path>
              </g>
            </svg>
            <span class="text-xs font-medium text-white/90">Storefront</span>
          </div>
        </div>

      </div>
    </div>

    <!-- Partners / Compatibility Strip -->
    <div
      class="mt-8 pt-6 border-t border-white/5 flex items-center justify-between opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
      <span class="text-xs text-gray-500 font-medium mr-4">Native support for:</span>
      <div class="flex items-center gap-8">
        <span class="iconify" data-icon="logos:sony" data-width="70" data-height="24"></span>
        <span class="iconify" data-icon="logos:canon" data-width="70" data-height="24"></span>
        <span class="iconify" data-icon="logos:nikon" data-width="70" data-height="24"></span>
        <span class="iconify" data-icon="logos:fujifilm" data-width="70" data-height="24"></span>
      </div>
    </div>

  </main>
</div>