// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Portfolio 06 * @description Horizontal scroll portfolio with large cards. * Swipe through projects in a cinematic presentation. * * @slots portfolio, portfolio-container, portfolio-header, portfolio-badge, * portfolio-heading, portfolio-description, portfolio-scroll, * portfolio-item, portfolio-image, portfolio-content, portfolio-category, * portfolio-title, portfolio-excerpt, portfolio-link * @variant horizontal-scroll * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface PortfolioProject { id: string title: string category: string excerpt: string href: string } interface Portfolio06Props { badge?: string heading?: string description?: string projects?: PortfolioProject[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultProjects: PortfolioProject[] = [ { id: "proj-1", title: "Digital Innovation Lab", category: "Strategy", excerpt: "Transforming business through digital innovation and design thinking.", href: "#" }, { id: "proj-2", title: "Fashion E-Commerce", category: "E-Commerce", excerpt: "Luxury shopping experience with personalized recommendations.", href: "#" }, { id: "proj-3", title: "Smart City Platform", category: "IoT", excerpt: "Connected infrastructure management for urban environments.", href: "#" }, { id: "proj-4", title: "Healthcare Portal", category: "Healthcare", excerpt: "Patient-centered care coordination platform.", href: "#" }, { id: "proj-5", title: "Financial Dashboard", category: "FinTech", excerpt: "Real-time analytics for investment decisions.", href: "#" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Portfolio06({ badge = "Featured Work", heading = "Selected projects", description = "Scroll through our latest work and discover how we help brands achieve their goals.", projects = defaultProjects, className, idBase = "portfolio-06", }: Portfolio06Props) { const headingId = `${idBase}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Horizontal Scroll */}

{projects.map((project) => ( {/* Image */}

{/* Content */}

{project.category}

{project.title}

{project.excerpt}

View Case Study

))}

) } export default Portfolio06 export { Portfolio06, type Portfolio06Props }