Aurora Glow CTA Banner

"use client";

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

const headline = ["Launch", "something", "the", "internet", "cannot", "ignore"];

const orbs = [
  { c: "left-[6%] top-[20%] h-44 w-44 bg-indigo-500/40", y: [0, -28, 0], x: [0, 16, 0], s: [1, 1.12, 1], d: 9 },
  { c: "right-[8%] top-[14%] h-52 w-52 bg-fuchsia-500/30", y: [0, 26, 0], x: [0, -18, 0], s: [1, 1.08, 1], d: 11 },
  { c: "left-[18%] bottom-[10%] h-40 w-40 bg-sky-500/30", y: [0, -20, 0], x: [0, 22, 0], s: [1, 1.1, 1], d: 10 },
  { c: "right-[16%] bottom-[16%] h-36 w-36 bg-violet-500/30", y: [0, 18, 0], x: [0, -14, 0], s: [1, 1.14, 1], d: 12 },
];

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

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: 0.08, delayChildren: 0.15 } },
  };

  const rise: Variants = {
    hidden: { opacity: 0, y: reduce ? 0 : 22 },
    show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
  };

  const word: Variants = {
    hidden: { opacity: 0, y: reduce ? 0 : 16, filter: "blur(6px)" },
    show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.55, ease: "easeOut" } },
  };

  return (
    <section className="relative isolate flex min-h-[32rem] items-center overflow-hidden bg-zinc-950 px-6 py-24 md:py-32">
      <style>{`
        @keyframes acta-aurora-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
        @keyframes acta-sheen { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
        .acta-aurora { animation: acta-aurora-rotate 28s linear infinite; }
        .acta-sheen { animation: acta-sheen 8s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .acta-aurora, .acta-sheen { animation: none; }
        }
      `}</style>

      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
        <div className="acta-aurora absolute left-1/2 top-1/2 h-[60rem] w-[60rem] rounded-full opacity-60 blur-3xl [background:conic-gradient(from_0deg,#4f46e5,#7c3aed,#db2777,#0ea5e9,#4f46e5)]" />
        <div className="acta-sheen absolute inset-0 [background:radial-gradient(60%_50%_at_50%_38%,rgba(129,140,248,.25),transparent_70%)]" />
        <div className="absolute inset-0 [background:radial-gradient(120%_120%_at_50%_8%,transparent_38%,rgba(9,9,11,.9)_100%)]" />
        <div className="absolute inset-0 opacity-[0.06] [background-image:radial-gradient(circle_at_center,white_1px,transparent_1px)] [background-size:22px_22px]" />
      </div>

      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        {orbs.map((o, i) => (
          <motion.span
            key={i}
            className={`absolute rounded-full blur-2xl ${o.c}`}
            animate={reduce ? undefined : { y: o.y, x: o.x, scale: o.s }}
            transition={reduce ? undefined : { duration: o.d, repeat: Infinity, ease: "easeInOut" }}
          />
        ))}
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.4 }}
        className="relative mx-auto max-w-3xl text-center"
      >
        <motion.span
          variants={rise}
          className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-sm font-medium text-white/80 backdrop-blur"
        >
          <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-400" />
          </span>
          Now in open beta
        </motion.span>

        <h2 className="mt-7 flex flex-wrap justify-center gap-x-3 gap-y-1 text-4xl font-semibold tracking-tight text-white sm:text-6xl">
          {headline.map((w, i) => (
            <motion.span key={i} variants={word} className="inline-block">
              {i === 4 || i === 5 ? (
                <span className="bg-gradient-to-r from-indigo-300 via-fuchsia-300 to-sky-300 bg-clip-text text-transparent">
                  {w}
                </span>
              ) : (
                w
              )}
            </motion.span>
          ))}
        </h2>

        <motion.p variants={rise} className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-white/70">
          Turn quiet launches into moments people talk about. Design, ship and grow from one calm, capable workspace.
        </motion.p>

        <motion.div variants={rise} className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <motion.a
            whileHover={reduce ? undefined : { y: -2 }}
            whileTap={{ scale: 0.98 }}
            href="#"
            className="group relative inline-flex w-full items-center justify-center gap-2 overflow-hidden rounded-full bg-gradient-to-r from-indigo-500 via-violet-500 to-fuchsia-500 px-7 py-3.5 text-sm font-semibold text-white shadow-lg shadow-fuchsia-500/25 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 sm:w-auto"
          >
            <span className="relative z-10">Get started free</span>
            <svg
              viewBox="0 0 24 24"
              className="relative z-10 h-4 w-4"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden
            >
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
            <span
              aria-hidden
              className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 ease-out group-hover:translate-x-full"
            />
          </motion.a>

          <a
            href="#"
            className="inline-flex w-full items-center justify-center gap-2 rounded-full border border-white/20 bg-white/5 px-7 py-3.5 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 sm:w-auto"
          >
            Book a demo
          </a>
        </motion.div>

        <motion.p variants={rise} className="mt-6 text-sm text-white/50">
          No card needed. Free for up to five teammates.
        </motion.p>
      </motion.div>
    </section>
  );
}