export function SweepGradientHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#faf9f6] text-[#15140f] antialiased grid place-items-center px-6">
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.55]"
        style={{
          backgroundImage:
            "linear-gradient(#e8e6df 1px, transparent 1px), linear-gradient(90deg, #e8e6df 1px, transparent 1px)",
          backgroundSize: "72px 72px",
          maskImage: "radial-gradient(circle at 50% 45%, black, transparent 70%)",
          WebkitMaskImage: "radial-gradient(circle at 50% 45%, black, transparent 70%)",
        }}
      />

      <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">Product</a>
          <a href="#" className="hover:text-black transition-colors">Teams</a>
          <a href="#" className="hover:text-black transition-colors">Pricing</a>
        </div>
        <a href="#" className="rounded-full bg-[#15140f] px-4 py-1.5 text-[12.5px] font-medium text-white">Start free</a>
      </div>

      <div className="relative z-10 max-w-3xl text-center">
        <div className="mx-auto mb-7 inline-flex items-center gap-2 rounded-full border border-black/10 bg-white px-3 py-1 text-[12px] text-black/55">
          <span aria-hidden>⇄</span> The way your team really works
        </div>
        <h1 className="text-[clamp(40px,6vw,88px)] font-semibold leading-[1.02] tracking-[-0.035em]">
          Async by default.
          <br />
          Synced{" "}
          <span className="relative inline-block">
            <span className="relative z-10">when it counts.</span>
            {/* animated highlighter sweep */}
            <span
              aria-hidden
              className="absolute inset-x-[-4px] bottom-[0.1em] z-0 h-[0.42em] origin-left rounded-sm"
              style={{
                background: "linear-gradient(90deg,#fde68a,#fca5a5)",
                animation: "sweep-in 1s cubic-bezier(0.22,1,0.36,1) 0.5s both",
              }}
            />
          </span>
        </h1>
        <p className="mx-auto mt-7 max-w-lg text-[16px] leading-relaxed text-black/55">
          A docs + meetings tool for remote-first teams who don&apos;t want to
          start every standup with &ldquo;can everyone see my screen?&rdquo;
        </p>
        <div className="mt-9 flex items-center justify-center gap-3">
          <a href="#" className="rounded-full bg-[#15140f] px-6 py-3 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">
            Try with your team
          </a>
          <a href="#" className="text-[13px] text-black/55 underline-offset-4 hover:text-black hover:underline">
            Watch the 90-sec demo ↗
          </a>
        </div>
      </div>

      <style>{`
        @keyframes sweep-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      `}</style>
    </div>
  );
}
Underline Sweep Hero

Async by default.Synced when it counts.

Async by default.
Synced when it counts.
