Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to facilitate a step-by-step form submission process using a vertical accordion layout for forms, while maintaining a horizontal stepper to visually indicate progress. The goal is to create a clean, user-friendly experience that simplifies form completion.

## CORE FEATURES
1. **Vertical Accordion Forms**: Each step in the form is presented in an accordion style, allowing users to expand and complete one section at a time, improving focus and usability.
2. **Horizontal Stepper**: A horizontal stepper at the top of the page indicates which step the user is on, providing clear navigation and progress tracking.
3. **Success Border Indicator**: Completed steps will have a success border to provide visual feedback, enhancing the user experience and encouraging completion.
4. **Responsive Design**: The application will be fully responsive, ensuring usability across devices from desktops to mobile phones.
5. **Validation Feedback**: Real-time validation for each form step, with error messages displayed clearly to guide users in correcting their inputs.

## DESIGN SPECIFICATIONS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- 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 layout will feature a horizontal stepper at the top, with vertically stacked accordion forms below, ensuring clarity and ease of navigation.


## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. Install Tailwind CSS and shadcn/ui for styling and UI components.
2. **Create Stepper Component**: Build a horizontal stepper component that receives props for the current step and completed steps, rendering indicators accordingly.
3. **Develop Accordion Form Component**: Create an accordion component for each step of the form. Each accordion section should expand/collapse and manage its own state for inputs.
4. **Implement Success Border**: Style each completed accordion section to include a success border using Tailwind CSS when the step is completed.
5. **Validation Logic**: Integrate form validation logic to provide real-time feedback on user inputs, displaying error messages as necessary.
6. **Responsive Design Testing**: Test the application on various devices to ensure the layout adapts correctly and the user experience remains seamless.

## USER EXPERIENCE
Users will begin on the landing page where they can see a clear horizontal stepper indicating their progress. As they fill out each section of the accordion forms, completed steps will be visually marked with a success border. The design focuses on minimal distractions, allowing users to concentrate on filling out the forms efficiently. Responsive adjustments will ensure that the application maintains usability across all screen sizes, enhancing overall user satisfaction.