// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Footer 07 * @description A split footer with prominent CTA section. * Large call-to-action on one side with navigation links on the other. * * @slots footer, footer-container, footer-content, footer-cta, footer-cta-content, * footer-cta-title, footer-cta-description, footer-cta-actions, footer-cta-button, * footer-cta-secondary, footer-nav, footer-nav-top, footer-brand, footer-brand-name, * footer-social, footer-social-link, footer-columns, footer-column, footer-column-title, * footer-column-links, footer-link, footer-bottom, footer-copyright * @variant split-cta * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Github, Twitter, Linkedin } from "lucide-react" import { ButtonLink } from "@/registry/ui/button-link" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FooterLinkConfig { id: string label: string href: string } interface FooterColumnConfig { id: string title: string links: FooterLinkConfig[] } interface SocialLinkConfig { id: string name: string href: string iconType: "github" | "twitter" | "linkedin" } interface Footer07Props { ctaTitle?: string ctaDescription?: string ctaButtonText?: string ctaButtonHref?: string ctaSecondaryText?: string ctaSecondaryHref?: string brandName?: string columns?: FooterColumnConfig[] socialLinks?: SocialLinkConfig[] copyright?: string className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultColumns: FooterColumnConfig[] = [ { id: "col-1", title: "Product", links: [ { id: "link-1", label: "Features", href: "#" }, { id: "link-2", label: "Pricing", href: "#" }, { id: "link-3", label: "Integrations", href: "#" }, { id: "link-4", label: "Changelog", href: "#" }, ], }, { id: "col-2", title: "Resources", links: [ { id: "link-5", label: "Documentation", href: "#" }, { id: "link-6", label: "Blog", href: "#" }, { id: "link-7", label: "Support", href: "#" }, { id: "link-8", label: "API", href: "#" }, ], }, ] const defaultSocialLinks: SocialLinkConfig[] = [ { id: "social-1", name: "GitHub", href: "#", iconType: "github" }, { id: "social-2", name: "X/Twitter", href: "#", iconType: "twitter" }, { id: "social-3", name: "LinkedIn", href: "#", iconType: "linkedin" }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const socialIconMap = { github: Github, twitter: Twitter, linkedin: Linkedin, } // ============================================================================ // COMPONENT // ============================================================================ function Footer07({ ctaTitle = "Ready to get started?", ctaDescription = "Join thousands of companies already using our platform to build amazing products.", ctaButtonText = "Start for free", ctaButtonHref = "#", ctaSecondaryText = "Talk to sales", ctaSecondaryHref = "#", brandName = "Acme", columns = defaultColumns, socialLinks = defaultSocialLinks, copyright = `© ${new Date().getFullYear()} Acme Inc.`, className, idBase = "footer-07", }: Footer07Props) { const headingId = `${idBase}-heading` return ( ) } export default Footer07 export { Footer07, type Footer07Props }