Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project aims to create a web application that simulates a fake Robux sender. This application will allow users to input their Roblox username and receive a visual representation of a Robux transfer, enhancing user engagement through an interactive experience. The design will focus on a clean, minimalist aesthetic to ensure clarity and usability.

## CORE FEATURES
1. **Username Input:** A simple input field for users to enter their Roblox username.
2. **Fake Robux Transfer Simulation:** A visual representation showing the transfer of Robux to the user's account.
3. **Transaction History:** A display area to show previous simulated transactions for user reference.
4. **Share Feature:** Options for users to share their fake transaction on social media platforms to increase engagement.
5. **User Feedback:** Notifications and messages to inform users of the status of their transaction simulation.

## 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:** A centered layout with a hero section at the top, followed by the input form, transaction history, and a share feature section. Each section will have ample white space to enhance readability and focus.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** React Context API (for managing transaction data and user state)

## IMPLEMENTATION STEPS
1. **Set up the project:**
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it with the project.
   - Install shadcn/ui for UI components.

2. **Create the folder structure:**
   - Organize components, pages, and styles for easy navigation.
   - Create a `components` folder for reusable components like the input form and notifications.

3. **Design the layout:**
   - Create a `Hero` component for the top section.
   - Create an `InputForm` component for username input and fake transfer simulation.
   - Create a `TransactionHistory` component to display simulated transactions.
   - Create a `ShareFeature` component for social media sharing options.

4. **Implement state management:**
   - Use React Context API to manage the state for the username input and transaction history.
   - Create a context provider to wrap the main application.

5. **Build the core features:**
   - Implement the fake Robux transfer logic in the `InputForm` component.
   - Store and display transactions in the `TransactionHistory` component.
   - Enable social media sharing in the `ShareFeature` component.

6. **Style the components:**
   - Use Tailwind CSS classes to apply the minimalist design as specified.
   - Ensure responsiveness for different screen sizes.

7. **Testing and deployment:**
   - Test the application for bugs and ensure all features work as intended.
   - Deploy the application to a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will enter their Roblox username into the input field and click a button to simulate a Robux transfer. They will receive immediate visual feedback showing the fake transfer. A history of transactions will be displayed below the input, and users will have the option to share their experience on social media. The application will maintain a clean and straightforward interface, allowing users to focus on the interaction without distractions.