import { useState, useEffect } from "react";
import { motion, AnimatePresence, PanInfo } from "motion/react";
import {
Wallet,
Sparkles,
PiggyBank,
Users,
Shield,
ArrowRight,
ChevronLeft,
ChevronRight,
Coins,
TrendingUp,
Lock,
Smartphone,
Target,
RefreshCw
} from "lucide-react";
import { Button } from "./ui/button";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import enamelLogo from 'figma:asset/2e2e3fad7673e8eef9a255215dd6ac2cf27cc590.png';
interface WelcomePageProps {
onGetStarted: () => void;
onSignUp?: () => void;
onSignIn?: () => void;
onGoogleAuth?: () => void;
}
interface OnboardingSlide {
id: number;
title: string;
subtitle: string;
icon: React.ReactNode;
illustration: React.ReactNode;
color: string;
}
export function WelcomePage({ onGetStarted, onSignUp, onSignIn, onGoogleAuth }: WelcomePageProps) {
const [currentSlide, setCurrentSlide] = useState(0);
const slides: OnboardingSlide[] = [
{
id: 1,
title: "Welcome to Enamel Wallets",
subtitle: "The easiest way to save daily, weekly, or monthly.",
icon: ,
illustration: (
{/* Floating coins */}
{[...Array(6)].map((_, i) => (
))}
),
color: "from-blue-600 to-blue-700"
},
{
id: 2,
title: "Save Smart",
subtitle: "Choose your saving style – daily, weekly, or monthly with ease.",
icon: ,
illustration: (
{/* Progress bar filling animation */}
{/* Coins stacking animation */}
{[...Array(5)].map((_, i) => (
))}
),
color: "from-green-600 to-emerald-600"
},
{
id: 3,
title: "Join Group Contributions",
subtitle: "Save together and take turns receiving payouts.",
icon: ,
illustration: (
{/* Circle of people */}
{[...Array(8)].map((_, i) => (
))}
{/* Center money circulation */}
),
color: "from-purple-600 to-violet-600"
},
{
id: 4,
title: "Safe and Transparent",
subtitle: "Your money is secured with bank-grade encryption and instant payouts.",
icon: ,
illustration: (
{/* Shield overlay */}
),
color: "from-teal-600 to-cyan-600"
},
{
id: 5,
title: "Ready to Begin?",
subtitle: "Create an account and start saving today!",
icon: ,
illustration: (
Start Saving
{/* Hand pointer animation */}
👆
),
color: "from-orange-600 to-red-600"
}
];
const nextSlide = () => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
};
const prevSlide = () => {
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
};
const goToSlide = (index: number) => {
setCurrentSlide(index);
};
const handleGetStarted = () => {
if (onSignUp) {
onSignUp();
} else {
onGetStarted();
}
};
const currentSlideData = slides[currentSlide];
useEffect(() => {
const timer = setInterval(() => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
}, 5000);
return () => clearInterval(timer);
}, [slides.length]);
const handleDragEnd = (event: any, info: PanInfo) => {
const swipeThreshold = 50;
if (info.offset.x > swipeThreshold) {
prevSlide();
} else if (info.offset.x < -swipeThreshold) {
nextSlide();
}
};
return (
{/* Background Image */}
{/* Animated Background Elements */}
{/* Navigation Arrows */}
{/* Floating Logo */}
{/* Main Content */}
{/* Illustration */}
{currentSlideData.illustration}
{/* Title */}
{currentSlideData.title}
{/* Subtitle */}
{currentSlideData.subtitle}
{/* Action Button for last slide */}
{currentSlide === slides.length - 1 && (
)}
{/* Slide Indicators */}
{slides.map((_, index) => (
{/* Skip button */}