Responsive Hero Banner with Navbar & CTA (Tailwind)

<section class="w-full isolate min-h-screen overflow-hidden relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1)">
  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0e2dbea0-c0a9-413f-a57b-af279633c0df_3840w.jpg" alt="" class="w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
  <div class="pointer-events-none absolute inset-0 ring-1 ring-black/30"></div>
  <header class="z-10 xl:top-4 relative">
    <div class="mr-6 ml-6">
      <div class="flex items-center justify-between">
        <a href="#"
          class="inline-flex items-center justify-center bg-center w-[100px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/febf2421-4a9a-42d6-871d-ff4f9518021c_1600w.png)] bg-cover rounded"></a>
        <nav class="hidden md:flex items-center gap-2">
          <div class="flex items-center gap-1 rounded-full bg-white/5 px-1 py-1 ring-1 ring-white/10 backdrop-blur">
            <a href="#" class="px-3 py-2 text-sm font-medium text-white/90 hover:text-white font-sans">
              Home
            </a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-sans">
              Missions
            </a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-sans">
              Destinations
            </a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-sans">
              Technology
            </a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-sans">
              Book Flight
            </a>
            <a href="#"
              class="ml-1 inline-flex items-center gap-2 rounded-full bg-white px-3.5 py-2 text-sm font-medium text-neutral-900 hover:bg-white/90 font-sans">
              Reserve Seat
              <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"
                data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4">
                <path d="M7 7h10v10" class=""></path>
                <path d="M7 17 17 7" class=""></path>
              </svg>
            </a>
          </div>
        </nav>
        <button class="md:hidden inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15 backdrop-blur" id="mobile-menu-button" aria-expanded="false" aria-label="Toggle menu">
              <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" data-lucide="menu" class="lucide lucide-menu h-5 w-5 text-white/90"><path d="M4 5h16" class=""></path><path d="M4 12h16" class=""></path><path d="M4 19h16" class=""></path></svg>
            </button>
      </div>
    </div>
  </header>
  <div class="z-10 relative"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1) &gt; div:nth-of-type(2)">
    <div class="sm:pt-28 md:pt-32 lg:pt-40 max-w-7xl mr-auto ml-auto pt-28 pr-6 pb-16 pl-6"
      data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1)">
      <div class="mx-auto max-w-3xl text-center">
        <div
          class="mb-6 inline-flex items-center gap-3 rounded-full bg-white/10 px-2.5 py-2 ring-1 ring-white/15 backdrop-blur animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both]">
          <span class="inline-flex items-center text-xs font-medium text-neutral-900 bg-white/90 rounded-full pt-0.5 pr-2 pb-0.5 pl-2 font-sans">
                New
              </span>
          <span class="text-sm font-medium text-white/90 font-sans">
                First Commercial Flight to Mars 2026
              </span>
        </div>
        <h1
          class="sm:text-5xl md:text-6xl lg:text-7xl leading-tight text-4xl text-white tracking-tight font-instrument-serif font-normal animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both]">
          Journey Beyond Earth
          <br class="hidden sm:block">
              Into the Cosmos
        </h1>
        <p
          class="sm:text-lg animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.3s_both] text-base text-white/80 max-w-2xl mt-6 mr-auto ml-auto">
          Experience the cosmos like never before. Our advanced spacecraft
          and cutting-edge technology make interplanetary travel accessible,
          safe, and unforgettable.
        </p>
        <div
          class="flex flex-col sm:flex-row sm:gap-4 mt-10 gap-x-3 gap-y-3 items-center justify-center animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.4s_both]">
          <a href="#"
            class="inline-flex items-center gap-2 hover:bg-white/15 text-sm font-medium text-white bg-white/10 ring-white/15 ring-1 rounded-full pt-3 pr-5 pb-3 pl-5 font-sans">
            Book Your Journey
            <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"
              data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>
          <a href="#"
            class="inline-flex items-center gap-2 rounded-full bg-transparent px-5 py-3 text-sm font-medium text-white/90 hover:text-white font-sans">
            Watch Launch
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play"
              class="lucide lucide-play lucide-play-circle w-[16px] h-[16px]">
              <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class="">
              </path>
            </svg>
          </a>
        </div>
      </div>
      <div class="mx-auto mt-20 max-w-5xl">
        <p class="animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both] text-sm text-white/70 text-center">
          Partnering with leading space agencies worldwide
        </p>
        <div
          class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both] text-white/70 mt-6 items-center">
          <a href="#"
            class="inline-flex items-center justify-center bg-center w-[120px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f7466370-2832-4fdd-84c2-0932bb0dd850_800w.png)] bg-cover rounded-full"></a>
          <a href="#"
            class="inline-flex items-center justify-center bg-center w-[120px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0a9a71ec-268b-4689-a510-56f57e9d4f13_1600w.png)] bg-cover rounded-full"></a>
          <a href="#"
            class="inline-flex items-center justify-center bg-center w-[120px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a9ed4369-748a-49f8-9995-55d6c876bbff_1600w.png)] bg-cover rounded-full"></a>
          <a href="#"
            class="inline-flex items-center justify-center bg-center w-[120px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0d8966a4-8525-4e11-9d5d-2d7390b2c798_1600w.png)] bg-cover rounded-full"></a>
          <a href="#"
            class="inline-flex items-center justify-center bg-center w-[120px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2ed33c8b-b8b2-4176-967f-3d785fed07d8_1600w.png)] bg-cover rounded-full"></a>
        </div>
      </div>
    </div>
  </div>
</section>