// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name About 03 * @description A comprehensive about section with company story, * team highlights, and milestone timeline. Perfect for detailed company pages. * * @slots about, about-container, about-header, about-badge, about-heading, * about-description, about-highlights, about-highlight-item, * about-highlight-icon, about-highlight-label, about-highlight-value, * about-timeline, about-timeline-heading, about-milestone, * about-milestone-year, about-milestone-title, about-milestone-description, * about-cta * @variant timeline * * @registryDependencies button-link badge button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Building2, Users2, Globe, Award } 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 MilestoneItem { /** Unique identifier */ id: string /** Year or date */ year: string /** Milestone title */ title: string /** Milestone description */ description: string } interface HighlightItem { /** Unique identifier */ id: string /** Icon component */ icon: React.ComponentType<{ className?: string "aria-hidden"?: boolean | "true" | "false" focusable?: "true" | "false" }> /** Highlight title */ title: string /** Highlight value or description */ value: string } interface About03Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text */ heading?: string /** Primary description paragraph */ description?: string /** Company milestones for timeline */ milestones?: MilestoneItem[] /** Company highlights (stats with icons) */ highlights?: HighlightItem[] /** Primary CTA button */ primaryCta?: CtaConfig /** Additional CSS classes for the section */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMilestones: MilestoneItem[] = [ { id: "milestone-1", year: "2020", title: "Founded", description: "Started with a team of 3 in a small garage office.", }, { id: "milestone-2", year: "2021", title: "First Major Client", description: "Landed our first Fortune 500 client.", }, { id: "milestone-3", year: "2022", title: "Series A Funding", description: "Raised $10M to accelerate product development.", }, { id: "milestone-4", year: "2023", title: "Global Expansion", description: "Opened offices in London, Singapore, and Tokyo.", }, { id: "milestone-5", year: "2024", title: "1M Users", description: "Celebrated reaching one million active users.", }, ] const defaultHighlights: HighlightItem[] = [ { id: "highlight-1", icon: Building2, title: "Offices", value: "12 Worldwide", }, { id: "highlight-2", icon: Users2, title: "Team Members", value: "500+", }, { id: "highlight-3", icon: Globe, title: "Countries", value: "40+", }, { id: "highlight-4", icon: Award, title: "Awards Won", value: "25+", }, ] // ============================================================================ // COMPONENT // ============================================================================ function About03({ badge = "Our Journey", heading = "From startup to industry leader", description = "We started with a simple idea: make enterprise software accessible to everyone. Today, we're proud to serve millions of users worldwide, but our mission remains the same—democratizing technology for businesses of all sizes.", milestones = defaultMilestones, highlights = defaultHighlights, primaryCta = { text: "View Open Positions", href: "#" }, className, }: About03Props) { return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Highlights */} {highlights && highlights.length > 0 && (

{highlights.map((highlight) => (

{highlight.title}

{highlight.value}

))}

)} {/* Timeline */} {milestones && milestones.length > 0 && (

Our Milestones

{/* Timeline line */}

{milestones.map((milestone, index) => (

{/* Content */}

{milestone.year}

{milestone.title}

{milestone.description}

{/* Spacer for alternating layout */} ))}

)} {/* CTA */} {primaryCta && (

{primaryCta.text}

)}

) } export default About03 export { About03, type About03Props, type MilestoneItem, type HighlightItem, type CtaConfig }