Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a web application that serves as a website generator, akin to Lovable. The primary purpose is to enable users to easily create and customize their own websites using a simple, intuitive interface. The application will focus on providing a minimalist design that emphasizes usability and user experience.

## CORE FEATURES
1. **User Registration and Authentication**: Users can create an account and log in to save their projects and access them later.
2. **Template Selection**: A library of pre-designed templates that users can choose from as a starting point for their website.
3. **Drag-and-Drop Editor**: An intuitive editor that allows users to customize their website layout by dragging and dropping elements.
4. **Real-Time Preview**: Users can see a live preview of their changes as they make them, ensuring that the final result meets their expectations.
5. **Export Options**: Users can export their completed websites as static HTML/CSS files for hosting on any web server.
6. **Help and Tutorials**: A dedicated section offering guides and tutorials to help users navigate the website creation 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 layout will feature a top navigation bar, a main content area for the editor, a sidebar for template options, and a footer with contact information and links to tutorials.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing application state.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React project with TypeScript and install dependencies including Tailwind CSS and shadcn/ui.
2. **Create Authentication Module**: Implement user registration and login functionality using Firebase or a similar backend service.
3. **Build Template Library**: Develop a component to display a selection of pre-designed templates that users can choose from.
4. **Develop Drag-and-Drop Editor**: Use libraries like React DnD to create a drag-and-drop interface for customizing website layouts.
5. **Implement Real-Time Preview**: Set up a preview pane that updates in real-time as users make changes in the editor.
6. **Export Functionality**: Create a feature that allows users to export their projects as HTML/CSS files.
7. **Add Help and Tutorials Section**: Develop a section with guides and video tutorials to assist users in using the application.

## USER EXPERIENCE
Users will start by signing up or logging into the application. Once inside, they can choose a template from the library. The drag-and-drop editor will allow them to customize their website's layout and content, while the real-time preview shows them the changes as they make them. After completing their website, users will have the option to export their project, and they can access tutorials for additional guidance if needed. The whole experience will be designed to be intuitive and user-friendly, ensuring a smooth journey from concept to completion.