Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with a platform to explore, save, and share famous and inspirational quotes. It features user authentication, categories for browsing quotes, a favorites section, and a daily subscription service for quotes delivered via email. The application emphasizes a clean and minimalist design, ensuring a pleasant user experience across all devices.

## CORE FEATURES
- **User Authentication**: Users can sign up and log in to access personalized features, including saving their favorite quotes.
- **Quote Categories**: A dedicated page displaying various categories of quotes. Clicking on a category reveals the next quote in that category.
- **Favorites Section**: Signed-in users can save and display their favorite quotes, making it easy to revisit inspirational content.
- **Daily Quote Subscription**: Users can opt to receive a daily inspirational quote via email, enhancing user engagement and motivation.
- **Contact Page**: A functional contact form that allows users to send messages, which are directed to the application owner's email.
- **Message Board**: A community feature where signed-in users can share their favorite quotes with one another.

## 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 application will feature a top navigation bar for easy access to different sections, a central content area for displaying quotes and forms, and a responsive design that ensures usability on mobile devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create the folder structure**: Organize components, pages, and utilities within the project for better maintainability.
3. **Implement User Authentication**:
   - Create signup and login pages.
   - Use Firebase or Auth0 for authentication management.
4. **Develop the Quote Categories Page**:
   - Create components to display categories and quotes.
   - Set up a database (e.g., Firestore) to manage quotes and categories.
5. **Add Favorites Functionality**:
   - Create a favorites page where users can view and manage their saved quotes.
   - Implement local storage or a database for saving favorite quotes.
6. **Build the Daily Quote Subscription**:
   - Implement a form for users to subscribe to daily quotes.
   - Set up a backend service (e.g., Node.js with Express) to handle email sending.
7. **Create the Contact Page**:
   - Design a contact form and implement functionality to send messages via email.
8. **Develop the Message Board**:
   - Create a page where users can post and view shared quotes.
   - Ensure it is accessible only to signed-in users.
9. **Responsive Design**: Utilize Tailwind CSS to ensure the application looks good on mobile devices.

## USER EXPERIENCE
Users will navigate the application through a top navigation bar, easily accessing the home page, categories, favorites, contact form, and message board. The quote categories will feature a clean interface where users can click to view quotes, and the favorites section will allow users to manage their saved quotes seamlessly. The contact form will be straightforward, ensuring users can quickly send messages. The overall experience will be intuitive and engaging, with a focus on delivering inspiration and facilitating community interaction.