Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This project involves creating a web application focused on providing a streamlined user experience for diagnostic automation services. The application will consist of a landing page that introduces the service and a wizard for users to input their business information. The design will emphasize a minimalist aesthetic, leveraging ample white space and clear typography to enhance readability and engagement.

# CORE FEATURES
1. **Landing Page**: A visually appealing introduction that clearly communicates the service's value proposition, featuring a prominent call-to-action (CTA) for users to begin their diagnostic process.
2. **Wizard Interface**: A step-by-step input form that guides users through five essential questions about their business to generate customized reports.
3. **Local Storage Persistence**: Users' responses will be saved in local storage to ensure a seamless experience as they navigate through the wizard.
4. **Dynamic Progress Tracking**: A progress bar will indicate the user's current step within the wizard, enhancing usability and engagement.
5. **Real-time Updates**: Using Supabase for real-time updates on the user's report status, ensuring they receive timely feedback as they complete the process.

# 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**: The main layout will consist of a centered hero section on the landing page, followed by a clear, structured wizard format for input. Each screen of the wizard will occupy full height to maintain focus on the current question.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui for reusable components
- **State Management**: Local state management for wizard steps; localStorage for persistence

# IMPLEMENTATION STEPS
1. **Set up the React Application**: Initialize a new React application using Create React App with TypeScript support.
2. **Install Required Packages**: Install Tailwind CSS, shadcn/ui, and any other necessary dependencies.
3. **Create Design Tokens**: Define design tokens for colors, typography, and border radius in a styles file following the specified design guidelines.
4. **Develop the Landing Page**: 
   - Create a hero section with a headline, subheading, and a prominent CTA button styled with the primary color.
   - Ensure that the layout is responsive and accessible.
5. **Implement the Wizard Component**: 
   - Create a wizard component that uses local state to track the current step.
   - Include input fields for each of the five questions, ensuring they are clearly labeled and accessible.
   - Implement progress tracking with a visual progress bar.
6. **Local Storage Integration**: Implement functionality to save and retrieve user responses from local storage as they progress through the wizard.
7. **Real-time Updates**: Set up Supabase to handle updates for the user’s diagnostic report, ensuring the app can respond to changes in real-time.
8. **Testing and Optimization**: Conduct testing for usability and performance, making adjustments as necessary to improve the user experience.

# USER EXPERIENCE
Users will begin on the landing page, where they will see a clear value proposition and a call to action. Upon clicking the CTA, they will enter the wizard, where they will answer questions one at a time. Each question will transition smoothly, with the progress bar updating to reflect their journey. Users' responses will be saved automatically, allowing them to revisit where they left off without losing any input. The overall experience will be intuitive, fast, and engaging, encouraging users to complete the diagnostic process efficiently.