"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { slideUp, scaleIn, buttonTap } from "@/lib/animations" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" import { ArrowRight, ArrowLeft, SkipForward, Check, LayoutDashboard, CreditCard, Users, Settings } from "lucide-react" interface TourStep { title: string description: string icon: typeof LayoutDashboard } const steps: TourStep[] = [ { title: "Dashboard Overview", description: "Get a bird's eye view of your key metrics, recent activity, and performance indicators all in one place.", icon: LayoutDashboard }, { title: "Payment Management", description: "Accept payments, manage invoices, and track transactions with support for multiple payment gateways.", icon: CreditCard }, { title: "Team Collaboration", description: "Invite team members, set permissions, and collaborate in real-time on projects and tasks.", icon: Users }, { title: "Customize Settings", description: "Configure your preferences, notification settings, and integration options to tailor the experience.", icon: Settings }, ] export default function OnboardingTour() { const [currentStep, setCurrentStep] = useState(0) const [completed, setCompleted] = useState(false) const handleNext = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { setCompleted(true) } } const handlePrev = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } const handleSkip = () => { setCompleted(true) } const handleRestart = () => { setCurrentStep(0) setCompleted(false) } const Icon = steps[currentStep].icon if (completed) { return (

Tour Complete! You're all set to start using the platform.

) } return (

Step {currentStep + 1} of {steps.length}

{steps.map((_, i) => (

))}

{steps[currentStep].title}

{steps[currentStep].description}

) }

Onboarding Tour

Dashboard Overview

Dashboard Overview