// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name CTA 03 * @description A split layout CTA with image on one side and content on the other. * Great for visually rich conversion sections. * * @slots cta, cta-container, cta-content, cta-heading, cta-description, * cta-actions, cta-primary, cta-secondary, cta-image-wrapper, cta-image * @variant split * * @registryDependencies button-link button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface ImageConfig { /** Image source URL */ src: string /** Image alt text */ alt: string } interface Cta03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Featured image */ image?: ImageConfig /** Reverse layout (image on left) */ reversed?: boolean /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultImage: ImageConfig = { src: "/assets/placeholders/placeholder-4x3.svg", alt: "Product preview", } // ============================================================================ // COMPONENT // ============================================================================ function Cta03({ heading = "Ready to get started?", description = "Join thousands of satisfied customers who have transformed their workflow with our platform. Start your free trial today and see the difference.", primaryCta = { text: "Get Started Free", href: "#" }, secondaryCta = { text: "Learn More", href: "#" }, image = defaultImage, reversed = false, className, }: Cta03Props) { return (

*:first-child]:order-2" )} > {/* Content */}

{heading}

{description && (

{description}

)}

{primaryCta && ( {primaryCta.text} )} {secondaryCta && ( {secondaryCta.text} )}

{/* Image */}

{/* Decorative element */}

) } export default Cta03 export { Cta03, type Cta03Props, type CtaConfig, type ImageConfig }