Browser-Style Hero with Aura Background and Dock

<main
  class="aspect-[16/10] overflow-hidden flex flex-col group bg-gray-950 w-full max-w-7xl border-white/10 border rounded-3xl relative shadow-2xl">

  <!-- Background Effects -->
  <div class="absolute inset-0 bg-black z-0"></div>
  <!-- Colorful Aura Wave -->
  <div
    class="-top-[50%] -right-[20%] aura-shape z-0 transform origin-center opacity-90 w-[120%] h-[200%] absolute rotate-12 scale-125">
  </div>
  <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-black via-black/80 to-transparent z-0"></div>

  <!-- Top Browser Bar -->
  <div
    class="flex z-20 bg-white/5 w-full h-16 border-white/5 border-b pt-4 pr-6 pb-4 pl-6 relative backdrop-blur-md items-center justify-between">
    <!-- Window Controls -->
    <div class="flex items-center gap-2">
      <div class="w-3 h-3 rounded-full bg-rose-500 hover:bg-rose-600 transition-colors"></div>
      <div class="w-3 h-3 rounded-full bg-amber-400 hover:bg-amber-500 transition-colors"></div>
      <div class="w-3 h-3 rounded-full bg-emerald-500 hover:bg-emerald-600 transition-colors"></div>
    </div>

    <!-- Address Bar -->
    <div class="flex-1 max-w-3xl mx-6">
      <div
        class="hover:bg-gray-900/70 transition-colors flex bg-gray-500/20 w-full h-9 border-white/10 border rounded-full px-3 gap-x-3 gap-y-3 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" class="text-white/40">
          <path fill="currentColor" fill-rule="evenodd"
            d="M14.659 14.46a7.7 7.7 0 0 1-2.924.582C6.983 15.042 3.5 11.956 3.5 8.15C3.5 4.344 6.983 1.257 11.735 1.257c4.752 0 8.235 3.087 8.235 6.893c0 1.696-.653 3.256-1.765 4.502a1 1 0 1 1-1.493-1.334A5.7 5.7 0 0 0 17.97 8.15c0-2.618-2.62-4.893-6.235-4.893c-3.616 0-6.235 2.275-6.235 4.893c0 2.618 2.619 4.893 6.235 4.893c.895 0 1.75-.141 2.527-.398a1 1 0 0 1 1.25.467c.22.46.046 1.01-.353 1.348M16.516 16.58c.866.884 1.54 2.298 1.968 4.29a1 1 0 1 1-1.958.42c-.347-1.616-.867-2.624-1.424-3.193a1 1 0 0 1 1.414-1.517"
            clip-rule="evenodd" opacity="0.5" class=""></path>
          <circle cx="9.5" cy="8.5" r="2.5" fill="currentColor" opacity="1" class=""></circle>
        </svg>
        <span class="text-sm font-light text-white/60 tracking-wide">browser</span>
      </div>
    </div>

    <!-- Right Placeholder -->
    <div class="w-10 flex justify-end">
      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" class="text-white/30">
        <path fill="currentColor"
          d="M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-6.5q.625 0 1.063-.437T13.5 12t-.437-1.062T12 10.5t-1.062.438T10.5 12t.438 1.063T12 13.5M11 18h2v-2.15q0-.35-.162-.662t-.463-.513l-1.425-1.125q-.675-.525-1.062-1.287T9.5 10.65q0-1.05.725-1.775T12 8.15q.975 0 1.688.663T14.5 10.5h2q-.05-1.9-1.337-3.2T12 6q-2.05 0-3.275 1.35T7.625 10.65q0 1.15.538 2.15t1.537 1.725l1.05.825q.2.15.225.263t.025.237z"
          class=""></path>
      </svg>
    </div>
  </div>

  <!-- Content Area -->
  <div class="relative z-10 flex-1 flex flex-col justify-center px-12 sm:px-20 pb-24">

    <!-- Logo -->
    <div class="flex mb-10 gap-x-2 gap-y-2 items-center">
      <div class="flex text-2xl font-medium text-white/60 tracking-tight gap-x-1 gap-y-1 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-white mr-1">
          <circle cx="12" cy="12" r="9" fill="white" fill-opacity="0.2" class=""></circle>
          <circle cx="12" cy="12" r="5" fill="white" class=""></circle>
        </svg>
        aura
      </div>
    </div>

    <div class="flex flex-col lg:flex-row items-center justify-between gap-12 w-full">
      <!-- Text Content -->
      <div class="flex flex-col select-none mix-blend-overlay opacity-90 relative z-20 flex-shrink-0">
        <h1 class="text-6xl sm:text-7xl lg:text-8xl text-white font-semibold tracking-tighter leading-[0.85]">
          BUILD
        </h1>
        <h1 class="text-6xl sm:text-7xl lg:text-8xl text-white font-semibold tracking-tighter leading-[0.85]">
          BEAUTIFUL
        </h1>
        <h1 class="text-6xl sm:text-7xl lg:text-8xl text-white font-semibold tracking-tighter leading-[0.85]">
          DESIGN
        </h1>

        <!-- Subtitle -->
        <div class="mt-8 max-w-lg">
          <p class="sm:text-base uppercase leading-relaxed text-sm font-light text-white/60 tracking-widest">
            More tabs, faster page loads,and no cookie banners.
          </p>
        </div>
      </div>

      <!-- Added Image -->
      <div
        class="relative w-full max-w-md lg:max-w-lg aspect-square lg:aspect-[4/5] rounded-3xl group/image hidden sm:block">
        <!-- Image Glow -->
        <div
          class="absolute -inset-4 bg-gradient-to-tr from-purple-500/20 to-orange-500/20 rounded-[2rem] blur-2xl opacity-0 group-hover/image:opacity-100 transition-opacity duration-700">
        </div>

        <!-- Image Container -->
        <div class="relative w-full h-full rounded-3xl overflow-hidden shadow-2xl border border-white/10">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e28af382-f66f-4955-9581-e54f811d6f67_1600w.png" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-700 ease-out" alt="Design Abstract" style="">

          <!-- Image Overlay Gradient -->
          <div
            class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent pointer-events-none">
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- Bottom Dock -->
  <div
    class="absolute bottom-0 left-0 right-0 h-28 glass-dock flex items-center justify-center gap-3 sm:gap-5 px-4 sm:px-8 z-30">

    <!-- Dock Item: Recorder -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-white rounded-2xl flex items-center justify-center shadow-lg shadow-white/5">
        <div class="w-5 h-5 bg-red-500 rounded-md"></div>
      </div>
      <div class="w-1 h-1 rounded-full bg-white/40"></div>
    </div>

    <!-- Dock Item: Arc/Browser -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-[#FFCD55] rounded-2xl flex items-center justify-center shadow-lg shadow-amber-500/20 overflow-hidden relative">
        <div class="absolute -right-2 -bottom-2 w-10 h-10 bg-[#3B82F6] rounded-full"></div>
        <svg xmlns="http://www.w3.org/2000/svg" width="1.8em" height="1.8em" viewBox="0 0 24 24"
          class="relative z-10 text-white mix-blend-hard-light">
          <path fill="currentColor" d="M12 2L2 22h20L12 2zm0 4l7 14H5l7-14z" class=""></path>
        </svg>
      </div>
    </div>

    <!-- Dock Item: Sheets/Excel -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-[#34A853] rounded-2xl flex items-center justify-center shadow-lg shadow-green-500/20">
        <span class="text-white font-bold text-2xl font-serif">P</span>
      </div>
    </div>

    <!-- Dock Item: Linear -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-[#5E6AD2] rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" class="text-white">
          <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" class=""></path>
        </svg>
      </div>
      <div class="w-1 h-1 rounded-full bg-white/40"></div>
    </div>

    <!-- Dock Item: Orange App -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-orange-400 to-rose-500 rounded-2xl flex items-center justify-center shadow-lg shadow-orange-500/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" class="text-white">
          <path fill="currentColor" d="M12 2a9 9 0 0 0-9 9v11h18V11a9 9 0 0 0-9-9m0 16a2 2 0 1 1 0-4a2 2 0 0 1 0 4"
            class=""></path>
        </svg>
      </div>
    </div>

    <!-- Dock Item: Grid -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-[#6366f1] rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" class="text-white">
          <rect x="4" y="4" width="6" height="6" rx="1" fill="currentColor" class=""></rect>
          <rect x="14" y="4" width="6" height="6" rx="1" fill="currentColor" class=""></rect>
          <rect x="4" y="14" width="6" height="6" rx="1" fill="currentColor" class=""></rect>
          <rect x="14" y="14" width="6" height="6" rx="1" fill="currentColor" class=""></rect>
        </svg>
      </div>
    </div>

    <!-- Dock Item: Notion -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-slate-100 rounded-2xl flex items-center justify-center shadow-lg shadow-white/5">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.8em" height="1.8em" viewBox="0 0 24 24"
          class="w-[29px] h-[29px]" stroke-width="2" data-icon-replaced="true"
          style="color: rgb(0, 0, 0); width: 29px; height: 29px;">
          <path fill="currentColor"
            d="M4.223 3.738c-.378.09-.548.336-.5.72l.462 8.65c.036.702.392 1.096.966 1.054l.117-.008l3.153 6.32c.28.56.666.696 1.042.366c.21-.184.26-.454.26-.454l.092-4.996l6.635 4.777c.504.364 1.036.196 1.15-.398l1.176-13.84c.068-.804-.41-1.12-1.074-1.032l-1.92.253l-.116 5.894l-5.748-5.32c-.546-.505-1.137-.41-1.575.255L6.65 9.06l-.083-4.832z"
            class=""></path>
        </svg>
      </div>
    </div>

    <!-- Dock Item: Chrome -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-zinc-800 rounded-2xl flex items-center justify-center overflow-hidden border border-white/10 relative">
        <!-- Simulated Chrome Icon -->
        <div class="absolute inset-0 bg-[#34A853]"></div>
        <div class="absolute inset-0 bg-[#EA4335] clip-path-polygon-[0_0,100%_0,50%_50%]"></div>
        <div class="absolute inset-0 bg-[#FBBC05] clip-path-polygon-[100%_0,100%_100%,50%_50%]"></div>
        <div class="w-6 h-6 bg-white rounded-full z-10 flex items-center justify-center">
          <div class="w-4 h-4 bg-[#4285F4] rounded-full"></div>
        </div>
      </div>
    </div>

    <!-- Dock Item: Blue -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="sm:w-14 sm:h-14 flex shadow-blue-500/20 bg-[#3B82F6] w-12 h-12 rounded-2xl shadow-lg items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" class="text-white">
          <path fill="currentColor"
            d="M5.5 21a2.5 2.5 0 0 1-2.5-2.5V13h18v5.5a2.5 2.5 0 0 1-2.5 2.5zM3 9V5.5A2.5 2.5 0 0 1 5.5 3h13A2.5 2.5 0 0 1 21 5.5V9zm10.5 6a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"
            class=""></path>
        </svg>
      </div>
    </div>

    <!-- Dock Item: Pink/Red -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-[#F43F5E] rounded-2xl flex items-center justify-center shadow-lg shadow-rose-500/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" class="text-white">
          <path fill="currentColor"
            d="M18 3a3 3 0 0 0-3 3v7.35a3.5 3.5 0 1 0 2 3.15V9h2a1 1 0 0 0 1-1V5a3 3 0 0 0-3-3m-1 5v2.5a3.52 3.52 0 0 0-1.5-.35A3.5 3.5 0 0 0 12 13.65V6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2z"
            class=""></path>
        </svg>
      </div>
    </div>

    <!-- Dock Item: Last Blue -->
    <div
      class="group/icon flex flex-col items-center gap-2 cursor-pointer transition-transform hover:-translate-y-2 duration-300">
      <div
        class="w-12 h-12 sm:w-14 sm:h-14 bg-[#6366F1] rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/20">
        <div class="w-6 h-6 bg-white rounded-md"></div>
      </div>
    </div>

  </div>

</main>