Centered call to action

import { ArrowRight } from 'lucide-react';

export function CtaCentered({
  title = 'Small tools, built with care.',
  body = 'Everything here is free to try. No credit card, no trial clock, no strings.',
  primaryCta = { label: 'Explore the tools', href: '#' },
  secondaryCta = { label: 'See pricing', href: '#' },
}: {
  title?: string;
  body?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
}) {
  return (
    <section>
      <div className="mx-auto max-w-3xl px-4 py-20 text-center sm:px-6">
        <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">{title}</h2>
        <p className="mt-3 text-sm text-muted-foreground sm:text-base">{body}</p>
        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
          <a
            href={primaryCta.href}
            className="inline-flex h-10 items-center gap-2 rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
          >
            {primaryCta.label}
            <ArrowRight className="h-4 w-4" />
          </a>
          <a
            href={secondaryCta.href}
            className="inline-flex h-10 items-center gap-2 rounded-md border border-border bg-background px-5 text-sm font-medium transition-colors hover:bg-accent"
          >
            {secondaryCta.label}
          </a>
        </div>
      </div>
    </section>
  );
}

Dependencies