"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { fadeIn, scaleIn, buttonTapTarget } from "@/lib/animations" import { Check, ChevronLeft, ChevronRight, User, Palette, Bell, Sparkles } from "lucide-react" const steps = [ { id: 1, label: "Profile", icon: User }, { id: 2, label: "Interests", icon: Palette }, { id: 3, label: "Preferences", icon: Bell }, ] const interests = ["Design", "Technology", "Business", "Music", "Sports", "Art", "Travel", "Science", "Fitness", "Food"] const stepVariants = { enter: (dir: number) => ({ opacity: 0, x: dir > 0 ? 40 : -40 }), center: { opacity: 1, x: 0 }, exit: (dir: number) => ({ opacity: 0, x: dir > 0 ? -40 : 40 }), } export default function WelcomeOnboarding() { const [step, setStep] = useState(1) const [direction, setDirection] = useState(1) const [selectedInterests, setSelectedInterests] = useState([]) const goNext = () => { setDirection(1) setStep((s) => Math.min(s + 1, steps.length)) } const goBack = () => { setDirection(-1) setStep((s) => Math.max(s - 1, 1)) } const toggleInterest = (name: string) => { setSelectedInterests((prev) => prev.includes(name) ? prev.filter((i) => i !== name) : [...prev, name] ) } return (

{steps.map((s, i) => { const Icon = s.icon const isActive = step === s.id const isComplete = step > s.id return (

{isComplete ? : }

{i < steps.length - 1 && (

s.id ? "bg-primary" : "bg-border"}`} /> )}

) })}

{step === 1 && "Set up your profile"} {step === 2 && "Pick your interests"} {step === 3 && "Your preferences"} {step === 1 && "Add a photo and tell us your name."} {step === 2 && "Select topics you care about."} {step === 3 && "Choose your notification settings."} {step === 1 && ( <>

Full name

Bio

)} {step === 2 && (

{interests.map((item) => ( ))}

)} {step === 3 && (

Notifications {[ { label: "Weekly newsletter", desc: "Get tips and updates" }, { label: "Product updates", desc: "New features and releases" }, { label: "Community messages", desc: "Direct messages from members" }, ].map((item) => (

{item.label}

{item.desc}

))}

)}

Step {step} of 3 {step < 3 ? ( ) : ( )}

) }

Welcome Onboarding