Spotlight Hero

import { motion } from "framer-motion";
import { ArrowRight, Sparkles } from "lucide-react";

export interface SpotlightHeroProps {
  /** Small label above the title. */
  eyebrow?: string;
  title?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
}

export default function SpotlightHero({
  eyebrow = "New release",
  title = "Build your interface faster",
  description = "A library of components you can paste, preview and publish in minutes.",
  primaryLabel = "Get started",
  secondaryLabel = "Learn more",
}: SpotlightHeroProps) {
  return (
    <section className="relative w-full overflow-hidden bg-zinc-950 px-6 py-24 text-center sm:py-32">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-1/2 top-0 h-80 w-[40rem] -translate-x-1/2 rounded-full bg-violet-600/25 blur-3xl"
      />

      <motion.div
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="relative mx-auto max-w-3xl"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-zinc-300">
          <Sparkles className="h-3.5 w-3.5 text-violet-300" aria-hidden="true" />
          {eyebrow}
        </span>

        <h1 className="mt-6 text-4xl font-semibold tracking-tight text-white sm:text-6xl">{title}</h1>
        <p className="mx-auto mt-5 max-w-xl text-base leading-7 text-zinc-400 sm:text-lg">{description}</p>

        <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <motion.a
            href="#"
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.97 }}
            className="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-zinc-950"
          >
            {primaryLabel}
            <ArrowRight className="h-4 w-4" aria-hidden="true" />
          </motion.a>
          <a
            href="#"
            className="inline-flex items-center rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/5"
          >
            {secondaryLabel}
          </a>
        </div>
      </motion.div>
    </section>
  );
}