import React, { useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route, Link, useNavigate, useLocation, Navigate } from 'react-router-dom'; import { motion, AnimatePresence } from 'framer-motion'; import { Sparkles, Calendar, CheckSquare, Shirt, MessageSquare, TrendingUp, User, LogOut, ArrowRight, Check, Heart, ChevronRight, Plus, Trash2, Smile, Compass, Send, Menu, X } from 'lucide-react'; import { Toaster, toast } from 'sonner'; // --- TYPES & INTERFACES --- interface Outfit { id: number; name: string; tag: string; url: string; } interface MediaProps { hero: string; outfits: Outfit[]; } interface Habit { id: string; name: string; completed: boolean; streak: number; } interface ChecklistItem { id: string; text: string; completed: boolean; category: 'mind' | 'body' | 'soul'; } interface Message { sender: 'user' | 'coach'; text: string; timestamp: string; } interface UserProfile { email: string; name: string; quiz?: { vibe: string; goal: string; focus: string; }; } interface NavItem { path: string; label: string; icon: React.ComponentType; } interface MoodItem { label: string; icon: React.ComponentType; color: string; } // --- MEDIA CONSTANTS --- const MEDIA: MediaProps = { hero: "https://images.unsplash.com/photo-1512436991641-6745cdb1723f?auto=format&fit=crop&w=1200&q=80", // Elegant minimalist space outfits: [ { id: 1, name: "Misty Morning", tag: "Casual Chic", url: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=600&q=80" }, { id: 2, name: "Sage Serenity", tag: "Wellness & Yoga", url: "https://images.unsplash.com/photo-1506152983158-b4a74a01c721?auto=format&fit=crop&w=600&q=80" }, { id: 3, name: "Champagne Dinner", tag: "Elegant Evening", url: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=600&q=80" }, { id: 4, name: "Ivory Minimalist", tag: "Sleek Workwear", url: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?auto=format&fit=crop&w=600&q=80" } ] }; // --- APP SHELL / LAYOUT --- function Layout({ children, user, handleLogout }: { children: React.ReactNode, user: UserProfile | null, handleLogout: () => void }) { const location = useLocation(); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const navItems: NavItem[] = [ { path: '/dashboard', label: 'Dashboard', icon: Compass }, { path: '/planner', label: 'Routines', icon: Calendar }, { path: '/style', label: 'Aesthetic', icon: Shirt }, { path: '/coach', label: 'AI Coach', icon: MessageSquare }, { path: '/progress', label: 'Progress', icon: TrendingUp }, ]; return (

{/* Premium Header */}

AURA

{/* Desktop Nav */}

{!user ? ( <> Home Philosophy Membership Sign In ) : ( <> {navItems.map((item) => { const Icon = item.icon; const isActive = location.pathname === item.path; return ( {item.label} ); })} )}

{/* Mobile Menu Button */}

{/* Mobile Nav Dropdown */} {mobileMenuOpen && ( {!user ? ( <> setMobileMenuOpen(false)} className="text-lg font-serif">Home setMobileMenuOpen(false)} className="text-lg font-serif">Philosophy setMobileMenuOpen(false)} className="text-lg font-serif">Membership setMobileMenuOpen(false)} className="text-center py-3 rounded-full bg-[hsl(var(--foreground))] text-[hsl(var(--background))] font-medium"> Sign In ) : ( <> {navItems.map((item) => { const Icon = item.icon; return ( setMobileMenuOpen(false)} className="flex items-center gap-3 text-lg font-serif text-[hsl(var(--foreground))]" > {item.label} ); })} )} )} {/* Main Content */}

{children}

{/* Premium Footer */}

); } // --- LANDING PAGE --- function LandingPage() { const navigate = useNavigate(); return (

{/* Hero Section */}

{ e.currentTarget.src = "data:image/svg+xml;utf8,"; }} />

Your Digital Sanctuary Become your best self,
beautifully. Plan your routines, track your progress, and build a lifestyle that feels effortless. Aura blends modern wellness with high-end aesthetic curation. Explore Philosophy

{/* Features Section */}

The Core Pillars

Elevated Self-Mastery

Aura brings harmony to your daily flow through carefully designed rituals.

Ritual Planner

Design custom morning, afternoon, and evening routines. Craft a flow that honors your energy levels.

Explore Routines

Aesthetic Curation

Organize your wardrobe moodboards and daily outfit inspirations. Curate lookbooks that build true confidence.

Explore Aesthetic

AI Lifestyle Coach

A highly refined AI assistant trained in wellness, confidence, and elegant routines. Your personal sounding board.

Chat with Coach

Evolution Index

Visualize your consistency, self-care progress, and daily balance. Track your personal evolution beautifully.

View Progress

{/* Pricing Section */}

The Membership

Invest in Your Aura

Unlock complete access to your luxury digital sanctuary.

{/* Free Tier */}

Aura Standard

Essential self-care tools.

$0 / forever

3 Daily Habits
Standard Routine Planner
Basic Self-Care Checklist

{/* Premium Tier */}

Most Desired

Aura Prestige

The complete lifestyle upgrade.

$12 / month

Unlimited Habits & Routines
Personalized Weekly Improvement Plans
AI Lifestyle Coach (Unlimited Chat)
Premium Outfit Lookbooks & Curation
Advanced Progress Analytics

); } // --- AUTH & QUIZ PAGE --- function AuthPage({ onLogin }: { onLogin: (user: UserProfile) => void }) { const navigate = useNavigate(); const [isSignUp, setIsSignUp] = useState(true); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [name, setName] = useState(''); const [quizStep, setQuizStep] = useState(0); // 0 = Auth, 1-3 = Quiz Steps const [quizData, setQuizData] = useState({ vibe: '', goal: '', focus: '' }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!email || !password) { toast.error("Please fill in all fields"); return; } if (isSignUp) { setQuizStep(1); // Go to Quiz } else { onLogin({ email, name: name || 'Aura Member' }); toast.success("Welcome back to Aura"); navigate('/dashboard'); } }; const handleQuizNext = () => { if (quizStep < 3) { setQuizStep(quizStep + 1); } else { onLogin({ email, name: name || 'Aura Member', quiz: quizData }); toast.success("Your personalized Aura profile is ready!"); navigate('/dashboard'); } }; return (

{quizStep === 0 ? (

{isSignUp ? "Begin Your Journey" : "Welcome Back"}

{isSignUp ? "Step into a more intentional way of living." : "Enter your sanctuary."}

{isSignUp && (

Your Name setName(e.target.value)} placeholder="E.g., Clara" className="w-full px-4 py-3 rounded-xl border border-[hsl(var(--border))] focus:border-[hsl(var(--accent))] focus:outline-none text-sm bg-[hsl(var(--background))]" />

)}

Email Address setEmail(e.target.value)} placeholder="you@example.com" className="w-full px-4 py-3 rounded-xl border border-[hsl(var(--border))] focus:border-[hsl(var(--accent))] focus:outline-none text-sm bg-[hsl(var(--background))]" />

Password setPassword(e.target.value)} placeholder="••••••••" className="w-full px-4 py-3 rounded-xl border border-[hsl(var(--border))] focus:border-[hsl(var(--accent))] focus:outline-none text-sm bg-[hsl(var(--background))]" />

) : (

{/* Quiz Flow */}

Aura Lifestyle Quiz Step {quizStep} of 3

{quizStep === 1 && (

Describe your dream aesthetic:

{['Minimalist & Clean', 'Warm & Cozy Cozy', 'Bold & Classic', 'Earthy & Natural'].map((vibe) => ( ))}

)} {quizStep === 2 && (

What is your primary wellness goal?

{['Consistent Daily Routines', 'Better Self-Care & Mindfulness', 'Confidence & Elegant Style', 'Productivity & Organization'].map((goal) => ( ))}

)} {quizStep === 3 && (

Where do you need the most focus?

{['Morning Rituals', 'Evening Wind-down', 'Weekly Outfit Planning', 'Daily Habit Consistency'].map((focus) => ( ))}

)}

); } // --- PERSONAL DASHBOARD --- function DashboardPage({ user }: { user: UserProfile | null }) { const [mood, setMood] = useState(null); const [quote] = useState("Your energy is your currency. Spend it well, invest it wisely."); const moods = [ { label: 'Serene', icon: Smile, color: 'text-sage bg-sage/10' }, { label: 'Radiant', icon: Sparkles, color: 'text-rose bg-rose/10' }, { label: 'Calm', icon: Heart, color: 'text-accent bg-accent/10' }, ] as MoodItem[]; return (

{/* Welcome Header */}

Welcome Back

Hello, {user?.name || 'Aura Member'}

Today is a beautiful day to nurture your aura.

{/* Streak Counter */}

Current Streak 5 Days Consistent

{/* Daily Quote / Affirmation */}

Daily Affirmation

"{quote}"

{/* Sanctuary Spaces Quick Navigation */}

Sanctuary Spaces

{/* Routines Card */}

Routines

Design custom morning, afternoon, and evening rituals.

Open Planner {/* Aesthetic Card */}

Aesthetic

Organize your wardrobe moodboards and style inspirations.

Open Curation {/* AI Coach Card */}

AI Coach

Get refined guidance for your habits, style, and mindset.

Chat with Coach {/* Progress Card */}

Progress

Visualize consistency, self-care progress, and daily balance.

View Progress

{/* Main Dashboard Grid */}

{/* Mood Tracker */}

How is your aura today?

{moods.map((m) => { const Icon = m.icon; return ( ); })}

{mood && (

You are aligned with {mood} energy today.

)}

{/* Quick Routine Overview */}

Today's Rituals

View Planner

Morning Meditation 08:00 AM

Matcha Ritual 10:30 AM

Gratitude Journaling 09:00 PM

{/* AI Coach Quick Access */}

Aesthetic Coach

Ask your coach for routine adjustments, daily style advice, or a quick confidence boost.

Chat with Coach

); } // --- DAILY ROUTINE PLANNER & HABIT TRACKER --- function PlannerPage() { const [habits, setHabits] = useState([ { id: '1', name: 'Hydrate 2L', completed: false, streak: 4 }, { id: '2', name: '15-min Yoga Stretch', completed: true, streak: 8 }, { id: '3', name: 'No Screens Before Bed', completed: false, streak: 12 }, ]); const [checklist, setChecklist] = useState([ { id: '1', text: 'Skincare morning routine', completed: true, category: 'body' }, { id: '2', text: 'Read 10 pages of philosophy', completed: false, category: 'mind' }, { id: '3', text: 'Evening self-reflection', completed: false, category: 'soul' }, ]); const [newHabit, setNewHabit] = useState(''); const [newChecklist, setNewChecklist] = useState(''); const [checklistCategory, setChecklistCategory] = useState<'mind' | 'body' | 'soul'>('mind'); const categories: Array<'mind' | 'body' | 'soul'> = ['mind', 'body', 'soul']; const handleAddHabit = (e: React.FormEvent) => { e.preventDefault(); if (!newHabit.trim()) return; const habit: Habit = { id: Date.now().toString(), name: newHabit, completed: false, streak: 0 }; setHabits([...habits, habit]); setNewHabit(''); toast.success("New habit added to your sanctuary"); }; const handleAddChecklist = (e: React.FormEvent) => { e.preventDefault(); if (!newChecklist.trim()) return; const item: ChecklistItem = { id: Date.now().toString(), text: newChecklist, completed: false, category: checklistCategory }; setChecklist([...checklist, item]); setNewChecklist(''); toast.success("Self-care item added"); }; const toggleHabit = (id: string) => { setHabits(habits.map(h => { if (h.id === id) { const completed = !h.completed; const streak = completed ? h.streak + 1 : Math.max(0, h.streak - 1); if (completed) toast.success(`Habit completed! Streak: ${streak}`); return { ...h, completed, streak }; } return h; })); }; const toggleChecklist = (id: string) => { setChecklist(checklist.map(c => { if (c.id === id) { const completed = !c.completed; if (completed) toast.success("Self-care ritual completed"); return { ...c, completed }; } return c; })); }; const deleteHabit = (id: string) => { setHabits(habits.filter(h => h.id !== id)); toast.info("Habit removed"); }; const deleteChecklist = (id: string) => { setChecklist(checklist.filter(c => c.id !== id)); toast.info("Ritual removed"); }; return (

{/* Habit Tracker Section */}

Consistency

Habit Sanctuary

Small daily alignments build lifelong beauty.

{habits.map((habit) => (

{habit.name}

🔥 {habit.streak}d

))}

{/* Self-Care Checklist Section */}

Mind, Body & Soul

Self-Care Rituals

Checklists to keep you grounded and elegant.

setNewChecklist(e.target.value)} placeholder="Add self-care ritual..." className="flex-1 px-4 py-3 rounded-xl border border-[hsl(var(--border))] focus:border-[hsl(var(--accent))] focus:outline-none text-sm bg-white" />

{categories.map((cat) => ( ))}

{checklist.map((item) => (

{item.text}

{item.category}

))}

); } // --- OUTFIT INSPIRATION --- function StylePage() { const [selectedOutfit, setSelectedOutfit] = useState(null); return (

Aesthetic Curator

Outfit Inspiration

Curate your lookbook, align your confidence, and design your style.

{MEDIA.outfits.map((outfit) => (

{ setSelectedOutfit(outfit); toast.info(`Viewing details for ${outfit.name}`); }} >

{ e.currentTarget.src = "data:image/svg+xml;utf8,"; }} />

{outfit.tag}

{outfit.name}

Click to view details & styling notes

))}

{/* Outfit Modal / Detail View */} {selectedOutfit && ( setSelectedOutfit(null)} > e.stopPropagation()} >

{selectedOutfit.tag}

{selectedOutfit.name}

A beautifully balanced ensemble designed for effortless flow. Pairs well with minimalist jewelry and soft, natural tones.

Styling Elements

• Silk/Linen Blend Tops
• Tailored Neutral Trousers
• Delicate Gold Accent Rings

)}

); } // --- AI LIFESTYLE COACH --- function CoachPage() { const [messages, setMessages] = useState([ { sender: 'coach', text: "Hello, lovely. I am Aura, your personal lifestyle and aesthetic coach. How can I help you refine your routines, style, or self-care today?", timestamp: "10:00 AM" } ]); const [input, setInput] = useState(''); const [isTyping, setIsTyping] = useState(false); const handleSend = (e: React.FormEvent) => { e.preventDefault(); if (!input.trim()) return; const userMsg: Message = { sender: 'user', text: input, timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; setMessages([...messages, userMsg]); setInput(''); setIsTyping(true); // Simulate luxury AI response setTimeout(() => { let coachResponse = "That sounds lovely. Let's focus on aligning your morning habits with gentle, intentional movements. Have you tried a 5-minute breathing ritual before checking your screen?"; if (input.toLowerCase().includes('style') || input.toLowerCase().includes('outfit')) { coachResponse = "For your style alignment, I recommend embracing soft neutrals like ivory white and misty beige. They project a calm, highly confident aura that feels effortless."; } else if (input.toLowerCase().includes('routine') || input.toLowerCase().includes('morning')) { coachResponse = "A premium morning routine begins the night before. Try to power down screens 1 hour before bed, and start your morning with warm lemon water and 10 minutes of journaling."; } else if (input.toLowerCase().includes('confidence') || input.toLowerCase().includes('self-care')) { coachResponse = "Confidence is built through small promises kept to yourself. Start with one simple daily self-care ritual and honor it completely. You are worthy of your own care."; } const coachMsg: Message = { sender: 'coach', text: coachResponse, timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; setMessages(prev => [...prev, coachMsg]); setIsTyping(false); }, 1500); }; return (

Your Confidante

AI Lifestyle Coach

Refined guidance for your habits, style, and daily sanctuary.

{/* Chat Header */}

Aura Assistant Online & Aligned

{/* Messages Area */}

{messages.map((msg, idx) => (

{msg.text}

{msg.timestamp}

))} {isTyping && (

Aura is formulating guidance...

)}

{/* Input Area */}

); } // --- PROGRESS PAGE --- function ProgressPage() { return (

Your Evolution

Aura Alignment

Visualize your consistency, self-care progress, and daily balance.

{/* Stats Card 1 */}

Weekly Consistency

92%

You missed only 1 ritual this entire week. Beautifully done.

{/* Stats Card 2 */}

Mindfulness Hours

4.5 hrs

Dedicated to meditation, journaling, and breathing exercises.

{/* Stats Card 3 */}

Confidence Index

Optimal

Based on your mood logs, outfit planning, and coach alignments.

{/* Weekly Self-Improvement Plan */}

Weekly Self-Improvement Plan

Your Theme: "Graceful Grounding"

Focus Area: Morning Stillness

Spend the first 10 minutes of your day without digital screens. Breathe in the morning air, sip warm water, and set one clear intention.

Focus Area: Aesthetic Cohesion

Plan your outfits on Sunday evening. Choosing your garments in advance removes morning decision fatigue and builds true elegance.

Focus Area: Evening Reflection

Reflect on 3 beautiful moments from your day before closing your eyes. End your day on a high-vibrational note.

); } // --- MAIN APP COMPONENT --- export default function App() { const [user, setUser] = useState(() => { const saved = localStorage.getItem('aura_user'); return saved ? JSON.parse(saved) : null; }); const handleLogin = (userData: UserProfile) => { setUser(userData); localStorage.setItem('aura_user', JSON.stringify(userData)); }; const handleLogout = () => { setUser(null); localStorage.removeItem('aura_user'); toast.info("Logged out of Aura sanctuary"); }; return ( } /> } /> {/* Protected Routes */} : } /> : } /> : } /> : } /> : } /> } /> ); }