Gradient Mesh Hero with Staggered Text Reveal

"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";

const LINE_ONE = ["Build", "interfaces"];
const LINE_TWO = ["worth", "remembering."];
const LOGOS = ["Northwind", "Loomly", "Cadence", "Meridian", "Brightfold", "Palisade", "Everly", "Kestrel"];

export default function AheroGradientMeshStagger() {
  const reduce = useReducedMotion();

  const wordsContainer: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: 0.07, delayChildren: 0.15 } },
  };
  const word: Variants = reduce
    ? { hidden: { opacity: 0 }, show: { opacity: 1, transition: { duration: 0.4 } } }
    : {
        hidden: { opacity: 0, y: 22, filter: "blur(8px)" },
        show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.7, ease: "easeOut" } },
      };
  const fadeUp: Variants = reduce
    ? { hidden: { opacity: 0 }, show: { opacity: 1, transition: { duration: 0.5 } } }
    : { hidden: { opacity: 0, y: 18 }, show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } } };

  return (
    <section className="relative isolate flex min-h-screen flex-col overflow-hidden bg-zinc-50 px-6 py-24 dark:bg-zinc-950">
      <style>{`
        @keyframes ahgm-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(8%,10%,0) scale(1.18); } 66% { transform: translate3d(-6%,4%,0) scale(0.92); } }
        @keyframes ahgm-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-12%,-8%,0) scale(1.22); } }
        @keyframes ahgm-c { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(10%,-10%,0) scale(0.9); } }
        @keyframes ahgm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .ahgm-a { animation: ahgm-a 20s ease-in-out infinite; }
        .ahgm-b { animation: ahgm-b 26s ease-in-out infinite; }
        .ahgm-c { animation: ahgm-c 22s ease-in-out infinite; }
        .ahgm-track { display: flex; width: max-content; animation: ahgm-scroll 38s linear infinite; }
        .ahgm-marquee:hover .ahgm-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
          .ahgm-a, .ahgm-b, .ahgm-c, .ahgm-track { animation: none; }
        }
      `}</style>

      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
        <div className="ahgm-a absolute left-[8%] top-[-10%] h-[34rem] w-[34rem] rounded-full bg-gradient-to-br from-indigo-400 via-violet-400 to-transparent opacity-40 blur-3xl dark:from-indigo-600 dark:via-violet-700 dark:opacity-30" />
        <div className="ahgm-b absolute right-[4%] top-[6%] h-[30rem] w-[30rem] rounded-full bg-gradient-to-bl from-fuchsia-400 via-rose-400 to-transparent opacity-40 blur-3xl dark:from-fuchsia-600 dark:via-rose-600 dark:opacity-25" />
        <div className="ahgm-c absolute bottom-[-12%] left-1/3 h-[32rem] w-[32rem] rounded-full bg-gradient-to-tr from-sky-300 via-emerald-300 to-transparent opacity-40 blur-3xl dark:from-sky-600 dark:via-emerald-600 dark:opacity-25" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_40%,rgba(244,244,245,0.6)_100%)] dark:bg-[radial-gradient(circle_at_center,transparent_40%,rgba(9,9,11,0.7)_100%)]" />
      </div>

      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center justify-center text-center">
        <motion.a
          href="#"
          variants={fadeUp}
          initial="hidden"
          animate="show"
          className="group inline-flex items-center gap-2 rounded-full border border-zinc-200/80 bg-white/70 px-4 py-1.5 text-sm font-medium text-zinc-700 shadow-sm backdrop-blur-md transition hover:border-zinc-300 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300 dark:hover:border-white/20"
        >
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
          </span>
          Now shipping v2.0
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="h-4 w-4 text-zinc-400 transition group-hover:translate-x-0.5">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </motion.a>

        <motion.h1
          variants={wordsContainer}
          initial="hidden"
          animate="show"
          className="mt-8 text-5xl font-semibold tracking-tight text-zinc-900 dark:text-white sm:text-7xl"
        >
          <span className="block">
            {LINE_ONE.map((w, i) => (
              <motion.span key={w} variants={word} className="inline-block">
                {w}
                {i < LINE_ONE.length - 1 ? " " : ""}
              </motion.span>
            ))}
          </span>
          <span className="mt-1 block">
            {LINE_TWO.map((w, i) => (
              <motion.span
                key={w}
                variants={word}
                className="inline-block bg-gradient-to-r from-indigo-500 via-fuchsia-500 to-sky-500 bg-clip-text text-transparent dark:from-indigo-400 dark:via-fuchsia-400 dark:to-sky-400"
              >
                {w}
                {i < LINE_TWO.length - 1 ? " " : ""}
              </motion.span>
            ))}
          </span>
        </motion.h1>

        <motion.p
          variants={fadeUp}
          initial="hidden"
          animate="show"
          transition={{ delay: 0.5 }}
          className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400"
        >
          A calm design surface for teams who care about the details. Compose, preview and ship polished screens from one tidy place.
        </motion.p>

        <motion.div
          variants={fadeUp}
          initial="hidden"
          animate="show"
          transition={{ delay: 0.65 }}
          className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row"
        >
          <motion.a
            href="#"
            whileHover={reduce ? undefined : { scale: 1.03 }}
            whileTap={reduce ? undefined : { scale: 0.97 }}
            className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-zinc-900 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-500/20 transition-colors hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200 dark:focus-visible:ring-offset-zinc-950 sm:w-auto"
          >
            Start building free
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="h-4 w-4">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </motion.a>
          <motion.a
            href="#"
            whileHover={reduce ? undefined : { scale: 1.03 }}
            whileTap={reduce ? undefined : { scale: 0.97 }}
            className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white/70 px-6 py-3 text-sm font-semibold text-zinc-700 backdrop-blur transition-colors hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-50 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200 dark:hover:bg-white/10 dark:focus-visible:ring-offset-zinc-950 sm:w-auto"
          >
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="h-4 w-4">
              <path d="M8 5v14l11-7z" />
            </svg>
            Watch the tour
          </motion.a>
        </motion.div>
      </div>

      <motion.div
        initial={reduce ? { opacity: 0 } : { opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.9, duration: 0.7 }}
        className="mx-auto mt-16 w-full max-w-5xl"
      >
        <p className="text-center text-xs font-medium uppercase tracking-widest text-zinc-500 dark:text-zinc-500">
          Trusted by product teams everywhere
        </p>
        <div className="ahgm-marquee relative mt-6 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]" aria-label="Logos of companies using the product">
          <div className="ahgm-track gap-10">
            {[...LOGOS, ...LOGOS].map((name, i) => (
              <span
                key={`${name}-${i}`}
                aria-hidden={i >= LOGOS.length ? "true" : undefined}
                className="flex shrink-0 items-center gap-2 text-lg font-semibold tracking-tight text-zinc-400 transition-colors hover:text-zinc-700 dark:text-zinc-600 dark:hover:text-zinc-300"
              >
                <svg viewBox="0 0 24 24" className="h-5 w-5 fill-current" aria-hidden="true">
                  <path d="M12 2l2.6 6.9L22 11l-6.9 2.6L12 22l-2.6-6.9L2 11l6.9-2.1z" />
                </svg>
                {name}
              </span>
            ))}
          </div>
        </div>
      </motion.div>
    </section>
  );
}