CTA 2

1/**
2 * CTA 2 Component
3 *
4 * Source: Based on shadcnblocks.com CTA design pattern
5 * License: MIT-licensed shadcn pattern
6 * Adapted from: User-provided screenshots
7 *
8 * Modifications:
9 * - Integrated with PayloadCMS block system
10 * - Replaced hardcoded content with dynamic props
11 * - Made fully responsive with mobile-first approach
12 */
13 
14import Link from "next/link";
15 
16import type { CTA_2_Block } from "~/payload-types";
17 
18import { Button } from "@/registry/ui/button";
19 
20export * from "./config";
21 
22export default function CallToAction2(props: NonNullable<CTA_2_Block>) {
23	const primaryAction = props.actions?.[0];
24	const secondaryAction = props.actions?.[1];
25 
26	return (
27		<section className="bg-neutral-950 py-16 md:py-20">
28			<div className="mx-auto max-w-7xl px-6">
29				<div className="flex flex-col items-center text-center gap-6 md:flex-row md:justify-between md:text-left md:items-center">
30					<h2 className="text-3xl font-bold text-white text-balance lg:text-4xl md:max-w-2xl">
31						{props.header}
32					</h2>
33 
34					<div className="flex flex-col items-center gap-4 md:flex-row md:items-center md:gap-6 shrink-0">
35						{secondaryAction && (
36							<Link
37								href={secondaryAction.href ?? "/"}
38								className="text-white hover:text-white/80 transition-colors text-sm md:text-base"
39							>
40								{secondaryAction.label ?? "Learn more"}
41							</Link>
42						)}
43 
44						{primaryAction && (
45							<Button
46								asChild
47								size="lg"
48								className="bg-white text-black hover:bg-white/90"
49							>
50								<Link href={primaryAction.href ?? "/"}>
51									<span>{primaryAction.label ?? "Get started"}</span>
52								</Link>
53							</Button>
54						)}
55					</div>
56				</div>
57			</div>
58		</section>
59	);
60}