// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name About 01 * @description A clean, centered about section with mission statement, * key values grid, and optional team photo. Perfect for company pages. * * @slots about, about-container, about-header, about-badge, about-heading, * about-description, about-image, about-values, about-value-item, * about-value-icon, about-value-title, about-value-description * @variant centered * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Target, Heart, Lightbulb, Users } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface ValueItem { /** Unique identifier */ id: string /** Icon component */ icon: React.ComponentType<{ className?: string "aria-hidden"?: boolean | "true" | "false" focusable?: "true" | "false" }> /** Value title */ title: string /** Value description */ description: string } interface ImageConfig { /** Image source URL */ src: string /** Image alt text */ alt: string } interface About01Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text */ heading?: string /** Mission statement or main description */ description?: string /** Company values displayed in a grid */ values?: ValueItem[] /** Optional image (team photo or office) */ image?: ImageConfig /** Additional CSS classes for the section */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultValues: ValueItem[] = [ { id: "value-1", icon: Target, title: "Our Mission", description: "To empower teams with tools that make collaboration effortless and productive.", }, { id: "value-2", icon: Heart, title: "Our Values", description: "We believe in transparency, innovation, and putting our customers first in everything we do.", }, { id: "value-3", icon: Lightbulb, title: "Our Vision", description: "A world where every team has access to enterprise-grade tools, regardless of size.", }, { id: "value-4", icon: Users, title: "Our Culture", description: "We foster an inclusive environment where diverse perspectives drive better solutions.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function About01({ badge = "About Us", heading = "We're building the future of work", description = "Founded in 2020, we've grown from a small startup to a global team united by a single mission: making work more human. We believe that when teams have the right tools, they can achieve extraordinary things.", values = defaultValues, image, className, }: About01Props) { return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Optional Image */} {image && (

)} {/* Values Grid */} {values && values.length > 0 && (

{values.map((value) => (

{value.title}

{value.description}

))}

)}

) } export default About01 export { About01, type About01Props, type ValueItem, type ImageConfig }