// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Welcome 03 * @description A full-screen welcome with video/image and feature highlights. * Perfect for product-focused onboarding. * * @slots welcome, welcome-container, welcome-content, welcome-badge, * welcome-heading, welcome-description, welcome-features, * welcome-feature-item, welcome-feature-icon, welcome-actions, * welcome-primary-cta, welcome-secondary-cta, welcome-media, * welcome-thumbnail, welcome-play-btn, welcome-stat * @variant hero * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { ArrowRight, Play, Check, Sparkles } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Feature { /** Unique identifier */ id: string /** Feature text */ text: string } interface StatItem { /** Unique identifier */ id: string /** Stat value */ value: string /** Stat label */ label: string } interface Welcome03Props { /** Badge text */ badge?: string /** Main heading */ heading?: string /** Description text */ description?: string /** Feature list */ features?: Feature[] /** Video thumbnail URL */ thumbnailUrl?: string /** Video URL */ videoUrl?: string /** Stats to display */ stats?: StatItem[] /** Primary CTA */ primaryAction?: { label: string; onClick?: () => void } /** Secondary CTA */ secondaryAction?: { label: string; onClick?: () => void } /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeatures: Feature[] = [ { id: "feature-1", text: "Collaborate with your team in real-time" }, { id: "feature-2", text: "Track progress with visual dashboards" }, { id: "feature-3", text: "Integrate with 100+ tools you already use" }, { id: "feature-4", text: "Customize workflows to match your process" }, ] const defaultStats: StatItem[] = [ { id: "stat-1", value: "10k+", label: "Active users" }, { id: "stat-2", value: "4.9", label: "User rating" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Welcome03({ badge = "Getting Started", heading = "Let's build something amazing together", description = "Take a quick tour of the platform and discover how we can help you work smarter, not harder.", features = defaultFeatures, thumbnailUrl, videoUrl, stats = defaultStats, primaryAction = { label: "Start the tour" }, secondaryAction = { label: "I'll explore on my own" }, className, }: Welcome03Props) { return (

{/* Content */}

{heading}

{description}

{/* Features */}

{feature.text}

{/* Actions */}

{/* Video/Image */}

{/* Play Button */} {videoUrl && ( )}

{/* Floating Stats */} {stats[0] && (

{stats[0].value}

{stats[0].label}

)} {stats[1] && (

{stats[1].value}

{stats[1].label}

)}

) } export default Welcome03 export { Welcome03, type Welcome03Props, type Feature, type StatItem }