export function GradientFrameHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#070710] text-white antialiased grid place-items-center px-6 py-12">
      <div
        aria-hidden
        className="absolute inset-0 opacity-70"
        style={{ background: "radial-gradient(50% 60% at 50% 45%, rgba(99,102,241,0.22), transparent 70%)" }}
      />
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.06]"
        style={{
          backgroundImage: "radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1.4px)",
          backgroundSize: "28px 28px",
          maskImage: "radial-gradient(circle at 50% 50%, black, transparent 75%)",
        }}
      />

      <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="text-[12.5px] text-white/55 hover:text-white transition-colors">Sign in</a>
      </div>

      <div className="relative z-10 w-full max-w-lg">
        {/* rotating conic gradient border */}
        <div className="relative overflow-hidden rounded-3xl p-px">
          <div
            aria-hidden
            className="absolute inset-[-120%]"
            style={{
              background: "conic-gradient(from 0deg, #6366f1, #06b6d4, #ec4899, #f59e0b, #6366f1)",
              animation: "frame-spin 7s linear infinite",
            }}
          />
          <div className="relative rounded-3xl bg-[#0b0b14]/95 p-9 text-center backdrop-blur sm:p-12">
            <div className="mx-auto mb-6 grid h-12 w-12 place-items-center rounded-2xl border border-white/12 bg-white/[0.04] text-[20px]">
              ✦
            </div>
            <h1 className="text-[clamp(32px,4.4vw,52px)] font-semibold leading-[1.02] tracking-[-0.03em]">
              Be first through
              <br />
              the door.
            </h1>
            <p className="mx-auto mt-4 max-w-sm text-[14.5px] leading-relaxed text-white/55">
              The schema-first, EU-hosted CMS your engineers won&apos;t want to
              migrate away from. Join the private beta.
            </p>

            {/* waitlist form */}
            <div className="mx-auto mt-7 flex max-w-sm items-center gap-2 rounded-full border border-white/12 bg-white/[0.04] p-1.5">
              <span aria-hidden className="pl-3 text-white/35">✉</span>
              <input
                type="email"
                placeholder="you@company.com"
                className="min-w-0 flex-1 bg-transparent px-1 py-1.5 text-[13.5px] text-white placeholder:text-white/35 focus:outline-none"
              />
              <button className="shrink-0 rounded-full bg-white px-4 py-2 text-[12.5px] font-medium text-black transition-transform hover:scale-[1.03]">
                Join waitlist
              </button>
            </div>
            <p className="mt-4 font-mono text-[11px] uppercase tracking-[0.2em] text-white/35">
              412 teams ahead of you · SOC 2 · GDPR
            </p>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes frame-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}
Waitlist Card Hero

Be first throughthe door.

Be first through
the door.
