// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Portfolio 02 * @description A case study showcase with detailed project information. * Great for highlighting key projects with metrics and results. * * @slots portfolio, portfolio-container, portfolio-header, portfolio-badge, * portfolio-heading, portfolio-description, portfolio-list, portfolio-item, * portfolio-item-image, portfolio-item-content, portfolio-item-meta, * portfolio-item-category, portfolio-item-client, portfolio-item-title, * portfolio-item-description, portfolio-metrics, portfolio-metric, * portfolio-metric-value, portfolio-metric-label, portfolio-item-link, * portfolio-cta * @variant case-study * * @registryDependencies button-link badge button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, TrendingUp } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface Metric { /** Unique identifier */ id: string /** Metric label */ label: string /** Metric value */ value: string } interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface CaseStudy { /** Unique identifier */ id: string /** Project title */ title: string /** Client name */ client: string /** Project description */ description: string /** Project category */ category: string /** Project image */ image?: string /** Key metrics */ metrics: Metric[] /** Project URL */ href: string } interface Portfolio02Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Case studies to display */ caseStudies?: CaseStudy[] /** View all CTA */ viewAllCta?: CtaConfig /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultCaseStudies: CaseStudy[] = [ { id: "case-study-1", title: "Scaling E-commerce Revenue", client: "RetailCo", description: "Redesigned the checkout flow and implemented personalized recommendations, resulting in significant revenue growth.", category: "E-commerce", image: "/assets/placeholders/placeholder-4x3.svg", metrics: [ { id: "metric-1-1", label: "Revenue Increase", value: "+156%" }, { id: "metric-1-2", label: "Conversion Rate", value: "+42%" }, { id: "metric-1-3", label: "Cart Abandonment", value: "-38%" }, ], href: "#", }, { id: "case-study-2", title: "Enterprise Dashboard Redesign", client: "TechCorp", description: "Created an intuitive analytics dashboard that reduced time-to-insight and improved user satisfaction.", category: "SaaS", image: "/assets/placeholders/placeholder-4x3.svg", metrics: [ { id: "metric-2-1", label: "User Satisfaction", value: "+89%" }, { id: "metric-2-2", label: "Time on Task", value: "-65%" }, { id: "metric-2-3", label: "Feature Adoption", value: "+73%" }, ], href: "#", }, { id: "case-study-3", title: "Mobile App Launch", client: "HealthStart", description: "Designed and launched a health tracking app that achieved top rankings in the App Store.", category: "Mobile", image: "/assets/placeholders/placeholder-4x3.svg", metrics: [ { id: "metric-3-1", label: "App Downloads", value: "500K+" }, { id: "metric-3-2", label: "App Store Rating", value: "4.8★" }, { id: "metric-3-3", label: "Daily Active Users", value: "120K" }, ], href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Portfolio02({ badge = "Case Studies", heading = "Results that speak for themselves", description = "See how we've helped companies achieve measurable business outcomes.", caseStudies = defaultCaseStudies, viewAllCta = { text: "View all case studies", href: "#" }, className, }: Portfolio02Props) { return (

{/* Header */}

{badge}