Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Ralp is a minimalist landing page designed to promote a free Roblox-related service. It provides users with essential information about the service, encourages engagement, and drives conversions through clear calls to action. The focus is on a clean and simple design that emphasizes usability and visual appeal.

## CORE FEATURES
1. **Hero Section**: A captivating introductory area that presents the main value proposition of Ralp with a prominent call to action (CTA) button for users to get started.
2. **Features Section**: A concise overview of the key features offered by the service, highlighting benefits to engage visitors.
3. **Testimonials Section**: User feedback and success stories that establish trust and credibility, encouraging potential users to take action.
4. **Call to Action**: A persistent CTA throughout the page, guiding users to sign up or learn more about the service.
5. **Contact Form**: A simple form for inquiries or support that allows users to get in touch easily.
6. **Responsive Design**: Optimized for all devices, ensuring a seamless user experience across desktops, tablets, and mobile phones.

## 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 with sections stacked vertically, ensuring clear separation of content and easy navigation.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Not required for a landing page

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Tailwind CSS**: Follow the Tailwind CSS installation guide to integrate it with the React application.
3. **Create the layout structure**: Build the main layout using functional components for each section: Hero, Features, Testimonials, CTA, and Contact.
4. **Design the Hero Section**: Implement the hero section with a background image (if desired), a catchy headline, a brief description, and a CTA button styled with the primary color.
5. **Develop the Features Section**: Create a grid or list to display feature cards, each with an icon, title, and short description.
6. **Add Testimonials**: Include a section with testimonial quotes and user images to build credibility.
7. **Implement the Call to Action**: Position a CTA button strategically at the end of the features and testimonials sections.
8. **Create the Contact Form**: Design a simple contact form with fields for name, email, and message, styled according to the design specifications.
9. **Ensure Responsiveness**: Use Tailwind CSS utility classes to make sure all sections are responsive and visually appealing on different screen sizes.
10. **Testing**: Conduct user testing to ensure functionality and usability across various devices and browsers.

## USER EXPERIENCE
Key user interactions include smooth navigation through the sections via scrolling, engaging with the CTA buttons to prompt action, and easily filling out the contact form. The minimalist design enhances focus on the content, making it intuitive for users to understand the offering and take the desired actions without distractions.