Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a minimalist web app designed to enhance user engagement and provide a seamless experience while showcasing content effectively. Its main purpose is to serve as a professional platform where users can access, explore, and interact with content in a clean and organized manner.

## CORE FEATURES
1. **Content Display**: A clean and organized area to showcase articles, images, and other media with easy navigation.
2. **User Dashboard**: A personalized dashboard for users to track their activities and access favorite content.
3. **Search Functionality**: An intuitive search bar that allows users to quickly find specific content or topics.
4. **Responsive Design**: A fully responsive layout that adapts to various screen sizes, ensuring a consistent experience across devices.
5. **Feedback System**: A user feedback mechanism that allows users to submit suggestions or report issues seamlessly.
6. **Analytics Integration**: A feature that provides insights into user interaction and engagement metrics.

## DESIGN SPECIFICATIONS
- **Visual Style**: The design should maintain a minimalist aesthetic with a focus on simplicity. Use ample white space to enhance readability and user focus.
- **Color Mode**: Implement a light theme with dark text on light backgrounds to promote clarity and ease of reading.
- **Layout**: Utilize a grid layout for content organization, with a defined header, body, and footer. The header should contain navigation links, while the footer includes contact information and social media icons.
- **Typography**: Use a modern sans-serif font for headings (e.g., Montserrat) and a clean serif font for body text (e.g., Merriweather). Establish a clear hierarchy with larger font sizes for headings and consistent spacing for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and enhance code maintainability.
- **Styling**: Tailwind CSS for rapid prototyping and consistent styling across components.
- **UI Components**: Utilize shadcn/ui for accessible and easy-to-use UI components.
- **State Management**: Consider using React Context API or Redux if complex state management is required.

## IMPLEMENTATION STEPS
1. **Project Setup**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout**: Design a responsive layout structure using Tailwind CSS classes for the header, main content area, and footer.
3. **Implement Core Features**: 
   - Develop the Content Display feature by creating components for articles and media.
   - Build the User Dashboard with widgets for activity tracking.
   - Integrate a search bar at the top of the layout.
   - Create a feedback submission form accessible from the dashboard.
   - Add analytics tracking using an external service or custom-built solution.
4. **Styling Components**: Apply Tailwind CSS styles to all components, ensuring consistency with the minimalist design.
5. **Testing**: Conduct thorough testing across various devices and browsers to ensure responsiveness and functionality.
6. **Deployment**: Prepare the application for deployment using a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will be greeted with a clean interface upon entering the app. They can easily navigate through the main features using the header links. The dashboard will offer personalized insights, while the content display will allow for effortless exploration. The search functionality will enable quick access to specific topics, and the feedback system will facilitate user engagement, ensuring their voices are heard. Overall, the application should feel intuitive and responsive, enhancing user satisfaction.