Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to curate and share viral AI-generated images and videos. It serves as a social media platform where users can discover trending prompts, methods, and the AI tools used for content generation. The application also facilitates business sponsorship opportunities and influencer marketing, ultimately generating revenue through ads and partnerships.

## CORE FEATURES
1. **Content Discovery**: Users can browse a feed of viral AI-generated content, filtered by categories such as images, videos, and trending prompts.
2. **User Profiles**: Each user can create a profile showcasing their contributions, including shared prompts and generated content.
3. **Prompt Sharing**: Users can submit their own prompts and methods for generating AI content, allowing for community engagement and collaboration.
4. **Business Sponsorships**: A dedicated section for businesses to explore sponsorship opportunities with influencers and content creators.
5. **Analytics Dashboard**: For content creators to track engagement metrics and ad revenue from their shared content.
6. **Social Features**: Users can follow each other, like, comment, and share content, enhancing community interaction.

## 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 include a top navigation bar, a central content feed for discovery, sidebars for user profile and analytics, and a footer with links to support and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing application state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Create Layout Components**: Develop the main layout structure including the navigation bar, content feed, sidebars, and footer.
3. **Build Core Features**: Implement features like content discovery, user profiles, and prompt sharing using functional components and hooks.
4. **Implement State Management**: Utilize Redux or Context API to manage user data, content feed, and analytics.
5. **Design UI Elements**: Style components using Tailwind CSS according to the design specifications, ensuring responsiveness across devices.
6. **Integrate Social Features**: Allow users to follow, like, and comment on content, ensuring smooth interactions.
7. **Add Analytics Dashboard**: Create a dashboard for users to visualize their engagement metrics and ad revenue.
8. **Test and Iterate**: Conduct user testing to gather feedback and make necessary improvements before deployment.

## USER EXPERIENCE
Users will experience a seamless interaction with the application by navigating through a clean and minimalist interface. They can easily discover viral content, engage with community posts, and track their analytics, all while enjoying a straightforward and responsive design. Key user flows include signing up or logging in, exploring the content feed, submitting prompts, and accessing their analytics dashboard, ensuring an engaging and user-friendly experience.