// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name About 04 * @description Founder spotlight section with large portraits, detailed bios, * and company story. Perfect for startup and leadership pages. * * @slots about, about-container, about-header, about-badge, about-heading, * about-description, about-founders-grid, about-founder-card, * about-founder-image, about-founder-content, about-founder-name, * about-founder-role, about-founder-bio, about-founder-quote, * about-story-section, about-story-heading, about-story-text * @variant founders * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface FounderConfig { /** Unique identifier for list key */ id: string /** Founder name */ name: string /** Role/title */ role: string /** Profile image URL */ image: string /** Bio paragraphs */ bio: string[] /** Featured quote */ quote?: string } interface StoryConfig { /** Story heading */ heading: string /** Story paragraphs */ paragraphs: string[] } interface About04Props { /** Optional badge displayed above heading */ badge?: string /** Main heading text */ heading?: string /** Description text */ description?: string /** Founders data */ founders?: FounderConfig[] /** Company story section */ story?: StoryConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_FOUNDERS: FounderConfig[] = [ { id: "founder-alex", name: "Alexandra Rivera", role: "Co-founder & CEO", image: "/assets/placeholders/avatar-placeholder.svg", bio: [ "Alexandra brings over 15 years of experience in enterprise software, having previously led product teams at Salesforce and Microsoft.", "She holds an MBA from Stanford and a Computer Science degree from MIT. Her vision for democratizing enterprise tools drives the company's mission.", ], quote: "We started this company because we believed every business deserves access to world-class tools, not just the Fortune 500.", }, { id: "founder-michael", name: "Michael Zhang", role: "Co-founder & CTO", image: "/assets/placeholders/avatar-placeholder.svg", bio: [ "Michael is a serial entrepreneur and former Principal Engineer at Amazon Web Services, where he architected systems handling millions of requests per second.", "He's passionate about building scalable, reliable infrastructure and has authored multiple patents in distributed systems.", ], quote: "Technology should be invisible. Our job is to make powerful tools feel effortless.", }, ] const DEFAULT_STORY: StoryConfig = { heading: "Our Story", paragraphs: [ "In 2020, Alexandra and Michael met at a tech conference and discovered a shared frustration: small businesses were being left behind by enterprise software that was either too expensive or too complex to use.", "They decided to change that. Working out of a small office in San Francisco, they built the first version of our platform in just six months, driven by the belief that powerful tools should be accessible to everyone.", "Today, we serve over 50,000 businesses worldwide, but our mission remains the same: leveling the playing field for businesses of all sizes.", ], } // ============================================================================ // COMPONENT // ============================================================================ function About04({ badge = "Our Founders", heading = "Built by industry veterans", description = "Our founders combined decades of experience at top tech companies with a shared vision to make enterprise-grade tools accessible to businesses of all sizes.", founders = DEFAULT_FOUNDERS, story = DEFAULT_STORY, className, idBase, }: About04Props) { const headingId = `${idBase ?? "about-04"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Founders Grid */} {founders && founders.length > 0 && (

{founders.map((founder) => (

{founder.name}

{founder.role}

{founder.bio.map((paragraph, pIndex) => (

{paragraph}

))}

{/* Quote */} {founder.quote && (

)}

))}

)} {/* Company Story */} {story && (

{story.heading}

{story.paragraphs.map((paragraph, index) => (

{paragraph}

))}

)}

) } export default About04 export { About04, type About04Props, type FounderConfig, type StoryConfig }