Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed as a personal branding accountability tool. Its main purpose is to provide users with automatic statistics about their branding efforts, suggest necessary changes, and facilitate tracking progress toward their personal branding goals.

## CORE FEATURES
1. **Automated Stats Tracking**: Automatically gather and display key metrics related to personal branding efforts, such as social media engagement, website traffic, and audience feedback.
2. **Actionable Insights**: Provide personalized recommendations based on the stats collected, indicating what changes or strategies users should implement to improve their branding.
3. **Progress Dashboard**: A user-friendly dashboard that visualizes progress over time, allowing users to see their improvements and areas needing attention at a glance.
4. **Goal Setting and Reminders**: Enable users to set specific branding goals and receive reminders to keep them accountable and on track.
5. **User Profiles**: Allow users to create and manage their profiles, storing preferences and past performance data for a tailored experience.
6. **Community Feedback**: Integrate a feature for users to solicit feedback from peers or mentors, fostering a community of support and accountability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean and simple aesthetic, abundant white space, and a focus on easy readability.
- **Color Mode**: Light theme featuring dark text on light backgrounds for maximum contrast and clarity.
- **Layout**: A single-page layout that highlights key features, including a hero section at the top, followed by the features overview, user testimonials, and a call-to-action button for sign-up.
- **Typography**: Utilize modern sans-serif fonts for clarity. Consider using a font like "Inter" for body text and "Montserrat" for headings to maintain a professional look. Ensure a clear hierarchy with larger font sizes for headings and comfortable line spacing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type checking and better development experience.
- **Styling**: Tailwind CSS for utility-first styling that promotes rapid design development.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components that match the minimalist aesthetic.
- **State Management**: Use React's built-in Context API for managing global application state efficiently.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React application with TypeScript support. Install Tailwind CSS and shadcn/ui for styling.
2. **Create core components**: Build the necessary UI components including Header, Dashboard, StatsDisplay, Recommendations, and Profile.
3. **Implement routing**: Set up React Router for navigation within the app, even if it remains a single-page application.
4. **Integrate state management**: Use the Context API to manage user data, stats, and progress across the app.
5. **Develop backend APIs**: Create RESTful APIs to fetch user stats and provide actionable insights based on the collected data.
6. **Test user interactions**: Ensure that all user interactions, like goal setting and feedback collection, are smooth and intuitive.

## USER EXPERIENCE
Users will begin on a welcoming hero section that clearly states the purpose of the tool and invites them to create an account. Once logged in, they will access their personalized dashboard, where they can view automated stats, set goals, and receive insights. The layout will allow for easy navigation between features, and users can interact with the community feedback section to share their experiences and seek advice. Responsive design principles will ensure that the application remains user-friendly across devices, providing a seamless experience regardless of screen size.