export function ColorFlashHero() {
  const words = [
    { t: "design", c: "#6366f1" },
    { t: "ship", c: "#ec4899" },
    { t: "scale", c: "#f59e0b" },
    { t: "launch", c: "#10b981" },
  ];

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#fafaf7] text-[#0c0c10] antialiased grid place-items-center px-6">
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.55]"
        style={{
          backgroundImage: "radial-gradient(#dededa 1px, transparent 1.4px)",
          backgroundSize: "28px 28px",
          maskImage: "radial-gradient(circle at 50% 45%, black, transparent 72%)",
          WebkitMaskImage: "radial-gradient(circle at 50% 45%, black, transparent 72%)",
        }}
      />

      <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>
        <a href="#" className="rounded-full bg-[#0c0c10] px-4 py-1.5 text-[12.5px] font-medium text-white">Get started</a>
      </div>

      <div className="relative z-10 max-w-3xl text-center">
        <p className="mb-7 font-mono text-[11px] uppercase tracking-[0.3em] text-black/45">
          The product platform
        </p>
        <h1 className="text-[clamp(40px,6.4vw,92px)] font-semibold leading-[1.05] tracking-[-0.035em]">
          We help teams
          <br />
          <span className="relative inline-block h-[1.1em] overflow-hidden align-bottom">
            <span className="flex flex-col" style={{ animation: "rotate-words 8s steps(1) infinite" }}>
              {[...words, words[0]].map((w, i) => (
                <span key={i} className="h-[1.1em] leading-[1.1em]" style={{ color: w.c }}>
                  {w.t}.
                </span>
              ))}
            </span>
          </span>
        </h1>
        <p className="mx-auto mt-7 max-w-md text-[16px] leading-relaxed text-black/55">
          One workspace for the whole lifecycle — from the first sketch to the
          version your customers actually pay for.
        </p>
        <div className="mt-9 flex items-center justify-center gap-3">
          <a href="#" className="rounded-full bg-[#0c0c10] px-6 py-3 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">
            Start free
          </a>
          <a href="#" className="rounded-full border border-black/15 px-6 py-3 text-[13px] font-medium text-black/70 hover:bg-black/[0.03] transition-colors">
            Book a demo ↗
          </a>
        </div>
      </div>

      <style>{`
        @keyframes rotate-words {
          0%, 20%   { transform: translateY(0); }
          25%, 45%  { transform: translateY(-1.1em); }
          50%, 70%  { transform: translateY(-2.2em); }
          75%, 95%  { transform: translateY(-3.3em); }
          100%      { transform: translateY(-4.4em); }
        }
      `}</style>
    </div>
  );
}
Rotating Word Hero

We help teamsdesign.ship.scale.launch.design.

We help teams
design.ship.scale.launch.design.
