// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Portfolio 01 * @description A portfolio grid showcasing case studies and projects. * Great for agencies, freelancers, and creative professionals. * * @slots portfolio, portfolio-container, portfolio-header, portfolio-badge, * portfolio-heading, portfolio-description, portfolio-grid, portfolio-item, * portfolio-item-image, portfolio-item-content, portfolio-item-category, * portfolio-item-title, portfolio-item-description, portfolio-item-link, * portfolio-cta * @variant grid * * @registryDependencies button-link badge button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, ExternalLink } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface Project { /** Unique identifier */ id: string /** Project title */ title: string /** Project description */ description: string /** Project category */ category: string /** Project image */ image?: string /** Project URL */ href: string } interface Portfolio01Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Projects to display */ projects?: Project[] /** View all CTA */ viewAllCta?: CtaConfig /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultProjects: Project[] = [ { id: "project-1", title: "E-commerce Platform Redesign", description: "A complete redesign of the shopping experience for a major retailer.", category: "Web Design", image: "/assets/placeholders/placeholder-4x3.svg", href: "#", }, { id: "project-2", title: "FinTech Mobile App", description: "A mobile banking app with intuitive UX and robust security features.", category: "Mobile App", image: "/assets/placeholders/placeholder-4x3.svg", href: "#", }, { id: "project-3", title: "SaaS Dashboard", description: "Analytics dashboard for a B2B software company.", category: "Product Design", image: "/assets/placeholders/placeholder-4x3.svg", href: "#", }, { id: "project-4", title: "Brand Identity System", description: "Complete brand overhaul including logo, colors, and guidelines.", category: "Branding", image: "/assets/placeholders/placeholder-4x3.svg", href: "#", }, { id: "project-5", title: "Healthcare Portal", description: "Patient portal with appointment scheduling and health records.", category: "Web App", image: "/assets/placeholders/placeholder-4x3.svg", href: "#", }, { id: "project-6", title: "Marketing Website", description: "High-converting landing pages for a startup launch.", category: "Web Design", image: "/assets/placeholders/placeholder-4x3.svg", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Portfolio01({ badge = "Our Work", heading = "Featured projects", description = "Explore our latest work and see how we've helped businesses achieve their goals.", projects = defaultProjects, viewAllCta = { text: "View all projects", href: "#" }, className, }: Portfolio01Props) { return (

{/* Header */}

{badge}