You are an expert full-stack developer and AI assistant tasked with creating a single-page responsive web application using React and Tailwind CSS. The application, named 'NeoWin', aims to help users optimize their Windows Virtual Machine (VM) performance on Apple's MacBook Neo, which has hardware limitations like the A18 Pro chip and 8GB of RAM. The goal is to provide a seamless and efficient experience for running Windows applications.
## PROJECT OVERVIEW
**Application Name:** NeoWin
**Goal:** To empower MacBook Neo users to achieve the best possible performance when running Windows in a virtual machine using software like Parallels Desktop. This involves intelligent configuration suggestions, performance optimization tools, and guidance tailored to the MacBook Neo's specific hardware constraints (ARM architecture, limited RAM).
**Problem Solved:** Users of MacBook Neo face performance bottlenecks when running Windows VMs due to limited RAM (8GB total, with 4GB minimum for Windows VM) and the ARM-based A18 Pro chip. This leads to slow performance, unresponsiveness, and frustration when trying to use essential Windows software or light gaming.
**Value Proposition:** NeoWin offers a streamlined, user-friendly platform that analyzes the user's MacBook Neo configuration and intended Windows VM usage, providing optimized settings and real-time performance enhancements. It demystifies VM tuning for less technical users and provides advanced tools for power users, ultimately making the MacBook Neo a more versatile computing device.
## TECH STACK
- **Frontend Framework:** React (using Vite for fast development server and build)
- **Styling:** Tailwind CSS (with Headless UI for accessible and unstyled components)
- **State Management:** Zustand (lightweight and efficient for global and local state)
- **Routing:** React Router DOM (for potential future expansion to multiple pages, though MVP is single-page)
- **Animations:** Framer Motion (for smooth UI transitions and micro-interactions)
- **Utilities:** `lodash` (for utility functions if needed), `uuid` (for generating unique keys)
- **Deployment Target:** Static site hosting (Vercel, Netlify, GitHub Pages)
## CORE FEATURES
### 1. VM Configuration Wizard
**Description:** An interactive step-by-step wizard that guides users through setting up their Windows VM for optimal performance on the MacBook Neo.
**User Flow:**
1. **Welcome Screen:** Briefly explains the purpose of NeoWin.
2. **Hardware Detection (Simulated):** The app will assume MacBook Neo specs (8GB RAM, A18 Pro chip). User confirms.
3. **Usage Scenario Selection:** User selects their primary use case: 'Office & Productivity', 'Development', 'Light Gaming', 'General Use', 'Legacy Apps'.
4. **Resource Allocation Suggestion:** Based on the selected scenario and the MacBook Neo's limitations, the wizard suggests optimal RAM allocation (e.g., 4GB for VM, leaving 4GB for macOS), CPU core allocation (e.g., 2-4 cores), and disk space.
5. **Virtualization Software Selection:** User confirms they are using Parallels Desktop (or a similar ARM-compatible VM software).
6. **Configuration Summary:** Displays the suggested settings for review.
7. **Apply Settings (Guidance):** Provides clear instructions on how to manually apply these settings within Parallels Desktop, as direct integration is beyond MVP scope.
### 2. Performance Optimization Suite
**Description:** A set of tools designed to actively improve the performance of the Windows VM and the host macOS system when the VM is running.
**User Flow:**
1. **Dashboard:** Shows current VM status (Running/Stopped), resource usage (simulated CPU/RAM), and available optimization actions.
2. **'Optimize Now' Button:**
* **macOS Process Management:** Temporarily pauses non-essential background macOS applications and system services identified as resource-intensive.
* **VM Resource Prioritization:** Adjusts VM settings (if supported by VM software API, otherwise provides instructions) to prioritize CPU and RAM for the VM when active.
* **Disk Cleanup (VM):** Suggests running Windows Disk Cleanup within the VM (provides instructions).
* **Startup Optimization:** Guides the user on disabling unnecessary startup programs in both macOS and Windows.
3. **Scheduled Optimization:** (Future Feature/Mention in notes) Option to schedule optimization tasks.
### 3. Usage Scenario Guide & Benchmarking
**Description:** Provides clear expectations and guidance based on different usage scenarios.
**User Flow:**
1. **Scenario Details:** User selects a scenario (e.g., 'Light Gaming').
2. **Expectation Setting:** Displays information like: 'Expected performance level (e.g., Casual gaming with low settings)', 'Recommended VM settings (RAM, CPU)', 'Potential bottlenecks', 'Tips for better performance'.
3. **Simulated Benchmark:** A simple, non-intrusive benchmark test (e.g., a short animation or calculation) that provides a relative performance score for the current setup compared to ideal settings. This score helps users understand the impact of optimizations.
## UI/UX DESIGN
- **Layout:** Single-page application (SPA) with a clean, modern, and intuitive interface. A main content area with a persistent navigation sidebar (collapsible on smaller screens).
- **Color Palette:** Primarily uses Apple-inspired aesthetics: Whites, light grays, and a subtle accent color (e.g., a muted blue or teal) for calls to action and highlights. Dark mode option.
- **Typography:** Clean sans-serif fonts like Inter or SF Pro Display for readability. Clear hierarchy using font sizes and weights.
- **Components:** Utilizes Headless UI for accessible, unstyled components (Buttons, Modals, Input Fields, Accordions, Tabs) that will be styled with Tailwind CSS.
- **Responsiveness:** Mobile-first approach. Layout should adapt gracefully from small mobile screens to large desktop monitors. Use Tailwind's responsive modifiers (sm:, md:, lg:, xl:).
- **Key Pages/Sections:**
- Hero Section: App title, brief description, CTA to start the wizard.
- Wizard Section: Stepped interface for configuration.
- Optimization Dashboard: Overview of VM status and optimization controls.
- Scenario Guide Section: Information cards for different use cases.
- Settings/About Section.
## COMPONENT BREAKDOWN
- **`App.jsx`:** Main application component, sets up routing (if needed for future), global layout.
- **`Layout.jsx`:** Main layout component with Header, Sidebar, and main content area.
- **`Sidebar.jsx`:** Navigation menu component.
- **`HeroSection.jsx`:** Welcome message and primary CTA.
- **`Wizard.jsx`:** Main component for the configuration wizard. Manages wizard steps and state.
- `WizardStep.jsx`: Renders content for each step of the wizard.
- `UsageSelection.jsx`: Component for selecting the usage scenario.
- `ResourceSlider.jsx`: Component for adjusting RAM/CPU allocation (visual slider).
- `ConfigSummary.jsx`: Displays the final configuration summary.
- **`OptimizationDashboard.jsx`:** Displays VM status and optimization controls.
- `StatusIndicator.jsx`: Shows if VM is running/stopped.
- `ResourceMonitor.jsx`: Displays (simulated) CPU/RAM usage charts.
- `OptimizeButton.jsx`: Primary button to trigger optimizations.
- `OptimizationActionCard.jsx`: Card explaining each optimization task.
- **`ScenarioGuide.jsx`:** Section for browsing different usage scenarios.
- `ScenarioCard.jsx`: Preview card for each scenario.
- `ScenarioDetailView.jsx`: Detailed view for a selected scenario.
- **`Footer.jsx`:** Standard footer.
- **`Button.jsx`:** Reusable button component (styled Headless UI button).
- **`Modal.jsx`:** Reusable modal component (styled Headless UI modal).
- **`Tooltip.jsx`:** For providing hints and explanations.
## DATA MODEL
- **State Management (Zustand):**
- `wizardStore`: Manages current wizard step, user selections (scenario, RAM, CPU), configuration summary.
- `optimizationStore`: Manages VM status (running/stopped), simulated resource usage, optimization toggles/status.
- `uiStore`: Manages global UI states like sidebar open/closed, dark mode.
- **Mock Data:**
- `scenarios.js`: Array of scenario objects, each with `id`, `name`, `description`, `icon`, `recommendedRAM`, `recommendedCPU`, `performanceExpectation`, `tips`.
- `optimizationTasks.js`: Array of task objects, each with `id`, `name`, `description`, `status` ('pending', 'in-progress', 'completed', 'skipped'), `actionFunction` (reference to a function to perform the task).
**Mock Data Example (`scenarios.js`):**
```javascript
[
{
id: 'office',
name: 'Office & Productivity',
icon: 'briefcase',
description: 'For daily tasks like email, word processing, spreadsheets, and web browsing.',
recommendedRAM: '4GB',
recommendedCPU: '2 cores',
performanceExpectation: 'Smooth and responsive for standard applications.',
tips: [
'Close unnecessary browser tabs.',
'Ensure macOS has sufficient free RAM.',
'Use built-in Windows apps when possible.'
]
},
// ... other scenarios
]
```
## ANIMATIONS & INTERACTIONS
- **Page Transitions:** Subtle fades or slides when navigating between sections (if using React Router later) or when modal components appear/disappear using Framer Motion.
- **Button Hovers:** Slight scale or background color change on buttons.
- **Loading States:** Use spinners or skeleton loaders within `OptimizationDashboard` when simulating resource fetching or applying optimizations.
- **Micro-interactions:** Animated checkmarks upon successful optimization task completion, subtle pulsing effect on the 'Optimize Now' button when optimizations are available.
- **Wizard Stepper:** Animated progress indicator for the wizard steps.
## EDGE CASES & ACCESSIBILITY (a11y)
- **Empty States:** Display informative messages when there are no optimization tasks to perform, no scenarios loaded, or during initial load.
- **Error Handling:** Gracefully handle potential errors during simulated processes. Display user-friendly error messages (e.g., 'Optimization failed. Please try again.').
- **Validation:** Ensure required fields in the wizard are filled. Validate resource allocation inputs (e.g., RAM cannot exceed available memory minus macOS needs).
- **Accessibility:** Use semantic HTML5 elements. Ensure all interactive elements are keyboard navigable and have clear focus states. Use ARIA attributes where necessary. Leverage Headless UI components which have built-in accessibility.
- **Responsiveness:** Ensure the app is usable across various screen sizes.
## SAMPLE DATA
1. **Scenario: 'Office & Productivity'**
* `id`: 'office'
* `name`: 'Office & Productivity'
* `recommendedRAM`: '4GB'
* `recommendedCPU`: '2 cores'
* `performanceExpectation`: 'Smooth performance for Word, Excel, Outlook, and web browsing.'
* `tips`: ['Keep macOS RAM usage below 4GB.', 'Avoid running heavy web apps simultaneously.']
2. **Scenario: 'Development'**
* `id`: 'dev'
* `name`: 'Development'
* `recommendedRAM`: '5-6GB' (if user willing to accept slower macOS)
* `recommendedCPU`: '4 cores'
* `performanceExpectation`: 'Sufficient for basic coding, text editing, and running lightweight development tools. May struggle with complex builds or multiple containers.'
* `tips`: ['Use VS Code or other low-resource editors.', 'Avoid running Docker/complex VMs within the Windows VM.', 'Close all non-essential apps on both OS.']
3. **Scenario: 'Light Gaming'**
* `id`: 'gaming'
* `name`: 'Light Gaming'
* `recommendedRAM`: '4GB'
* `recommendedCPU`: '3-4 cores'
* `performanceExpectation`: 'Capable of running older or less demanding games at low settings. Expect limitations.'
* `tips`: ['Lower in-game graphics settings significantly.', 'Close all background applications on macOS and Windows.', 'Ensure VM is running in exclusive full-screen mode.']
4. **Mock Optimization Task:**
* `id`: 'task_1'
* `name`: 'Pause Background macOS Apps'
* `description`: 'Temporarily suspends non-essential applications running in the background on macOS to free up RAM.'
* `status`: 'completed'
5. **Mock Optimization Task:**
* `id`: 'task_2'
* `name`: 'Prioritize VM Resources'
* `description`: 'Adjusts system settings to give the Windows VM higher priority for CPU and RAM.'
* `status`: 'pending'
6. **Mock VM Status:**
* `isRunning`: true
* `cpuUsage`: 65
* `ramUsage`: 72 (Percentage)
## DEPLOYMENT NOTES
- **Build Command:** `npm run build` or `yarn build` (using Vite).
- **Environment Variables:** Primarily for API keys if backend is introduced later. For MVP, no critical environment variables are needed.
- **Performance Optimizations:**
- Code Splitting: Vite handles this automatically.
- Lazy Loading: Implement lazy loading for components, especially those not in the initial viewport.
- Image Optimization: Ensure any included images are optimized.
- Production Build: Ensure the production build is minified and compressed.
- **Hosting:** Deploy the static build output to platforms like Vercel, Netlify, or GitHub Pages for easy, cost-effective hosting.
- **PWA Potential:** Consider adding PWA capabilities (manifest.json, service worker) for offline access and a more app-like experience later.