Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed for managing bonus points and rewards within a mobile ecosystem. Users can verify their points, access a marketplace for redeeming rewards, and maintain various statuses relevant to their gaming experience. The app aims to provide a seamless and engaging user experience while facilitating easy access to the necessary features.

## CORE FEATURES
1. **Bonus Points Verification**: Users can verify their accumulated bonus points through a simple interface, ensuring transparency and ease of access.
2. **Reward Marketplace**: A dedicated section for users to browse and redeem items available for bonus points, enhancing engagement and retention.
3. **Status Management**: Users can view and manage their game-related statuses, allowing them to track progress and achievements conveniently.
4. **Discord Integration**: Integration with Discord to facilitate community interactions, providing users with notifications and updates.
5. **User Authentication**: Secure login and account management to protect user information and ensure a personalized experience.
6. **Profile Management**: Users can customize their profiles, adding personal touches and tracking their activity within the app.

## 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 layout will feature a top navigation bar, a hero section for user engagement, followed by sections for features, rewards, and status management, all designed for intuitive navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for consistent design elements.
- **State Management**: Use React Context API or a similar solution for managing app state effectively.

## IMPLEMENTATION STEPS
1. **Set up the project environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Design the layout**: Create a responsive layout using Tailwind CSS, ensuring the header, main content, and footer are properly structured.
3. **Implement authentication**: Set up user authentication using a suitable method (e.g., Firebase Auth).
4. **Develop core features**: Create components for bonus points verification, the reward marketplace, and status management.
5. **Integrate Discord API**: Set up the Discord integration for notifications and community features.
6. **Test the application**: Conduct thorough testing to ensure all features work as intended and the user experience is seamless.
7. **Deploy the application**: Choose a hosting platform and deploy the application for public access.

## USER EXPERIENCE
Users will have a smooth journey starting from the landing page where they can easily navigate to the verification section for their bonus points. The reward marketplace will be visually appealing, encouraging users to explore items available for redemption. Profile management and status updates will be easily accessible, ensuring users can personalize their experience and track their progress efficiently. The integration with Discord will add a layer of community interaction, enhancing user engagement.