Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a website generator that allows users to create various types of websites, including institutional sites, e-commerce stores, and landing pages, tailored to their specific business needs. The primary goal is to provide an intuitive interface that guides users through selecting their desired website type based on their industry, facilitating easy customization and deployment.

## CORE FEATURES
1. **Website Type Selection**: Users can choose from different website types, such as institutional, e-commerce, or landing page, tailored to their industry.
2. **Customization Options**: Users can customize layouts, color schemes, and content blocks to match their branding and preferences.
3. **Preview Functionality**: Users can preview their website in real-time as they make changes, ensuring a seamless design experience.
4. **Export Options**: Once finished, users can download their website files or publish directly to a hosting service.
5. **User Account Management**: Users can create accounts to save their projects and return to them later.
6. **Help & Support Section**: Access to tutorials, FAQs, and customer support for assistance during the website creation process.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, emphasizing clean lines and ample white space, with a focus on typography for clear communication.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal readability and a fresh aesthetic.
- **Layout**: A simple one-page layout featuring a header with navigation, a hero section for the main call-to-action, followed by sections for customization options, preview, and support resources.
- **Typography**: Use of modern sans-serif fonts for headings (e.g., "Roboto" or "Open Sans") and a legible serif font for body text to enhance readability and create a professional appearance.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid and responsive design
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic
- **State Management**: Consider using React Context API or Redux if needed for managing user data and preferences

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Main Layout**: Develop the main layout structure including the header, hero section, customization options, preview area, and support section.
3. **Implement Website Type Selection**: Build the component for users to select the type of website they want to create, ensuring it is intuitive and visually appealing.
4. **Develop Customization Features**: Code the functionality for users to modify layouts, colors, and content blocks, linking these changes to the preview section.
5. **Integrate Real-Time Preview**: Implement a live preview feature that updates as users make selections in the customization options.
6. **Add Export Functionality**: Create the backend logic for exporting the finalized website files or integrating with hosting services.
7. **User Account Functionality**: Develop user authentication and account management features to allow users to save and revisit their projects.
8. **Help & Support Section**: Create a dedicated section for tutorials and FAQs to guide users through the website creation process.

## USER EXPERIENCE
The application will provide a smooth and straightforward user journey, starting with a simple selection of the website type. Users will be guided through customization options with tooltips and visual aids, allowing for a hands-on experience. The real-time preview feature will enhance engagement by providing immediate feedback on changes. The help and support section will ensure users have access to the resources they need, fostering a sense of confidence and satisfaction in using the generator.