About
hair style mobile app
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds hairvana_userapp to your project and fits it to your theme.
Code
How hairvana_userapp is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
'use client';
import React, { useState, useRef, useEffect, useCallback, useTransition } from 'react';
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
import {
Sparkles,
Camera,
Scissors,
Palette,
Heart,
Star,
MapPin,
Calendar,
User,
MessageCircle,
Send,
ArrowLeft,
Filter,
Search,
Clock,
Wand2,
Play,
Share2,
Download,
RotateCcw,
Zap,
ChevronRight,
X,
Lock,
Mail,
Eye,
EyeOff,
CheckCircle,
ArrowRight,
LogIn,
UserPlus,
Bot,
Lightbulb,
TrendingUp,
ChevronDown,
Mic,
ImageIcon,
Award,
Users,
Check,
BookOpen,
Crown,
Target,
Vote,
Smile,
Phone,
Wallet,
CreditCard,
Bitcoin,
History,
Settings,
} from 'lucide-react';
// Utility function for cn
function cnUtil(...classes: (string | undefined | null | false)[]): string {
return classes.filter(Boolean).join(' ');
}
// Use the utility if cn is not available
const cnFallback = typeof cn !== 'undefined' ? cn : cnUtil;
// Hook for click outside
function useClickOutside<T extends HTMLElement = HTMLElement>(
ref: React.RefObject<T>,
handler: (event: MouseEvent | TouchEvent) => void,
mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'
): void {
useEffect(() => {
const listener = (event: MouseEvent | TouchEvent) => {
const el = ref?.current;
const target = event.target;
if (!el || !target || el.contains(target as Node)) {
return;
}
handler(event);
};
document.addEventListener(mouseEvent, listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener(mouseEvent, listener);
document.removeEventListener('touchstart', listener);
};
}, [ref, handler, mouseEvent]);
}
// Animated Text Cycle Component
interface AnimatedTextCycleProps {
words: string[];
interval?: number;
className?: string;
}
function AnimatedTextCycle({
words,
interval = 3000,
className = "",
}: AnimatedTextCycleProps) {
const [currentIndex, setCurrentIndex] = useState(0);
const [width, setWidth] = useState("auto");
const measureRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (measureRef.current) {
const elements = measureRef.current.children;
if (elements.length > currentIndex) {
const newWidth = elements[currentIndex].getBoundingClientRect().width;
setWidth(`${newWidth}px`);
}
}
}, [currentIndex]);
useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
}, interval);
return () => clearInterval(timer);
}, [interval, words.length]);
const containerVariants = {
hidden: {
y: -20,
opacity: 0,
filter: "blur(8px)"
},
visible: {
y: 0,
opacity: 1,
filter: "blur(0px)",
transition: {
duration: 0.4,
ease: "easeOut"
}
},
exit: {
y: 20,
opacity: 0,
filter: "blur(8px)",
transition: {
duration: 0.3,
ease: "easeIn"
}
},
};
return (
<>
<div
ref={measureRef}
aria-hidden="true"
className="absolute opacity-0 pointer-events-none"
style={{ visibility: "hidden" }}
>
{words.map((word, i) => (
<span key={i} className={`font-bold ${className}`}>
{word}
</span>
))}
</div>
<motion.span
className="relative inline-block"
animate={{
width,
transition: {
type: "spring",
stiffness: 150,
damping: 15,
mass: 1.2,
}
}}
>
<AnimatePresence mode="wait" initial={false}>
<motion.span
key={currentIndex}
className={`inline-block font-bold ${className}`}
variants={containerVariants}
initial="hidden"
animate="visible"
exit="exit"
style={{ whiteSpace: "nowrap" }}
>
{words[currentIndex]}
</motion.span>
</AnimatePresence>
</motion.span>
</>
);
}
// Morphing Popover Components
interface MorphingPopoverContextValue {
isOpen: boolean;
open: () => void;
close: () => void;
uniqueId: string;
}
const MorphingPopoverContext = React.createContext<MorphingPopoverContextValue | null>(null);
function usePopoverLogic({
defaultOpen = false,
open: controlledOpen,
onOpenChange,
}: {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
} = {}) {
const uniqueId = React.useId();
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
const isOpen = controlledOpen ?? uncontrolledOpen;
const open = () => {
if (controlledOpen === undefined) {
setUncontrolledOpen(true);
}
onOpenChange?.(true);
};
const close = () => {
if (controlledOpen === undefined) {
setUncontrolledOpen(false);
}
onOpenChange?.(false);
};
return { isOpen, open, close, uniqueId };
}
interface MorphingPopoverProps {
children: React.ReactNode;
transition?: any;
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
className?: string;
}
function MorphingPopover({
children,
transition = { type: 'spring', bounce: 0.1, duration: 0.4 },
defaultOpen,
open,
onOpenChange,
className,
}: MorphingPopoverProps) {
const popoverLogic = usePopoverLogic({ defaultOpen, open, onOpenChange });
return (
<MorphingPopoverContext.Provider value={popoverLogic}>
<div
className={cnFallback('relative flex items-center justify-center', className)}
key={popoverLogic.uniqueId}
>
{children}
</div>
</MorphingPopoverContext.Provider>
);
}
interface MorphingPopoverTriggerProps {
children: React.ReactNode;
className?: string;
}
function MorphingPopoverTrigger({
children,
className,
}: MorphingPopoverTriggerProps) {
const context = React.useContext(MorphingPopoverContext);
if (!context) {
throw new Error('MorphingPopoverTrigger must be used within MorphingPopover');
}
return (
<motion.div
key={context.uniqueId}
layoutId={`popover-trigger-${context.uniqueId}`}
onClick={context.open}
>
<motion.button
layoutId={`popover-label-${context.uniqueId}`}
key={context.uniqueId}
className={className}
aria-expanded={context.isOpen}
aria-controls={`popover-content-${context.uniqueId}`}
>
{children}
</motion.button>
</motion.div>
);
}
interface MorphingPopoverContentProps {
children: React.ReactNode;
className?: string;
}
function MorphingPopoverContent({
children,
className,
}: MorphingPopoverContentProps) {
const context = React.useContext(MorphingPopoverContext);
if (!context) throw new Error('MorphingPopoverContent must be used within MorphingPopover');
const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, context.close);
useEffect(() => {
if (!context.isOpen) return;
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') context.close();
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [context.isOpen, context.close]);
return (
<AnimatePresence>
{context.isOpen && (
<motion.div
ref={ref}
layoutId={`popover-trigger-${context.uniqueId}`}
key={context.uniqueId}
id={`popover-content-${context.uniqueId}`}
role='dialog'
aria-modal='true'
className={cnFallback(
'absolute overflow-hidden rounded-xl border border-border bg-background p-4 text-foreground shadow-2xl z-50',
className
)}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
>
{children}
</motion.div>
)}
</AnimatePresence>
);
}
interface UseAutoResizeTextareaProps {
minHeight: number;
maxHeight?: number;
}
function useAutoResizeTextarea({
minHeight,
maxHeight,
}: UseAutoResizeTextareaProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const adjustHeight = useCallback(
(reset?: boolean) => {
const textarea = textareaRef.current;
if (!textarea) return;
if (reset) {
textarea.style.height = `${minHeight}px`;
return;
}
textarea.style.height = `${minHeight}px`;
const newHeight = Math.max(
minHeight,
Math.min(
textarea.scrollHeight,
maxHeight ?? Number.POSITIVE_INFINITY
)
);
textarea.style.height = `${newHeight}px`;
},
[minHeight, maxHeight]
);
useEffect(() => {
const textarea = textareaRef.current;
if (textarea) {
textarea.style.height = `${minHeight}px`;
}
}, [minHeight]);
return { textareaRef, adjustHeight };
}
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
containerClassName?: string;
showRing?: boolean;
}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, containerClassName, showRing = true, ...props }, ref) => {
const [isFocused, setIsFocused] = React.useState(false);
return (
<div className={cnFallback("relative", containerClassName)}>
<textarea
className={cnFallback(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
"transition-all duration-200 ease-in-out",
"placeholder:text-muted-foreground",
"disabled:cursor-not-allowed disabled:opacity-50",
showRing ? "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0" : "",
className
)}
ref={ref}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
{...props}
/>
{showRing && isFocused && (
<motion.span
className="absolute inset-0 rounded-md pointer-events-none ring-2 ring-offset-0 ring-purple-500/30"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
/>
)}
</div>
)
}
)
Textarea.displayName = "Textarea"
interface HairstyleCard {
id: string;
name: string;
image: string;
category: string;
aiMatch: number;
trending: boolean;
difficulty: 'Easy' | 'Medium' | 'Hard';
}
interface StylistProfile {
id: string;
name: string;
image: string;
rating: number;
reviewCount: number;
specialties: string[];
location: string;
price: number;
availability: string[];
}
interface Salon {
id: string;
name: string;
image: string;
rating: number;
reviewCount: number;
address: string;
distance: string;
services: string[];
priceRange: string;
openHours: string;
phone: string;
}
interface StyleSuggestion {
icon: React.ReactNode;
label: string;
description: string;
category: string;
}
interface HistoryItem {
id: string;
name: string;
aiMatch: number;
date: string;
status: 'booked' | 'saved' | 'tried';
image: string;
}
// Main Hairvana Component
export function HairvanaInterface() {
const [appState, setAppState] = useState<'splash' | 'auth' | 'onboarding' | 'main'>('splash');
const [onboardingStep, setOnboardingStep] = useState(0);
const [authMode, setAuthMode] = useState<'login' | 'signup'>('login');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [activeView, setActiveView] = useState<'home' | 'gallery' | 'booking' | 'profile' | 'evaluation' | 'bookAppointment' | 'payment' | 'favorites' | 'salons' | 'paymentDetails' | 'history' | 'salonDetails' | 'styleDetails' | 'settings' | 'bookingHistory'>('home');
const [selectedStyle, setSelectedStyle] = useState<HairstyleCard | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
const [isPending, startTransition] = useTransition();
const [stylist, setStylist] = useState<StylistProfile | null>(null);
const [selectedAppointmentStylist, setSelectedAppointmentStylist] = useState<StylistProfile | null>(null);
const [selectedSalon, setSelectedSalon] = useState<Salon | null>(null);
const [selectedSalonForDetails, setSelectedSalonForDetails] = useState<Salon | null>(null);
const [selectedStyleForDetails, setSelectedStyleForDetails] = useState<HairstyleCard | null>(null);
const [bookingHistory, setBookingHistory] = useState([
{
id: "booking1",
salon: "The Hair Lab",
stylist: "Sarah Chen",
style: "Curtain Bangs",
date: "Dec 15, 2024",
time: "2:00 PM",
status: "upcoming",
price: "$135.00"
},
{
id: "booking2",
salon: "Luxe Beauty Studio",
stylist: "Marcus Rodriguez",
style: "Beach Waves",
date: "Nov 28, 2024",
time: "10:00 AM",
status: "completed",
price: "$120.00"
}
]);
const [settings, setSettings] = useState({
notifications: true,
theme: 'light',
language: 'English'
});
const [selectedAppointmentStyle, setSelectedAppointmentStyle] = useState<HairstyleCard | null>(null);
const [showBookingConfirmation, setShowBookingConfirmation] = useState(false);
const [likedStyles, setLikedStyles] = useState<Set<string>>(new Set());
const [favoriteStyles, setFavoriteStyles] = useState<HairstyleCard[]>([]);
const [selectedDate, setSelectedDate] = useState<string>('Today, Oct 26');
const [selectedTime, setSelectedTime] = useState<string>('2:00 PM');
const [paymentMethod, setPaymentMethod] = useState<'online' | 'cash' | null>(null);
const [paymentType, setPaymentType] = useState<'card' | 'crypto' | null>(null);
const [cardNumber, setCardNumber] = useState('');
const [expiryDate, setExpiryDate] = useState('');
const [cvv, setCvv] = useState('');
const [saveCard, setSaveCard] = useState(false);
const [salonViewMode, setSalonViewMode] = useState<'list' | 'map'>('list');
const [historyItems, setHistoryItems] = useState<HistoryItem[]>([
{
id: "hist1",
name: "Medium Wavy Bob",
aiMatch: 91,
date: "June 16, 2025",
status: "booked",
image: "https://cdn.21st.dev/assets/mirror/6c/6ccb937b8d2f5a557b7ccdf7f5895de70eb0c1af9c7033af37b7baa4fff4cfb2.jpg"
},
{
id: "hist2",
name: "Classic Pixie Cut",
aiMatch: 76,
date: "May 30, 2025",
status: "saved",
image: "https://images.unsplash.com/photo-1616683693504-3ea7e9ad6f6c?w=400&h=600&fit:crop"
},
{
id: "hist3",
name: "Curtain Bangs",
aiMatch: 88,
date: "May 20, 2025",
status: "tried",
image: "https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?w=400&h=600&fit:crop"
},
]);
const shouldReduceMotion = useReducedMotion();
const { textareaRef, adjustHeight } = useAutoResizeTextarea({
minHeight: 50,
maxHeight: 120,
});
const userProfile = {
name: 'Sara M.',
faceShape: 'Oval',
preferences: ['Wavy', 'Long'],
};
const onboardingStepsData = [
{
icon: <Sparkles className="w-16 h-16 text-purple-500" />,
title: "Welcome to Hairvana!",
description: "Discover your perfect look and book with ease.",
},
{
icon: <Calendar className="w-16 h-16 text-orange-500" />,
title: "Book Instantly",
description: "Find and book a matching salon nearby with available slots. Smooth and fast.",
},
{
icon: <Heart className="w-16 h-16 text-red-500" />,
title: "Save & Share Styles",
description: "Save your favorite looks and keep track of your style journey.",
},
{
icon: <History className="w-16 h-16 text-blue-500" />,
title: "Track Your History",
description: "Keep a record of your past bookings and tried styles.",
},
];
useEffect(() => {
const timer = setTimeout(() => {
setAppState('onboarding'); // Changed to onboarding first
}, 2000); // Simulate splash screen duration
return () => clearTimeout(timer);
}, []);
const handleOnboardingNext = () => {
if (onboardingStep < onboardingStepsData.length - 1) {
setOnboardingStep(onboardingStep + 1);
} else {
setAppState('auth'); // Changed to auth after onboarding
}
};
const defaultHairstyles: HairstyleCard[] = [
{
id: '1',
name: 'Curtain Bangs',
image: 'https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?w=400&h=600&fit=crop',
category: 'Bangs',
aiMatch: 94,
trending: true,
difficulty: 'Medium'
},
{
id: '2',
name: 'Layered Bob',
image: 'https://cdn.21st.dev/assets/mirror/6c/6ccb937b8d2f5a557b7ccdf7f5895de70eb0c1af9c7033af37b7baa4fff4cfb2.jpg',
category: 'Bob',
aiMatch: 89,
trending: false,
difficulty: 'Easy'
},
{
id: '3',
name: 'Beach Waves',
image: 'https://images.unsplash.com/photo-1595475038665-8de2a4b72bb8?w=400&h=600&fit:crop',
category: 'Waves',
aiMatch: 92,
trending: true,
difficulty: 'Easy'
},
{
id: '4',
name: 'Pixie Cut',
image: 'https://images.unsplash.com/photo-1616683693504-3ea7e9ad6f6c?w=400&h=600&fit:crop',
category: 'Short',
aiMatch: 87,
trending: false,
difficulty: 'Hard'
}
];
const defaultSalons: Salon[] = [
{
id: '1',
name: 'The Hair Lab',
image: 'https://cdn.21st.dev/assets/mirror/72/72b7ac389b8000cc17ef4aaf7359242f71502314c14ebecd4d6570fe61af2651.jpg',
rating: 4.8,
reviewCount: 120,
address: '123 Madison Ave, New York, NY',
distance: '0.3 miles',
services: ['Cuts', 'Color', 'Styling', 'Treatments'],
priceRange: '$-$',
openHours: '9:00 AM - 8:00 PM',
phone: '(555) 123-4567'
},
{
id: '2',
name: 'Luxe Beauty Studio',
image: 'https://cdn.21st.dev/assets/mirror/7a/7a8ecbbca72ebb5e742d64261c8c46d67d70ebab9ecdfb17f109893515dd99f7.jpg',
rating: 4.9,
reviewCount: 89,
address: '456 5th Ave, New York, NY',
distance: '0.5 miles',
services: ['Premium Cuts', 'Balayage', 'Extensions'],
priceRange: '$$-$$',
openHours: '10:00 AM - 9:00 PM',
phone: '(555) 987-6543'
},
{
id: '3',
name: 'Urban Cuts',
image: 'https://cdn.21st.dev/assets/mirror/3b/3bc8d15219d072fade84738bf95f6efa51b1b3f4dcbf857b8b0bad6e4bcaf685.jpg',
rating: 4.6,
reviewCount: 156,
address: '789 Broadway, New York, NY',
distance: '0.8 miles',
services: ['Cuts', 'Beard Trim', 'Styling'],
priceRange: '$-$',
openHours: '8:00 AM - 7:00 PM',
phone: '(555) 456-7890'
},
{
id: '4',
name: 'Blowout Bar NYC',
image: 'https://cdn.21st.dev/assets/mirror/f5/f5c7cb0ab23f0be4a6690ef39a0c47faec56f3bb006c74686ddab4fe1d8580f5.jpg',
rating: 4.7,
reviewCount: 203,
address: '321 Park Ave, New York, NY',
distance: '1.2 miles',
services: ['Blowouts', 'Styling', 'Updos'],
priceRange: '$',
openHours: '7:00 AM - 8:00 PM',
phone: '(555) 234-5678'
}
];
const defaultStylists: StylistProfile[] = [
{
id: '1',
name: 'Sarah Chen',
image: 'https://cdn.21st.dev/assets/mirror/0d/0d79a9159c74b232dea756ab682be02a051f486c20046f6833006b674b6c0864.jpg',
rating: 4.9,
reviewCount: 127,
specialties: ['Color', 'Cuts', 'Styling'],
location: 'Manhattan',
price: 150,
availability: ['Today 2:00 PM', 'Tomorrow 10:00 AM', 'Thu 3:30 PM']
},
{
id: '2',
name: 'Marcus Rodriguez',
image: 'https://cdn.21st.dev/assets/mirror/54/54b0243f959e57045270b35825ea4420554a9514165e58d7ba3f7ac0017cabb5.jpg',
rating: 4.8,
reviewCount: 89,
specialties: ['Cuts', 'Beard', 'Styling'],
location: 'Brooklyn',
price: 120,
availability: ['Today 4:00 PM', 'Fri 11:00 AM', 'Sat 1:00 PM']
}
];
const styleSuggestions: StyleSuggestion[] = [
{
icon: <Scissors className="w-5 h-5" />,
label: "Try a shorter cut",
description: "Based on your face shape, a bob would be perfect",
category: "cut"
},
{
icon: <Palette className="w-5 h-5" />,
label: "Add some highlights",
description: "Caramel highlights would complement your skin tone",
category: "color"
},
{
icon: <Wand2 className="w-5 h-5" />,
label: "Curtain bangs",
description: "Trending style that would frame your face beautifully",
category: "style"
},
{
icon: <TrendingUp className="w-5 h-5" />,
label: "Beach waves",
description: "Effortless texture that's perfect for your hair type",
category: "texture"
}
];
const handleStyleLike = (styleId: string) => {
setLikedStyles(prev => {
const newSet = new Set(prev);
if (newSet.has(styleId)) {
newSet.delete(styleId);
} else {
newSet.add(styleId);
}
return newSet;
});
};
const handleAddToFavorites = (style: HairstyleCard) => {
setFavoriteStyles(prev => {
const exists = prev.find(s => s.id === style.id);
if (exists) {
return prev.filter(s => s.id !== style.id);
} else {
return [...prev, style];
}
});
};
const isStyleFavorited = (styleId: string) => {
return favoriteStyles.some(style => style.id === styleId);
};
const filteredStyles = defaultHairstyles.filter(style =>
style.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
(selectedFilters.length === 0 || selectedFilters.includes(style.category))
);
const renderSalonFinderView = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="space-y-6"
>
{/* View Toggle */}
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
<h2 className="text-2xl font-bold">Find Salons</h2>
<div className="flex bg-gray-100 rounded-lg p-1 w-full sm:w-auto">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setSalonViewMode('list')}
className={cnFallback(
"flex-1 px-3 py-1 rounded-md text-sm font-medium transition-colors",
salonViewMode === 'list'
? "bg-white text-purple-600 shadow-sm"
: "text-gray-600"
)}
>
List View
</motion.button>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setSalonViewMode('map')}
className={cnFallback(
"flex-1 px-3 py-1 rounded-md text-sm font-medium transition-colors",
salonViewMode === 'map'
? "bg-white text-purple-600 shadow-sm"
: "text-gray-600"
)}
>
Map View
</motion.button>
</div>
</div>
{/* Map View */}
{salonViewMode === 'map' && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="bg-gray-200 rounded-xl h-64 flex items-center justify-center relative overflow-hidden"
>
{/* Simulated Map Background */}
<div className="absolute inset-0 bg-gradient-to-br from-blue-100 to-green-100"></div>
<div className="relative z-10 text-center space-y-2">
<MapPin className="w-8 h-8 text-purple-600 mx-auto" />
<p className="text-gray-600 font-medium">Interactive Map View</p>
<p className="text-sm text-gray-500">Showing {defaultSalons.length} salons nearby</p>
</div>
{/* Simulated Map Pins */}
<div className="absolute top-16 left-12 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center text-white text-xs font-bold animate-bounce">
1
</div>
<div className="absolute top-24 right-16 w-6 h-6 bg-pink-500 rounded-full flex items-center justify-center text-white text-xs font-bold animate-bounce" style={{ animationDelay: '0.2s' }}>
2
</div>
<div className="absolute bottom-20 left-20 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold animate-bounce" style={{ animationDelay: '0.4s' }}>
3
</div>
<div className="absolute bottom-16 right-12 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs font-bold animate-bounce" style={{ animationDelay: '0.6s' }}>
4
</div>
</motion.div>
)}
{/* Salon List */}
<div className="space-y-4">
{defaultSalons.map((salon, index) => (
<motion.div
key={salon.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
whileHover={{ scale: 1.01 }}
className="bg-white p-4 rounded-xl shadow-md border border-gray-100"
>
<div className="flex flex-col sm:flex-row gap-4">
<img
src={salon.image}
alt={salon.name}
className="w-full h-32 sm:w-20 sm:h-20 rounded-lg object-cover"
/>
<div className="flex-1 space-y-2">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between">
<div>
<h3 className="font-semibold text-lg">{salon.name}</h3>
<div className="flex items-center gap-2 text-sm text-gray-600">
<MapPin className="w-4 h-4" />
<span>{salon.distance}</span>
<span className="text-gray-400">•</span>
<span>{salon.priceRange}</span>
</div>
</div>
<div className="text-left sm:text-right">
<div className="flex items-center gap-1">
<Star className="w-4 h-4 text-yellow-500 fill-current" />
<span className="font-medium">{salon.rating}</span>
</div>
<div className="text-sm text-gray-500">{salon.reviewCount} reviews</div>
</div>
</div>
<div className="flex flex-wrap gap-1">
{salon.services.slice(0, 3).map((service) => (
<span
key={service}
className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full"
>
{service}
</span>
))}
{salon.services.length > 3 && (
<span className="text-xs text-gray-500 px-2 py-1">
+{salon.services.length - 3} more
</span>
)}
</div>
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0">
<div className="text-sm text-gray-600">
<Clock className="w-4 h-4 inline mr-1" />
{salon.openHours}
</div>
<div className="flex gap-2 w-full sm:w-auto">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => {
setSelectedSalonForDetails(salon);
setActiveView('salonDetails');
}}
className="flex-1 sm:flex-none text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded-lg font-medium"
>
View Services
</motion.button>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => {
setSelectedSalon(salon);
setSelectedAppointmentStylist(defaultStylists[0]); // Default stylist for this salon
setSelectedAppointmentStyle(selectedStyle || defaultHairstyles[0]); // Current AR style or default
setActiveView('bookAppointment');
}}
className="flex-1 sm:flex-none text-sm bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-lg font-medium"
>
Book
</motion.button>
</div>
</div>
</div>
</div>
</motion.div>
))}
</div>
{/* Quick Filters */}
<div className="space-y-3">
<h3 className="font-semibold">Quick Filters</h3>
<div className="flex flex-wrap gap-2">
{['Nearby', 'Highly Rated', 'Open Now', 'Budget Friendly', 'Luxury'].map((filter) => (
<motion.button
key={filter}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="text-sm bg-purple-100 text-purple-700 px-3 py-2 rounded-full font-medium"
onClick={() => setActiveView('salons')} // Example: Apply filter and refresh list
>
{filter}
</motion.button>
))}
</div>
</div>
{/* Settings Button */}
<div className="pt-4">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('settings')}
className="w-full bg-gray-100 text-gray-700 py-3 rounded-xl font-medium flex items-center justify-center gap-2"
>
<span className="text-lg">⚙️</span>
Settings
</motion.button>
</div>
</motion.div>
);
const handleBookStylist = (stylist: StylistProfile) => {
setStylist(stylist);
setSelectedAppointmentStylist(stylist);
setSelectedSalon(defaultSalons[0]); // Default to first salon for booking
setSelectedAppointmentStyle(selectedStyle || defaultHairstyles[0]); // Use current AR style or default
setActiveView('bookAppointment');
};
const handleConfirmBooking = () => {
setActiveView('payment');
};
const handlePaymentConfirmation = () => {
setShowBookingConfirmation(true);
setTimeout(() => {
setShowBookingConfirmation(false);
setActiveView('home');
}, 3000);
};
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
}
}
};
const itemVariants = {
hidden: {
opacity: 0,
y: 20,
scale: 0.95
},
visible: {
opacity: 1,
y: 0,
scale: 1,
transition: {
type: "spring",
stiffness: 400,
damping: 25,
},
},
};
// Splash Screen
const renderSplash = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="flex flex-col items-center justify-center h-full bg-gradient-to-br from-purple-500 to-pink-500 text-white"
>
<motion.div
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8, type: "spring", stiffness: 200 }}
>
<Sparkles className="w-24 h-24 mb-4" />
</motion.div>
<motion.h1
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1, duration: 0.6 }}
className="text-5xl font-bold"
>
Hairvana
</motion.h1>
<motion.p
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.2, duration: 0.6 }}
className="text-lg mt-2 opacity-80"
>
Your Personal Style Coach
</motion.p>
</motion.div>
);
// Auth Screen
const renderAuth = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
className="flex flex-col items-center justify-center h-full bg-white p-6 text-foreground"
>
<h2 className="text-4xl font-bold mb-8 text-center">
{authMode === 'login' ? 'Welcome Back!' : 'Join Hairvana'}
</h2>
<div className="w-full max-w-sm space-y-6">
<div className="relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full pl-10 pr-4 py-3 rounded-lg bg-input border border-border placeholder-muted-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-foreground"
/>
</div>
<div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
<input
type={showPassword ? 'text' : 'password'}
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full pl-10 pr-10 py-3 rounded-lg bg-input border border-border placeholder-muted-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-foreground"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button>
</div>
{authMode === 'signup' && (
<div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
<input
type={showPassword ? 'text' : 'password'}
placeholder="Confirm Password"
className="w-full pl-10 pr-10 py-3 rounded-lg bg-input border border-border placeholder-muted-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-foreground"
/>
</div>
)}
</div>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setAppState('main')}
className="w-full max-w-sm mt-8 flex items-center justify-center gap-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-full font-medium shadow-lg"
>
{authMode === 'login' ? (
<>
<LogIn className="w-5 h-5" /> Log In
</>
) : (
<>
<UserPlus className="w-5 h-5" /> Sign Up
</>
)}
</motion.button>
<button
onClick={() => setAuthMode(authMode === 'login' ? 'signup' : 'login')}
className="mt-4 text-sm text-muted-foreground hover:underline"
>
{authMode === 'login' ? 'Don\'t have an account? Sign Up' : 'Already have an account? Log In'}
</button>
</motion.div>
);
// Onboarding Screen
const renderOnboarding = () => {
const currentStep = onboardingStepsData[onboardingStep];
const isLastStep = onboardingStepsData.length - 1 === onboardingStep;
return (
<motion.div
key={onboardingStep}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
transition={{ duration: 0.5 }}
className="flex flex-col items-center justify-between h-full p-6 text-center bg-white"
>
<div className="flex-1 flex flex-col items-center justify-center space-y-6">
{currentStep.icon}
<h2 className="text-3xl font-bold text-gray-900">{currentStep.title}</h2>
<p className="text-lg text-gray-600 max-w-xs">{currentStep.description}</p>
</div>
<div className="w-full space-y-4">
<div className="flex justify-center gap-2 mb-4">
{onboardingStepsData.map((_, index) => (
<motion.button
key={index}
onClick={() => setOnboardingStep(index)} // Allow clicking circles to navigate
className={cnFallback(
"h-2 rounded-full transition-all duration-300",
index === onboardingStep ? "w-8 bg-purple-500" : "w-2 bg-gray-300"
)}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
/>
))}
</div>
<motion.button
whileHover={{ scale: 1.02, y: -2 }}
whileTap={{ scale: 0.98 }}
onClick={handleOnboardingNext} // Use existing next handler
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-xl text-lg font-semibold shadow-lg"
>
{isLastStep ? "Start Exploring →" : "Next →"}
</motion.button>
{!isLastStep && (
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setAppState('auth')}
className="w-full text-purple-600 py-2 rounded-xl text-md font-medium"
>
Skip
</motion.button>
)}
</div>
</motion.div>
);
};
// Render based on app state
if (appState === 'splash') {
return (
<div className="h-screen w-full">
{renderSplash()}
</div>
);
}
if (appState === 'onboarding') {
return (
<div className="h-screen w-full">
{renderOnboarding()}
</div>
);
}
if (appState === 'auth') {
return (
<div className="h-screen w-full">
{renderAuth()}
</div>
);
}
// Home Screen
const renderHome = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
{/* Header */}
<div className="mb-6">
<h1 className="text-2xl font-bold">
Hello, <AnimatedTextCycle words={[userProfile.name, "Beautiful!", "Gorgeous!"]} className="text-purple-600" />
</h1>
<p className="text-gray-600">Ready to discover your perfect look?</p>
</div>
{/* Quick Actions */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('salons')}
className="bg-gradient-to-br from-purple-500 to-pink-500 p-6 rounded-2xl text-white text-left"
>
<MapPin className="w-8 h-8 mb-3" />
<h3 className="font-semibold text-lg">Find Salons</h3>
<p className="text-purple-100 text-sm">Book your next appointment</p>
</motion.button>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('gallery')}
className="bg-gradient-to-br from-blue-500 to-purple-500 p-6 rounded-2xl text-white text-left"
>
<ImageIcon className="w-8 h-8 mb-3" />
<h3 className="font-semibold text-lg">Explore Styles</h3>
<p className="text-blue-100 text-sm">Discover new looks</p>
</motion.button>
</div>
{/* AI Suggestions (Re-purposed for general suggestions) */}
<div className="space-y-4">
<h2 className="text-xl font-bold">Suggestions for You</h2>
<div className="space-y-3">
{styleSuggestions.slice(0, 3).map((suggestion, index) => (
<motion.button
key={index}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
onClick={() => {
// Navigate to gallery with specific filter based on suggestion
if (suggestion.category === 'cut') {
setSelectedFilters(['Short', 'Bob']); // Filter for shorter cuts
setActiveView('gallery');
} else if (suggestion.category === 'color') {
setSelectedFilters(['Color']); // Filter for color styles
setActiveView('gallery');
} else if (suggestion.category === 'style') {
setSelectedFilters(['Bangs']); // Filter for bangs/styling
setActiveView('gallery');
} else if (suggestion.category === 'texture') {
setSelectedFilters(['Waves']); // Filter for texture styles
setActiveView('gallery');
} else {
setActiveView('gallery');
}
}}
className="w-full bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4 text-left"
>
<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
{suggestion.icon}
</div>
<div className="flex-1">
<h3 className="font-medium">{suggestion.label}</h3>
<p className="text-sm text-gray-600">{suggestion.description}</p>
</div>
<ChevronRight className="w-5 h-5 text-gray-400" />
</motion.button>
))}
</div>
</div>
{/* Trending Styles */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-bold">Trending Now</h2>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('gallery')}
className="text-purple-600 font-medium"
>
See All
</motion.button>
</div>
<div className="grid grid-cols-2 gap-4">
{defaultHairstyles.filter(style => style.trending).map((style) => (
<motion.div
key={style.id}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => {
setSelectedStyleForDetails(style);
setActiveView('styleDetails');
}}
className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100"
>
<div className="relative">
<img
src={style.image}
alt={style.name}
className="w-full h-32 object-cover"
/>
<div className="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full">
<div className="flex items-center gap-1">
<Sparkles className="w-3 h-3 text-purple-600" />
<span className="text-xs font-medium">{style.aiMatch}%</span>
</div>
</div>
</div>
<div className="p-3">
<h3 className="font-medium text-sm">{style.name}</h3>
<p className="text-xs text-gray-600">{style.category}</p>
</div>
</motion.div>
))}
</div>
</div>
</motion.div>
);
// Explore/Gallery Screen
const renderGallery = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
{/* Header */}
<div className="flex items-center justify-between mb-6">
<div className="flex gap-2">
<MorphingPopover>
<MorphingPopoverTrigger className="p-2 bg-gray-100 rounded-lg">
<Filter className="w-5 h-5" />
</MorphingPopoverTrigger>
<MorphingPopoverContent className="w-64 top-12 left-0 z-50">
<div className="space-y-3">
<h3 className="font-semibold">Filter by Category</h3>
{['Bangs', 'Bob', 'Waves', 'Short', 'Long'].map((category) => (
<label key={category} className="flex items-center gap-2">
<input
type="checkbox"
checked={selectedFilters.includes(category)}
onChange={(e) => {
if (e.target.checked) {
setSelectedFilters([...selectedFilters, category]);
} else {
setSelectedFilters(selectedFilters.filter(f => f !== category));
}
}}
className="rounded border-gray-300"
/>
<span className="text-sm">{category}</span>
</label>
))}
</div>
</MorphingPopoverContent>
</MorphingPopover>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('favorites')}
className="p-2 bg-gray-100 rounded-lg"
>
<Heart className="w-5 h-5" />
</motion.button>
</div>
</div>
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
<input
type="text"
placeholder="Search hairstyles..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-purple-500 outline-none"
/>
</div>
{/* Style Grid */}
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="grid grid-cols-2 gap-4"
>
{filteredStyles.map((style, index) => (
<motion.div
key={style.id}
variants={itemVariants}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100"
>
<div className="relative">
<img
src={style.image}
alt={style.name}
className="w-full h-40 object-cover"
/>
<div className="absolute top-2 left-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full">
<div className="flex items-center gap-1">
<Sparkles className="w-3 h-3 text-purple-600" />
<span className="text-xs font-medium">{style.aiMatch}%</span>
</div>
</div>
<div className="absolute top-2 right-2 flex gap-1">
{style.trending && (
<div className="bg-orange-500 text-white px-2 py-1 rounded-full">
<TrendingUp className="w-3 h-3" />
</div>
)}
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={(e) => {
e.stopPropagation();
handleAddToFavorites(style); // Changed to handleAddToFavorites
}}
className={cnFallback(
"p-1 rounded-full",
isStyleFavorited(style.id) ? "bg-red-500 text-white" : "bg-white/90 text-gray-600"
)}
>
<Heart className="w-3 h-3" />
</motion.button>
</div>
</div>
<div className="p-3">
<h3 className="font-medium">{style.name}</h3>
<p className="text-sm text-gray-600">{style.category}</p>
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-2 gap-2 sm:gap-0">
<span className={cnFallback(
"text-xs px-2 py-1 rounded-full",
style.difficulty === 'Easy' ? "bg-green-100 text-green-700" :
style.difficulty === 'Medium' ? "bg-yellow-100 text-yellow-700" :
"bg-red-100 text-red-700"
)}>
{style.difficulty}
</span>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => {
setSelectedStyleForDetails(style);
setActiveView('styleDetails');
}}
className="text-xs bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full font-medium"
>
View Details
</motion.button>
</div>
</div>
</motion.div>
))}
</motion.div>
</motion.div>
);
// Profile Screen
const renderProfile = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
{/* Header */}
<div className="text-center space-y-4">
<div className="w-24 h-24 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full mx-auto flex items-center justify-center">
<User className="w-12 h-12 text-white" />
</div>
<div>
<h1 className="text-2xl font-bold">{userProfile.name}</h1>
<p className="text-gray-600">Face Shape: {userProfile.faceShape}</p>
</div>
</div>
{/* Stats */}
<div className="grid grid-cols-3 gap-4">
<div className="bg-white p-4 rounded-xl text-center shadow-sm border border-gray-100">
<div className="text-2xl font-bold text-purple-600">{favoriteStyles.length}</div>
<div className="text-sm text-gray-600">Favorites</div>
</div>
<div className="bg-white p-4 rounded-xl text-center shadow-sm border border-gray-100">
<div className="text-2xl font-bold text-pink-600">{historyItems.length}</div>
<div className="text-sm text-gray-600">Tried</div>
</div>
<div className="bg-white p-4 rounded-xl text-center shadow-sm border border-gray-100">
<div className="text-2xl font-bold text-blue-600">{bookingHistory.length}</div>
<div className="text-sm text-gray-600">Bookings</div>
</div>
</div>
{/* Menu Items */}
<div className="space-y-3">
{[
{ icon: <Heart className="w-5 h-5" />, label: "Favorites", action: () => setActiveView('favorites') },
{ icon: <History className="w-5 h-5" />, label: "History", action: () => setActiveView('history') },
{ icon: <Calendar className="w-5 h-5" />, label: "Bookings", action: () => setActiveView('bookingHistory') },
{ icon: <MapPin className="w-5 h-5" />, label: "Find Salons", action: () => setActiveView('salons') },
{ icon: <Settings className="w-5 h-5" />, label: "Settings", action: () => setActiveView('settings') },
].map((item, index) => (
<motion.button
key={index}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
onClick={item.action}
className="w-full bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4"
>
<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
{item.icon}
</div>
<span className="flex-1 text-left font-medium">{item.label}</span>
<ChevronRight className="w-5 h-5 text-gray-400" />
</motion.button>
))}
</div>
{/* Preferences */}
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h3 className="font-semibold mb-3">Style Preferences</h3>
<div className="flex flex-wrap gap-2">
{userProfile.preferences.map((pref) => (
<span
key={pref}
className="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm"
>
{pref}
</span>
))}
</div>
</div>
</motion.div>
);
// Favorites Screen
const renderFavorites = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
{favoriteStyles.length === 0 ? (
<div className="text-center text-gray-500 py-10">
<Heart className="w-16 h-16 mx-auto mb-4 text-gray-300" />
<p>No favorite styles yet. Start exploring!</p>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('gallery')}
className="mt-4 bg-purple-500 text-white px-4 py-2 rounded-full"
>
Explore Styles
</motion.button>
</div>
) : (
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="grid grid-cols-2 gap-4"
>
{favoriteStyles.map((style, index) => (
<motion.div
key={style.id}
variants={itemVariants}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100"
>
<div className="relative">
<img
src={style.image}
alt={style.name}
className="w-full h-40 object-cover"
/>
<div className="absolute top-2 right-2 flex gap-1">
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={(e) => {
e.stopPropagation();
handleAddToFavorites(style); // Toggle favorite status
}}
className={cnFallback(
"p-1 rounded-full",
isStyleFavorited(style.id) ? "bg-red-500 text-white" : "bg-white/90 text-gray-600"
)}
>
<Heart className="w-3 h-3" />
</motion.button>
</div>
</div>
<div className="p-3">
<h3 className="font-medium">{style.name}</h3>
<p className="text-sm text-gray-600">{style.category}</p>
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-2 gap-2 sm:gap-0">
<span className={cnFallback(
"text-xs px-2 py-1 rounded-full",
style.difficulty === 'Easy' ? "bg-green-100 text-green-700" :
style.difficulty === 'Medium' ? "bg-yellow-100 text-yellow-700" :
"bg-red-100 text-red-700"
)}>
{style.difficulty}
</span>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => {
setSelectedStyleForDetails(style);
setActiveView('styleDetails');
}}
className="text-xs bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full font-medium"
>
View Details
</motion.button>
</div>
</div>
</motion.div>
))}
</motion.div>
)}
</motion.div>
);
// History Screen
const renderHistory = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
{historyItems.length === 0 ? (
<div className="text-center text-gray-500 py-10">
<History className="w-16 h-16 mx-auto mb-4 text-gray-300" />
<p>No history yet. Start your style journey!</p>
</div>
) : (
<div className="space-y-4">
{historyItems.map((item, index) => (
<motion.div
key={item.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
whileHover={{ scale: 1.01 }}
className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex flex-col sm:flex-row items-start sm:items-center gap-4"
>
<img
src={item.image}
alt={item.name}
className="w-full h-32 sm:w-20 sm:h-20 rounded-lg object-cover"
/>
<div className="flex-1 w-full">
<h3 className="font-medium">{item.name}</h3>
<p className="text-sm text-gray-600">{item.date}</p>
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-2 gap-2 sm:gap-0">
<span className={cnFallback(
"text-xs px-2 py-1 rounded-full",
item.status === 'booked' ? "bg-blue-100 text-blue-700" :
item.status === 'saved' ? "bg-yellow-100 text-yellow-700" :
"bg-green-100 text-green-700"
)}>
{item.status.charAt(0).toUpperCase() + item.status.slice(1)}
</span>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => {
// Find the style in defaultHairstyles to pass to details
const style = defaultHairstyles.find(s => s.name === item.name);
if (style) {
setSelectedStyleForDetails(style);
setActiveView('styleDetails');
}
}}
className="text-xs bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full font-medium"
>
View Style
</motion.button>
</div>
</div>
</motion.div>
))}
</div>
)}
</motion.div>
);
// Booking History Screen
const renderBookingHistory = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
{bookingHistory.length === 0 ? (
<div className="text-center text-gray-500 py-10">
<Calendar className="w-16 h-16 mx-auto mb-4 text-gray-300" />
<p>No bookings yet. Book your first appointment!</p>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('salons')}
className="mt-4 bg-purple-500 text-white px-4 py-2 rounded-full"
>
Find Salons
</motion.button>
</div>
) : (
<div className="space-y-4">
{bookingHistory.map((booking, index) => (
<motion.div
key={booking.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
whileHover={{ scale: 1.01 }}
className="bg-white p-4 rounded-xl shadow-sm border border-gray-100"
>
<div className="flex items-center justify-between mb-2">
<h3 className="font-semibold text-lg">{booking.salon}</h3>
<span className={cnFallback(
"text-xs px-2 py-1 rounded-full",
booking.status === 'upcoming' ? "bg-blue-100 text-blue-700" : "bg-green-100 text-green-700"
)}>
{booking.status.charAt(0).toUpperCase() + booking.status.slice(1)}
</span>
</div>
<p className="text-sm text-gray-600">Stylist: {booking.stylist}</p>
<p className="text-sm text-gray-600">Style: {booking.style}</p>
<p className="text-sm text-gray-600">Date: {booking.date} at {booking.time}</p>
<div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
<span className="font-bold text-purple-600">{booking.price}</span>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => {
// Example: navigate to salon details or re-book
const salon = defaultSalons.find(s => s.name === booking.salon);
if (salon) {
setSelectedSalonForDetails(salon);
setActiveView('salonDetails');
}
}}
className="text-xs bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full font-medium"
>
View Details
</motion.button>
</div>
</motion.div>
))}
</div>
)}
</motion.div>
);
// Salon Details Screen
const renderSalonDetails = () => {
if (!selectedSalonForDetails) {
return (
<div className="text-center text-gray-500 py-10">
<p>No salon selected.</p>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('salons')}
className="mt-4 bg-purple-500 text-white px-4 py-2 rounded-full"
>
Back to Salons
</motion.button>
</div>
);
}
const salon = selectedSalonForDetails;
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
<img
src={salon.image}
alt={salon.name}
className="w-full h-48 object-cover rounded-xl shadow-md"
/>
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-3">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0">
<div className="flex items-center gap-1">
<Star className="w-5 h-5 text-yellow-500 fill-current" />
<span className="font-medium text-lg">{salon.rating}</span>
<span className="text-sm text-gray-500">({salon.reviewCount} reviews)</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<MapPin className="w-4 h-4" />
<span>{salon.distance}</span>
</div>
</div>
<p className="text-gray-700">{salon.address}</p>
<p className="text-gray-700 flex items-center gap-2">
<Clock className="w-4 h-4" /> {salon.openHours}
</p>
<p className="text-gray-700 flex items-center gap-2">
<Phone className="w-4 h-4" /> {salon.phone}
</p>
</div>
<div className="space-y-3">
<h2 className="text-xl font-bold">Services Offered</h2>
<div className="flex flex-wrap gap-2">
{salon.services.map((service) => (
<span
key={service}
className="text-sm bg-purple-100 text-purple-700 px-3 py-1 rounded-full"
>
{service}
</span>
))}
</div>
</div>
<div className="space-y-3">
<h2 className="text-xl font-bold">Stylists</h2>
<div className="grid grid-cols-2 gap-4">
{defaultStylists.map((stylist) => (
<motion.div
key={stylist.id}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="bg-white p-3 rounded-xl shadow-sm border border-gray-100 text-center"
>
<img
src={stylist.image}
alt={stylist.name}
className="w-20 h-20 rounded-full object-cover mx-auto mb-2"
/>
<h3 className="font-medium">{stylist.name}</h3>
<div className="flex items-center justify-center gap-1 text-sm text-gray-600">
<Star className="w-4 h-4 text-yellow-500 fill-current" />
<span>{stylist.rating} ({stylist.reviewCount})</span>
</div>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => {
setSelectedSalon(salon);
setSelectedAppointmentStylist(stylist);
setSelectedAppointmentStyle(selectedStyle || defaultHairstyles[0]);
setActiveView('bookAppointment');
}}
className="mt-3 text-sm bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-full font-medium"
>
Book Stylist
</motion.button>
</motion.div>
))}
</div>
</div>
{/* Call and Book Actions */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => window.open(`tel:${salon.phone}`, '_self')}
className="flex items-center justify-center gap-2 bg-green-500 text-white py-3 rounded-xl font-medium"
>
<Phone className="w-5 h-5" />
Call Salon
</motion.button>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => {
setSelectedSalon(salon);
setSelectedAppointmentStylist(defaultStylists[0]);
setSelectedAppointmentStyle(selectedStyle || defaultHairstyles[0]);
setActiveView('bookAppointment');
}}
className="flex items-center justify-center gap-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-xl font-medium"
>
<Calendar className="w-5 h-5" />
Book Now
</motion.button>
</div>
</motion.div>
);
};
// Style Details Screen
const renderStyleDetails = () => {
if (!selectedStyleForDetails) {
return (
<div className="text-center text-gray-500 py-10">
<p>No style selected.</p>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setActiveView('gallery')}
className="mt-4 bg-purple-500 text-white px-4 py-2 rounded-full"
>
Back to Gallery
</motion.button>
</div>
);
}
const style = selectedStyleForDetails;
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
<div className="relative">
<img
src={style.image}
alt={style.name}
className="w-full h-64 object-cover rounded-xl shadow-md"
/>
<div className="absolute top-4 right-4 flex gap-2">
<div className="bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full flex items-center gap-1">
<Sparkles className="w-4 h-4 text-purple-600" />
<span className="text-sm font-medium">{style.aiMatch}% Match</span>
</div>
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={() => handleAddToFavorites(style)}
className={cnFallback(
"p-2 rounded-full",
isStyleFavorited(style.id) ? "bg-red-500 text-white" : "bg-white/90 text-gray-600"
)}
>
<Heart className="w-5 h-5" />
</motion.button>
</div>
</div>
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-3">
<p className="text-gray-700">Category: <span className="font-medium">{style.category}</span></p>
<p className="text-gray-700">Difficulty: <span className={cnFallback(
"font-medium",
style.difficulty === 'Easy' ? "text-green-600" :
style.difficulty === 'Medium' ? "text-yellow-600" :
"text-red-600"
)}>{style.difficulty}</span></p>
{style.trending && (
<p className="text-gray-700 flex items-center gap-2">
<TrendingUp className="w-5 h-5 text-orange-500" /> <span className="font-medium">Currently Trending!</span>
</p>
)}
<p className="text-gray-700">
This {style.name} is a versatile and popular choice. It's known for its {style.difficulty.toLowerCase()} maintenance and ability to suit various face shapes.
</p>
</div>
<div className="space-y-3">
<h2 className="text-xl font-bold">Book this Style</h2>
<p className="text-gray-600">Find salons and stylists who can achieve this look for you.</p>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => {
setSelectedAppointmentStyle(style);
setActiveView('salons');
}}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-xl font-medium flex items-center justify-center gap-2"
>
<Calendar className="w-5 h-5" /> Book Appointment
</motion.button>
</div>
</motion.div>
);
};
// Book Appointment Screen
const renderBookAppointment = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
{selectedSalon && (
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-2">
<h2 className="font-bold text-lg">Salon: {selectedSalon.name}</h2>
<p className="text-sm text-gray-600">{selectedSalon.address}</p>
</div>
)}
{selectedAppointmentStylist && (
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-2">
<h2 className="font-bold text-lg">Stylist: {selectedAppointmentStylist.name}</h2>
<p className="text-sm text-gray-600">Specialties: {selectedAppointmentStylist.specialties.join(', ')}</p>
</div>
)}
{selectedAppointmentStyle && (
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-2">
<h2 className="font-bold text-lg">Style: {selectedAppointmentStyle.name}</h2>
<p className="text-sm text-gray-600">Category: {selectedAppointmentStyle.category}</p>
</div>
)}
<div className="space-y-3">
<h2 className="text-xl font-bold">Select Date & Time</h2>
<div className="flex gap-2 overflow-x-auto pb-2">
{['Today, Oct 26', 'Tomorrow, Oct 27', 'Mon, Oct 28', 'Tue, Oct 29'].map(date => (
<motion.button
key={date}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setSelectedDate(date)}
className={cnFallback(
"flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium",
selectedDate === date ? "bg-purple-600 text-white" : "bg-gray-100 text-gray-700"
)}
>
{date}
</motion.button>
))}
</div>
<div className="flex gap-2 overflow-x-auto pb-2">
{['9:00 AM', '10:00 AM', '11:00 AM', '1:00 PM', '2:00 PM', '3:00 PM'].map(time => (
<motion.button
key={time}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setSelectedTime(time)}
className={cnFallback(
"flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium",
selectedTime === time ? "bg-purple-600 text-white" : "bg-gray-100 text-gray-700"
)}
>
{time}
</motion.button>
))}
</div>
</div>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={handleConfirmBooking}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-xl font-medium"
>
Proceed to Payment
</motion.button>
</motion.div>
);
// Payment Screen
const renderPayment = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-2">
<h2 className="font-bold text-lg">Booking Summary</h2>
<p className="text-sm text-gray-600">Salon: {selectedSalon?.name}</p>
<p className="text-sm text-gray-600">Stylist: {selectedAppointmentStylist?.name}</p>
<p className="text-sm text-gray-600">Style: {selectedAppointmentStyle?.name}</p>
<p className="text-sm text-gray-600">Date: {selectedDate} at {selectedTime}</p>
<div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-2">
<span className="font-bold">Total:</span>
<span className="font-bold text-purple-600">${selectedAppointmentStylist?.price.toFixed(2) || 'N/A'}</span>
</div>
</div>
<div className="space-y-3">
<h2 className="text-xl font-bold">Payment Method</h2>
<div className="grid grid-cols-2 gap-4">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setPaymentMethod('online')}
className={cnFallback(
"p-4 rounded-xl border-2 flex flex-col items-center gap-2",
paymentMethod === 'online' ? "border-purple-500 bg-purple-50" : "border-gray-200 bg-white"
)}
>
<Wallet className="w-6 h-6 text-purple-600" />
<span className="font-medium text-sm">Pay Online</span>
</motion.button>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setPaymentMethod('cash')}
className={cnFallback(
"p-4 rounded-xl border-2 flex flex-col items-center gap-2",
paymentMethod === 'cash' ? "border-purple-500 bg-purple-50" : "border-gray-200 bg-white"
)}
>
<CheckCircle className="w-6 h-6 text-purple-600" />
<span className="font-medium text-sm">Pay at Salon</span>
</motion.button>
</div>
</div>
{paymentMethod === 'online' && (
<div className="space-y-3">
<h2 className="text-xl font-bold">Online Payment Type</h2>
<div className="grid grid-cols-2 gap-4">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setPaymentType('card')}
className={cnFallback(
"p-4 rounded-xl border-2 flex flex-col items-center gap-2",
paymentType === 'card' ? "border-purple-500 bg-purple-50" : "border-gray-200 bg-white"
)}
>
<CreditCard className="w-6 h-6 text-purple-600" />
<span className="font-medium text-sm">Credit/Debit Card</span>
</motion.button>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setPaymentType('crypto')}
className={cnFallback(
"p-4 rounded-xl border-2 flex flex-col items-center gap-2",
paymentType === 'crypto' ? "border-purple-500 bg-purple-50" : "border-gray-200 bg-white"
)}
>
<Bitcoin className="w-6 h-6 text-purple-600" />
<span className="font-medium text-sm">Crypto</span>
</motion.button>
</div>
{paymentType === 'card' && (
<div className="space-y-4 bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div>
<label htmlFor="cardNumber" className="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
<input
type="text"
id="cardNumber"
value={cardNumber}
onChange={(e) => setCardNumber(e.target.value)}
placeholder="XXXX XXXX XXXX XXXX"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label htmlFor="expiryDate" className="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
<input
type="text"
id="expiryDate"
value={expiryDate}
onChange={(e) => setExpiryDate(e.target.value)}
placeholder="MM/YY"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"
/>
</div>
<div>
<label htmlFor="cvv" className="block text-sm font-medium text-gray-700 mb-1">CVV</label>
<input
type="text"
id="cvv"
value={cvv}
onChange={(e) => setCvv(e.target.value)}
placeholder="XXX"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"
/>
</div>
</div>
<div className="flex items-center">
<input
type="checkbox"
id="saveCard"
checked={saveCard}
onChange={(e) => setSaveCard(e.target.checked)}
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
/>
<label htmlFor="saveCard" className="ml-2 block text-sm text-gray-900">Save card for future payments</label>
</div>
</div>
)}
{paymentType === 'crypto' && (
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 text-center space-y-2">
<Bitcoin className="w-12 h-12 mx-auto text-purple-600" />
<p className="font-medium">Crypto Payment Gateway</p>
<p className="text-sm text-gray-600">You will be redirected to complete your payment.</p>
</div>
)}
</div>
)}
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={handlePaymentConfirmation}
disabled={!paymentMethod || (paymentMethod === 'online' && !paymentType)}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-xl font-medium disabled:opacity-50 disabled:cursor-not-allowed"
>
Confirm Booking
</motion.button>
{showBookingConfirmation && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
>
<div className="bg-white p-8 rounded-xl shadow-2xl text-center space-y-4">
<CheckCircle className="w-16 h-16 text-green-500 mx-auto" />
<h2 className="text-2xl font-bold">Booking Confirmed!</h2>
<p className="text-gray-600">Your appointment at {selectedSalon?.name} is confirmed for {selectedDate} at {selectedTime}.</p>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setShowBookingConfirmation(false)}
className="bg-purple-500 text-white px-4 py-2 rounded-full"
>
Done
</motion.button>
</div>
</motion.div>
)}
</motion.div>
);
// Settings Screen
const renderSettings = () => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-6 pb-20"
>
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-4">
<div className="flex items-center justify-between">
<span className="font-medium">Notifications</span>
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
checked={settings.notifications}
onChange={(e) => setSettings({ ...settings, notifications: e.target.checked })}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
</label>
</div>
<div className="flex items-center justify-between">
<span className="font-medium">Theme</span>
<select
value={settings.theme}
onChange={(e) => setSettings({ ...settings, theme: e.target.value })}
className="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm"
>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div className="flex items-center justify-between">
<span className="font-medium">Language</span>
<select
value={settings.language}
onChange={(e) => setSettings({ ...settings, language: e.target.value })}
className="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm"
>
<option value="English">English</option>
<option value="Arabic">Arabic</option>
</select>
</div>
</div>
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setAppState('auth')} // Example: Logout
className="w-full bg-red-500 text-white py-3 rounded-xl font-medium"
>
Log Out
</motion.button>
</motion.div>
);
// Bottom Navigation
const renderBottomNav = () => (
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2 z-40 max-w-md mx-auto">
<div className="flex items-center justify-around">
{[
{ icon: <Sparkles className="w-5 h-5" />, label: "Home", view: "home" },
{ icon: <Search className="w-5 h-5" />, label: "Explore", view: "gallery", clearFilters: true },
{ icon: <MapPin className="w-5 h-5" />, label: "Salons", view: "salons" },
{ icon: <User className="w-5 h-5" />, label: "Profile", view: "profile" },
].map((tab) => (
<motion.button
key={tab.view}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => {
if (tab.clearFilters) {
setSelectedFilters([]);
setSearchQuery('');
}
setActiveView(tab.view as any);
}}
className={cnFallback(
"flex flex-col items-center gap-1 py-2 px-3 rounded-lg transition-colors",
activeView === tab.view
? "text-purple-600 bg-purple-50"
: "text-gray-600"
)}
>
{tab.icon}
<span className="text-xs font-medium">{tab.label}</span>
</motion.button>
))}
</div>
</div>
);
// App Bar Component
const renderAppBar = () => {
const getTitle = () => {
switch (activeView) {
case 'home': return 'Hairvana';
case 'gallery': return 'Explore Styles';
case 'salons': return 'Find Salons';
case 'profile': return 'Profile';
case 'favorites': return 'My Favorites';
case 'history': return 'Style History';
case 'bookingHistory': return 'My Bookings';
case 'salonDetails': return selectedSalonForDetails?.name || 'Salon Details';
case 'styleDetails': return selectedStyleForDetails?.name || 'Style Details';
case 'bookAppointment': return 'Book Appointment';
case 'payment': return 'Payment';
case 'settings': return 'Settings';
default: return 'Hairvana';
}
};
const showBackButton = !['home', 'gallery', 'salons', 'profile'].includes(activeView);
return (
<div className="fixed top-0 left-0 right-0 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-3 flex items-center gap-3 z-40 max-w-md mx-auto">
{showBackButton && (
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => {
// Navigate back based on current view
if (activeView === 'favorites' || activeView === 'history' || activeView === 'bookingHistory' || activeView === 'settings') {
setActiveView('profile');
} else if (activeView === 'salonDetails') {
setActiveView('salons');
} else if (activeView === 'styleDetails') {
setActiveView('gallery');
} else if (activeView === 'bookAppointment') {
setActiveView('salons');
} else if (activeView === 'payment') {
setActiveView('bookAppointment');
} else {
setActiveView('home');
}
}}
className="p-1 rounded-full hover:bg-white/20 transition-colors"
>
<ArrowLeft className="w-5 h-5" />
</motion.button>
)}
<div className="flex items-center gap-2 flex-1">
<Sparkles className="w-6 h-6" />
<h1 className="text-xl font-bold truncate">{getTitle()}</h1>
</div>
{activeView === 'home' && (
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => setActiveView('profile')}
className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center"
>
<User className="w-5 h-5" />
</motion.button>
)}
</div>
);
};
// Main app content
return (
<div className="h-screen w-full bg-gray-50 overflow-hidden max-w-md mx-auto">
{renderAppBar()}
<div className="h-full overflow-y-auto pt-16 pb-20">
<div className="p-4 sm:p-6">
{activeView === 'home' && renderHome()}
{activeView === 'gallery' && renderGallery()}
{activeView === 'profile' && renderProfile()}
{activeView === 'salons' && renderSalonFinderView()}
{activeView === 'favorites' && renderFavorites()}
{activeView === 'history' && renderHistory()}
{activeView === 'bookingHistory' && renderBookingHistory()}
{activeView === 'salonDetails' && renderSalonDetails()}
{activeView === 'styleDetails' && renderStyleDetails()}
{activeView === 'bookAppointment' && renderBookAppointment()}
{activeView === 'payment' && renderPayment()}
{activeView === 'settings' && renderSettings()}
</div>
</div>
{activeView !== 'bookAppointment' && activeView !== 'payment' && renderBottomNav()}
</div>
);
}
export default HairvanaInterface;
More by Deema Talat
View all
hairvana
More in Heroes
View all
SaaS Template
2.4K
Responsive Hero Banner
2K
Hero
1.2K
Centered Hero with Image Fan
932
Editorial Collage Hero
431
Glass Fold
213
HeroSectionWithGradient
336
Minimalist Hero Fashion
285
