Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to build a web application for generating lead magnets with multiple templates and color palettes. The application will allow users to create customizable lead magnets easily, enhancing their marketing efforts and lead generation processes.

## CORE FEATURES
1. **Template Library**: Users can choose from a variety of professionally designed lead magnet templates tailored for different industries and marketing strategies.
2. **Color Palette Selection**: Users can select from predefined color palettes or customize their own to match their branding.
3. **Customizable Content Areas**: Each template will have editable sections where users can input their own text, images, and branding elements.
4. **Preview and Export Options**: Users can preview their lead magnets in real-time and export them in various formats (PDF, PNG, etc.).
5. **User Accounts**: Allow users to create accounts to save their designs and access them later.
6. **Analytics Dashboard**: Provide users with insights on how their lead magnets are performing in terms of downloads and engagement.

## 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 hero section for lead magnet creation, a sidebar for template selection, and a main content area for editing and previewing the lead magnet.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux Toolkit for state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Build the header, sidebar, and main content area components, applying Tailwind CSS for styling.
3. **Implement Template Library**: Develop the template library to display available templates, allowing users to select and load them into the editor.
4. **Color Palette Functionality**: Create a color palette selection feature that updates the template in real-time based on user selection.
5. **Build the Editor**: Develop the main editing interface where users can modify text, images, and other elements in the selected template.
6. **Add Preview and Export Features**: Implement functionality to preview the lead magnet and export it in different formats.
7. **User Authentication**: Set up user authentication and account creation for saving projects.
8. **Analytics Dashboard**: Create a dashboard for users to view metrics on their lead magnets.

## USER EXPERIENCE
Users will start on the homepage where they can select a template from the library. Once a template is chosen, they will enter the editor, where they can customize their lead magnet using a simple and intuitive interface. Users can preview their lead magnet in real-time, with options to save their work and export it for use. The application will be responsive, ensuring a seamless experience across devices.