Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a minimalist landing page for a fake Roblox gifting website, allowing users to present a playful and engaging experience while gifting Roblox items. The site will focus on clear navigation, a user-friendly interface, and a visually appealing design that aligns with the Roblox theme.

## CORE FEATURES
1. **Hero Section**: A visually striking hero section with a compelling headline, a subheadline, and a prominent call-to-action button to encourage users to start gifting Roblox.
   
2. **How It Works**: A brief section explaining the gifting process in simple steps, enhancing user understanding and engagement.
   
3. **Popular Gifts**: A showcase of popular Roblox gifts with images and descriptions, allowing users to browse and select their desired items easily.

4. **Testimonials**: A section featuring user testimonials to build trust and credibility, showcasing positive experiences from previous users.
   
5. **Contact Form**: An intuitive contact form for users to reach out for support or inquiries regarding the gifting process.

6. **Call to Action**: A final CTA section prompting users to get started with gifting, reinforcing the website's main purpose.

## 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 will feature a single-page design with a top navigation bar, followed by sections for hero, features, testimonials, and CTA, all arranged in a vertical flow for easy scrolling.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not necessary for this landing page, but can be implemented if dynamic content is required.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
   
2. **Create Layout Components**: Design the layout components including the navbar, hero section, how it works, popular gifts, testimonials, and contact form using Tailwind CSS for styling.

3. **Implement Hero Section**: Add a catchy headline and subheadline with a prominent CTA button styled with the primary color.

4. **Develop Features Section**: Create sections that detail how gifting works and showcase popular gifts with images and descriptions.

5. **Add Testimonials**: Implement a section for user testimonials with a clean layout to enhance credibility.

6. **Build Contact Form**: Create a simple contact form with input fields and a submit button.

7. **Ensure Responsiveness**: Test and adjust the design to ensure it is fully responsive on various devices.

8. **Deploy the Landing Page**: Deploy the completed landing page to a hosting service and ensure all links and forms function correctly.

## USER EXPERIENCE
Users will enter the site and be greeted by an engaging hero section. They can scroll down to learn how gifting works, view popular gifts, read testimonials, and ultimately submit a contact form if needed. The design will ensure a seamless flow, encouraging users to interact with the content and take action, all while enjoying a clean and simple aesthetic.