Lovable Prompt Creator - AI Prompt Generator

# ## APPLICATION OVERVIEW
This project is a web application designed to facilitate the buying and gifting of Robux within the Roblox platform. The application features a user-friendly interface that allows users to send Robux to other players effortlessly. It includes a settings button for easy access to preferences, ensuring a seamless experience for users looking to enhance their Roblox gaming experience.

## CORE FEATURES
1. **User Authentication**: Secure login and account management for users to manage their Robux transactions.
2. **Robux Purchase**: Users can purchase Robux through various payment methods integrated within the app.
3. **Gift Robux**: Functionality to send Robux to other Roblox users by entering their usernames.
4. **Settings Menu**: A customizable settings button in the top left corner, allowing users to manage their account preferences.
5. **Transaction History**: Users can view their past transactions and gifts sent to other users.
6. **Responsive Design**: A mobile-friendly layout that adjusts seamlessly to different screen sizes.

## 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 the settings button, a hero section displaying current Robux offerings, followed by sections for purchasing Robux, gifting options, and transaction history.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for global state management of user sessions and transactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React application with TypeScript. Install Tailwind CSS and configure it in your project.
2. **Create UI Components**: Build components for the header (including the settings button), hero section, purchase form, gifting interface, and transaction history display.
3. **Implement Authentication**: Set up a secure authentication process using Firebase or another authentication provider.
4. **Build Robux Purchase Functionality**: Integrate payment gateway API for purchasing Robux.
5. **Develop Gift Robux Feature**: Create a form that allows users to input a username and the amount of Robux to send.
6. **Transaction History**: Create a component that fetches and displays the user's transaction history from a backend service.
7. **Styling**: Apply Tailwind CSS classes to all components based on the design specifications.
8. **Testing**: Conduct thorough testing of all features, ensuring a smooth user experience and responsive design across devices.

## USER EXPERIENCE
> > Users will be greeted by a clean and minimalist interface featuring the settings button prominently in the top left corner. Upon logging in, they will see the hero section with current Robux offerings. Users can easily navigate to purchase Robux or send gifts to their friends using intuitive forms. The transaction history will provide clear insights into their activities, enhancing user trust and engagement. The responsive design ensures that users can access the application from any device without losing functionality or aesthetic appeal.*italic text*# ## APPLICATION OVERVIEW
This project is a web application designed to facilitate the buying and gifting of Robux within the Roblox platform. The application features a user-friendly interface that allows users to send Robux to other players effortlessly. It includes a settings button for easy access to preferences, ensuring a seamless experience for users looking to enhance their Roblox gaming experience.

## CORE FEATURES
1. **User Authentication**: Secure login and account management for users to manage their Robux transactions.
2. **Robux Purchase**: Users can purchase Robux through various payment methods integrated within the app.
3. **Gift Robux**: Functionality to send Robux to other Roblox users by entering their usernames.
4. **Settings Menu**: A customizable settings button in the top left corner, allowing users to manage their account preferences.
5. **Transaction History**: Users can view their past transactions and gifts sent to other users.
6. **Responsive Design**: A mobile-friendly layout that adjusts seamlessly to different screen sizes.

## 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 the settings button, a hero section displaying current Robux offerings, followed by sections for purchasing Robux, gifting options, and transaction history.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for global state management of user sessions and transactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React application with TypeScript. Install Tailwind CSS and configure it in your project.
2. **Create UI Components**: Build components for the header (including the settings button), hero section, purchase form, gifting interface, and transaction history display.
3. **Implement Authentication**: Set up a secure authentication process using Firebase or another authentication provider.
4. **Build Robux Purchase Functionality**: Integrate payment gateway API for purchasing Robux.
5. **Develop Gift Robux Feature**: Create a form that allows users to input a username and the amount of Robux to send.
6. **Transaction History**: Create a component that fetches and displays the user's transaction history from a backend service.
7. **Styling**: Apply Tailwind CSS classes to all components based on the design specifications.
8. **Testing**: Conduct thorough testing of all features, ensuring a smooth user experience and responsive design across devices.

## USER EXPERIENCE
Users will be greeted by a clean and minimalist interface featuring the settings button prominently in the top left corner. Upon logging in, they will see the hero section with current Robux offerings. Users can easily navigate to purchase Robux or send gifts to their friends using intuitive forms. The transaction history will provide clear insights into their activities, enhancing user trust and engagement. The responsive design ensures that users can access the application from any device without losing functionality or aesthetic appeal.*italic text*