Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a landing page that humorously claims to offer free Robux for Roblox. The website will engage users with a clean, minimalist design while encouraging them to explore the fictitious offer. The primary goal is to entertain and attract visitors through its playful theme.

## CORE FEATURES
1. **Hero Section**: A striking introductory section with a catchy headline and a brief description of the "offer", complemented by a prominent call-to-action (CTA) button.
2. **Features Overview**: A section that highlights the "benefits" of using the site, presented with engaging icons and succinct text.
3. **Testimonials**: A playful area showcasing fictional testimonials from satisfied "users" to enhance credibility and add humor.
4. **Call to Action**: A persuasive section encouraging users to enter their information (fictitiously) to claim their free Robux, with a clearly visible button.
5. **Contact Information**: A footer section with fictitious contact details and social media links, maintaining the lighthearted theme.

## 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 follow a single-column structure with sections stacked vertically for easy readability. Each section will be clearly defined with sufficient spacing and will utilize the primary color for accents.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required, as the application is primarily static with no complex state needs.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React application using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Configure Tailwind CSS**: Set up Tailwind CSS by creating the configuration files and adding necessary imports in the main CSS file.
4. **Create Components**: 
   - Implement the Hero Section with a headline, description, and CTA button.
   - Design the Features Overview section using icons and text.
   - Create a Testimonials section to display fictitious user feedback.
   - Add the Call to Action section with an input form and button.
   - Design the footer for contact information.
5. **Style Components**: Use Tailwind CSS to style the components according to the design specifications, ensuring responsive design principles are followed.
6. **Test Responsiveness**: Ensure the landing page is fully responsive, adjusting elements for various screen sizes.

## USER EXPERIENCE
Users will land on the homepage and immediately see the engaging Hero Section, prompting them to explore further. As they scroll down, they will encounter the Features Overview and Testimonials, which will keep them entertained. Finally, the Call to Action will provide an interactive element, encouraging users to engage with the fictitious offer. The overall experience will be light-hearted and visually appealing, keeping a consistent theme throughout the landing page.