// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name About 05 * @description A culture and workplace gallery section with bento grid layout, * showcasing company life, values, and team photos. Perfect for careers pages. * * @slots about, about-container, about-header, about-badge, about-heading, * about-description, about-gallery-grid, about-gallery-item, * about-gallery-image, about-gallery-overlay, about-gallery-caption, * about-values-section, about-values-heading, about-values-grid, * about-value-card, about-value-icon, about-value-title, about-value-text * @variant culture-gallery * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Heart, Rocket, Handshake, Sparkles, type LucideIcon } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface GalleryImageConfig { /** Unique identifier for list key */ id: string /** Image source URL */ src: string /** Alt text */ alt: string /** Optional caption */ caption?: string /** Grid span: 1 = normal, 2 = wide/tall */ span?: 1 | 2 } interface CultureValueConfig { /** Unique identifier for list key */ id: string /** Icon component */ icon: LucideIcon /** Value title */ title: string /** Value description */ description: string } interface About05Props { /** Optional badge displayed above heading */ badge?: string /** Main heading text */ heading?: string /** Description text */ description?: string /** Gallery images */ images?: GalleryImageConfig[] /** Culture values */ values?: CultureValueConfig[] /** Values section heading */ valuesHeading?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_IMAGES: GalleryImageConfig[] = [ { id: "img-collab", src: "/assets/placeholders/placeholder-16x9.svg", alt: "Team collaboration", caption: "Weekly team standup", span: 2, }, { id: "img-office", src: "/assets/placeholders/placeholder-1x1.svg", alt: "Office space", caption: "Our NYC office", }, { id: "img-event", src: "/assets/placeholders/placeholder-1x1.svg", alt: "Team event", caption: "Annual retreat", }, { id: "img-workspace", src: "/assets/placeholders/placeholder-1x1.svg", alt: "Workspace", caption: "Creative corner", }, { id: "img-party", src: "/assets/placeholders/placeholder-16x9.svg", alt: "Company celebration", caption: "Product launch party", span: 2, }, ] const DEFAULT_VALUES: CultureValueConfig[] = [ { id: "value-people", icon: Heart, title: "People First", description: "We prioritize our team's wellbeing and growth above all else.", }, { id: "value-fast", icon: Rocket, title: "Move Fast", description: "We ship early, learn quickly, and iterate constantly.", }, { id: "value-trust", icon: Handshake, title: "Trust & Transparency", description: "Open communication and honest feedback drive our success.", }, { id: "value-excellence", icon: Sparkles, title: "Excellence", description: "We hold ourselves to the highest standards in everything we do.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function About05({ badge = "Life at Company", heading = "Where great work happens", description = "We believe that the best products come from happy, empowered teams. Our culture is built on trust, creativity, and a shared passion for solving meaningful problems.", images = DEFAULT_IMAGES, values = DEFAULT_VALUES, valuesHeading = "Our Culture Values", className, idBase, }: About05Props) { const headingId = `${idBase ?? "about-05"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Gallery Grid - Bento Layout */} {images && images.length > 0 && (

{images.map((image) => (

{image.caption && (

{image.caption}

)}

))}

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

{valuesHeading && (

{valuesHeading}

)}

{values.map((value) => { const Icon = value.icon return (

{value.title}

{value.description}

) })}

)}

) } export default About05 export { About05, type About05Props, type GalleryImageConfig, type CultureValueConfig, }