Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves the overhaul of a web application dedicated to the "Tengdoshdan-Tengdoshga" platform, a space for regional leaders and children in Surkhandarya, Uzbekistan. The main purpose is to implement a strict Tiered Role-Based Access Control (RBAC) system, a dynamic CMS for content management, and a redesigned landing page aimed at enhancing user engagement and accessibility.

## CORE FEATURES
1. **Tiered Role-Based Access Control (RBAC):** A robust system defining four user roles—VIP_ADMIN, ADMIN, MODERATOR, and USER—each with specific permissions that dictate their access to various functionalities within the platform.
   
2. **Dynamic CMS:** An editable landing page driven by the database, allowing VIP_ADMINs to manage content seamlessly without needing to code. This includes a fully manageable “Reviews/Testimonials” section.

3. **Redesigned Landing Page:** A modern hero section featuring the official logo, platform name, and tagline, along with engaging floating character illustrations to create a lively user experience.

4. **Data Centre Integration:** A centralized file management system where VIP_ADMINs can upload, manage, and delete media files, enhancing content management efficiency.

5. **Dynamic Leader Sections:** The application will dynamically fetch leader category data from the database, rendering visually appealing cards or sections based on the information stored.

6. **Advanced Landing Page Editor:** A dedicated workspace for VIP_ADMINs to drag-and-drop sections of the homepage and edit content inline, ensuring real-time updates on the landing page.

## 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 consist of a hero section at the top, followed by an About Organization section, User Reviews, and a Call to Action, all structured to guide users effectively through the content.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** Use React Context or Redux for managing user roles and dynamic content.

## IMPLEMENTATION STEPS
1. **Set Up the React Environment:** Initialize a new React project with TypeScript using Create React App. Install necessary dependencies including Tailwind CSS and shadcn/ui.
   
2. **Design Database Structure:** Create the necessary tables for users, roles, badges, testimonials, and leader categories within your database (e.g., Supabase).

3. **Implement RBAC System:** Establish middleware to handle user authentication and role-based access, ensuring each role has appropriate permissions.

4. **Develop the Dynamic CMS:** Create the landing page components that connect to the database, allowing VIP_ADMINs to edit content directly.

5. **Redesign the Landing Page:** Implement the new hero section with logo and tagline, applying the minimalist design style and integrating floating elements.

6. **Build the Data Centre:** Set up the file management system for media, allowing uploads and management through the VIP_ADMIN panel.

7. **Integrate Dynamic Leader Sections:** Fetch leader data from the database and display it dynamically on the landing page.

8. **Create the Advanced Landing Page Editor:** Develop the drag-and-drop functionality for VIP_ADMINs to reorganize page sections and edit content.

## USER EXPERIENCE
Users will experience a seamless and engaging interaction with the platform. Upon landing, they will immediately see the vibrant hero section, leading them to explore the organization’s mission, reviews, and actions to take. VIP_ADMINs will have a straightforward interface for content management, promoting efficient updates and a responsive design that caters to all user roles. The overall focus on user experience ensures that the platform remains intuitive and accessible for children and leaders alike.