// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name About 02 * @description A split-layout about section with image on one side and * content with stats on the other. Great for team/company introductions. * * @slots about, about-container, about-image, about-content, about-badge, * about-heading, about-description, about-stats, about-stat-item, * about-stat-value, about-stat-label, about-cta-group, about-primary-cta, * about-secondary-cta * @variant split * * @registryDependencies button-link button badge * @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" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface StatItem { /** Unique identifier */ id: string /** Stat value (e.g., "50+", "10M") */ value: string /** Stat label */ label: string } interface ImageConfig { /** Image source URL */ src: string /** Image alt text */ alt: string } interface About02Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text */ heading?: string /** Primary description paragraph */ description?: string /** Secondary description paragraph */ secondaryDescription?: string /** Stats displayed below description */ stats?: StatItem[] /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Image configuration */ image?: ImageConfig /** Reverse layout (image on left) */ reversed?: boolean /** Additional CSS classes for the section */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatItem[] = [ { id: "stat-1", value: "10+", label: "Years of experience" }, { id: "stat-2", value: "500+", label: "Projects delivered" }, { id: "stat-3", value: "50+", label: "Team members" }, { id: "stat-4", value: "99%", label: "Client satisfaction" }, ] const defaultImage: ImageConfig = { src: "/assets/placeholders/placeholder-4x3.svg", alt: "Team collaboration", } // ============================================================================ // COMPONENT // ============================================================================ function About02({ badge = "Our Story", heading = "We've been helping businesses grow since 2014", description = "What started as a small team with a big dream has evolved into a global company serving thousands of customers. Our journey has been defined by constant innovation and an unwavering commitment to our clients' success.", secondaryDescription = "Today, we're proud to be trusted by industry leaders across the globe. But we haven't forgotten our roots—we still approach every project with the same passion and dedication that got us here.", stats = defaultStats, primaryCta = { text: "Join Our Team", href: "#" }, secondaryCta = { text: "Learn More", href: "#" }, image = defaultImage, reversed = false, className, }: About02Props) { return (

{/* Image */}

{/* Content */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)} {secondaryDescription && (

{secondaryDescription}

)} {/* Stats */} {stats && stats.length > 0 && (

{stats.map((stat) => (

{stat.value}

{stat.label}

))}

)} {/* CTAs */} {(primaryCta || secondaryCta) && (

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

)}

) } export default About02 export { About02, type About02Props, type StatItem, type CtaConfig, type ImageConfig }