// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats 05 * @description Split layout stats section with image and statistics. * Two-column design with visual imagery and key metrics side by side. * * @slots stats, stats-container, stats-content, stats-header, stats-heading, * stats-description, stats-grid, stats-item, stats-value, stats-label, * stats-image-wrapper, stats-image * @variant split * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatItemConfig { /** Unique identifier for list key */ id: string /** Stat value (e.g., "10M+", "99.9%") */ value: string /** Stat label */ label: string } interface Stats05Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of stats to display */ stats?: StatItemConfig[] /** Image source */ imageSrc?: string /** Image alt text */ imageAlt?: string /** Reverse layout (image on left) */ reversed?: boolean /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: StatItemConfig[] = [ { id: "stat-experience", value: "15+", label: "Years Experience" }, { id: "stat-projects", value: "500+", label: "Projects Delivered" }, { id: "stat-satisfaction", value: "99%", label: "Client Satisfaction" }, { id: "stat-team", value: "50+", label: "Team Members" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Stats05({ heading = "Building digital excellence since 2008", description = "We have consistently delivered exceptional results for our clients across industries, building long-lasting partnerships based on trust and performance.", stats = DEFAULT_STATS, imageSrc = "/assets/placeholders/placeholder-4x3.svg", imageAlt = "Stats illustration", reversed = false, className, idBase, }: Stats05Props) { const headingId = `${idBase ?? "stats-05"}-heading` return (

*:first-child]:order-2" )} > {/* Content Side */}

{heading}

{description && (

{description}

)}

{stat.value}: {stat.label}

{/* Image Side */}

) } export default Stats05 export { Stats05, type Stats05Props, type StatItemConfig }