// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Video 02 * @description A split layout video section with feature list alongside. * Great for feature highlights with video demonstrations. * * @slots video, video-container, video-content, video-badge, video-heading, * video-description, video-features, video-feature, video-feature-icon, * video-cta, video-player, video-thumbnail, video-play-button, video-iframe * @variant split * * @registryDependencies button-link badge button * @dependencies lucide-react */ import * as React from "react" import { Play, Check, ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface VideoFeature { /** Unique identifier */ id: string /** Feature text */ text: string } interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface Video02Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Features list */ features?: VideoFeature[] /** Video thumbnail URL */ thumbnail?: string /** Video embed URL */ videoUrl?: string /** CTA button config */ cta?: CtaConfig /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeatures: VideoFeature[] = [ { id: "feature-1", text: "Intuitive drag-and-drop interface" }, { id: "feature-2", text: "Real-time collaboration with your team" }, { id: "feature-3", text: "Automated workflows save hours of work" }, { id: "feature-4", text: "Enterprise-grade security and compliance" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Video02({ badge = "Product Tour", heading = "Built for modern teams", description = "Discover how our platform helps thousands of teams work smarter, not harder.", features = defaultFeatures, thumbnail = "/assets/placeholders/placeholder-4x3.svg", videoUrl = "https://www.youtube.com/embed/Bo9IHicdCtE?rel=0", cta = { text: "Get started free", href: "#" }, className, }: Video02Props) { const [isPlaying, setIsPlaying] = React.useState(false) return (

{/* Content */}

{badge}

{heading}

{description && (

{description}

)} {/* Features List */}

{feature.text}

{/* CTA */}

{cta.text}

{/* Video */}

{!isPlaying ? ( <> {/* Thumbnail Overlay */}

) : (