Build a React web application called "HabitGate". It is a gamified productivity app that locks "addictive" apps (like Instagram or TikTok) behind real-world habits (like running or reading) using a token economy system.
1. Design & Aesthetic (Critical)
- Theme: Ultra-modern dark mode. Use zinc-950 for the background, zinc-900 for cards, and zinc-100 for text.
- Accents:
- Emerald (#10b981): associated with "Earn" actions (completing habits).
- Indigo (#6366f1): associated with "Spend" actions (unlocking apps).
- Red/Orange: For wasted time or specific integrations (Strava).
- Style: Rounded corners (xl or 2xl), subtle borders (border-zinc-800), glassmorphism on the sticky header, and crisp iconography.
- Font: Inter (sans-serif).
2. Core Features & State Management
- Time Bank: A global state tracking the user's balance in minutes. Starts at 45m.
- Gamification: Track User Level, XP, and Current Streak.
- Token Economy Logic:
- Completing a habit = Adds minutes to the bank (e.g., +30m).
- Unlocking an app = Deducts minutes from the bank (e.g., -15m).
- Gemini AI Coach: A component that simulates an API call to Google Gemini to give a witty, 1-sentence motivational quote based on the user's current stats (streak, completion rate).
3. Views & Navigation (Bottom Tab Bar)
The app should have 4 main views, switchable via a fixed bottom navigation bar:
- View 1: Dashboard (Home)
- Sticky Header: Shows "Welcome, [Name]" and the current "Time Bank" balance with a coin icon.
- AI Coach Card: A glowing card showing the AI's advice.
- Action Buttons: Two large cards to quickly jump to "Earn" or "Unlock".
- "Today's Operations": A list of habits to complete.
- View 2: Earn (Habits)
- List of daily tasks (e.g., "Morning Run", "Read 20 Pages").
- Each item shows the name, icon, and reward amount (e.g., "+30 min").
- Interaction: Clicking a habit marks it as complete (green style), plays a toast notification, and updates the balance.
- Integrations: If a habit is linked to an external source (like Strava), display a small badge (e.g., Orange badge for Strava).
- View 3: Spend (The Vault)
- A grid of locked apps (Instagram, YouTube, etc.).
- State: Apps appear greyed out/locked by default.
- Interaction: Clicking "Unlock" checks the balance. If sufficient, the app unlocks (glows purple) for a simulated 15 minutes.
- Emergency Unlock: Add a button to "Pay $1.00" for an emergency unlock if the user has no time credits.
- View 4: Profile (Stats)
- Hero Stats: 3-column layout showing Streak, Level, and XP.
- Chart: A Bar Chart (use Recharts) showing "Minutes Earned" (Green) vs "Minutes Wasted" (Red) over the last 7 days.
- Integrations Section: A list of external services (Strava, Apple Health) with "Connect/Disconnect" toggle buttons. Connecting them should simulate a loading state and then update the specific habits in the "Earn" view to show they are auto-tracked.
4. Technical Details
- Use lucide-react for icons.
- Use recharts for the analytics chart.