CTA 3

1/**
2 * CTA 3 Component
3 *
4 * Source: Custom gradient design for UIFoundry
5 * License: MIT
6 * Created: 2025-10-31
7 *
8 * Design:
9 * - Vibrant gradient background for high impact
10 * - Centered layout for focus
11 * - Modern button styling with good contrast
12 */
13 
14import Link from "next/link";
15 
16import type { CTA_3_Block } from "~/payload-types";
17 
18import { Button } from "@/registry/ui/button";
19 
20export * from "./config";
21 
22export default function CallToAction3(props: NonNullable<CTA_3_Block>) {
23	return (
24		<section className="relative overflow-hidden bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 py-20 md:py-32">
25			{/* Gradient overlay for depth */}
26			<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
27 
28			<div className="relative mx-auto max-w-4xl px-6">
29				<div className="text-center">
30					<h2 className="text-4xl font-bold text-white text-balance lg:text-5xl xl:text-6xl">
31						{props.header}
32					</h2>
33 
34					{props.subheader && (
35						<p className="mt-6 text-lg text-white/90 text-balance md:text-xl">
36							{props.subheader}
37						</p>
38					)}
39 
40					<div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center sm:gap-4">
41						{(props.actions ?? []).map((action, index) => {
42							const isSecondary = index === 1;
43 
44							return (
45								<Button
46									asChild
47									key={`CTA_3_Block-action-${index}`}
48									size="lg"
49									variant={isSecondary ? "outline" : "default"}
50									className={
51										isSecondary
52											? "border-2 border-white bg-transparent text-white hover:bg-white hover:text-purple-600"
53											: "bg-white text-purple-600 hover:bg-white/90"
54									}
55								>
56									<Link href={action.href ?? "/"}>
57										<span>{action.label ?? "Get Started"}</span>
58									</Link>
59								</Button>
60							);
61						})}
62					</div>
63				</div>
64			</div>
65		</section>
66	);
67}