Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a simulated version of the modern Roblox web store, designed to mimic the Robux purchasing experience. It features a modal popup for sending Robux to friends, providing users with an interactive and visually appealing interface that enhances user engagement without requiring real user data or authentication.

## CORE FEATURES
1. **Static Background**: A visually appealing static mockup of the Roblox Robux purchasing page displaying various currency packages and their prices.
2. **Modal Popup**: A centered modal that resembles the official "Send Robux" UI, enabling users to send Robux to friends.
3. **Search Functionality**: An input field that allows users to search for friends by name, enhancing usability and interaction.
4. **Friend List**: A scrollable list of placeholder friend profiles with generic circular profile icons and names to simulate real interactions.
5. **Send Button**: A prominent "Send" button that triggers a smooth animation upon click, showing a success message for an engaging user experience.
6. **Dynamic Input Fields**: Fields for entering Robux amounts and searching friends, allowing users to customize their interactions.

## 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 includes a static background with a centered modal overlay, featuring a header, search bar, friend list, and action button, ensuring a clear visual hierarchy and easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive and flexible design.
- **UI Components**: shadcn/ui for consistent styling and component design.
- **State Management**: Use local state management for handling modal visibility and input values.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure it to apply styles throughout the application.
3. **Create the static background** component to display the Robux purchasing page mockup.
4. **Develop the modal component** for sending Robux, including the header, input fields, and friend list.
5. **Implement search functionality** to filter the friend list based on user input.
6. **Add interactivity** for the "Send" button that triggers the green checkmark animation upon click.
7. **Ensure responsiveness** of all components for various screen sizes using Tailwind CSS utilities.

## USER EXPERIENCE
Users will interact with a clean and modern interface that allows them to easily navigate through the Robux sending process. They will be able to search for friends, input Robux amounts, and initiate a transfer with a click of a button. The smooth animations and minimalist design will create an enjoyable and engaging experience, making it ideal for video recordings or demos.

This prompt offers a fully functional minimalist light application that matches the user's vision of a simulated web application based on the Roblox web store.