export function GlassDomeHero() {
  const faces: { t: string; g: string }[] = [
    { t: "rotateY(0deg) translateZ(80px)", g: "linear-gradient(135deg,#6366f1,#8b5cf6)" },
    { t: "rotateY(90deg) translateZ(80px)", g: "linear-gradient(135deg,#8b5cf6,#ec4899)" },
    { t: "rotateY(180deg) translateZ(80px)", g: "linear-gradient(135deg,#ec4899,#f59e0b)" },
    { t: "rotateY(-90deg) translateZ(80px)", g: "linear-gradient(135deg,#06b6d4,#6366f1)" },
    { t: "rotateX(90deg) translateZ(80px)", g: "linear-gradient(135deg,#22d3ee,#6366f1)" },
    { t: "rotateX(-90deg) translateZ(80px)", g: "linear-gradient(135deg,#a78bfa,#ec4899)" },
  ];

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#070710] text-white antialiased grid place-items-center px-6">
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: "radial-gradient(60% 60% at 70% 50%, rgba(99,102,241,0.18), transparent 65%)" }}
      />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-8 lg:px-12 py-6">
        <span className="text-[13px] font-semibold tracking-[0.18em] uppercase text-white/85">Velynkit 3D</span>
        <a href="#" className="rounded-full bg-white px-4 py-1.5 text-[12.5px] font-medium text-black">Open editor</a>
      </div>

      {/* dotted framed stage */}
      <div className="relative z-10 w-full max-w-5xl rounded-3xl border border-dashed border-white/15 bg-white/[0.02] p-3">
        <div className="grid grid-cols-1 items-center gap-6 overflow-hidden rounded-2xl bg-[#0b0b16] p-8 lg:grid-cols-2 lg:p-12">
          {/* copy */}
          <div>
            <p className="mb-5 font-mono text-[11px] uppercase tracking-[0.3em] text-indigo-300/80">
              Real-time · WebGL
            </p>
            <h1 className="text-[clamp(40px,5vw,68px)] font-semibold leading-[0.96] tracking-[-0.03em]">
              Interactive 3D
            </h1>
            <p className="mt-5 max-w-sm text-[15px] leading-relaxed text-white/55">
              Bring your UI to life with beautiful 3D scenes. Create immersive
              experiences that capture attention and enhance your design.
            </p>
            <div className="mt-8 flex items-center gap-3">
              <a href="#" className="rounded-full bg-indigo-500 px-5 py-2.5 text-[13px] font-medium text-white shadow-[0_0_40px_-6px_rgba(99,102,241,0.7)] transition-colors hover:bg-indigo-400">
                Launch scene
              </a>
              <a href="#" className="rounded-full border border-white/15 px-5 py-2.5 text-[13px] text-white/80 hover:bg-white/5 transition-colors">
                Browse gallery ↗
              </a>
            </div>
          </div>

          {/* rotating cube */}
          <div className="grid h-64 place-items-center" style={{ perspective: "900px" }}>
            <div
              className="relative h-40 w-40"
              style={{ transformStyle: "preserve-3d", animation: "cube-spin 14s linear infinite" }}
            >
              {faces.map((f, i) => (
                <div
                  key={i}
                  className="absolute inset-0 rounded-xl border border-white/20"
                  style={{
                    transform: f.t,
                    background: f.g,
                    boxShadow: "inset 0 0 40px rgba(255,255,255,0.25)",
                    opacity: 0.92,
                  }}
                />
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes cube-spin {
          from { transform: rotateX(-20deg) rotateY(0deg); }
          to { transform: rotateX(-20deg) rotateY(360deg); }
        }
      `}</style>
    </div>
  );
}
Interactive 3D Hero

Interactive 3D
