Luxury Real Estate Hero Section

<div class="min-h-[700px] flex flex-col overflow-hidden bg-stone-900
  h-screen pr-6 pl-6 relative items-center justify-center">
  <div class="absolute inset-0 z-0">
    <img src="https://images.unsplash.com/photo-1541336032412-2048a678540d?q=80&w=2574&auto=format&fit=crop" alt="Ocean view abstract" class="w-full h-full object-cover opacity-60 scale-105" style="object-position: center 40%;" />
    <div class="absolute inset-0 bg-gradient-to-b from-stone-900/40 via-transparent to-stone-900"></div>
    <div class="absolute inset-0 bg-stone-900/30"></div>
    <div class="absolute top-0 right-0 bottom-0 left-0"></div>
  </div>
  <div class="relative z-20 w-full max-w-4xl mx-auto flex flex-col items-center text-center">
    <div class="flex items-center gap-3 mb-8">
      <div class="flex -space-x-3">
        <img class="w-8 h-8 rounded-full border-2 border-stone-800 object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=64&h=64" alt="" />
        <img class="w-8 h-8 rounded-full border-2 border-stone-800 object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=64&h=64" alt="" />
        <img class="w-8 h-8 rounded-full border-2 border-stone-800 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=64&h=64" alt="" />
      </div>
      <span class="text-sm text-stone-300 font-medium">Junte-se a 50+ famílias exclusivas</span>
    </div>
    <h1 class="text-5xl md:text-7xl lg:text-8xl font-normal text-white
      tracking-tight leading-[1.1] mb-6 drop-shadow-lg" style="font-family: Georgia, 'Times New Roman', serif;">
      <br />
      <span class="opacity-90">do seu dia.</span>
    </h1>
    <p class="text-lg md:text-xl font-light text-stone-300 max-w-2xl leading-relaxed mb-10">Arquitetura contemporânea que abraça o horizonte. 
                Apartamentos de 250m² a 400m² com vista definitiva para o mar.</p>
    <div class="w-full max-w-2xl group">
      <form class="relative flex flex-col sm:flex-row items-center p-1.5
        rounded-[2rem] bg-white/5 border border-white/10
        backdrop-blur-xl hover:bg-white/10 transition-colors
        duration-300 shadow-2xl shadow-black/20">
        <div class="w-full relative flex items-center px-2">
          <iconify-icon icon="lucide:user" class="absolute left-5 text-stone-400" width="18"></iconify-icon>
          <input type="text" placeholder="Seu nome" class="w-full bg-transparent border-none text-white
            placeholder:text-stone-400 text-sm font-medium py-4 pl-10
            pr-4 focus:ring-0 focus:outline-none" />
        </div>
        <div class="hidden sm:block w-px h-8 bg-white/10 mx-2"></div>
        <div class="block sm:hidden w-full h-px bg-white/10 my-1"></div>
        <div class="w-full relative flex items-center px-2">
          <iconify-icon icon="lucide:message-circle" class="absolute left-5 text-stone-400" width="18"></iconify-icon>
          <input type="tel" placeholder="Seu WhatsApp" class="w-full bg-transparent border-none text-white
            placeholder:text-stone-400 text-sm font-medium py-4 pl-10
            pr-4 focus:ring-0 focus:outline-none" />
        </div>
        <button type="button" class="w-full sm:w-auto mt-2 sm:mt-0 px-8 py-3.5 rounded-[1.5rem]
          bg-stone-100 text-stone-900 text-sm font-semibold
          hover:bg-white hover:scale-[1.02] active:scale-[0.98]
          transition-all whitespace-nowrap shadow-lg">Conhecer Projeto</button>
      </form>
      <p class="mt-4 text-xs text-stone-500 font-medium tracking-wide uppercase">Plantas de 250m² a 400m² • Frente Mar</p>
    </div>
  </div>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
</div>