Animated Featured Destinations Card Section

<section class="bg-neutral-950 pt-20 pb-20 relative w-full"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
  <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
    <div class="mx-auto max-w-3xl text-center">
      <h2
        class="text-3xl sm:text-4xl tracking-tight text-white animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both] font-instrument-serif font-normal">
        Featured Space Destinations
      </h2>
      <p class="mt-4 text-white/80 animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both] font-sans">
        Explore our exclusive orbital habitats and interplanetary stations
        designed for the ultimate space experience.
      </p>
    </div>

    <div
      class="relative sm:mt-12 mt-10 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="flex items-center justify-between mb-6">
          <h2 class="text-xl sm:text-2xl text-white font-sans tracking-tight font-medium">
            Featured Destinations
          </h2>
          <a href="#"
            class="inline-flex items-center gap-2 text-sm text-white/90 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10 transition font-sans">
            <span>View all</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"
              class="w-4 h-4 stroke-[1.5]">
              <path d="M7 7h10v10" class=""></path>
              <path d="M7 17 17 7" class=""></path>
            </svg>
          </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
          <!-- Card 1 -->
          <article
            class="group overflow-hidden bg-neutral-900/90 border border-white/10 rounded-xl animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both]">
            <div class="relative aspect-[16/10]">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7fe95e4c-28ec-49db-8042-019cfb592697_800w.webp" alt="Orbital Station Alpha" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
              <div
                class="bg-gradient-to-t from-black/30 via-transparent to-transparent absolute top-0 right-0 bottom-0 left-0">
              </div>
              <div
                class="absolute top-3 left-3 text-[11px] font-medium text-white bg-cyan-600/90 backdrop-blur-sm rounded-full px-2.5 py-1 border border-white/20 font-sans">
                New Launch
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-base font-semibold tracking-tight text-white font-sans">
                    Orbital Station Alpha
                  </h3>
                  <p class="text-xs text-white/70 mt-1 flex items-center gap-1 font-sans">
                    <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="w-3.5 h-3.5 stroke-[1.5]">
                      <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>
                    Low Earth Orbit
                  </p>
                </div>
                <div class="text-right">
                  <div class="text-lg font-semibold text-white font-sans">
                    $250K
                  </div>
                  <div class="text-[11px] text-white/70 font-sans">
                    4 days • Up to 6
                  </div>
                </div>
              </div>
              <div class="mt-4 flex items-center justify-between">
                <button class="inline-flex items-center gap-2 text-xs font-medium tracking-tight text-white/90 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10 transition font-sans">
                      <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="w-3.5 h-3.5 stroke-[1.5]">
                        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path>
                        <circle cx="12" cy="12" r="3" class=""></circle>
                      </svg>
                      Virtual tour
                    </button>
                <button class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-white/10 text-white/90 hover:bg-white/10 transition">
                      <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="w-4 h-4 stroke-[1.5]">
                        <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path>
                      </svg>
                    </button>
              </div>
            </div>
          </article>

          <!-- Card 2 -->
          <article
            class="group overflow-hidden bg-neutral-900/90 border border-white/10 rounded-xl animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both]">
            <div class="relative aspect-[16/10]">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/9bc26e9b-7376-4922-a38a-7bbfaf1f840f_800w.jpg" alt="Lunar Gateway Suite" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
              <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
              <div
                class="absolute top-3 left-3 text-[11px] font-medium text-white bg-white/90 backdrop-blur-sm rounded-full px-2.5 py-1 border border-white/20 font-sans text-neutral-900">
                Premium
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-base font-semibold tracking-tight text-white font-sans">
                    Lunar Gateway Suite
                  </h3>
                  <p class="text-xs text-white/70 mt-1 flex items-center gap-1 font-sans">
                    <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="w-3.5 h-3.5 stroke-[1.5]">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <circle cx="12" cy="12" r="4" class=""></circle>
                      <path d="m4.9 4.9 1.35 1.35" class=""></path>
                    </svg>
                    Lunar Orbit
                  </p>
                </div>
                <div class="text-right">
                  <div class="text-lg font-semibold text-white font-sans">
                    $1.2M
                  </div>
                  <div class="text-[11px] text-white/70 font-sans">
                    7 days • Up to 4
                  </div>
                </div>
              </div>
              <div class="mt-4 flex items-center justify-between">
                <button class="inline-flex items-center gap-2 text-xs font-medium tracking-tight text-white/90 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10 transition font-sans">
                      <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="w-3.5 h-3.5 stroke-[1.5]">
                        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path>
                        <circle cx="12" cy="12" r="3" class=""></circle>
                      </svg>
                      Virtual tour
                    </button>
                <button class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-white/10 text-white/90 hover:bg-white/10 transition">
                      <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="w-4 h-4 stroke-[1.5]">
                        <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path>
                      </svg>
                    </button>
              </div>
            </div>
          </article>

          <!-- Card 3 -->
          <article
            class="group overflow-hidden bg-neutral-900/90 border border-white/10 rounded-xl animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.3s_both]">
            <div class="relative aspect-[16/10]">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9b0b95a0-23cb-443b-971e-21d725f5286b_800w.jpg" alt="Mars Transit Module" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
              <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
              <div
                class="absolute top-3 left-3 text-[11px] font-medium text-white bg-indigo-900/90 backdrop-blur-sm rounded-full px-2.5 py-1 border border-white/20 font-sans">
                Expedition
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-base font-semibold tracking-tight text-white font-sans">
                    Mars Transit Module
                  </h3>
                  <p class="text-xs text-white/70 mt-1 flex items-center gap-1 font-sans">
                    <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="w-3.5 h-3.5 stroke-[1.5]">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <path d="M12 2a7 7 0 1 0 10 10" class=""></path>
                    </svg>
                    Mars Trajectory
                  </p>
                </div>
                <div class="text-right">
                  <div class="text-lg font-semibold text-white font-sans">
                    $8.5M
                  </div>
                  <div class="text-[11px] text-white/70 font-sans">
                    90 days • Up to 8
                  </div>
                </div>
              </div>
              <div class="mt-4 flex items-center justify-between">
                <button class="inline-flex items-center gap-2 text-xs font-medium tracking-tight text-white/90 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10 transition font-sans">
                      <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="w-3.5 h-3.5 stroke-[1.5]">
                        <circle cx="6" cy="19" r="3" class=""></circle>
                        <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" class=""></path>
                        <circle cx="18" cy="5" r="3" class=""></circle>
                      </svg>
                      Mission Plan
                    </button>
                <button class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-white/10 text-white/90 hover:bg-white/10 transition">
                      <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="w-4 h-4 stroke-[1.5]">
                        <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path>
                      </svg>
                    </button>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</section>