Create a high-fidelity, mobile-responsive web application prototype for "MealPrept," a service that reinvents meal prepping. The concept is: users cook a bulk "Base" (protein + carb) on Sunday, and use daily "Modifier Packs" (sauces/toppings) to change the flavor instantly.
Core Application Structure:
The app should have three distinct view states managed by a main orchestrator:
- Landing Page
- Onboarding Wizard
- User Dashboard
1. Landing Page:
- Header: Logo (ChefHat icon) and a "Login" button.
- Hero Section: Large typography ("Meal prep that doesn't suck"). A primary CTA button ("Build Your Plan") and social proof ("Joined by 10k+ preppers" with avatar bubbles).
- Visual Feature: On the right (desktop) or below (mobile), create a glassmorphism-style card floating over animated colored blobs (Emerald/Teal). This card should visually explain the process:
- "Sunday: 30 Min Prep" (Clock icon)
- "Weekday: 60 Sec Finish" (Sparkles icon)
- Stats showing "20g+ Protein" and "$8.50 per meal".
- Feature Grid: A 3-column section highlighting "Macro Perfect," "Zero Food Waste," and "Actually Tasty" with checkmark icons.
2. Onboarding Flow (Multi-step):
- When "Build Your Plan" is clicked, switch to a wizard.
- Progress Bar: Visible at the top, updating as the user advances.
- Steps:
- Goal: Options like "Lose Weight," "Build Muscle," etc.
- Diet: Options like "Balanced," "Keto," "High Protein."
- Base Protein: Options like "Sous-vide Chicken," "Ground Beef," "Tofu."
- Base Carb: Options like "Jasmine Rice," "Quinoa," "Zucchini Noodles."
- UI: Selectable cards with a thick border. When selected, the border turns Emerald Green and a checkmark appears.
- Logic: Store these choices to generate the user's dashboard data.
3. Dashboard (Main View):
- Header: "Hello, [Name]" and a Settings icon.
- Status Card: A distinct dark-themed card (Dark Slate background) showing the user's selected "Base Prep" (Protein & Carb) with a "Next Delivery: Sunday" badge. It should look premium.