Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based platform designed for quick, secure, and user-friendly in-game top-ups targeted at Indonesian gamers aged 13-35. The main purpose is to provide an efficient and engaging experience for both mobile and PC gamers, making the top-up process straightforward and accessible through popular e-wallet payment methods.

## CORE FEATURES
1. **Hero Section**: Prominently displays the headline “Top Up Game Murah & Cepat” with a subheadline emphasizing automatic processing and fast response.
2. **Game Selection**: Users can easily choose from popular games like Mobile Legends, Free Fire, PUBG Mobile, Genshin Impact, and Valorant, as well as other games presented in a scrollable or grid format.
3. **Top Up Flow**: A streamlined process that guides users through selecting a game, entering their ID and server, choosing a nominal amount, and selecting a payment method.
4. **Payment Methods**: Supports various e-wallets including Dana, OVO, GoPay, ShopeePay, QRIS, and bank transfers.
5. **Customer Support & CTA**: Integrated WhatsApp or live chat button for immediate assistance, encouraging users to top up now.
6. **Testimonials & FAQ**: Real and natural customer reviews in chat format and an FAQ section addressing concerns about processing time, security, refunds, and error handling.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space to enhance readability and user focus.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and accessibility.
- **Layout**: A single-page layout with sections stacked vertically, including the hero section at the top, followed by game selection, top-up flow, payment methods, advantages, testimonials, FAQ, and customer support.
- **Typography**: Use a sans-serif font for modernity and readability; establish a clear hierarchy with larger font sizes for headings and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust front-end experience.
- **Styling**: Tailwind CSS for rapid, responsive design implementation.
- **UI Components**: Utilize shadcn/ui for pre-designed, customizable components.
- **State Management**: Implement React Context API or Redux for managing application state if necessary.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and set up Tailwind CSS.
2. **Create Layout**: Develop the main layout structure, ensuring a responsive design that adapts to mobile and desktop views.
3. **Build Core Components**: Create reusable components for the hero section, game selection, top-up flow, payment methods, testimonials, and FAQ.
4. **Integrate State Management**: Set up state management for user selections and payment processing.
5. **Connect Payment API**: Implement the necessary APIs to handle payments securely.
6. **Test User Flows**: Conduct thorough testing of the user interface and user flows to ensure a seamless experience.
7. **Deploy Application**: Prepare the application for deployment on a suitable hosting platform.

## USER EXPERIENCE
The user journey begins at the hero section, where they are immediately greeted by a compelling headline. From there, they can quickly navigate to select their game and follow an intuitive step-by-step top-up process. Payment options are clearly presented, and users can seek assistance via the customer support feature, enhancing their confidence in the transaction. The overall design focuses on ease of use, speed, and security, ensuring that gamers feel comfortable and satisfied throughout the experience.