brave-bmw

byBMW INDIA OFFICIAL

Create a premium, high-fidelity full-stack web application dedicated to the entire history, present, and future of BMW, featuring an interactive virtual custom car garage. The app should be built with a sophisticated, minimalist luxury design using a Deep Black, Dark Grey, and White color palette, accented with classic BMW M-Sport colors (Royal Blue, Light Blue, Dark Red) for interactive elements and state tracking. Implement the following full-stack features and pages: ### 1. Database & Navigation Structure - **Global Navigation:** A sleek, sticky header allowing seamless switching between the historical timeline, the live showroom database, the custom configurator, and a user garage. - **A-to-Z Historical Database:** - Build a structured data model tracking BMW's eras: Vintage (1916-1950s), Classics (1960s-1980s), Modern Era (1990s-2010s), Current Lineup (Present), and The Neue Klasse Concepts (Future). - Key models to explicitly seed into the UI: 328 Roadster, 507 Roadster, M1, E30 M3, E39 M5, i8, up to the current i7, XM, and upcoming Neue Klasse EVs. - Implement a real-time text filter and category tabs (ICE, Hybrid, Electric, M-Performance) so users can seamlessly sort the database. ### 2. Interactive "BMW Custom Studio" (The Configurator) - Create a functional, highly visual custom vehicle builder workspace inside the application. - **Model Selection:** Allow users to choose a base model (e.g., M4 Competition, i7 Luxury Sedan, or a Neue Klasse Concept). - **Interactive State Configurations:** Implement live, state-driven buttons that update a dynamic car preview component instantly when clicked: - **Exterior Paint:** Alpine White, Black Sapphire Metallic, Isle of Man Green, Portimao Blue, and Toronto Red. - **Wheel Designs:** 19" M Double-spoke, 20" M Star-spoke, and 21" Aerodynamic bi-color wheels. - **Interior Upholstery:** Silverstone Leather, Kyalami Orange, Black Merino, and Cognac Sensatec. - **Performance Packages:** M Carbon Exterior Package, Executive Package, and Shadowline Trim. - Include a live "Spec Sheet Summary" panel on the side that updates text and total estimated pricing dynamically based on the user's selections. ### 3. Full-Stack "My Saved Garage" Feature - Build backend state logic to allow users to click a "Save to My Garage" button once they finish configuring their custom BMW. - Create a dedicated "My Saved Garage" tab/dashboard within the application that displays a list of all their custom-configured creations with a button to reload that specific configuration or delete it. ### 4. Tone, UX, and Micro-interactions - **Visual Presentation:** Use clean card layouts, rich typography (sans-serif headings, high-readability body text), and subtle hover animations for all clickable configurations. - **Tone:** Authoritative, luxury-focused, celebrating engineering excellence and the "Joy of Driving" (Freude am Fahren). - Use placeholders for high-resolution automotive imagery, ensuring UI components dynamically reflect configuration changes instantly.