Luxury Yacht Charter Hero Section

<section class="w-full pt-10 pb-10">
      <div class="absolute inset-0">
        <div data-us-project="98LbxUn5KV3Z8vHICb6u" style="width:1920px; height: 696px" data-us-initialized="true" data-scene-id="id-alhsas7ri2bfzixa8mwwf"><canvas width="2880" height="1044" style="width: 1920px; height: 696px;" aria-label="Unicorn Studio Scene" role="img"></canvas></div><script type="text/javascript">!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();</script>
        <div class="absolute inset-0 bg-[radial-gradient(50%_60%_at_50%_20%,rgba(34,211,238,0.25),transparent_60%)]"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0b1220]/30 to-[#0b1220]/95"></div>
      </div>

      <div class="relative max-w-7xl sm:px-6 lg:px-8 sm:pt-24 mr-auto ml-auto pr-4 pl-4">
        <div class="max-w-3xl text-center mr-auto ml-auto">
    <span class="uppercase text-xs text-slate-100/90 tracking-wider">New: VIP Concierge Service</span>
    <h1 class="mt-3 text-4xl sm:text-5xl lg:text-6xl leading-tight tracking-tight" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 600">
        Luxury. Adventure. Unforgettable moments.
    </h1>
    <p class="mt-6 text-lg text-gray-300 max-w-xl mx-auto">
        Experience the ultimate in yacht chartering with our premium fleet, 
        expert crew, and personalized luxury services.
    </p>
    <div class="flex flex-col sm:flex-row gap-3 mt-8 justify-center">
        <button type="button" aria-label="Primary action" class="group relative inline-flex items-center gap-2 rounded-3xl px-6 py-3 bg-gradient-to-b from-blue-500/20 to-blue-600/40 text-sky-50 font-medium tracking-tight cursor-pointer outline-none transition-all duration-300 ease-out ring-1 ring-sky-400/10 hover:ring-sky-400/30 hover:shadow-[0_0_0_3px_rgba(56,189,248,0.08)] focus-visible:ring-2 focus-visible:ring-sky-400/50 shadow-[inset_0_0_12px_rgba(151,200,255,0.44)] hover:shadow-[inset_0_0_14px_rgba(151,200,255,0.60)] hover:bg-gradient-to-b hover:from-blue-500/25 hover:to-blue-600/50">
  <span class="absolute inset-0 rounded-3xl z-0" style="background: linear-gradient(180deg, rgba(8,77,126,0) 0%, rgba(8,77,126,0.42) 100%), rgba(59,130,246,0.22); box-shadow: inset 0 0 12px rgba(151,200,255,0.44);"></span>
  <span class="absolute inset-0 rounded-3xl z-0 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100" style="background: linear-gradient(180deg, rgba(8,77,126,0) 0%, rgba(8,77,126,0.54) 100%), rgba(59,130,246,0.30); box-shadow: inset 0 0 14px rgba(151,200,255,0.60);"></span>
  <span class="pointer-events-none absolute inset-0 rounded-3xl z-10" style="padding: 1px; background: linear-gradient(180deg, rgba(184,238,255,0.24) 0%, rgba(184,238,255,0) 100%), linear-gradient(0deg, rgba(184,238,255,0.32), rgba(184,238,255,0.32)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border-radius: 1.5rem;"></span>
  <span class="relative z-20 flex items-center gap-2">
    <span class="text-[15px] leading-none">Book Charter</span>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-100/90 transition-transform duration-300 ease-out group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
      <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" class=""></path>
    </svg>
  </span>
</button>
        <a href="#product" class="inline-flex items-center gap-2 hover:bg-white/10 transition-all text-gray-100 bg-white/5 border-white/10 border rounded-full px-5 py-3 backdrop-blur-lg">
            View Fleet
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="ship" class="lucide lucide-ship w-4 h-4"><path d="M12 10.189V14" class=""></path><path d="M12 2v3" class=""></path><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6" class=""></path><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76" class=""></path><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path></svg>
        </a>
    </div>

    <div class="mt-8 flex items-center gap-6 justify-center">
        <div class="flex -space-x-2">
            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&amp;q=80" alt="" class="w-9 h-9 object-cover border-slate-400 border-2 rounded-full">
            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=160&amp;q=80" alt="" class="w-9 h-9 object-cover border-slate-400 border-2 rounded-full">
            <img src="https://images.unsplash.com/photo-1500649297466-74794c70acfc?w=160&amp;q=80" alt="" class="w-9 h-9 object-cover border-slate-400 border-2 rounded-full">
            <div class="w-9 h-9 flex text-xs text-black bg-blue-500 border-slate-400 border-2 rounded-full items-center justify-center">
                500+
            </div>
        </div>
        <div class="">
            <p class="text-sm text-gray-100">500+ satisfied guests</p>
            <p class="text-sm text-gray-400">Luxury charters worldwide</p>
        </div>
    </div>
</div>

        <!-- Quick features -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-14">
  <div class="flex gap-3 bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur items-center hover:bg-white/10 hover:border-white/20 hover:shadow-lg hover:shadow-cyan-400/10 transition-all duration-300 group" style="">
    <div class="h-10 w-10 flex bg-[conic-gradient(from_180deg,var(--tw-gradient-stops))] from-slate-400/40 via-zinc-800/50 to-slate-400/50 rounded-xl items-center justify-center group-hover:scale-110 transition-transform duration-300" style="">
      <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="anchor" class="lucide lucide-anchor w-[20px] h-[20px] text-slate-50 group-hover:text-cyan-300 transition-colors duration-300" style="width: 20px; height: 20px;" data-icon-replaced="true"><path d="M12 22V8" class=""></path><path d="M5 12H2a10 10 0 0 0 20 0h-3" class=""></path><circle cx="12" cy="5" r="3" class=""></circle></svg>
    </div>
    <div class="">
      <p class="text-sm font-semibold tracking-tight group-hover:text-white transition-colors duration-300">Luxury Fleet</p>
      <p class="text-xs text-white/70 group-hover:text-white/80 transition-colors duration-300" style="">50ft to 300ft superyachts</p>
    </div>
  </div>
  <div class="backdrop-blur rounded-2xl bg-white/5 border border-white/10 p-4 flex items-center gap-3 hover:bg-white/10 hover:border-white/20 hover:shadow-lg hover:shadow-cyan-400/10 transition-all duration-300 group" style="">
    <div class="h-10 w-10 flex bg-[conic-gradient(from_180deg,var(--tw-gradient-stops))] from-slate-400/40 via-zinc-800/50 to-slate-400/50 rounded-xl items-center justify-center group-hover:scale-110 transition-transform duration-300" style="">
      <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="compass" class="lucide lucide-compass w-[20px] h-[20px] text-slate-50 group-hover:text-cyan-300 transition-colors duration-300" style="width: 20px; height: 20px;" data-icon-replaced="true"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
    </div>
    <div class="">
      <p class="text-sm font-semibold tracking-tight group-hover:text-white transition-colors duration-300">Expert Crew</p>
      <p class="text-xs text-white/70 group-hover:text-white/80 transition-colors duration-300" style="">Professional captains &amp; staff</p>
    </div>
  </div>
  <div class="backdrop-blur rounded-2xl bg-white/5 border border-white/10 p-4 flex items-center gap-3 hover:bg-white/10 hover:border-white/20 hover:shadow-lg hover:shadow-cyan-400/10 transition-all duration-300 group" style="">
    <div class="h-10 w-10 flex bg-[conic-gradient(from_180deg,var(--tw-gradient-stops))] from-slate-400/40 via-zinc-800/50 to-slate-400/50 rounded-xl items-center justify-center group-hover:scale-110 transition-transform duration-300" style="">
      <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="map" class="lucide lucide-map w-[20px] h-[20px] text-slate-50 group-hover:text-cyan-300 transition-colors duration-300" style="width: 20px; height: 20px;" data-icon-replaced="true"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" class=""></path><path d="M15 5.764v15" class=""></path><path d="M9 3.236v15" class=""></path></svg>
    </div>
    <div class="">
      <p class="text-sm font-semibold tracking-tight group-hover:text-white transition-colors duration-300">Custom Routes</p>
      <p class="text-xs text-white/70 group-hover:text-white/80 transition-colors duration-300" style="">Mediterranean, Caribbean &amp; more</p>
    </div>
  </div>
</div>
      </div>
    </section>