Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed for a Mobile Legends: Bang Bang (MLBB) top-up recharge service, named "Kage Official Store". The application will allow users to purchase MLBB bundles, manage their accounts, and confirm payments. It will include an admin panel for managing the service and an MLBB username finder feature.

## CORE FEATURES
1. **User Account Management**: Users can create accounts to manage their purchases, view transaction history, and update their profile information.
2. **Payment Integration**: A secure payment system that allows users to recharge their MLBB accounts. Admins can confirm payments manually.
3. **MLBB Bundle Selection**: A section where users can view and select various MLBB bundles for purchase, with detailed descriptions and pricing.
4. **Admin Panel**: A restricted area for administrators to manage users, confirm payments, and handle bundle listings.
5. **Username Finder**: A tool that utilizes the MLBB username finder API to help users find their MLBB usernames based on their ID and server information.
6. **Contact Support**: A feature that allows users to reach out for assistance or inquiries regarding their purchases or the service.

## 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 header with navigation links, a hero section for promotions, a features section for bundles, a testimonial area, and a contact form at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Redux (if needed for larger state management).

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Install necessary tools (Node.js, npm/yarn) and set up a new React project with TypeScript.
2. **Install Dependencies**: Include Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Routing Structure**: Set up React Router for navigation between the main pages (home, admin panel, etc.).
4. **Build Core Components**: Develop reusable components (Header, Footer, Button, Input fields) with Tailwind CSS.
5. **Implement User Authentication**: Create user registration and login functionalities with secure session management.
6. **Design Payment Integration**: Integrate a payment gateway API to handle transactions securely.
7. **Develop Admin Panel**: Create a secured area for admins to manage users and confirm payments, ensuring appropriate access controls.
8. **Integrate MLBB Username Finder API**: Build the functionality to allow users to search for usernames using server and ID input.
9. **Test User Flows**: Conduct thorough testing for both user and admin experiences to ensure smooth interactions.
10. **Deploy the Application**: Choose a suitable hosting platform and deploy the application for public access.

## USER EXPERIENCE
Users will experience a straightforward flow, starting from the landing page showcasing bundles and offers. They can easily navigate to account creation, select bundles, make payments, and receive confirmations. Admins will have a distinct experience in the admin panel, focusing on managing operations efficiently, while maintaining a clean and user-friendly interface. The application will be fully responsive, ensuring usability across various devices.