AI-Powered Code Hero Section

<div class="flex flex-col overflow-hidden text-white w-full pt-32 pb-20 relative bg-zinc-950">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');@keyframes beamV{0%{top:-150px;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{top:100%;opacity:0;}}@keyframes beamH{0%{left:-150px;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:100%;opacity:0;}}@keyframes beamHRev{0%{right:-150px;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{right:100%;opacity:0;}}.animate-beam-v{animation:beamV 6s cubic-bezier(0.4,0,0.2,1) infinite;}.animate-beam-h{animation:beamH 6s cubic-bezier(0.4,0,0.2,1) infinite;}.animate-beam-h-rev{animation:beamHRev 6s cubic-bezier(0.4,0,0.2,1) infinite;}</style>
  <div class="absolute inset-0
    bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
    bg-[size:24px_24px] pointer-events-none -z-0"></div>
  <div class="md:px-6 flex flex-col w-full max-w-7xl z-10 mr-auto ml-auto
    pr-4 pl-4 relative items-center
    font-['Inter','Helvetica_Neue',sans-serif]">
    <div class="w-px hidden md:block overflow-hidden bg-gradient-to-b
      from-transparent via-zinc-800 to-transparent h-full absolute
      top-0 left-4">
      <div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b
        from-transparent via-cyan-500 to-transparent animate-beam-v"></div>
    </div>
    <div class="absolute top-0 right-4 h-full w-px bg-gradient-to-b
      from-transparent via-zinc-800 to-transparent hidden md:block
      overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b
        from-transparent via-cyan-500 to-transparent animate-beam-v"></div>
    </div>
    <div class="text-center max-w-4xl mx-auto mb-16 relative">
      <div class="inline-flex items-center gap-2 px-3 py-1 border border-cyan-500/30 bg-cyan-950/20 mb-10">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full bg-cyan-400 opacity-50"></span>
          <span class="relative inline-flex h-2 w-2 bg-cyan-500"></span>
        </span>
        <span class="text-xs font-medium text-cyan-300 uppercase tracking-widest">New v2.0 Assembly</span>
      </div>
      <h1 class="md:text-7xl lg:text-8xl leading-[1.1] text-5xl font-medium
        tracking-tight mb-6 bg-clip-text text-transparent
        bg-gradient-to-br from-white to-white/10
        font-['Manrope',sans-serif]">AI-Powered Code & Architecture Design</h1>
      <p class="text-lg md:text-xl text-zinc-400 max-w-2xl mx-auto font-medium leading-relaxed">Kreona Studio is your source for high-quality, scalable web assembly. Generate components, create designs, and chat with AI in seconds.</p>
    </div>
    <div class="flex w-screen mb-16 relative items-center justify-center">
      <div class="h-px bg-gradient-to-r from-transparent via-zinc-800
        to-zinc-800 w-full max-w-[calc(50%-100px)] relative
        overflow-hidden group">
        <div class="absolute top-0 left-0 h-full w-40 bg-gradient-to-r
          from-transparent via-cyan-500 to-transparent animate-beam-h"></div>
      </div>
      <button class="relative z-20 inline-block whitespace-nowrap text-base
        uppercase font-medium text-white bg-zinc-900 border-white
        border-2 mr-5 ml-5 pt-4 pr-8 pb-4 pl-8 no-underline
        hover:bg-zinc-800 transition-all duration-300">
        <span class="relative z-10">Start Building Free</span>
      </button>
      <div class="h-px bg-gradient-to-l from-transparent via-zinc-800
        to-zinc-800 w-full max-w-[calc(50%-100px)] relative
        overflow-hidden group">
        <div class="absolute top-0 right-0 h-full w-40 bg-gradient-to-l
          from-transparent via-cyan-500 to-transparent
          animate-beam-h-rev"></div>
      </div>
    </div>
    <div class="min-h-[400px] flex w-full max-w-6xl mr-auto ml-auto relative justify-center">
      <div class="pointer-events-none z-0 hidden md:block w-full h-full absolute top-0 right-0 bottom-0 left-0">
        <div class="absolute top-[35%] left-0 right-0 h-px bg-white/10 -translate-y-1/2 overflow-hidden"></div>
      </div>
      <div class="z-10 w-full max-w-3xl mt-12 relative">
        <div class="shadow-black/60 transition-shadow bg-zinc-950
          border-white/20 border ring-0 pt-2 pr-2 pb-2 pl-2 shadow-2xl">
          <div class="bg-zinc-900 p-6 min-h-[140px] flex flex-col justify-between
            border border-white/10 transition-colors
            hover:border-cyan-500/30 group">
            <textarea class="border-none outline-none placeholder:text-zinc-600
              resize-none text-sm font-light text-zinc-300 font-mono
              bg-transparent w-full h-full" placeholder="ASK: Generate a complex component architecture..."></textarea>
          </div>
          <div class="flex items-center justify-between mt-3 px-2 pb-1">
            <div class="flex items-center gap-3">
              <button class="hover:bg-zinc-700 hover:text-white flex transition-all
                text-cyan-400 bg-zinc-800/50 w-10 h-10 border-white/10
                border items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-xl">
                  <path fill="currentColor" d="M3.464 20.536C4.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.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535" opacity=".5"></path>
                  <path fill="currentColor" d="M9.5 8.75A3.25 3.25 0 1 0 12.75 12a.75.75 0 0 1 1.5 0A4.75 4.75 0 1 1 9.5 7.25a.75.75 0 0 1 0 1.5"></path>
                </svg>
              </button>
              <div class="hidden sm:flex items-center gap-2 px-4 py-2.5 bg-zinc-800/30
                border border-cyan-500/30 text-cyan-500 text-sm
                hover:border-cyan-400 transition-colors cursor-text
                font-mono">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-lg">
                  <path fill="currentColor" d="M16 16h3a3 3 0 1 1-3 3.001zM5 16l3 .001v3a3 3 0 1 1-3-3"></path>
                  <path fill="currentColor" fill-rule="evenodd" d="M19 8h-3V5a3 3 0 1 1 3 3M8 8V5a3 3 0 1 0-3 3z" clip-rule="evenodd"></path>
                  <path fill="currentColor" d="M16 8H8v8h8z" opacity=".5"></path>
                </svg>
                <span>/Search-Command</span>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <button class="hover:bg-zinc-700 hover:text-white flex transition-all
                text-cyan-400 bg-zinc-800/50 w-10 h-10 border-white/10
                border items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="w-[20px] h-[20px]" stroke-width="2">
                  <path fill="currentColor" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5"></path>
                  <path fill="currentColor" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="absolute top-[-10%] left-[5%] md:left-[10%] hidden md:flex flex-col items-center gap-3 animate-pulse">
        <div class="flex bg-zinc-900 w-16 h-16 border-white/10 border
          shadow-[0_0_15px_-3px_rgba(255,255,255,0.05)] items-center
          justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="text-zinc-300">
            <path fill="currentColor" fill-rule="evenodd" d="M10 22h4c3.771 0 5.657 0 6.828-1.172S22 17.771 22 14v-.437c0-.873 0-1.529-.043-2.063h-4.052c-1.097 0-2.067 0-2.848-.105c-.847-.114-1.694-.375-2.385-1.066c-.692-.692-.953-1.539-1.067-2.386c-.105-.781-.105-1.75-.105-2.848l.01-2.834q0-.124.02-.244C11.121 2 10.636 2 10.03 2C6.239 2 4.343 2 3.172 3.172C2 4.343 2 6.229 2 10v4c0 3.771 0 5.657 1.172 6.828S6.229 22 10 22" clip-rule="evenodd" opacity=".5"></path>
          </svg>
        </div>
        <span class="text-xs text-zinc-500 font-medium font-mono">Code Gen</span>
      </div>
      <div class="absolute top-[-10%] right-[5%] md:right-[10%] hidden md:flex
        flex-col items-center gap-3 animate-pulse delay-75">
        <div class="w-16 h-16 bg-zinc-900 border border-white/10 flex
          items-center justify-center
          shadow-[0_0_15px_-3px_rgba(255,255,255,0.05)]">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="text-zinc-300">
            <path fill="currentColor" d="M2 15.616c0 .847.682 1.529 2.045 2.892l1.447 1.447C6.855 21.318 7.537 22 8.384 22s1.53-.682 2.893-2.045l8.678-8.678C21.318 9.913 22 9.23 22 8.384s-.682-1.529-2.045-2.892l-1.447-1.447C17.145 2.682 16.463 2 15.616 2c-.754 0-1.376.54-2.464 1.618l-1.05 1.048l-1.072 1.073l-1.05 1.048L8.91 7.86L7.86 8.909L6.788 9.98L5.74 11.03l-1.073 1.073l-1.048 1.049C2.539 14.24 2 14.862 2 15.616" opacity=".5"></path>
          </svg>
        </div>
        <span class="text-xs text-zinc-500 font-medium font-mono">Design Sys</span>
      </div>
      <div class="absolute bottom-[10%] left-[5%] md:left-[10%] hidden md:flex
        flex-col items-center gap-3 animate-pulse delay-150">
        <div class="flex bg-zinc-900 w-16 h-16 border-white/10 border
          shadow-[0_0_15px_-3px_rgba(255,255,255,0.05)] items-center
          justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="text-zinc-300">
            <path fill="currentColor" d="M4.979 9.685C2.993 8.891 2 8.494 2 8s.993-.89 2.979-1.685l2.808-1.123C9.773 4.397 10.767 4 12 4s2.227.397 4.213 1.192l2.808 1.123C21.007 7.109 22 7.506 22 8s-.993.89-2.979 1.685l-2.808 1.124C14.227 11.603 13.233 12 12 12s-2.227-.397-4.213-1.191z"></path>
          </svg>
        </div>
        <span class="text-xs text-zinc-500 font-medium font-mono">Components</span>
      </div>
      <div class="absolute bottom-[10%] right-[5%] md:right-[10%] hidden
        md:flex flex-col items-center gap-3 animate-pulse delay-300">
        <div class="w-16 h-16 bg-zinc-900 border border-white/10 flex
          items-center justify-center
          shadow-[0_0_15px_-3px_rgba(255,255,255,0.05)]">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="text-zinc-300">
            <path fill="currentColor" d="m13.629 20.472l-.542.916c-.483.816-1.69.816-2.174 0l-.542-.916c-.42-.71-.63-1.066-.968-1.262c-.338-.197-.763-.204-1.613-.219c-1.256-.021-2.043-.098-2.703-.372a5 5 0 0 1-2.706-2.706C2 14.995 2 13.83 2 11.5v-1c0-3.273 0-4.91.737-6.112a5 5 0 0 1 1.65-1.651C5.59 2 7.228 2 10.5 2h3c3.273 0 4.91 0 6.113.737a5 5 0 0 1 1.65 1.65C22 5.59 22 7.228 22 10.5v1c0 2.33 0 3.495-.38 4.413a5 5 0 0 1-2.707 2.706c-.66.274-1.447.35-2.703.372c-.85.015-1.275.022-1.613.219c-.338.196-.548.551-.968 1.262" opacity=".5"></path>
            <path fill="currentColor" d="M7.25 9A.75.75 0 0 1 8 8.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9m0 3.5a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75"></path>
          </svg>
        </div>
        <span class="text-xs text-zinc-500 font-medium font-mono">AI Support</span>
      </div>
    </div>
  </div>
</div>