Lovable Prompt Creator - AI Prompt Generator

`code`## APPLICATION OVERVIEW
This project aims to create a minimalist landing page for a "fake robux" website. The primary purpose is to attract users with clean design and straightforward information while ensuring a smooth user experience. The landing page will focus on showcasing the benefits of the service with clear calls to action.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with an eye-catching headline, brief description, and a prominent call-to-action button to encourage user engagement.
2. **Features Overview**: A section highlighting the key benefits of using the service, presented in a visually appealing manner with icons or illustrations.
3. **Testimonials**: A section dedicated to user reviews or testimonials to build trust and credibility.
4. **Call to Action (CTA)**: A strategically placed CTA inviting users to sign up or learn more, ensuring conversion opportunities.
5. **Contact Information**: A footer or dedicated section providing contact details and links to social media for users to reach out for support or inquiries.

## 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 structure will include a full-width hero section at the top, followed by a features section with three to four columns, a testimonials section, the CTA prominently featured, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a simple landing page, but can be implemented if interactive components are added.

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: Build individual components for the hero section, features, testimonials, CTA, and footer.
4. **Implement Styling**: Use Tailwind CSS classes to achieve the minimalist design, ensuring proper spacing and alignment.
5. **Add Typography**: Integrate Google Fonts to apply Inter for all textual elements.
6. **Configure Routing (if necessary)**: Set up routing for any additional sections or links.
7. **Test and Optimize**: Ensure responsiveness and cross-browser compatibility, optimizing images and assets for performance.

## USER EXPERIENCE
The user experience will focus on simplicity and ease of navigation. Users will be greeted with a visually appealing hero section that quickly communicates the value of the service. As they scroll down, they will encounter well-organized sections that provide information without overwhelming them. The clear CTAs will guide users towards taking action, whether it's signing up or learning more about the service. The overall design will ensure a smooth flow, making it easy for users to find what they need quickly.