Spaces:
Running
Running
| import React, { useState, useEffect } from 'react'; | |
| import { motion, AnimatePresence } from 'framer-motion'; | |
| import { X, Hand, Move, Palette, Sparkles, CheckCircle2 } from 'lucide-react'; | |
| export function UserGuideModal() { | |
| const [isOpen, setIsOpen] = useState(false); | |
| const [step, setStep] = useState(0); | |
| useEffect(() => { | |
| const hasSeenGuide = localStorage.getItem('neural_ai_has_seen_guide'); | |
| if (!hasSeenGuide) { | |
| // Delay showing it slightly so the page loads first | |
| const timer = setTimeout(() => setIsOpen(true), 1000); | |
| return () => clearTimeout(timer); | |
| } | |
| }, []); | |
| const handleClose = () => { | |
| setIsOpen(false); | |
| localStorage.setItem('neural_ai_has_seen_guide', 'true'); | |
| }; | |
| const nextStep = () => { | |
| if (step < steps.length - 1) { | |
| setStep(step + 1); | |
| } else { | |
| handleClose(); | |
| } | |
| }; | |
| const steps = [ | |
| { | |
| title: "Welcome to Neural AI! 🚀", | |
| description: "Let's take a quick tour of how to build your perfect website in minutes.", | |
| icon: <Sparkles className="w-12 h-12 text-yellow-500 mx-auto mb-4" /> | |
| }, | |
| { | |
| title: "Adding Components 🧱", | |
| description: "Open the Components tab to add sections, containers, text, and buttons directly to your canvas.", | |
| icon: <Hand className="w-12 h-12 text-yellow-500 mx-auto mb-4" /> | |
| }, | |
| { | |
| title: "Moving Things Around ↕️", | |
| description: "Tap any component on your canvas to open its action menu. Use the Up and Down arrows to instantly reposition it without dragging!", | |
| icon: <Move className="w-12 h-12 text-yellow-500 mx-auto mb-4" /> | |
| }, | |
| { | |
| title: "Customizing Properties 🎨", | |
| description: "With a component selected, open the Properties panel to change its colors, spacing, borders, and text content.", | |
| icon: <Palette className="w-12 h-12 text-yellow-500 mx-auto mb-4" /> | |
| }, | |
| { | |
| title: "You're all set! 🎉", | |
| description: "Tap the AI Optimize button at the top if you ever need AI to polish your layout automatically.", | |
| icon: <CheckCircle2 className="w-12 h-12 text-green-500 mx-auto mb-4" /> | |
| } | |
| ]; | |
| return ( | |
| <AnimatePresence> | |
| {isOpen && ( | |
| <> | |
| <motion.div | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| exit={{ opacity: 0 }} | |
| className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[999]" | |
| onClick={handleClose} | |
| /> | |
| <motion.div | |
| initial={{ opacity: 0, scale: 0.9, y: 20 }} | |
| animate={{ opacity: 1, scale: 1, y: 0 }} | |
| exit={{ opacity: 0, scale: 0.9, y: 20 }} | |
| className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-sm bg-zinc-950 border border-yellow-500/20 rounded-2xl shadow-2xl p-6 z-[1000] flex flex-col items-center text-center" | |
| > | |
| <button | |
| onClick={handleClose} | |
| className="absolute top-4 right-4 text-white/40 hover:text-white" | |
| > | |
| <X size={20} /> | |
| </button> | |
| <AnimatePresence mode="wait"> | |
| <motion.div | |
| key={step} | |
| initial={{ opacity: 0, x: 20 }} | |
| animate={{ opacity: 1, x: 0 }} | |
| exit={{ opacity: 0, x: -20 }} | |
| className="w-full py-4" | |
| > | |
| {steps[step].icon} | |
| <h3 className="text-xl font-bold text-white mb-2">{steps[step].title}</h3> | |
| <p className="text-white/60 text-sm leading-relaxed"> | |
| {steps[step].description} | |
| </p> | |
| </motion.div> | |
| </AnimatePresence> | |
| {/* Dots */} | |
| <div className="flex gap-2 mb-6"> | |
| {steps.map((_, i) => ( | |
| <div | |
| key={i} | |
| className={`w-2 h-2 rounded-full transition-colors ${ | |
| i === step ? 'bg-yellow-500' : 'bg-white/20' | |
| }`} | |
| /> | |
| ))} | |
| </div> | |
| <button | |
| onClick={nextStep} | |
| className="w-full bg-yellow-500 text-black font-bold py-3 rounded-xl hover:bg-yellow-400 transition-colors" | |
| > | |
| {step === steps.length - 1 ? 'Get Started' : 'Next'} | |
| </button> | |
| </motion.div> | |
| </> | |
| )} | |
| </AnimatePresence> | |
| ); | |
| } | |