"use client"; import * as React from "react"; import Link from "next/link"; import { cn } from "@/lib/utils"; /* ── types ───────────────────────────────────────────────────── */ type Action = { href: string; label: string }; interface Stat { /** Numeric / main value, e.g. "99.9" */ value: string; /** Unit or suffix shown beside the value, e.g. "%", "X" */ unit?: string; /** Label text rendered below the value */ label: React.ReactNode; } interface TrustedBySection { logos: React.ReactNode[]; } export interface SplitHeroSectionProps { /** Main headline — left-aligned */ title: React.ReactNode; /** Subtitle / description text */ description?: string; /** Primary CTA button */ primaryAction?: Action; /** Secondary CTA button */ secondaryAction?: Action; /** Key metrics displayed below the CTAs */ stats?: Stat[]; /** Trusted-by logo strip */ trustedBy?: TrustedBySection; className?: string; } /* ── component ───────────────────────────────────────────────── */ export function SplitHeroSection({ title, description, primaryAction, secondaryAction, stats, trustedBy, className, }: SplitHeroSectionProps) { return (

{/* ── left column ──────────────────────────── */}

{title}

{description && (

{description}

)} {(primaryAction || secondaryAction) && (

{primaryAction && ( {primaryAction.label} )} {secondaryAction && ( {secondaryAction.label} )}

)}

{/* ── stats ──────────────────────────── */} {stats && stats.length > 0 && (

{stats.map((stat, idx) => (

{stat.value}{" "} {stat.unit && ( {stat.unit} )}

{stat.label}

))}

)}

{/* ── right column: stacked overlapping skeleton cards ── */}

{/* ── Card 1 (back) — analytics skeleton ── */}

{/* header */}

{/* body */}

{/* progress bar */}

{/* skeleton rows */}

{/* footer */}

{/* ── Card 2 (front) — metrics skeleton, overlapping ── */}

{/* header */}

{/* body */}

{/* metric columns */}

{/* divider */}

{/* list items */}

{/* ── trusted-by logo strip ──────────────────── */} {trustedBy && trustedBy.logos.length > 0 && (

{trustedBy.logos.map((logo, idx) => (

{logo}

))}

)}

); }