export function SplitGradientHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#f7f7fb] text-[#0c0c10] antialiased grid place-items-center px-6">
      {/* soft "chemical burn" light blobs */}
      <div
        aria-hidden
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(38% 50% at 22% 30%, rgba(56,189,248,0.45), transparent 65%), radial-gradient(40% 52% at 78% 28%, rgba(232,121,249,0.40), transparent 65%), radial-gradient(46% 56% at 60% 82%, rgba(167,139,250,0.40), transparent 65%), radial-gradient(34% 44% at 28% 78%, rgba(94,234,212,0.40), transparent 65%)",
          filter: "blur(20px)",
          animation: "burn-drift 16s ease-in-out infinite",
        }}
      />
      {/* fine top sheen */}
      <div aria-hidden className="absolute inset-x-0 top-0 h-1/2 bg-linear-to-b from-white/70 to-transparent" />

      <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-[14px] font-semibold tracking-tight">Velynkit</span>
        <div className="hidden items-center gap-7 text-[13px] text-black/55 md:flex">
          <a href="#" className="hover:text-black transition-colors">Docs</a>
          <a href="#" className="hover:text-black transition-colors">Pricing</a>
          <a href="#" className="hover:text-black transition-colors">Blog</a>
        </div>
        <a href="#" className="rounded-full bg-[#0c0c10] px-4 py-1.5 text-[12.5px] font-medium text-white">Sign in</a>
      </div>

      <div className="relative z-10 max-w-2xl text-center">
        <h1
          className="font-normal leading-[1.0] tracking-[-0.02em]"
          style={{ fontSize: "clamp(44px, 7vw, 92px)", fontFamily: "'Instrument Serif', Georgia, serif" }}
        >
          Background lights are
          <br />
          cool you know.
        </h1>
        <p className="mx-auto mt-6 text-[17px] text-black/50">
          And this, is chemical burn.
        </p>
        <a
          href="#"
          className="mt-9 inline-flex items-center gap-2 rounded-full bg-[#0c0c10] px-6 py-3 text-[13px] font-medium text-white transition-transform hover:scale-[1.03]"
        >
          Debug now
        </a>
      </div>

      <style>{`
        @keyframes burn-drift {
          0%, 100% { transform: translate3d(0,0,0) scale(1); }
          50% { transform: translate3d(-14px,12px,0) scale(1.06); }
        }
      `}</style>
    </div>
  );
}
Background Lights Hero

Background lights arecool you know.

Background lights are
cool you know.
