Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
TorqueAI is a modern web application designed to serve as an AI-powered car diagnostic assistant. It helps drivers easily understand car problems, their likely causes, and estimated repair costs before visiting a garage. The application aims to provide instant, unbiased, and accessible information to users, enhancing their peace of mind when faced with automotive issues.

## CORE FEATURES
1. **Home Page**: Engaging hero section with a clear headline, subhead, and a single call-to-action (CTA) button directing users to the diagnostic tool.
2. **Diagnostic Tool**: A guided form where users input their car's details and symptoms, leading to an AI-generated diagnosis and cost estimate.
3. **Common Faults Index**: An organized index of common problems categorized by car brands, linking to detailed fault pages with symptoms, causes, and repair costs.
4. **Symptoms Pages**: SEO-optimized pages that address specific symptoms drivers may experience, improving discoverability through search engines.
5. **FAQ Section**: An accordion-style FAQ that answers common user queries, enhancing transparency and trust in the AI system.
6. **Blog**: A simple listing of articles providing useful information and tips related to car maintenance and diagnostics.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: Single-column layout for forms and diagnostic results; multi-column grid for fault index and blog listings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if needed for managing state across components)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling, along with any necessary libraries for routing (React Router).
3. **Create Core Components**:
   - Develop the Home page with hero section, how it works, testimonials, and FAQ accordion.
   - Implement the Diagnose page with a guided form and results display.
   - Create the Common Faults and Symptoms pages with structured layouts.
   - Set up the Blog page with article templates.
4. **Implement Routing**: Use React Router to manage navigation between pages.
5. **Integrate AI Diagnostic Logic**: Mock the AI response logic for diagnosis and implement the API call structure for future enhancements.
6. **SEO Optimization**: Ensure each page has unique titles, meta descriptions, and structured data (JSON-LD) for SEO.
7. **Test Functionality**: Conduct user testing to ensure the app is intuitive and easy to navigate. Optimize for mobile devices.

## USER EXPERIENCE
Users will interact with TorqueAI by first visiting the Home page, where they will be greeted with a clear message about the app's purpose. They will have a straightforward path to describe their car problems using the diagnostic tool, resulting in a calm and reassuring experience. Users can easily navigate to common faults, symptoms, and blog content, ensuring that they can find the information they need quickly and efficiently. The one primary CTA per screen will guide them smoothly through their journey, minimizing stress and confusion.

This structure and detailed plan will ensure that TorqueAI meets user needs while maintaining a minimalist and user-friendly design.