// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Portfolio 03 * @description A full-width hero slider portfolio with navigation. * Shows one project at a time with navigation dots and arrows. * * @slots portfolio, portfolio-container, portfolio-header, portfolio-heading, * portfolio-nav, portfolio-prev, portfolio-next, portfolio-slider, * portfolio-image, portfolio-content, portfolio-category, portfolio-title, * portfolio-description, portfolio-metrics, portfolio-metric, * portfolio-metric-value, portfolio-metric-label, portfolio-cta, * portfolio-dots, portfolio-dot * @variant slider * * @registryDependencies button-link button badge * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface Metric { /** Unique identifier */ id: string /** Metric label */ label: string /** Metric value */ value: string } interface Project { /** Unique identifier */ id: string /** Project title */ title: string /** Project category */ category: string /** Project description */ description: string /** Project image */ image: string /** Project link */ href?: string /** Key metrics */ metrics?: Metric[] } interface Portfolio03Props { /** Section heading */ heading?: string /** Projects array */ projects?: Project[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultProjects: Project[] = [ { id: "project-1", title: "E-commerce Platform Redesign", category: "Web Design", description: "A complete redesign of an e-commerce platform focusing on user experience and conversion optimization. The new design resulted in a 45% increase in sales.", image: "/assets/placeholders/placeholder-16x9.svg", href: "#", metrics: [ { id: "metric-1-1", label: "Conversion Rate", value: "+45%" }, { id: "metric-1-2", label: "Page Load Time", value: "-60%" }, ], }, { id: "project-2", title: "Mobile Banking App", category: "Mobile App", description: "A modern mobile banking application with advanced security features and intuitive interface design. Used by over 2 million customers.", image: "/assets/placeholders/placeholder-16x9.svg", href: "#", metrics: [ { id: "metric-2-1", label: "Active Users", value: "2M+" }, { id: "metric-2-2", label: "App Store Rating", value: "4.9" }, ], }, { id: "project-3", title: "SaaS Dashboard", category: "Product Design", description: "A comprehensive dashboard for a SaaS analytics platform. Designed for power users while maintaining accessibility for beginners.", image: "/assets/placeholders/placeholder-16x9.svg", href: "#", metrics: [ { id: "metric-3-1", label: "Time Saved", value: "15h/week" }, { id: "metric-3-2", label: "User Satisfaction", value: "98%" }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Portfolio03({ heading = "Featured Work", projects = defaultProjects, className, }: Portfolio03Props) { const [activeIndex, setActiveIndex] = React.useState(0) const goToPrevious = () => { setActiveIndex((prev) => prev === 0 ? projects.length - 1 : prev - 1 ) } const goToNext = () => { setActiveIndex((prev) => prev === projects.length - 1 ? 0 : prev + 1 ) } const activeProject = projects[activeIndex] return (

{/* Header */}

{heading}

{/* Navigation */}

{/* Project Slider */}

{/* Image */}

{/* Content */}

{activeProject?.category}

{activeProject?.title}

{activeProject?.description}

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

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

{metric.value}

{metric.label}

))}

)} {/* CTA */} {activeProject?.href && (

View Case Study

)}

{/* Dots */}

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

) } export default Portfolio03 export { Portfolio03, type Portfolio03Props, type Project, type Metric }