"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { ArrowRight, Check, Star, Users } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; interface Feature { id: string; text: string; } interface SocialProof { userCount?: string; rating?: number; ratingCount?: string; } interface ButtonConfig { label: string; href: string; variant?: "default" | "ghost" | "outline"; } export interface Onboarding2Props { badge?: string; heading?: string; description?: string; features?: Feature[]; image?: { src: string; alt: string; }; socialProof?: SocialProof; buttons?: ButtonConfig[]; labels?: { users?: string; reviews?: string; }; displayPosition?: "left" | "right"; className?: string; } export const onboarding2Demo: Onboarding2Props = { badge: "Getting Started", heading: "Welcome to your new workspace", description: "Set up your account in minutes and start collaborating with your team right away.", features: [ { id: "1", text: "Unlimited projects and tasks" }, { id: "2", text: "Real-time collaboration" }, { id: "3", text: "Advanced analytics and reporting" }, { id: "4", text: "24/7 priority support" }, ], image: { src: "https://images.unsplash.com/photo-1761839256545-4268b03606c0?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", alt: "Dashboard preview", }, socialProof: { userCount: "50,000+", rating: 4.9, ratingCount: "2,000+", }, buttons: [ { label: "Continue Setup", href: "#", variant: "default" }, { label: "Skip for now", href: "#", variant: "ghost" }, ], labels: { users: "active users", reviews: "reviews", }, }; export function Onboarding2({ badge, heading, description, features = [], image, socialProof, buttons = [], labels = {}, displayPosition = "left", className, }: Onboarding2Props) { const mergedLabels = { ...onboarding2Demo.labels, ...labels }; return (

{/* Content */}

{badge && ( {badge} )} {heading && (

{heading}

)} {description && (

{description}

)} {/* Features list */} {features.length > 0 && (

{feature.text}

)} {/* Social proof */} {socialProof && (

{socialProof.userCount && (

{socialProof.userCount} {" "} {mergedLabels.users}

)} {socialProof.rating && (

{socialProof.rating} {" "} ({socialProof.ratingCount} {mergedLabels.reviews})

)}

)} {/* Buttons */} {buttons.length > 0 && (

{buttons.map((button, index) => ( ))}

)}

{/* Image */} {image && (

)}

); }