export function RippleCoreHero() {
  const units = [
    { v: "04", l: "Days" },
    { v: "18", l: "Hours" },
    { v: "42", l: "Minutes" },
    { v: "09", l: "Seconds" },
  ];
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#04060c] text-white antialiased grid place-items-center px-6">
      <div
        aria-hidden
        className="absolute left-1/2 top-1/2 h-[760px] w-[760px] -translate-x-1/2 -translate-y-1/2 rounded-full"
        style={{ background: "radial-gradient(closest-side, rgba(34,211,238,0.16), transparent 70%)", filter: "blur(50px)" }}
      />
      {/* ripple rings from center */}
      <div aria-hidden className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        {[0, 1.4, 2.8, 4.2].map((d, i) => (
          <span
            key={i}
            className="absolute left-0 top-0 h-16 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full border border-cyan-300/60"
            style={{ animation: `ripple-out 5.6s cubic-bezier(0.16,1,0.3,1) ${d}s infinite`, opacity: 0 }}
          />
        ))}
      </div>

      <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/20 px-4 py-1.5 text-[12.5px] text-white/80 hover:bg-white/10 transition-colors">Notify me</a>
      </div>

      <div className="relative z-10 max-w-2xl text-center">
        <p className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.04] px-3 py-1 font-mono text-[11px] uppercase tracking-[0.22em] text-cyan-200/80">
          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-cyan-300" /> Launching soon
        </p>
        <h1 className="text-[clamp(40px,6.2vw,92px)] font-semibold leading-[0.92] tracking-[-0.04em]">
          Something new
          <br />
          <span className="bg-clip-text text-transparent" style={{ backgroundImage: "linear-gradient(90deg,#67e8f9,#a5b4fc)" }}>
            goes live in
          </span>
        </h1>

        {/* countdown */}
        <div className="mx-auto mt-9 flex max-w-md items-stretch justify-center gap-3">
          {units.map((u, i) => (
            <div key={u.l} className="flex items-center gap-3">
              <div className="flex w-20 flex-col items-center rounded-2xl border border-white/10 bg-white/[0.03] py-3 backdrop-blur">
                <span className="font-mono text-[34px] font-semibold leading-none tracking-tight tabular-nums">{u.v}</span>
                <span className="mt-2 font-mono text-[10px] uppercase tracking-[0.18em] text-white/45">{u.l}</span>
              </div>
              {i < units.length - 1 && <span className="text-[28px] text-white/25">:</span>}
            </div>
          ))}
        </div>

        <div className="mt-9 flex items-center justify-center gap-2 rounded-full border border-white/12 bg-white/[0.04] p-1.5 max-w-sm mx-auto">
          <input
            type="email"
            placeholder="you@company.com"
            className="min-w-0 flex-1 bg-transparent px-3 py-1.5 text-[13.5px] text-white placeholder:text-white/35 focus:outline-none"
          />
          <button className="shrink-0 rounded-full bg-cyan-300 px-4 py-2 text-[12.5px] font-medium text-[#04130d] transition-transform hover:scale-[1.03]">
            Get early access
          </button>
        </div>
      </div>

      <style>{`
        @keyframes ripple-out {
          0% { transform: translate(-50%,-50%) scale(0.4); opacity: 0.9; }
          100% { transform: translate(-50%,-50%) scale(13); opacity: 0; }
        }
      `}</style>
    </div>
  );
}
Launch Countdown Hero

Something newgoes live in

Something new
goes live in
