72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Phone, Mail } from 'lucide-react';
|
|
|
|
interface CTASectionProps {
|
|
title: string;
|
|
description: string;
|
|
primaryCta: {
|
|
text: string;
|
|
href: string;
|
|
icon?: 'phone' | 'mail';
|
|
};
|
|
secondaryCta?: {
|
|
text: string;
|
|
href: string;
|
|
};
|
|
variant?: 'default' | 'dark';
|
|
}
|
|
|
|
export function CTASection({
|
|
title,
|
|
description,
|
|
primaryCta,
|
|
secondaryCta,
|
|
variant = 'default',
|
|
}: CTASectionProps) {
|
|
const isDark = variant === 'dark';
|
|
const bgClass = isDark ? 'bg-navy' : 'bg-teal';
|
|
const textClass = isDark ? 'text-cloud' : 'text-cloud';
|
|
|
|
const getIcon = () => {
|
|
if (primaryCta.icon === 'phone') return <Phone className="mr-2 h-4 w-4" />;
|
|
if (primaryCta.icon === 'mail') return <Mail className="mr-2 h-4 w-4" />;
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<div className={`${bgClass} py-16 sm:py-20`}>
|
|
<div className="mx-auto max-w-7xl px-4 lg:px-6">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<h2 className={`text-3xl font-bold tracking-tight ${textClass} sm:text-4xl`}>
|
|
{title}
|
|
</h2>
|
|
<p className={`mt-6 text-lg leading-8 ${isDark ? 'text-cloud/90' : 'text-slate-100'}`}>
|
|
{description}
|
|
</p>
|
|
<div className="mt-8 flex items-center justify-center gap-x-6">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant={isDark ? 'secondary' : 'default'}
|
|
>
|
|
<Link href={primaryCta.href}>
|
|
{getIcon()}
|
|
{primaryCta.text}
|
|
</Link>
|
|
</Button>
|
|
{secondaryCta && (
|
|
<Link
|
|
href={secondaryCta.href}
|
|
className={`text-sm font-semibold leading-6 ${textClass} hover:opacity-80 transition-opacity`}
|
|
>
|
|
{secondaryCta.text} <span aria-hidden="true">→</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|