Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Webloom is a no-code website builder designed to empower users to create, customize, preview, and publish websites effortlessly without any coding knowledge. It facilitates an intuitive workflow, allowing individuals to transform their ideas into fully functional websites through a visual editor.

## CORE FEATURES
1. **User Authentication**: Secure login and registration process for users to manage their accounts.
2. **Dashboard**: A user-friendly interface where users can view their created websites, access templates, and manage their projects.
3. **Website Creation**: Users can select from a variety of templates to initiate their website project.
4. **Visual Website Editor**: A powerful drag-and-drop editor enabling users to customize text, images, sections, colors, and fonts without writing any code.
5. **Preview Functionality**: Users can preview their websites in real-time, ensuring they can see changes instantly.
6. **Publishing**: A streamlined process for users to publish their completed websites directly from the platform.

## 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 feature a header with navigation, a central content area for editing and previewing websites, and a sidebar for templates and tools, ensuring a seamless user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first CSS styling.
- **UI Components**: shadcn/ui for a consistent and modern UI experience.
- **State Management**: Redux or Context API (specify based on project needs).

## IMPLEMENTATION STEPS
1. **Set up the React project** with TypeScript and Tailwind CSS for styling.
2. **Implement user authentication** using a secure method (e.g., JWT).
3. **Design the dashboard interface** to display user projects and templates.
4. **Create the website creation flow**, allowing users to select and customize templates.
5. **Develop the visual website editor**, integrating drag-and-drop functionality and real-time updates.
6. **Implement the preview feature**, ensuring users can see changes as they make them.
7. **Set up the publishing process**, allowing users to publish their sites with ease.
8. **Test the application thoroughly** for usability and responsiveness across devices.

## USER EXPERIENCE
The user journey begins with authentication, where users log in or create an account. Once logged in, they are directed to the dashboard, where they can initiate a new website project. Users choose a template and enter the visual editor, where they can customize their site by dragging and dropping elements, changing text and images, and adjusting styles. They can preview their changes in real-time, ensuring their vision is accurately represented before publishing. The interface remains intuitive and straightforward, emphasizing a seamless experience for users of all skill levels.