Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to mimic the official Roblox interface, featuring a realistic fake Robux sender for entertainment and prank purposes. It will provide a clean and engaging user experience, emphasizing simplicity and visual appeal.

## CORE FEATURES
1. **Hero Section**: A visually striking hero section that introduces the fake Robux sender, complete with a catchy tagline and a "Send Robux" button.
2. **Custom Amount Input**: A user-friendly input field where users can specify the amount of Robux they wish to "send."
3. **Success Message**: A dynamic success message that appears after the Robux is "sent," enhancing the prank and entertainment aspect.
4. **25% OFF Banner**: A promotional banner at the top of the page that highlights a limited-time offer, styled consistently with the overall theme.
5. **Clean UI**: A minimalist interface that prioritizes ease of use and clarity, ensuring users can navigate the page effortlessly.
6. **Responsive Design**: The landing page will be fully responsive, adapting seamlessly to various screen sizes for an optimal viewing experience on both mobile and desktop devices.

## 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 single-column layout for the landing page, with the hero section at the top, followed by the custom amount input, success message section, and the promotional banner integrated at the top.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management (useState and useEffect)

## IMPLEMENTATION STEPS
1. **Setup Project**: Create a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: Build the following components:
   - HeroSection
   - CustomAmountInput
   - SuccessMessage
   - Banner
4. **Implement State Management**: Use React’s state management to handle the input amount and display the success message.
5. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design, incorporating the specified primary color and typography.
6. **Test Responsiveness**: Ensure the design is responsive across various devices and browsers.
7. **Deploy the Application**: Use a platform like Vercel or Netlify to deploy the landing page.

## USER EXPERIENCE
Users will land on a visually appealing page that immediately draws their attention. The hero section will invite them to send Robux, followed by a clear input field for custom amounts. Upon entering an amount and clicking the "Send Robux" button, users will see an animated success message, reinforcing the prank aspect. The 25% OFF banner will catch their eye, enticing them to interact more with the page. Overall, the experience will be clean, engaging, and fun, aligning with the project's entertainment goals.