export function NeonGridHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#120a2e] text-white antialiased grid place-items-center px-6">
      {/* animated mesh gradient field */}
      <div
        aria-hidden
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(45% 55% at 18% 28%, #7c3aed 0%, transparent 60%), radial-gradient(40% 50% at 82% 22%, #2563eb 0%, transparent 60%), radial-gradient(55% 60% at 70% 80%, #db2777 0%, transparent 60%), radial-gradient(45% 55% at 25% 85%, #06b6d4 0%, transparent 60%)",
          backgroundColor: "#120a2e",
          backgroundSize: "200% 200%",
          animation: "mesh-shift 16s ease-in-out infinite",
        }}
      />
      {/* grain + vignette */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.07] mix-blend-overlay"
        style={{ backgroundImage: "radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1.4px)", backgroundSize: "3px 3px" }}
      />
      <div aria-hidden className="absolute inset-0 bg-[radial-gradient(120%_100%_at_50%_50%,transparent_40%,rgba(8,4,22,0.7))]" />

      <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</span>
        <a href="#" className="rounded-full border border-white/25 px-4 py-1.5 text-[12.5px] text-white/85 hover:bg-white/10 transition-colors">
          Get started
        </a>
      </div>

      <div className="relative z-10 text-center">
        <p className="mb-7 font-mono text-[11px] uppercase tracking-[0.34em] text-white/65">
          Motion system · v3
        </p>
        <h1
          className="font-bold leading-[0.92] tracking-[-0.04em]"
          style={{ fontSize: "clamp(48px, 9vw, 132px)" }}
        >
          <span className="block bg-linear-to-b from-white to-white/40 bg-clip-text text-transparent">
            Gradients
          </span>
          <span className="block text-white/80">
            <span className="font-light italic">×</span> Animations
          </span>
        </h1>
        <p className="mx-auto mt-7 max-w-md text-[15.5px] leading-relaxed text-white/70">
          Living color fields and motion primitives you can drop into any
          section — tuned, performant, copy-paste ready.
        </p>
        <div className="mt-9 flex items-center justify-center gap-3">
          <a href="#" className="rounded-full bg-white px-6 py-3 text-[13px] font-medium text-[#120a2e] transition-transform hover:scale-[1.03]">
            Explore presets
          </a>
          <a href="#" className="rounded-full border border-white/30 px-6 py-3 text-[13px] text-white/90 hover:bg-white/10 transition-colors">
            View docs ↗
          </a>
        </div>
      </div>

      <style>{`
        @keyframes mesh-shift {
          0%, 100% { background-position: 0% 0%; }
          33% { background-position: 100% 30%; }
          66% { background-position: 30% 100%; }
        }
      `}</style>
    </div>
  );
}
Gradients × Animations Hero

Gradients× Animations
