"use client" /** * @name Welcome 06 * @description Video introduction welcome with play button overlay. * Engaging visual welcome with embedded video content. * * @slots welcome, welcome-container, welcome-content, welcome-badge, * welcome-heading, welcome-description, welcome-video, * welcome-thumbnail, welcome-play-button, welcome-iframe, welcome-cta, * welcome-stats, welcome-stat, welcome-stat-value, welcome-stat-label * @variant video-intro * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { Play, ArrowRight } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Stat { id: string /** Stat value */ value: string /** Stat label */ label: string } interface Welcome06Props { /** Section badge */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Video thumbnail URL */ thumbnailUrl?: string /** Video embed URL */ videoUrl?: string /** Stats to display */ stats?: Stat[] /** CTA button text */ ctaText?: string /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: Stat[] = [ { id: "stat-1", value: "10K+", label: "Active Users" }, { id: "stat-2", value: "99.9%", label: "Uptime" }, { id: "stat-3", value: "24/7", label: "Support" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Welcome06({ badge = "Watch Demo", heading = "See how it works", description = "Take a quick tour of our platform and discover how we can help you achieve your goals faster.", thumbnailUrl = "/assets/placeholders/placeholder-16x9.svg", videoUrl = "https://www.youtube.com/embed/Bo9IHicdCtE?rel=0", stats = defaultStats, ctaText = "Start Free Trial", className, idBase = "welcome-06", }: Welcome06Props) { const [isPlaying, setIsPlaying] = React.useState(false) const headingId = `${idBase}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Video */}

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

{/* Play Button */}

) : (