export function CenterBeamHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#060507] text-white antialiased grid place-items-center px-6">
      {/* theatrical spotlight cone from top */}
      <div
        aria-hidden
        className="absolute left-1/2 top-[-8%] -translate-x-1/2"
        style={{
          width: 0,
          height: 0,
          borderLeft: "260px solid transparent",
          borderRight: "260px solid transparent",
          borderTop: "560px solid rgba(255,248,224,0.10)",
          filter: "blur(28px)",
        }}
      />
      <div
        aria-hidden
        className="absolute left-1/2 top-0 h-[480px] w-px -translate-x-1/2"
        style={{ background: "linear-gradient(180deg, rgba(255,248,224,0.7), transparent)", boxShadow: "0 0 40px rgba(255,248,224,0.4)" }}
      />
      {/* floor pool of light */}
      <div
        aria-hidden
        className="absolute left-1/2 top-[58%] h-40 w-[520px] -translate-x-1/2 rounded-[100%]"
        style={{ background: "radial-gradient(closest-side, rgba(255,248,224,0.14), transparent)", filter: "blur(20px)" }}
      />
      {/* dust motes */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-30"
        style={{ backgroundImage: "radial-gradient(rgba(255,255,255,0.7) 0.7px, transparent 1px)", backgroundSize: "70px 70px", maskImage: "radial-gradient(circle at 50% 35%, black, transparent 60%)" }}
      />

      <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="font-mono text-[11px] uppercase tracking-[0.3em] text-white/55">Velynkit Pro</span>
        <a href="#" className="text-[12.5px] text-white/55 hover:text-white transition-colors">Studios ↗</a>
      </div>

      <div className="relative z-10 max-w-2xl text-center">
        <p className="mb-7 font-mono text-[11px] uppercase tracking-[0.34em] text-amber-100/60">
          The brand operating system
        </p>
        <h1
          className="font-normal italic leading-[0.96] tracking-[-0.01em]"
          style={{ fontSize: "clamp(48px, 8vw, 116px)", fontFamily: "'Instrument Serif', Georgia, serif" }}
        >
          One source of truth
          <br />
          for every brand.
        </h1>
        <p className="mx-auto mt-7 max-w-md text-[15.5px] leading-relaxed text-white/55">
          Tokens, guidelines, assets and client handoffs — kept in one quiet
          workspace your whole studio can trust.
        </p>
        <div className="mt-9 flex items-center justify-center gap-5">
          <a href="#" className="rounded-full bg-amber-50 px-6 py-3 text-[13px] font-medium text-[#060507] transition-transform hover:scale-[1.03]">
            Request access
          </a>
          <a href="#" className="text-[13px] text-white/55 underline-offset-4 hover:text-white hover:underline">
            Studio walkthrough
          </a>
        </div>
      </div>
    </div>
  );
}
Theatrical Spotlight Hero

One source of truthfor every brand.

One source of truth
for every brand.
