Template
25 lines
1.4 KiB
TypeScript
25 lines
1.4 KiB
TypeScript
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export type CtaProps = { heading?: string; description?: string; primaryLabel?: string; primaryUrl?: string; secondaryLabel?: string; secondaryUrl?: string };
|
|
|
|
export default function Cta({ heading = '', description = '', primaryLabel = '', primaryUrl = '#', secondaryLabel = '', secondaryUrl = '#' }: CtaProps) {
|
|
return (
|
|
<section className="bg-background text-foreground">
|
|
<div className="section-shell grid gap-10 py-16 sm:py-20 lg:min-h-64 lg:grid-cols-2 lg:items-center lg:gap-20 lg:py-0">
|
|
<div className="flex flex-col justify-center">
|
|
<h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
|
|
</div>
|
|
<div className="flex flex-col justify-center">
|
|
{description && <p className="max-w-xl text-base leading-7 text-muted-foreground">{description}</p>}
|
|
<div className="mt-7 flex flex-wrap gap-3">
|
|
{primaryLabel && <Button asChild size="lg"><Link href={primaryUrl}>{primaryLabel}<ArrowRight aria-hidden="true" /></Link></Button>}
|
|
{secondaryLabel && <Button asChild variant="outline" size="lg"><Link href={secondaryUrl}>{secondaryLabel}</Link></Button>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|