Aurora Gradient Hero

/* Source: Magic UI (magicuidesign) — https://github.com/magicuidesign/magicui — MIT. Included under its original licence. */
/* Copyright (c) Magic UI. MIT License. Ports registry/magicui/aurora-text.tsx + animated-gradient-text.tsx and their keyframes from styles/globals.css, made self-contained. */

export default function SrcAuroraGradientHero() {
  return (
    <section className="relative isolate flex min-h-screen flex-col items-center justify-center overflow-hidden bg-white px-6 py-24 text-center dark:bg-black">
      <style>{`
        @keyframes agh-gradient { to { background-position: 300% 0; } }
        @keyframes agh-aurora {
          0%   { background-position: 0% 50%;   transform: rotate(-5deg) scale(0.9); }
          25%  { background-position: 50% 100%; transform: rotate(5deg) scale(1.1); }
          50%  { background-position: 100% 50%; transform: rotate(-3deg) scale(0.95); }
          75%  { background-position: 50% 0%;   transform: rotate(3deg) scale(1.05); }
          100% { background-position: 0% 50%;   transform: rotate(-5deg) scale(0.9); }
        }
        @keyframes agh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
        .agh-anim-gradient { animation: agh-gradient 8s linear infinite; }
        .agh-anim-aurora { animation: agh-aurora 8s ease-in-out infinite alternate; }
        .agh-rise { animation: agh-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
        @media (prefers-reduced-motion: reduce) {
          .agh-anim-gradient, .agh-anim-aurora, .agh-rise { animation: none; }
        }
      `}</style>

      {/* ambient background glow */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 [background:radial-gradient(60%_50%_at_50%_0%,rgba(124,40,202,0.18),transparent_70%)] dark:[background:radial-gradient(60%_50%_at_50%_0%,rgba(124,40,202,0.35),transparent_70%)]"
      />

      {/* Animated gradient text badge — from magicui/animated-gradient-text.tsx */}
      <div className="agh-rise mx-auto mb-8 flex w-fit items-center justify-center rounded-full border border-black/10 bg-white/60 px-4 py-1.5 text-sm font-medium shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
        <span aria-hidden="true" className="mr-2">✨</span>
        <span
          className="agh-anim-gradient inline bg-clip-text text-transparent"
          style={{
            backgroundImage: "linear-gradient(to right, #ffaa40, #9c40ff, #ffaa40)",
            backgroundSize: "300% 100%",
          }}
        >
          Introducing FreeCode
        </span>
      </div>

      <h1 className="agh-rise mx-auto max-w-4xl text-4xl font-bold tracking-tight text-gray-900 [animation-delay:0.1s] sm:text-6xl dark:text-white">
        Ship interfaces with an{" "}
        {/* Aurora text — from magicui/aurora-text.tsx */}
        <span className="relative inline-block">
          <span className="sr-only">aurora finish</span>
          <span
            className="agh-anim-aurora relative bg-clip-text text-transparent"
            style={{
              backgroundImage:
                "linear-gradient(135deg, #FF0080, #7928CA, #0070F3, #38bdf8, #FF0080)",
              backgroundSize: "200% auto",
            }}
            aria-hidden="true"
          >
            aurora finish
          </span>
        </span>
      </h1>

      <p className="agh-rise mx-auto mt-6 max-w-xl text-lg text-gray-600 [animation-delay:0.2s] dark:text-gray-300">
        A modern, animated hero built from genuinely open-source effects. Gradient motion,
        dark-mode ready, and dependency-free.
      </p>

      <div className="agh-rise mt-10 flex flex-col items-center justify-center gap-3 [animation-delay:0.3s] sm:flex-row">
        <a
          href="#"
          className="inline-flex items-center justify-center rounded-full bg-gray-900 px-6 py-3 text-sm font-semibold text-white shadow-lg transition-transform hover:-translate-y-0.5 dark:bg-white dark:text-black"
        >
          Get started
        </a>
        <a
          href="#"
          className="inline-flex items-center justify-center rounded-full border border-gray-200 bg-white/70 px-6 py-3 text-sm font-semibold text-gray-900 backdrop-blur-sm transition-colors hover:bg-gray-50 dark:border-white/15 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
        >
          View components
        </a>
      </div>
    </section>
  );
}