Build a React application acting as a native mobile app prototype for Wingmate, a vertical mental health platform designed to treat the fear of flying (aerophobia) using Cognitive Behavioral Therapy (CBT) and live AI coaching.
Use Vite, React, Tailwind CSS, lucide-react for icons, and motion/react for smooth entrance animations. The app must run entirely within a simulated iPhone UI frame.
1. App Layout & Phone Frame Setup
- Create a PhoneFrame component to wrap the entire application.
- The phone frame should have a maximum width of 360px and a maximum height of 800px (or 90vh), centered on a dark background (#0F172A).
- The phone itself should have thick, dark, rounded bezels (bg-[#1E293B], rounded-[48px], p-2) and an inner screen with a light background (#F8FAFC, rounded-[40px]).
- Include absolute positioned mock UI elements: a notch, a status bar (showing time, wifi, battery), and a home horizontal indicator line at the very bottom.
- Ensure the main scrollable content area uses a custom CSS utility class to hide the scrollbar (.no-scrollbar).
- Create a fixed Bottom Navigation Bar inside the screen with 4 tabs: Home, Course, Coach, and Community. Style unselected tabs as faded slate, and the active tab as bright sky blue snippet.
2. Design System & Theming
- Immersive UI: Use polished, modern UI elements. Avoid generic defaults. Use Tailwind's rounded-3xl for most cards.
- Colors: Use sky, indigo, slate, and emerald as the primary palette.
- Use subtle borders (border-slate-100) and slight box shadows shadow-sm for depth. Use strong, vibrant gradients for primary calls to action (e.g., bg-gradient-to-br from-sky-500 to-indigo-600).
3. Views Requirements
Home View:
- Welcome Header: "Welcome back" eyebrow text, and "Hi, Jamie" main title.
- Flight Ticket Card: A vibrant gradient card displaying an upcoming flight (LHR to DPS). Include a dotted/dashed line connecting the airports with a small rotated airplane icon. Show "Departure in 14 days" and an "On Track" status.
- SOS Button: A prominent card/button ("Anxious right now?") asking the user to chat with their coach. Use a heart pulse icon.
- CBT Progress Module: A card showing the user's current progress in the CBT course (e.g., "Module 2: Understanding Turbulence - 12 mins left").
- Fact Card: A dark slate card at the bottom displaying an aviation safety fact of the day.