maro
45261a0461
- Next.js 16 App Router site with the ANOUMA design system - Payload CMS (PostgreSQL) for offers, events, posts and page content - WebRTC video-call system with custom signaling server - SMTP email reminders and booking-request notifications - Customer accounts, calendar-based availability, and booking workflow
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { Button } from "@/components/Button";
|
|
import { OrganicBlob } from "@/components/OrganicBlob";
|
|
import { Container } from "@/components/Section";
|
|
|
|
type CTAProps = {
|
|
title: string;
|
|
lead?: string;
|
|
primaryHref?: string;
|
|
primaryLabel?: string;
|
|
secondaryHref?: string;
|
|
secondaryLabel?: string;
|
|
};
|
|
|
|
export function CTA({
|
|
title,
|
|
lead,
|
|
primaryHref = "/termin-buchen",
|
|
primaryLabel = "Termin buchen",
|
|
secondaryHref = "/kontakt",
|
|
secondaryLabel = "Kontakt aufnehmen",
|
|
}: CTAProps) {
|
|
return (
|
|
<section className="relative overflow-hidden bg-anouma-plum py-20 text-anouma-cream-light sm:py-24">
|
|
<OrganicBlob tone="mauve" className="-left-20 -top-20 h-80 w-80 opacity-30" />
|
|
<OrganicBlob tone="rose" className="-bottom-24 -right-16 h-72 w-72 opacity-20" />
|
|
<Container className="relative text-center">
|
|
<h2 className="mx-auto max-w-2xl text-balance font-serif text-4xl font-medium leading-tight sm:text-5xl">
|
|
{title}
|
|
</h2>
|
|
{lead && (
|
|
<p className="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-anouma-cream-light/85">
|
|
{lead}
|
|
</p>
|
|
)}
|
|
<div className="mt-9 flex flex-wrap items-center justify-center gap-4">
|
|
<Button href={primaryHref} variant="invert">
|
|
{primaryLabel}
|
|
</Button>
|
|
<Button href={secondaryHref} variant="invertOutline">
|
|
{secondaryLabel}
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|