// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 02 * @description An alternating layout with image and text in a zigzag pattern. * Perfect for detailed feature showcases with visual demonstrations. * * @slots features, features-container, features-header, features-heading, * features-description, features-list, features-item, features-item-content, * features-item-title, features-item-description, features-item-cta, * features-item-image * @variant alternating * * @registryDependencies button-link button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Unique identifier for list key */ id: string /** Link text */ text: string /** Link destination */ href: string } interface ImageConfig { /** Image source URL */ src: string /** Alt text for accessibility */ alt: string } interface FeatureItem { /** Unique identifier for list key */ id: string /** Feature title */ title: string /** Feature description */ description: string /** Image configuration */ image: ImageConfig /** Optional CTA link */ cta?: CtaConfig } interface Features02Props { /** Main section heading */ heading?: string /** Section description */ description?: string /** Array of features to display */ features?: FeatureItem[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeatures: FeatureItem[] = [ { id: "build-faster", title: "Build faster with pre-made components", description: "Stop building from scratch. Our library of production-ready components lets you focus on what makes your product unique. Each component is fully tested and optimized for performance.", image: { src: "/assets/placeholders/placeholder-3x2.svg", alt: "Dashboard components screenshot", }, cta: { id: "explore-components", text: "Explore components", href: "#", }, }, { id: "customize", title: "Customize to match your brand", description: "Every component is fully customizable. Change colors, typography, and spacing to match your design system perfectly. Use CSS variables or Tailwind config to maintain consistency.", image: { src: "/assets/placeholders/placeholder-3x2.svg", alt: "Customization options interface", }, cta: { id: "view-theming", text: "View theming guide", href: "#", }, }, { id: "responsive", title: "Responsive out of the box", description: "All components are designed mobile-first and look great on any screen size. No extra work required. We handle the responsive breakpoints so you can focus on building features.", image: { src: "/assets/placeholders/placeholder-3x2.svg", alt: "Responsive design across devices", }, cta: { id: "see-examples", text: "See examples", href: "#", }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Features02({ heading = "Why developers love us", description = "Built by developers, for developers. We understand your workflow and designed every component to integrate seamlessly.", features = defaultFeatures, className, idBase, }: Features02Props) { const headingId = `${idBase ?? "features-02"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Alternating Features */}

{features.map((feature, index) => (

{/* Content */}

{feature.title}

{feature.description}

{feature.cta && ( {feature.cta.text} )}

{/* Image */}

))}

) } export default Features02 export { Features02, type Features02Props, type FeatureItem, type CtaConfig, type ImageConfig }