Build a mobile-first web application called "Eathletes", an AI nutritionist that connects to fitness wearables and generates daily fueling plans for athletes.
The app should be built with React, Tailwind CSS, Lucide React icons, and Framer Motion for smooth screen transitions. It should look and feel like a premium native iOS app (use a max-width container, rounded corners, and hide scrollbars).
Design System
- Theme: Dark mode only.
- Backgrounds: Deep dark grays (e.g., Tailwind
zinc-950 for the main background, zinc-900 for cards).
- Accents: High-contrast neon lime green (e.g., Tailwind
lime-400) for primary buttons, icons, and active states.
- Typography: Clean, modern sans-serif. Use zinc-400 for secondary text and white for primary text.
App Flow & Screens
- Welcome Screen
- Centered logo/icon (use the Activity icon from Lucide).
- Title: "Eathletes"
- Subtitle: "Your AI nutritionist. Fueled by your wearable data."
- Primary Button: "Connect Wearable" (with a Watch icon).
- Footer text mentioning compatibility with Garmin, Apple Health, Whoop, etc.
- Connecting Screen
- A simulated loading state showing a pulsing Watch icon and a spinning ring.
- Text: "Syncing Data... Pulling training history and baseline metrics."
- Automatically transitions to the Profile screen after 2.5 seconds.
- Profile Screen