3D Design App Hero Section with UI Preview

<section class="relative w-full min-h-screen bg-[#050505] text-white overflow-hidden flex items-center">

  <div
    class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-orange-500/20 blur-[120px] rounded-full pointer-events-none opacity-40">
  </div>
  <div
    class="absolute bottom-0 right-0 w-[800px] h-[800px] bg-purple-900/20 blur-[120px] rounded-full pointer-events-none opacity-40">
  </div>

  <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center relative z-10 w-full">

    <div class="space-y-8">
      <div
        class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-800 bg-zinc-900/50 backdrop-blur-sm">
        <span class="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></span>
        <span class="text-xs font-mono text-zinc-400 tracking-wider uppercase">Flux 2.0 is Live</span>
      </div>

      <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-[0.9]">
        Design in <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600">3D</span>.
        <br>
                Ship to web.
      </h1>

      <p class="text-lg text-zinc-400 max-w-md leading-relaxed">
        A collaborative design tool for the browser. Create organic shapes, interactive scenes, and export
        production-ready React components.
      </p>

      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-6 pt-4">
        <button class="px-8 py-4 rounded-full bg-white text-black font-bold text-sm hover:scale-105 transition-transform duration-300">
                    START BUILDING →
                </button>

        <div class="flex items-center gap-3">
          <div class="flex -space-x-3">
            <img src="https://i.pravatar.cc/100?img=1" class="w-10 h-10 rounded-full border-2 border-black" alt="User">
            <img src="https://i.pravatar.cc/100?img=2" class="w-10 h-10 rounded-full border-2 border-black" alt="User">
            <img src="https://i.pravatar.cc/100?img=3" class="w-10 h-10 rounded-full border-2 border-black" alt="User">
          </div>
          <span class="text-xs text-zinc-500 font-medium">Used by 10k+ designers</span>
        </div>
      </div>

      <div class="mt-8 pt-8 border-t border-white/5">
        <code class="font-mono text-xs text-zinc-600">
                    > npm install @flux/react-three-fiber
                </code>
      </div>
    </div>

    <div class="relative w-full h-[500px] lg:h-[700px] flex items-center justify-center">

      <div
        class="relative w-full max-w-lg aspect-square bg-zinc-900/40 border border-white/10 rounded-2xl backdrop-blur-md shadow-2xl overflow-hidden group">

        <div
          class="absolute top-0 left-0 right-0 h-10 border-b border-white/5 flex items-center px-4 gap-2 bg-black/20 z-20">
          <div class="w-3 h-3 rounded-full bg-red-500/50"></div>
          <div class="w-3 h-3 rounded-full bg-yellow-500/50"></div>
          <div class="w-3 h-3 rounded-full bg-green-500/50"></div>
          <span class="ml-auto text-[10px] text-zinc-600 font-mono">scene.flux — Edited</span>
        </div>

        <div class="w-full h-full flex items-center justify-center relative">
          <div
            class="w-48 h-48 rounded-full bg-gradient-to-tr from-zinc-800 to-black border border-white/10 shadow-[0_0_100px_rgba(255,255,255,0.1)] animate-bounce relative z-10">
            <div class="absolute top-1/3 left-1/4 w-3 h-8 bg-white rounded-full"></div>
            <div class="absolute top-1/3 right-1/4 w-3 h-8 bg-white rounded-full"></div>
            <div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full border-2 border-white"></div>
          </div>

          <div
            class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:linear-gradient(to_bottom,transparent,black)]">
          </div>
        </div>

        <div
          class="absolute left-4 top-16 flex flex-col gap-3 p-2 rounded-lg bg-zinc-900/80 border border-white/10 backdrop-blur-md">
          <div class="w-6 h-6 rounded bg-orange-500/20 text-orange-500 flex items-center justify-center text-xs">A</div>
          <div class="w-6 h-6 rounded bg-white/5 flex items-center justify-center text-xs text-zinc-500">B</div>
          <div class="w-6 h-6 rounded bg-white/5 flex items-center justify-center text-xs text-zinc-500">C</div>
        </div>

        <div
          class="absolute bottom-4 right-4 w-48 p-3 rounded-lg bg-zinc-900/90 border border-white/10 backdrop-blur-md">
          <div class="flex justify-between items-center mb-2">
            <span class="text-[10px] uppercase text-zinc-500 tracking-wider">Material</span>
          </div>
          <div class="space-y-2">
            <div class="h-1 w-full bg-zinc-800 rounded-full overflow-hidden">
              <div class="h-full w-2/3 bg-orange-500"></div>
            </div>
            <div class="flex gap-2">
              <div class="w-4 h-4 rounded bg-purple-500"></div>
              <div class="w-4 h-4 rounded bg-orange-500 border border-white"></div>
              <div class="w-4 h-4 rounded bg-zinc-700"></div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</section>