Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a mobile-first web app designed to assist users in recovering from mobile addiction through social accountability. With a strict minimalist aesthetic, it emphasizes community engagement and personal insights to encourage healthier app usage habits.

## CORE FEATURES
1. **Community Hub:**
   - **Global/Friend Ranking:** A vertical leaderboard displaying users ranked by the least screen time, fostering a sense of competition and accountability.
   
2. **User Deep-Dive:** 
   - Clicking on any user reveals a minimalist modal that showcases their app usage breakdown, promoting transparency.
   
3. **Knowledge Exchange (Chat):**
   - A dedicated chat thread titled 'Collective Wisdom' where users can share text-based tips and focus hacks in a simple, clean format.

4. **Personal Usage Profile:**
   - A section displaying the user's current day stats, offering a clear overview of their app usage.

5. **AI Insight Engine:**
   - A text area where an AI provides personalized coaching based on the user’s app-specific data, encouraging better habits.

6. **Progress Metric:**
   - A straightforward percentage indicator showing whether the user is 'Better' or 'Worse' than the community average, motivating users to improve.

## DESIGN SPECIFICATIONS
- **Visual Style:** Minimalist with a focus on clean, simple design that utilizes ample white space, emphasizing a bold typography approach.
- **Color Mode:** Strict monochrome; only black (#000000) and white (#FFFFFF) with no gradients, shadows, or gray tones.
- **Layout:** The application features a split layout with clear sections for the Community Hub and Personal AI Advisor, with a simple toggle navigation at the top or bottom.
- **Typography:** Use bold 'Inter' typography for all text elements, ensuring high legibility and a strong visual impact.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript for robust type safety and modern component architecture.
- **Styling:** Tailwind CSS for utility-first styling, enabling rapid design iterations and a cohesive aesthetic.
- **UI Components:** Utilize shadcn/ui for accessible and visually coherent UI components.
- **State Management:** Consider using React Context or Zustand for managing global state across components.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment:**
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and shadcn/ui.

2. **Create Core Components:**
   - Build the Community Hub component with the leaderboard and user deep-dive modal.
   - Develop the Knowledge Exchange chat component.
   - Create the Personal AI Advisor component with usage profile and AI insights.

3. **Implement Navigation:**
   - Set up a simple toggle to switch between the Community Hub and Personal AI Advisor.

4. **Integrate State Management:**
   - Utilize React Context or Zustand to manage user data and app usage statistics.

5. **Style the Application:**
   - Apply Tailwind CSS classes to achieve the minimalist, high-contrast design as specified.

6. **Test Responsiveness:**
   - Ensure the application is mobile-first responsive, testing across various devices and screen sizes.

## USER EXPERIENCE
Users will have a seamless experience navigating between the Community Hub and Personal AI Advisor. The leaderboard encourages community interaction, while the personalized insights push users towards actionable steps for reducing screen time. The Knowledge Exchange serves as a supportive space for sharing strategies and tips, further enhancing social accountability. All interactions, including toggling views and accessing user details, are designed to be instant and snappy, providing a fluid user experience.

Añade tambien el branding de la app "eremita".