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, Camera, Shirt, Brain, Crown, Flame, Target, CheckCircle2, ArrowRight, Upload, RefreshCw, Star, Shield, TrendingUp, Compass, User, Award, Play, ChevronRight, Lock } from "lucide-react"; import { Toaster, toast } from "sonner"; // --- MEDIA CONSTANTS --- const MEDIA = { before: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80", after: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=600&q=80", skincare: "https://images.unsplash.com/photo-1556228720-195a672e8a03?auto=format&fit=crop&w=600&q=80", haircut: "https://images.unsplash.com/photo-1621605815971-fbc98d665033?auto=format&fit=crop&w=600&q=80", outfit: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=600&q=80", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&q=80" }; // --- IMAGE FALLBACK HELPER --- const ImageWithFallback = ({ src, alt, className }: { src: string; alt: string; className?: string }) => { const [error, setError] = useState(false); return ( {alt}

setError(true)} /> ); }; // --- TYPES & INTERFACES --- interface UserState { persona: string; level: number; xp: number; streak: number; auraPoints: number; completedMissions: string[]; isPremium: boolean; scanHistory: Array<{ date: string; score: number; skin: string; symmetry: string; hair: string; }>; } const DEFAULT_USER_STATE: UserState = { persona: "The Quiet Luxury", level: 1, xp: 120, streak: 4, auraPoints: 850, completedMissions: [], isPremium: false, scanHistory: [ { date: "Day 1", score: 72, skin: "Fair / Dry", symmetry: "81%", hair: "Textured" } ] }; // --- MAIN APP COMPONENT --- export default function App() { const [user, setUser] = useState(() => { const saved = localStorage.getItem("aura_user_state"); return saved ? JSON.parse(saved) : DEFAULT_USER_STATE; }); useEffect(() => { localStorage.setItem("aura_user_state", JSON.stringify(user)); }, [user]); const updateState = (updater: (prev: UserState) => UserState) => { setUser(prev => updater(prev)); }; return (

{/* Mobile Mockup Wrapper */}

} /> } /> } /> } /> } /> } /> } />

); } // --- PERSISTENT LAYOUT SHELL --- function Layout({ children, user }: { children: React.ReactNode; user: UserState }) { const location = useLocation(); const navItems = [ { path: "/dashboard", label: "Glow", icon: Flame }, { path: "/scan", label: "Scan AI", icon: Camera }, { path: "/style", label: "Style", icon: Shirt }, { path: "/mindset", label: "Mind", icon: Brain }, { path: "/premium", label: "Aura Pro", icon: Crown, premium: true }, ]; return (

{/* Top Premium Header */}

AURA v1.2

{user.streak}d

{user.auraPoints} pts

{/* Main Content Area */}

{children}

{/* Bottom Navigation */}

); } // --- SCREEN 1: ONBOARDING --- function OnboardingScreen({ updateState, user }: { updateState: (updater: (prev: UserState) => UserState) => void; user: UserState }) { const navigate = useNavigate(); const [step, setStep] = useState(1); const [selectedPersona, setSelectedPersona] = useState("The Quiet Luxury"); const [goal, setGoal] = useState("Complete Transformation"); const personas = [ { name: "The Quiet Luxury", desc: "Minimalist elegance, premium grooming, flawless skin.", tag: "CLASSIC" }, { name: "The Hustler", desc: "High energy, sharp posture, structured jawline, power outfits.", tag: "ALPHA" }, { name: "The Clean Girl / Boy", desc: "Glass skin, athletic build, effortless aesthetic.", tag: "FRESH" }, { name: "The Trendsetter", desc: "Bold hairstyles, avant-garde style, high social aura.", tag: "VIRAL" } ]; const handleNext = () => { if (step < 3) { setStep(step + 1); } else { updateState(prev => ({ ...prev, persona: selectedPersona })); toast.success(`Welcome to your Aura Journey, ${selectedPersona}!`); navigate("/dashboard"); } }; return (

{/* Header */}

Aura AI Mentor

GLOW UP IS
AN ART.

Unlock your maximum potential aesthetic, posture, and social branding with custom AI recommendations.

{/* Step Content */}

{step === 1 && (

Choose Your Persona Archetype

{personas.map((p) => ( ))}

)} {step === 2 && (

Select Your Main Focus

{[ { title: "Complete Transformation", desc: "Skin, hair, style, fitness, and posture." }, { title: "Max Facial Symmetry & Skin", desc: "Target acne, jawline contour, grooming." }, { title: "High-Aura Styling", desc: "Wardrobe overhaul, aesthetic matching." }, { title: "Confidence & Social Brand", desc: "Voice tone, body language, social media." } ].map((g) => ( ))}

)} {step === 3 && (

Aura AI is Ready

We have calibrated your personalized daily roadmap, skincare protocols, and style recommendations for {selectedPersona}.

DAILY REWARD UNLOCKED

Complete your first AI scan today to receive +150 Aura Points and jump to Level 2.

)}

{/* Footer Actions */}

{[1, 2, 3].map((s) => (

))}

); } // --- SCREEN 2: DASHBOARD --- function DashboardScreen({ user, updateState }: { user: UserState; updateState: (updater: (prev: UserState) => UserState) => void }) { const [sliderVal, setSliderVal] = useState(50); const [activeTab, setActiveTab] = useState<"missions" | "roadmap">("missions"); const dailyMissions = [ { id: "m1", title: "Complete AI Face Scan", points: 150, category: "AI Analysis" }, { id: "m2", title: "Apply Morning Skincare", points: 50, category: "Skincare" }, { id: "m3", title: "10-Min Posture Realignment", points: 80, category: "Fitness" }, { id: "m4", title: "Listen to Confidence Session", points: 100, category: "Mindset" } ]; const roadmapMilestones = [ { week: "Week 1", title: "Foundation & Glow", desc: "Optimize hydration, fix posture alignment, and baseline skin health.", done: true }, { week: "Week 2", title: "Aesthetic Definition", desc: "Execute hairstyle shift and implement customized fashion templates.", done: false }, { week: "Week 3", title: "Vocal & Presence", desc: "Voice coaching, personal brand blueprint, confidence protocols.", done: false }, { week: "Week 4", title: "Peak Transformation", desc: "Final before/after assessment and social presence launch.", done: false } ]; const toggleMission = (id: string, points: number) => { const isCompleted = user.completedMissions.includes(id); updateState(prev => { const nextMissions = isCompleted ? prev.completedMissions.filter(mId => mId !== id) : [...prev.completedMissions, id]; const pointsDiff = isCompleted ? -points : points; let nextXp = prev.xp + pointsDiff; let nextLevel = prev.level; if (nextXp >= 300) { nextXp -= 300; nextLevel += 1; toast.success(`🎉 LEVEL UP! You are now Level ${nextLevel}!`); } else if (nextXp < 0) { nextXp = 0; } return { ...prev, completedMissions: nextMissions, auraPoints: prev.auraPoints + pointsDiff, xp: nextXp, level: nextLevel }; }); if (!isCompleted) { toast.success(`+${points} Aura Points! Keep glowing.`); } }; return (

{/* Welcome Banner */}

{user.persona}

Glow Up Journey

Level {user.level}

{/* XP Progress Bar */}

XP PROGRESS {user.xp} / 300 XP

{/* Before & After Interactive Slider */}

Interactive Progress

Day 1 vs Day 30

{/* After image (background) */} {/* Before image (clipped based on slider) */}

{/* Slider line overlay */}

↔

{/* Slider input element */} setSliderVal(Number(e.target.value))} className="absolute inset-0 w-full h-full opacity-0 cursor-ew-resize z-10" /> {/* Labels */}

DAY 1

DAY 30

{/* Tabs */}

{/* Tab Content */} {activeTab === "missions" ? ( {dailyMissions.map((mission) => { const isCompleted = user.completedMissions.includes(mission.id); return (

toggleMission(mission.id, mission.points)} className={`p-4 rounded-2xl border transition-all cursor-pointer flex items-center justify-between ${ isCompleted ? "bg-neutral-900/40 border-neutral-800/50 opacity-60" : "bg-neutral-900 border-neutral-800 hover:border-neutral-700" }`} >

{mission.category}

{mission.title}

+{mission.points}p

); })} ) : ( {roadmapMilestones.map((m, idx) => (

{m.week} {m.done && COMPLETED}

{m.title}

{m.desc}

))} )}

); } // --- SCREEN 3: AI SCANNER --- function ScanScreen({ user, updateState }: { user: UserState; updateState: (updater: (prev: UserState) => UserState) => void }) { const [isScanning, setIsScanning] = useState(false); const [scanProgress, setScanProgress] = useState(0); const [scannedImage, setScannedImage] = useState(null); const [activeAnalysis, setActiveAnalysis] = useState(null); const [isFutureMode, setIsFutureMode] = useState(false); // Simulated AI responses based on selected persona const mockAIResults = [ { score: 84, skin: "Hydrated / Clear", symmetry: "86%", hair: "Textured Fade", posture: "Forward Head (Slight)", futureAge: "25", futureAura: "94% Peak" }, { score: 79, skin: "Oily T-Zone", symmetry: "82%", hair: "Undercut", posture: "Rounded Shoulders", futureAge: "26", futureAura: "91% Peak" }, { score: 88, skin: "Optimal Glow", symmetry: "89%", hair: "Classic Taper", posture: "Perfect Alignment", futureAge: "24", futureAura: "97% Peak" } ]; const handleFileUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = () => { setScannedImage(reader.result as string); triggerScan(); }; reader.readAsDataURL(file); } }; const loadDemoPhoto = () => { setScannedImage(MEDIA.before); triggerScan(); }; const triggerScan = () => { setIsScanning(true); setScanProgress(0); const interval = setInterval(() => { setScanProgress(prev => { if (prev >= 100) { clearInterval(interval); setTimeout(() => { const randomResult = mockAIResults[Math.floor(Math.random() * mockAIResults.length)]; setActiveAnalysis(randomResult); setIsScanning(false); // Add to scan history updateState(prev => ({ ...prev, auraPoints: prev.auraPoints + 150, scanHistory: [ { date: `Day ${prev.scanHistory.length + 1}`, score: randomResult.score, skin: randomResult.skin, symmetry: randomResult.symmetry, hair: randomResult.hair }, ...prev.scanHistory ] })); toast.success("AI Analysis Complete! +150 Aura Points"); }, 600); return 100; } return prev + 10; }); }, 150); }; return (

Aura Scan Engine

AI Face & Posture Scanner

Upload a photo or try the demo to project your future peak aura and analyze symmetry.

{/* Future Projection Mode Toggle */}

AI Future Aura Projection Simulate your peak glow-up look 5 years later

{/* Scanner Viewport */}

{scannedImage ? ( <> Scan Target

{ event.currentTarget.onerror = null; event.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23f4f4f5'/%3E%3Cstop offset='1' stop-color='%23d4d4d8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' rx='48' fill='url(%23g)'/%3E%3Cpath d='M330 540 520 350l126 126 80-92 160 156H330Z' fill='%23a1a1aa'/%3E%3Ccircle cx='804' cy='286' r='56' fill='%23c4c4cc'/%3E%3C/svg%3E"; }} /> {isScanning && (

)} {/* Quick Action Overlay when image is loaded but not currently scanning */} {!isScanning && (

)} ) : (

No Photo Captured

Upload a front-facing portrait or use demo photo

Upload Photo to Scan

)} {/* Scanning Overlay */} {isScanning && (

{isFutureMode ? "Projecting Future Peak Aura..." : "Analyzing Facial Symmetry..."}

{scanProgress}% complete

)}

{/* Scan Results Display */} {activeAnalysis && !isScanning && (

{isFutureMode ? "PROJECTED FUTURE SCORE" : "CURRENT AURA SCORE"}

{isFutureMode ? (activeAnalysis.score + 10) : activeAnalysis.score} / 100

{isFutureMode ? "Ultimate Peak Aura" : "Excellent Symmetry"}

Skin Clarity

{isFutureMode ? "Max Glow / Flawless" : activeAnalysis.skin}

Symmetry

{isFutureMode ? "94% (Perfected)" : activeAnalysis.symmetry}

Hair Match

{activeAnalysis.hair}

Posture

{isFutureMode ? "100% Corrected Alignment" : activeAnalysis.posture}

{isFutureMode ? "Future Peak Projection Insights" : "AI Recommendation"}

{isFutureMode ? ( <> By continuing your custom {user.persona} daily skincare and posture roadmap, you will reach your peak physical symmetry and skin radiance around age {activeAnalysis.futureAge}. ) : ( <> Based on your symmetry, a {activeAnalysis.hair} will frame your face best. Focus on dynamic posture training to fix slight forward head tilt. )}

)} {/* Scan History */}

Scan History

{user.scanHistory.map((history, idx) => (

{history.date}

Skin: {history.skin} Hair: {history.hair}

Score {history.score}

))}

); } // --- SCREEN 4: STYLE & GROOMING --- function StyleScreen({ user, updateState }: { user: UserState; updateState: (updater: (prev: UserState) => UserState) => void }) { const [activeSection, setActiveSection] = useState<"skincare" | "hair" | "outfits">("skincare"); const skincareSteps = [ { step: "Step 1", title: "Gentle Hydrating Cleanser", desc: "Wash with lukewarm water to preserve natural skin oils." }, { step: "Step 2", title: "Niacinamide 10% Serum", desc: "Regulates oil production and minimizes pore appearance." }, { step: "Step 3", title: "Ceramide Moisturizer", desc: "Locks in deep hydration and repairs skin barrier." }, { step: "Step 4", title: "Broad-Spectrum SPF 50", desc: "Essential daily defense against UV aging." } ]; const hairSuggestions = [ { title: "The Textured Crop", faceShape: "Oval / Square", desc: "Adds volume on top while keeping sides clean for structure." }, { title: "Modern Middle Part", faceShape: "Heart / Oval", desc: "Effortless, classic Gen Z look that frames the forehead well." }, { title: "Buzz Cut with Fade", faceShape: "Chiseled / Round", desc: "High confidence, ultra-low maintenance, emphasizes strong jawlines." } ]; const outfitInspirations = [ { title: "Minimalist Streetwear", items: "Oversized heavy tee, relaxed cargo pants, clean retro sneakers." }, { title: "Quiet Luxury", items: "Knit polo, tailored trousers, leather loafers, minimalist watch." }, { title: "Athleisure Edge", items: "Premium zip-up hoodie, tech joggers, sleek running trainers." } ]; return (

Aesthetic Engine

Style & Grooming

Curated protocols to match your {user.persona} persona.

{/* Category Selector */}

{(["skincare", "hair", "outfits"] as const).map((sec) => ( ))}

{/* Dynamic Content */} {activeSection === "skincare" && (

DAILY PROTOCOL

Glass Skin Routine

{skincareSteps.map((s, idx) => (

{idx + 1}

{s.title}

{s.desc}

))}

)} {activeSection === "hair" && (

HAIR MATCHING

AI Hairstyle Suggestions

{hairSuggestions.map((h, idx) => (

{h.title}

{h.faceShape}

{h.desc}

))}

)} {activeSection === "outfits" && (

WARDROBE ENGINE

Aura Lookbooks

{outfitInspirations.map((o, idx) => (

{o.title}

{o.items}

))}

)}

); } // --- SCREEN 5: MINDSET & CONFIDENCE COACHING --- function MindsetScreen({ user, updateState }: { user: UserState; updateState: (updater: (prev: UserState) => UserState) => void }) { const [isPlaying, setIsPlaying] = useState(false); const [journalText, setJournalText] = useState(""); const handlePlaySession = () => { setIsPlaying(!isPlaying); if (!isPlaying) { toast.success("Playing: 'Unshakeable Presence' Audio Session"); } }; const saveJournal = () => { if (!journalText.trim()) { toast.error("Write something first!"); return; } updateState(prev => ({ ...prev, auraPoints: prev.auraPoints + 50 })); toast.success("Journal saved! +50 Aura Points"); setJournalText(""); }; return (

Confidence & Presence

Mindset Coaching

Develop high-value charisma, personal branding, and elite posture habits.

{/* Audio Session Player */}

DAILY CHARISMA SESSION

Unshakeable Presence

5-minute audio on vocal tone & body alignment.

{/* Personal Branding Prompts */}

Aura Journal Prompt

"What is one physical habit holding back your confidence today, and how will you consciously shift it?"

setJournalText(e.target.value)}
            placeholder="Reflect on your posture, eye contact, or style..."
            className="w-full h-24 bg-neutral-950 border border-neutral-800 focus:border-rose-500/50 rounded-xl p-3 text-xs text-neutral-200 placeholder-neutral-600 focus:outline-none transition-all resize-none"
          />
          <button
            onClick={saveJournal}
            className="w-full py-2.5 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-white text-xs font-bold transition-all"
          >
            Save Reflection & Claim Points
          </button>
        </div>
      </div>

{/* Social Branding Tips */}
      <div className="space-y-3">
        <h3 className="text-sm font-bold tracking-wide text-neutral-300 uppercase">Personal Brand Blueprints</h3>
        <div className="space-y-2">
          {[
            { title: "The 3-Second First Impression", desc: "Keep shoulders back, chin parallel to the floor, and pause before speaking to command attention." },
            { title: "Aesthetic Cohesion", desc: "Align your social media profiles with a single signature color palette and clean, high-contrast photography." }
          ].map((tip, idx) => (
            <div key={idx} className="p-4 bg-neutral-900/40 border border-neutral-800/50 rounded-2xl">
              <h4 className="text-xs font-bold text-white flex items-center gap-1.5">
                <Compass className="w-3.5 h-3.5 text-violet-400" />
                {tip.title}
              </h4>
              <p className="text-xs text-neutral-400 mt-1.5 leading-relaxed">{tip.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// --- SCREEN 6: PREMIUM & BUSINESS MODEL ---
function PremiumScreen({ user, updateState }: { user: UserState; updateState: (updater: (prev: UserState) => UserState) => void }) {
  const handleUnlock = () => {
    updateState(prev => ({ ...prev, isPremium: true }));
    toast.success("Welcome to AURA PRO! All features unlocked.");
  };

return (
    <div className="space-y-6">
      {/* Premium Pitch Header */}
      <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-neutral-900 via-rose-950/20 to-neutral-950 border border-rose-500/30 p-6 text-center space-y-4">
        <div className="absolute top-0 right-0 w-32 h-32 bg-rose-500/10 rounded-full blur-3xl pointer-events-none" />
        
        <Crown className="w-12 h-12 text-rose-400 mx-auto animate-pulse" />
        
        <div className="space-y-1">
          <h2 className="text-2xl font-black text-white">Unlock Aura Pro</h2>
          <p className="text-xs text-neutral-400 max-w-xs mx-auto">
            Gain unlimited AI face scans, personalized hairstyle 3D mockups, and daily direct feedback from virtual style mentors.
          </p>
        </div>

<div className="flex justify-center gap-4 py-2">
          <div className="text-center">
            <span className="text-xs text-neutral-500 block">Monthly</span>
            <span className="text-lg font-black text-white">$9.99</span>
          </div>
          <div className="w-px bg-neutral-800" />
          <div className="text-center">
            <span className="text-xs text-rose-400 font-bold block">Annual (Best Value)</span>
            <span className="text-lg font-black text-rose-400">$59.99</span>
          </div>
        </div>

{user.isPremium ? (
          <div className="py-3 bg-rose-500/20 text-rose-300 border border-rose-500/30 rounded-2xl text-xs font-bold">
            ✓ AURA PRO ACTIVE
          </div>
        ) : (
          <button
            onClick={handleUnlock}
            className="w-full py-3.5 rounded-2xl bg-gradient-to-r from-rose-500 to-violet-600 text-white font-bold text-xs tracking-wide shadow-lg shadow-rose-500/20 hover:brightness-110 active:scale-95 transition-all"
          >
            Unlock Premium Access
          </button>
        )}
      </div>

{/* App Business Model & Monetization Strategy */}
      <div className="space-y-3">
        <h3 className="text-sm font-bold tracking-wide text-neutral-300 uppercase">AURA Business Blueprint</h3>
        <div className="bg-neutral-900/60 border border-neutral-800/50 p-4 rounded-2xl space-y-4">
          <div>
            <h4 className="text-xs font-bold text-white flex items-center gap-1.5">
              <Shield className="w-3.5 h-3.5 text-rose-400" />
              Monetization Strategy
            </h4>
            <p className="text-xs text-neutral-400 mt-1 leading-relaxed">
              Freemium model with a low-friction entry. Standard users get 1 free AI scan/week. Pro users unlock unlimited scans, product affiliate links (skincare/clothing recommendations), and 1-on-1 asynchronous chat with style experts.
            </p>
          </div>

<div>
            <h4 className="text-xs font-bold text-white flex items-center gap-1.5">
              <TrendingUp className="w-3.5 h-3.5 text-violet-400" />
              Viral Social Mechanics
            </h4>
            <p className="text-xs text-neutral-400 mt-1 leading-relaxed">
              "Share Aura Score" integrated templates for TikTok & Instagram Stories. Gamified referral loops where inviting friends unlocks premium style packs and cosmetic badges.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}</article></body></html>

GLOW UP IS AN ART.