// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Portfolio 07 * @description Split screen portfolio with image and details. * Alternating layout for visual interest with project metrics. * * @slots portfolio, portfolio-container, portfolio-header, portfolio-badge, * portfolio-heading, portfolio-description, portfolio-projects, * portfolio-item, portfolio-image, portfolio-content, portfolio-category, * portfolio-title, portfolio-excerpt, portfolio-metrics, portfolio-metric, * portfolio-metric-value, portfolio-metric-label, portfolio-link * @variant split-screen * * @registryDependencies badge button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ProjectMetric { id: string value: string label: string } interface PortfolioProject { id: string title: string category: string excerpt: string metrics?: ProjectMetric[] href: string } interface Portfolio07Props { badge?: string heading?: string description?: string projects?: PortfolioProject[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultProjects: PortfolioProject[] = [ { id: "proj-1", title: "Retail Analytics Platform", category: "Data Visualization", excerpt: "A comprehensive analytics dashboard helping retailers understand customer behavior, optimize inventory, and increase sales through data-driven insights.", metrics: [ { id: "metric-1", value: "+45%", label: "Sales Growth" }, { id: "metric-2", value: "2.5x", label: "ROI Increase" }, { id: "metric-3", value: "-30%", label: "Inventory Waste" }, ], href: "#", }, { id: "proj-2", title: "Healthcare Mobile App", category: "Mobile Development", excerpt: "Patient-centered mobile application for managing health records, scheduling appointments, and communicating with healthcare providers securely.", metrics: [ { id: "metric-4", value: "500K+", label: "Downloads" }, { id: "metric-5", value: "4.8", label: "App Rating" }, { id: "metric-6", value: "92%", label: "User Retention" }, ], href: "#", }, { id: "proj-3", title: "FinTech Trading Platform", category: "Web Application", excerpt: "High-performance trading platform with real-time market data, advanced charting tools, and seamless order execution for professional traders.", metrics: [ { id: "metric-7", value: "$2B+", label: "Daily Volume" }, { id: "metric-8", value: "<50ms", label: "Latency" }, { id: "metric-9", value: "99.99%", label: "Uptime" }, ], href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Portfolio07({ badge = "Case Studies", heading = "Impactful results", description = "See how we've helped businesses transform through design and technology.", projects = defaultProjects, className, idBase = "portfolio-07", }: Portfolio07Props) { const headingId = `${idBase}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Projects */}

{projects.map((project, index) => (

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

{/* Content */}

{project.category}

{project.title}

{project.excerpt}

{/* Metrics */} {project.metrics && project.metrics.length > 0 && (

{project.metrics.map((metric) => (

{metric.value}

{metric.label}

))}

)} View Case Study

))}

) } export default Portfolio07 export { Portfolio07, type Portfolio07Props }