Gradient Hero Layout with Apps Dock

<div
  class="min-h-[800px] overflow-hidden flex flex-col bg-zinc-950 w-full h-[90vh] max-w-[1400px] border-white/10 border rounded-[2.5rem] relative shadow-2xl">

  <!-- Navbar -->
  <nav class="flex lg:px-12 lg:pt-4 lg:pb-4 z-50 pt-4 pr-8 pb-4 pl-8 relative items-center justify-between">
    <!-- Logo -->
    <div class="flex items-center gap-2">
      <span class="text-2xl font-medium tracking-tight text-white">Aura</span>
    </div>

    <!-- Nav Links -->
    <div
      class="hidden md:flex gap-8 bg-white/5 border-white/5 border rounded-full pt-2.5 pr-6 pb-2.5 pl-6 backdrop-blur-md items-center">
      <a href="#" class="text-sm font-light hover:text-white transition-colors text-slate-400">About</a>
      <a href="#" class="text-sm font-light hover:text-white transition-colors text-slate-400">Meaning</a>
      <a href="#" class="text-sm font-light hover:text-white transition-colors text-slate-400">Connect</a>
      <a href="#" class="text-sm font-light hover:text-white transition-colors text-slate-400">Blog</a>
    </div>

    <!-- Right Actions -->
    <div class="flex items-center gap-6">
      <a href="#"
        class="hidden lg:block text-sm font-light hover:text-white text-slate-400 transition-colors">Contact</a>
      <a href="#"
        class="hidden lg:block text-sm font-light hover:text-white text-slate-400 transition-colors">Chatbot</a>
      <button class="bg-[#6366f1] hover:bg-[#5558e6] text-white px-5 py-2.5 rounded-full text-sm font-medium transition-colors shadow-[0_0_20px_rgba(99,102,241,0.5)]">
                    Get started
                </button>
    </div>
  </nav>

  <!-- Main Content Grid -->
  <main class="z-10 flex-grow grid grid-cols-1 lg:grid-cols-12 h-full relative">

    <!-- Left Side Indicators -->
    <div class="hidden lg:flex col-span-1 flex-col gap-6 opacity-30 gap-x-6 gap-y-6 items-center justify-center"
      style="">
      <div class="w-3 h-3 rounded-full border border-white"></div>
      <div class="w-3 h-3 rounded-full border border-white"></div>
      <div class="w-3 h-3 rounded-full border border-white"></div>
      <div class="w-3 h-3 rounded-full border border-white"></div>
    </div>

    <!-- Headline Area -->
    <div class="col-span-1 lg:col-span-5 flex flex-col justify-center px-8 lg:px-0 lg:pl-4 relative z-20">
      <h1 class="leading-[0.9] lg:text-[7rem] text-7xl font-medium tracking-tighter absolute top-36">
        <span class="text-gradient-main block">Build</span>
        <span class="text-gradient-main block">Beautiful</span>
        <span class="text-gradient-main block pb-4">Design</span>
      </h1>
    </div>

    <!-- 3D Ribbon / Visual Area -->
    <!-- Using SVG to replicate the specific curved shape and gradient -->
    <div class="pointer-events-none z-0 absolute top-0 right-0 bottom-0 left-0 gap-x-6 gap-y-6" style="">
      <svg viewBox="0 0 1440 900" preserveAspectRatio="none" class="w-full h-full">
        <defs class="" style="">
          <linearGradient id="ribbonGrad" x1="0%" y1="0%" x2="100%" y2="0%" class="" style="">
            <stop offset="0%" style="stop-color:#fbbf24;stop-opacity:1" class=""></stop> <!-- Amber/Orange -->
            <stop offset="40%" style="stop-color:#f472b6;stop-opacity:1" class=""></stop> <!-- Pink -->
            <stop offset="100%" style="stop-color:#818cf8;stop-opacity:1" class=""></stop> <!-- Indigo -->
          </linearGradient>
          <linearGradient id="ribbonSide" x1="0%" y1="0%" x2="0%" y2="100%" class="" style="">
            <stop offset="0%" style="stop-color:#1e1b4b;stop-opacity:0.2" class=""></stop>
            <stop offset="100%" style="stop-color:#312e81;stop-opacity:0.6" class=""></stop>
          </linearGradient>
          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%" class="" style="">
            <feGaussianBlur stdDeviation="20" result="blur" class=""></feGaussianBlur>
            <feComposite in="SourceGraphic" in2="blur" operator="over" class=""></feComposite>
          </filter>
        </defs>
        <!-- Approximate Z shape -->
        <path d="M500 -100 
                             Q 500 200, 800 200 
                             L 1200 200 
                             Q 1400 200, 1400 350
                             Q 1400 450, 1100 450
                             L 800 450
                             Q 500 450, 500 700
                             L 500 1200
                             L 1600 1200
                             L 1600 -100 Z" fill="url(#ribbonGrad)" opacity="0.8" style="mix-blend-mode: screen;"
          class=""></path>

        <!-- Darker underside/depth -->
        <path d="M500 650 
                             Q 500 450, 800 450
                             L 1100 450
                             Q 1400 450, 1400 600
                             L 1400 1200
                             L 500 1200 Z" fill="url(#ribbonSide)" class="" style=""></path>
      </svg>
    </div>

    <!-- Right Content / Descriptions -->
    <div class="hidden lg:flex col-span-6 flex-col z-10 pr-16 pb-20 relative gap-x-6 gap-y-6 items-end justify-center"
      style="">
      <!-- Small Floating Indicators -->
      <div class="absolute top-1/3 right-12 flex flex-col gap-8 opacity-40">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
          viewBox="0 0 24 24" data-icon="solar:arrow-down-linear" class="iconify text-xs iconify--solar">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
            d="M12 4v16m0 0l6-6m-6 6l-6-6" class=""></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
          viewBox="0 0 24 24" data-icon="solar:arrow-down-linear" class="iconify text-xs iconify--solar">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
            d="M12 4v16m0 0l6-6m-6 6l-6-6" class=""></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
          viewBox="0 0 24 24" data-icon="solar:arrow-right-linear" class="iconify text-xs iconify--solar">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
            d="M4 12h16m0 0l-6-6m6 6l-6 6" class=""></path>
        </svg>
      </div>

      <div class="grid grid-cols-2 max-w-2xl mt-20 absolute top-36 gap-x-12 gap-y-12">
        <div class="">
          <h3 class="text-2xl font-medium text-white mb-3">Intuitive Design</h3>
          <p class="leading-relaxed text-base font-light text-slate-300">
            Create stunning user interfaces with a tool built for precision, giving you complete creative control over
            every pixel.
          </p>
        </div>
        <div class="">
          <h3 class="text-2xl font-medium text-white mb-3">Production Code</h3>
          <p class="leading-relaxed text-base font-light text-slate-300">
            Export clean, semantic code that developers love. Generated instantly and ready to ship to production.
          </p>
        </div>
      </div>
    </div>

  </main>

  <!-- Bottom Floating Dock -->
  <div
    class="lg:left-12 lg:right-12 flex flex-col lg:flex-row z-10 bg-zinc-900/90 border-white/5 border rounded-3xl pt-3 pr-3 pb-3 pl-3 absolute right-8 bottom-8 left-8 shadow-2xl backdrop-blur-xl items-center justify-between">

    <!-- Apps Grid -->
    <div class="flex gap-2 items-center">
      <div class="grid grid-cols-6 grid-rows-2 gap-2 gap-x-2 gap-y-2">
        <!-- Row 1 -->
        <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-black">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:infinity-bold" class="iconify text-xl iconify--solar">
            <path fill="currentColor" fill-rule="evenodd"
              d="M7 7.75a4.25 4.25 0 0 0 0 8.5c.597 0 1.045-.107 1.407-.284c.362-.176.679-.442.986-.816c.54-.66.983-1.558 1.567-2.741q.175-.355.37-.744l.34-.69c.581-1.181 1.117-2.27 1.777-3.075c.41-.501.89-.923 1.49-1.215S16.216 6.25 17 6.25a5.75 5.75 0 1 1-3.45 10.35a.75.75 0 0 1 .9-1.2A4.25 4.25 0 1 0 17 7.75c-.597 0-1.045.107-1.407.284c-.362.176-.679.442-.986.816c-.54.66-.983 1.558-1.567 2.741q-.175.355-.37.744l-.34.69c-.581 1.181-1.117 2.27-1.777 3.076c-.41.5-.89.922-1.49 1.214s-1.28.435-2.063.435A5.75 5.75 0 1 1 10.451 7.4a.75.75 0 1 1-.901 1.2A4.23 4.23 0 0 0 7 7.75"
              clip-rule="evenodd" class=""></path>
          </svg>
        </div>
        <div class="flex bg-white w-10 h-10 rounded-xl items-center justify-center">
          <!-- Chrome logo sim -->
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 250"
            class="iconify iconify--logos text-xl w-[20px] h-[20px]" aria-hidden="true" role="img"
            data-icon="logos:chrome" data-logos="adobe-illustrator" data-icon-set="logos" data-icon-replaced="true"
            stroke-width="2" style="color: rgb(226, 232, 240); width: 20px; height: 20px">
            <rect width="256" height="249.6" fill="#300" rx="42.5" class=""></rect>
            <path fill="#FF9A00"
              d="M124.054 149.79h-39.67l-8.072 25.073a2.02 2.02 0 0 1-2.061 1.546H54.158q-1.718 0-1.202-1.89l34.347-98.918q.515-1.545 1.03-3.52c.45-2.292.68-4.62.687-6.955a1.063 1.063 0 0 1 1.202-1.203h27.306q1.2 0 1.374.86l38.983 109.908q.515 1.72-1.03 1.718h-22.326a1.59 1.59 0 0 1-1.717-1.202zm-33.488-21.638H117.7l-.387-1.277l-.621-2.022l-.443-1.42l-.707-2.236l-1.503-4.707l-1.322-4.173l-3.433-10.87a334 334 0 0 1-2.46-8.138l-.628-2.21l-.734-2.613l-1.12-4.05l-.21-.763h-.171a139 139 0 0 1-3.136 12.23l-2.548 8.196l-1.402 4.528l-1.415 4.584q-.383 1.242-.765 2.456l-.76 2.398l-.756 2.342l-.752 2.284l-.748 2.227q-.372 1.1-.743 2.17zm90.501-46.025a12.46 12.46 0 0 1-9.445-3.778a13.6 13.6 0 0 1-3.607-9.789a12.6 12.6 0 0 1 3.864-9.53a13.27 13.27 0 0 1 9.165-3.697l.366.004q6.183 0 9.704 3.692a13.26 13.26 0 0 1 3.52 9.531a13.4 13.4 0 0 1-3.692 9.79a13.18 13.18 0 0 1-9.508 3.79zm-11.85 92.564V92.603q-.001-1.546 1.374-1.546h21.124q1.373 0 1.374 1.546v82.088q0 1.72-1.374 1.718h-20.952q-1.464 0-1.541-1.542z"
              class=""></path>
          </svg>
        </div>
        <div class="w-10 h-10 bg-rose-500 rounded-xl flex items-center justify-center text-white">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:record-circle-bold" class="iconify text-xl iconify--solar">
            <path fill="currentColor"
              d="M14.25 12a1.75 1.75 0 1 1 3.5 0a1.75 1.75 0 0 1-3.5 0M8 13.75a1.75 1.75 0 1 0 0-3.5a1.75 1.75 0 0 0 0 3.5"
              class=""></path>
            <path fill="currentColor" fill-rule="evenodd"
              d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m1.26-8.25a3.25 3.25 0 1 1 2.74 1.5H8a3.25 3.25 0 1 1 2.74-1.5z"
              clip-rule="evenodd" class=""></path>
          </svg>
        </div>
        <div class="flex text-white bg-indigo-500 w-10 h-10 rounded-xl items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:users-group-rounded-bold" class="iconify text-xl iconify--solar">
            <circle cx="9.001" cy="6" r="4" fill="currentColor" class=""></circle>
            <ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4" class=""></ellipse>
            <path fill="currentColor"
              d="M21 17c0 1.657-2.036 3-4.521 3c.732-.8 1.236-1.805 1.236-2.998c0-1.195-.505-2.2-1.239-3.001C18.962 14 21 15.344 21 17M18 6a3 3 0 0 1-4.029 2.82A5.7 5.7 0 0 0 14.714 6c0-1.025-.27-1.987-.742-2.819A3 3 0 0 1 18 6.001"
              class=""></path>
          </svg>
        </div>
        <div
          class="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-slate-800 border border-slate-200">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:magic-stick-3-linear" class="iconify text-xl iconify--solar">
            <g fill="none" stroke="currentColor" class="">
              <path stroke-width="1.5"
                d="M3.845 7.922a2.883 2.883 0 1 1 4.077-4.077l12.234 12.233a2.884 2.884 0 0 1-4.078 4.078z" class="">
              </path>
              <path stroke-linecap="round" stroke-width="1.5" d="m6 10l4-4" class=""></path>
              <path
                d="M16.1 2.307a.483.483 0 0 1 .9 0l.43 1.095a.48.48 0 0 0 .272.274l1.091.432a.486.486 0 0 1 0 .903l-1.09.432a.5.5 0 0 0-.273.273L17 6.81a.483.483 0 0 1-.9 0l-.43-1.095a.5.5 0 0 0-.273-.273l-1.09-.432a.486.486 0 0 1 0-.903l1.09-.432a.5.5 0 0 0 .273-.274zm3.867 6.823a.483.483 0 0 1 .9 0l.156.399c.05.125.148.224.273.273l.398.158a.486.486 0 0 1 0 .902l-.398.158a.5.5 0 0 0-.273.273l-.156.4a.483.483 0 0 1-.9 0l-.157-.4a.5.5 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.902l.398-.158a.5.5 0 0 0 .272-.273zM5.133 15.307a.483.483 0 0 1 .9 0l.157.4a.48.48 0 0 0 .272.273l.398.157a.486.486 0 0 1 0 .903l-.398.158a.48.48 0 0 0-.272.273l-.157.4a.483.483 0 0 1-.9 0l-.157-.4a.48.48 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.903l.398-.157a.48.48 0 0 0 .272-.274z"
                class=""></path>
            </g>
          </svg>
        </div>
        <div class="w-10 h-10 bg-teal-500 rounded-xl flex items-center justify-center text-white">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:gamepad-old-bold" class="iconify text-xl iconify--solar">
            <path fill="currentColor" fill-rule="evenodd"
              d="M15 1.25a.75.75 0 0 1 .75.75v1A1.75 1.75 0 0 1 14 4.75h-1a.25.25 0 0 0-.25.25v1H14c3.771 0 5.657 0 6.828 1.172S22 10.229 22 14s0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14s0-5.657 1.172-6.828S6.229 6 10 6h1.25V5c0-.966.784-1.75 1.75-1.75h1a.25.25 0 0 0 .25-.25V2a.75.75 0 0 1 .75-.75M8.75 12a.75.75 0 0 0-1.5 0v1.05a.2.2 0 0 1-.2.2H6a.75.75 0 0 0 0 1.5h1.05c.11 0 .2.09.2.2V16a.75.75 0 0 0 1.5 0v-1.05c0-.11.09-.2.2-.2H10a.75.75 0 0 0 0-1.5H8.95a.2.2 0 0 1-.2-.2zM15 13.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0"
              clip-rule="evenodd" class=""></path>
          </svg>
        </div>

        <!-- Row 2 -->
        <div
          class="w-10 h-10 bg-slate-800 rounded-xl flex items-center justify-center text-rose-400 border border-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:menu-dots-square-bold" class="iconify text-xl iconify--solar">
            <path fill="currentColor" fill-rule="evenodd"
              d="M3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464M12 13a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-3-1a1 1 0 1 1-2 0a1 1 0 0 1 2 0m7 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
              clip-rule="evenodd" class=""></path>
          </svg>
        </div>
        <div class="flex bg-white w-10 h-10 rounded-xl items-center justify-center">
          <!-- Chrome logo sim -->
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 256 256" data-icon="logos:chrome" class="iconify text-xl iconify--logos">
            <path fill="#FFF"
              d="M128.003 199.216c39.335 0 71.221-31.888 71.221-71.223S167.338 56.77 128.003 56.77S56.78 88.658 56.78 127.993s31.887 71.223 71.222 71.223"
              class=""></path>
            <path fill="#229342"
              d="M35.89 92.997Q27.92 79.192 17.154 64.02a127.98 127.98 0 0 0 110.857 191.981q17.671-24.785 23.996-35.74q12.148-21.042 31.423-60.251v-.015a63.993 63.993 0 0 1-110.857.017Q46.395 111.19 35.89 92.998"
              class=""></path>
            <path fill="#FBC116"
              d="M128.008 255.996A127.97 127.97 0 0 0 256 127.997A128 128 0 0 0 238.837 64q-36.372-3.585-53.686-3.585q-19.632 0-57.152 3.585l-.014.01a63.99 63.99 0 0 1 55.444 31.987a63.99 63.99 0 0 1-.001 64.01z"
              class=""></path>
            <path fill="#1A73E8"
              d="M128.003 178.677c27.984 0 50.669-22.685 50.669-50.67s-22.685-50.67-50.67-50.67c-27.983 0-50.669 22.686-50.669 50.67s22.686 50.67 50.67 50.67"
              class=""></path>
            <path fill="#E33B2E"
              d="M128.003 64.004H238.84a127.973 127.973 0 0 0-221.685.015l55.419 95.99l.015.008a63.993 63.993 0 0 1 55.415-96.014z"
              class=""></path>
          </svg>
        </div>
        <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-orange-500">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:cloud-bold" class="iconify text-xl iconify--solar">
            <path fill="currentColor"
              d="M16.286 20C19.442 20 22 17.472 22 14.353c0-2.472-1.607-4.573-3.845-5.338C17.837 6.194 15.415 4 12.476 4C9.32 4 6.762 6.528 6.762 9.647c0 .69.125 1.35.354 1.962a4.4 4.4 0 0 0-.83-.08C3.919 11.53 2 13.426 2 15.765S3.919 20 6.286 20z"
              class=""></path>
          </svg>
        </div>
        <div class="w-10 h-10 bg-[#5865F2] rounded-xl flex items-center justify-center text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 256 227"
            class="iconify iconify--logos w-[26px] h-[20px]" aria-hidden="true" role="img"
            data-icon="logos:discord-icon" data-logos="adobe-icon" data-icon-set="logos" data-icon-replaced="true"
            stroke-width="2" style="color: rgb(255, 255, 255); width: 26px; height: 20px;">
            <path fill="#FA0F00"
              d="m128.024 83.527l60.288 143.042h-39.513l-18.038-45.554H86.642zM256 0v226.54L161.353 0zM94.684 0L0 226.54V0z"
              class=""></path>
          </svg>
        </div>
        <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="0.98em" height="1em"
            viewBox="0 0 256 262" data-icon="logos:google-icon" class="iconify text-xl iconify--logos">
            <path fill="#4285F4"
              d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
              class=""></path>
            <path fill="#34A853"
              d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
              class=""></path>
            <path fill="#FBBC05"
              d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
              class=""></path>
            <path fill="#EB4335"
              d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
              class=""></path>
          </svg>
        </div>
        <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.17em" height="1em"
            viewBox="0 0 256 219" data-icon="logos:arc" class="iconify text-xl iconify--logos">
            <path fill="#FFF"
              d="M123.632.012c13.836.398 26.332 8.52 32.32 21.089l23.761 49.984l.382-.966a59 59 0 0 0 2.315-7.64l.332-1.548c4.004-20.02 23.463-32.977 43.52-29.016a36.98 36.98 0 0 1 29.018 43.526c-5.337 26.652-19.095 51.387-38.829 70.983l-.625.607l8.33 17.514c9.668 20.33-.349 44.903-21.4 51.799l-.95.297l-.725.219a36.7 36.7 0 0 1-9.897 1.373a37.01 37.01 0 0 1-33.42-21.102l-6.43-13.518l-1.622.402c-8.692 2.054-17.508 3.192-26.328 3.367l-2.405.024c-8.488 0-17.116-.987-25.736-2.9l-1.7-.396l-6.177 12.987a36.97 36.97 0 0 1-20.713 18.852l-1.1.382a36.96 36.96 0 0 1-28.96-2.484c-17.56-9.334-24.256-31.186-15.688-49.235l7.67-16.129l-.67-.65C17.39 137.46 9.054 125.67 3.524 112.996l-.737-1.733l-.106-.281C-4.93 92.058 4.21 70.517 23.122 62.86c14.834-6.005 31.278-1.693 41.39 9.578l.19.218l24.446-51.422A36.86 36.86 0 0 1 121.535.01L122.57 0z"
              class=""></path>
            <path fill="#1A007F"
              d="m87.118 170.045l21.896-46.068c-16.724-3.552-33.551-13.897-43.068-26.482L43.05 145.63c12.723 10.793 27.999 19.276 44.068 24.414"
              class=""></path>
            <path fill="#4E000A"
              d="M178.495 96.115c-11 13.483-26.275 23.483-42.62 27.379l21.827 45.93c15.931-5.38 30.827-14.069 43.69-25.206z"
              class=""></path>
            <path fill="#1A007F"
              d="M43.05 145.631L31.602 169.7c-5.828 12.241-1.449 27.31 10.551 33.689c12.724 6.758 28.379 1.483 34.517-11.38l10.448-21.964A130.6 130.6 0 0 1 43.05 145.63"
              class=""></path>
            <path fill="#FF9396"
              d="M223.942 43.565a25.137 25.137 0 0 0-29.585 19.723c-2.414 12.07-8.069 23.31-15.862 32.862l22.862 48.137c21.103-18.31 36.688-43.24 42.275-71.137c2.724-13.655-6.104-26.896-19.69-29.585"
              class=""></path>
            <path fill="#002DC8"
              d="M135.875 123.494c-4.896 1.172-9.896 1.793-14.896 1.793c-3.896 0-7.93-.448-11.965-1.31c-16.724-3.552-33.551-13.897-43.068-26.482c-2.38-3.138-4.31-6.414-5.655-9.759c-5.207-12.862-19.862-19.068-32.724-13.896C14.705 79.047 8.5 93.702 13.671 106.563c5.896 14.62 16.31 28.034 29.379 39.068a130.5 130.5 0 0 0 44.033 24.414c11.069 3.551 22.551 5.517 33.862 5.517c12.551 0 24.93-2.173 36.723-6.138z"
              class=""></path>
            <path fill="#FF536A"
              d="m213.425 169.596l-12.068-25.378l-22.862-48.103l-.034.035s0-.035.034-.035l-33.24-69.93a25.14 25.14 0 0 0-22.69-14.344c-9.69 0-18.517 5.586-22.689 14.345L65.98 97.495c9.517 12.585 26.344 22.93 43.068 26.482l10.965-23.034c1.035-2.173 4.138-2.173 5.173 0l10.724 22.551h.069h-.07l21.828 45.93l10.724 22.551a25.1 25.1 0 0 0 22.723 14.345c2.242 0 4.483-.31 6.69-.931c15.138-4.173 22.31-21.586 15.551-35.793"
              class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Features Navigation -->
    <div class="flex-grow flex items-center justify-between px-6 lg:px-12 mt-4 lg:mt-0 w-full lg:w-auto">
      <div class="flex gap-12 text-slate-300 w-full gap-x-12 gap-y-12 items-center justify-center">
        <div class="flex flex-col gap-1 cursor-pointer group">
          <span class="text-sm font-light text-white">More tabs</span>
        </div>

        <div class="flex items-center gap-2 cursor-pointer group">
          <span class="text-sm font-light group-hover:text-white transition-colors">Faster page loads</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-linear"
            class="iconify text-slate-500 group-hover:text-white transition-colors iconify--solar">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="m19 9l-7 6l-7-6" class=""></path>
          </svg>
        </div>



        <div class="flex items-center gap-2 cursor-pointer group">
          <span class="group-hover:text-white transition-colors text-sm font-light">No cookie banners</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-linear"
            class="iconify text-slate-500 group-hover:text-white transition-colors iconify--solar">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="m19 9l-7 6l-7-6" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Close Button -->
    <div
      class="hidden lg:flex items-center justify-center w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 text-slate-400 cursor-pointer transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"
        data-icon="solar:close-circle-linear" class="iconify iconify--solar">
        <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
          <circle cx="12" cy="12" r="10" class=""></circle>
          <path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5" class=""></path>
        </g>
      </svg>
    </div>

    <!-- Absolute Bottom Avatars overlapping the dock -->

  </div>

</div>