CTA Spotlight

Props

Source

"use client";
import ClickSpark from "@/components/click-spark";
import SpotlightCard, { type SpotlightCardProps } from "@/components/spotlight-card";
import { cn } from "@/lib/utils";

export interface CtaAction {
  label: string;
  href: string;
}

export interface CtaSpotlightProps {
  title?: string;
  description?: string;
  action?: CtaAction;
  spotlightColor?: SpotlightCardProps["spotlightColor"];
  className?: string;
}

export default function CtaSpotlight({
  title = "Ready to ship something that moves?",
  description = "Install a block, keep the source, change anything.",
  action = { label: "Start building", href: "#" },
  spotlightColor = "rgba(124, 255, 103, 0.25)",
  className,
}: CtaSpotlightProps) {
  return (
    <section className={cn("flex justify-center bg-neutral-950 px-6 py-16", className)}>
      <SpotlightCard
        spotlightColor={spotlightColor}
        className="w-full max-w-2xl p-10 text-center sm:p-14"
      >
        <h2 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">{title}</h2>
        <p className="mx-auto mt-4 max-w-md text-neutral-400">{description}</p>
        <div className="mt-8 inline-block">
          <ClickSpark sparkColor="#ffffff">
            <a
              href={action.href}
              className="relative inline-block rounded-lg bg-white px-6 py-3 text-sm font-medium text-neutral-950 hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900"
            >
              {action.label}
            </a>
          </ClickSpark>
        </div>
      </SpotlightCard>
    </section>
  );
}