Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a powerful tool designed for marketers and product managers to create visually stunning prototypes, infographics, and various design assets. It offers an interactive experience with 2D and 3D prototype generation, customizable themes, and engaging features that foster creativity and productivity, all while providing a fun break area with light-hearted games.

## CORE FEATURES
1. **Prototype Generation**: Create detailed prototypes with options for 2D and 3D visualizations, allowing users to present their ideas in multiple perspectives.
2. **Infographic Creation**: A specialized tool for generating visually appealing infographics tailored to diverse marketing needs, with drag-and-drop functionality.
3. **Customizable Themes**: Users can choose from a variety of themes (e.g., pink princess, professional, Bollywood, Marvel, K-Pop) to personalize their workspace and enhance creativity.
4. **Interactive Break Area**: An engaging section featuring cute and interesting time-pass games that provide a refreshing break for users, fostering a balanced workflow.
5. **Export Options**: Users can export their designs in various formats (e.g., PNG, PDF) suitable for presentations and sharing across platforms.
6. **Advanced Search Functionality**: A powerful search feature allows users to quickly find templates, assets, or themes, enhancing efficiency.
7. **User-Friendly Interface**: A clean and intuitive layout that simplifies the design process, ensuring that even users with minimal design experience can navigate effortlessly.
8. **Responsive Design**: Fully responsive layouts that work seamlessly across devices, ensuring an optimal user experience on desktops, tablets, and mobile devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a focus on clean, simple designs that utilize ample white space and a minimal color palette. The design prioritizes clarity and ease of use.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability and create a fresh atmosphere.
- **Layout**: The main layout consists of a prominent hero section with a clear call-to-action, followed by sections for core features, an interactive break area, user testimonials, and a footer with contact information. Each section should be visually distinct yet cohesive.
- **Typography**: Utilize sans-serif fonts for headers (e.g., Montserrat) and body text (e.g., Roboto) to maintain a clean, modern look. Emphasize a clear hierarchy with larger font sizes for headings and appropriate spacing for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building interactive user interfaces.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid UI design and customization.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Implement React's built-in Context API for managing theme and user preferences.
- **Game Integration**: Integrate simple, engaging mini-games using HTML5 and JavaScript for a delightful break experience.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize the project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components, along with any necessary libraries for game integration.
3. **Create Layout Structure**: Establish the main layout with a hero section, core features, interactive break area, testimonials, and footer.
4. **Develop Core Features**: Implement the prototype and infographic generation tools using React components.
5. **Theme Customization**: Build a theme switcher that allows users to select and apply different themes dynamically.
6. **Add Search Functionality**: Create an advanced search feature that allows users to quickly locate templates, assets, and themes.
7. **Develop Interactive Games**: Integrate light-hearted mini-games into the break area to provide fun and relaxation for users.
8. **Responsive Design**: Ensure all components are responsive using Tailwind CSS breakpoints for optimal viewing on all devices.
9. **Testing**: Conduct thorough testing to ensure all features work as intended across devices and browsers.
10. **Deployment**: Prepare the application for deployment on a suitable hosting platform.

## USER EXPERIENCE
Users will land on a visually striking homepage featuring a prominent hero section that succinctly communicates the app's purpose. They can easily navigate to create prototypes or infographics via clear, accessible buttons. The interactive break area invites users to take refreshing breaks with engaging games, enhancing their overall experience. The theme customization feature allows users to switch themes seamlessly, adding a personal touch. Throughout the design process, users will receive tooltips and prompts that guide them, ensuring that even those with minimal design experience can produce high-quality outputs. Finally, exported designs can be easily shared for presentations, rounding out a comprehensive user experience tailored to marketers and product managers.