Space Tourism Hero Section

<div class="py-32 px-6">
  <div class="max-w-7xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
      <div class="order-2 lg:order-1">
        <div class="p-10 lg:p-12 shadow-2xl border border-white/10 rounded-3xl" style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);">
          <div class="flex items-center gap-3 mb-8">
            <div class="flex items-center gap-0.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-[1.5] fill-amber-400 text-amber-400">
                <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
              </svg>
              <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" class="w-3.5 h-3.5 stroke-[1.5] text-amber-400 fill-amber-400">
                <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
              </svg>
              <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" class="w-3.5 h-3.5 stroke-[1.5] text-amber-400 fill-amber-400">
                <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
              </svg>
              <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" class="w-3.5 h-3.5 stroke-[1.5] text-amber-400 fill-amber-400">
                <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
              </svg>
              <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" class="w-3.5 h-3.5 stroke-[1.5] text-amber-400 fill-amber-400">
                <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
              </svg>
            </div>
            <span class="text-xs font-medium text-white/50 font-sans">4.9 • 2,847 space travelers</span>
          </div>
          <h1 class="text-4xl sm:text-5xl lg:text-6xl text-white leading-[1.1] tracking-tight mb-8 font-manrope font-medium">
            Experience thefirsthand.
            <br>
            <span class="text-blue-400 font-manrope font-medium">cosmos</span>
          </h1>
          <p class="text-lg text-white/60 leading-relaxed mb-12 font-sans">
            Embark on the ultimate adventure with our revolutionary space tourism flights. Safe, sustainable, and certified by leading space agencies worldwide.
          </p>
          <div class="flex flex-col sm:flex-row gap-4 mb-16">
            <button class="inline-flex items-center justify-center px-8 py-4 rounded-xl hover:bg-blue-500/10 text-white text-sm font-medium border border-blue-500/20 transition-all duration-300 hover:border-blue-500/30" style="background: rgba(59, 130, 246, 0.08);">
              <span class="font-sans">Book Your Flight</span>
              <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" class="w-4 h-4 stroke-[1.5] ml-2">
                <path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"></path>
              </svg>
            </button>
            <button class="inline-flex items-center justify-center px-8 py-4 rounded-xl hover:bg-white/5 text-white/80 text-sm font-medium border border-white/10 transition-all duration-300 hover:border-white/20" style="background: rgba(255, 255, 255, 0.03);">
              <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" class="w-4 h-4 stroke-[1.5] mr-2">
                <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"></path>
              </svg>
              <span class="font-sans">Watch Launch</span>
            </button>
          </div>
          <div class="grid grid-cols-3 gap-8">
            <div class="text-center">
              <div class="w-10 h-10 flex border-white/10 border rounded-xl mr-auto mb-3 ml-auto items-center justify-center" style="background: rgba(255, 255, 255, 0.03);">
                <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" class="stroke-[1.5] w-[16px] h-[16px] text-white">
                  <circle cx="12" cy="12" r="10"></circle>
                  <path d="m16 12-4-4-4 4"></path>
                  <path d="M12 16V8"></path>
                </svg>
              </div>
              <div class="text-xs font-medium text-white/70 font-sans">Zero Gravity</div>
            </div>
            <div class="text-center">
              <div class="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-3 border border-white/10" style="background: rgba(255, 255, 255, 0.03);">
                <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" class="stroke-[1.5] w-[16px] h-[16px] text-white">
                  <path d="M15 13a3 3 0 1 0-6 0"></path>
                  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"></path>
                  <circle cx="12" cy="8" r="2"></circle>
                </svg>
              </div>
              <div class="text-xs font-medium text-white/70 font-sans">Full Training</div>
            </div>
            <div class="text-center">
              <div class="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-3 border border-white/10" style="background: rgba(255, 255, 255, 0.03);">
                <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" class="stroke-[1.5] w-[16px] h-[16px] text-white">
                  <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"></path>
                  <path d="m9 12 2 2 4-4"></path>
                </svg>
              </div>
              <div class="text-xs font-medium text-white/70 font-sans">NASA Certified</div>
            </div>
          </div>
        </div>
      </div>
      <div class="relative order-1 lg:order-2">
        <div class="overflow-hidden border border-white/10 rounded-3xl shadow-2xl" style="background: rgba(255, 255, 255, 0.03);">
          <div class="absolute top-8 left-8 flex items-center gap-2 rounded-full px-5 py-3 text-sm font-medium border border-white/20 z-10" style="background: rgba(59, 130, 246, 0.15); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);">
            <div class="w-2 h-2 bg-blue-400 rounded-full"></div>
            <span class="text-white font-sans">Next Launch: 2024</span>
          </div>
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a5708db3-4d0a-491c-a445-05df909c54a5_1600w.jpg" alt="Space Capsule" class="w-full h-[500px] lg:h-[650px] object-cover">
          <div class="absolute bottom-8 left-8 right-8 grid grid-cols-2 gap-6">
            <div class="border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6" style="background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);">
              <div class="text-2xl text-white font-manrope font-medium">2.8K+</div>
              <div class="text-sm text-white/60 mt-1 font-sans">Space Travelers</div>
            </div>
            <div class="rounded-2xl p-6 border border-white/10" style="background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);">
              <div class="text-2xl text-white font-manrope font-medium">100%</div>
              <div class="text-sm text-white/60 mt-1 font-sans">Safe Return Rate</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>