You are an expert AI application developer specializing in creating single-page applications (SPAs) with a focus on performance and user experience. Your task is to build a web application that helps users leverage the full potential of their new iPad Air with the M4 chip. The application should provide personalized content recommendations, optimized workflows, and performance insights specifically tailored for the M4 chip's capabilities, particularly its AI and ML features.
**Project Title:** M4 Powerhouse iPad Companion
**Core Functionality:**
1. **Personalized Recommendations:** Based on user input (e.g., primary use cases like 'video editing', 'graphic design', 'music production', 'AI development', 'gaming'), recommend specific iPadOS apps and workflows that best utilize the M4 chip's power. Integrate with App Store APIs to fetch app details and user reviews.
2. **Workflow Optimization Hub:** Offer curated templates and best practices for common creative and productive tasks that are known to be demanding on the M4 chip. This could include project setup guides, asset bundles, or configuration tips for popular demanding apps.
3. **Performance Insights (Simulated):** Provide insights into how different tasks might leverage the M4 chip's CPU, GPU, and Neural Engine. This can be presented through illustrative graphics and explanations rather than real-time hardware monitoring (which is not feasible in a web SPA).
4. **App Integration Suggestions:** Suggest complementary apps that work well together for specific tasks, creating synergistic workflows. For example, suggesting a design app, a motion graphics app, and a video editing app for a video project.
**Technology Stack:**
* **Frontend:** Vue.js 3 (Composition API)
* **State Management:** Pinia
* **UI Framework:** Tailwind CSS
* **Routing:** Vue Router
* **APIs:** Mocked API for initial development, with placeholders for potential future integration with App Store APIs.
* **Build Tool:** Vite
**SPA Structure:**
* A single HTML file (`index.html`).
* All components, routes, and logic should be managed within the Vue.js application.
**Key Components to Develop:**
1. **`App.vue`:** The root component.
2. **`HomePage.vue`:** Landing page with a brief intro and a call to action to start customizing recommendations.
3. **`UserPreferences.vue`:** A form component where users select their primary use cases, creative fields, and potentially specific apps they use.
4. **`RecommendationList.vue`:** Displays recommended apps, workflows, and integration suggestions based on user preferences. Each recommendation should include a brief description highlighting M4 optimization.
5. **`WorkflowTemplateCard.vue`:** A card component to display individual workflow templates, including a title, description, and potentially a link to a more detailed guide (mocked).
6. **`PerformanceHighlight.vue`:** An illustrative component explaining how M4's CPU, GPU, and Neural Engine contribute to performance in different scenarios.
7. **`Navigation.vue`:** Simple navigation (if needed, perhaps just a header).
**Styling & UX:**
* Use Tailwind CSS for utility-first styling. Aim for a clean, modern, and professional aesthetic suitable for creative professionals.
* Ensure the application is fully responsive and works seamlessly on iPad devices.
* Implement smooth transitions and a clear user flow.
**Data Management (Mocking):**
* Use local JSON files or simple JavaScript arrays/objects to mock the data for apps, workflows, and performance insights.
* Example data structure for an app recommendation:
```json
{
"id": 1,
"name": "Procreate",
"category": "Graphic Design",
"description": "Powerful raster graphics editor for iPad. Leverages M4 GPU for smooth brush strokes and complex layers.",
"m4Benefit": "Enhanced GPU performance for complex brushes and large canvases.",
"appStoreUrl": "#"
}
```
**Development Steps:**
1. Set up the Vue.js project using Vite.
2. Configure Vue Router for navigation (even if it's just internal state changes).
3. Create the basic layout and navigation.
4. Develop the `UserPreferences.vue` component.
5. Implement the data mocking and the logic to generate recommendations based on preferences.
6. Develop the `RecommendationList.vue` and `WorkflowTemplateCard.vue` components.
7. Create the `PerformanceHighlight.vue` component with illustrative content.
8. Ensure all components are styled with Tailwind CSS and are responsive.
9. Test the application flow and user experience on different screen sizes, prioritizing iPad.
Begin by setting up the Vite + Vue.js project and creating the main layout and routing structure.