Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Fake Rubox Website

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to mimic a fictional rubox website. The main purpose is to present information in a clean, engaging manner while encouraging user interaction and conversion through call-to-action elements. The design focuses on simplicity and typography, ensuring an optimal user experience.

## CORE FEATURES
1. **Hero Section**: A striking introduction that captures attention with a catchy headline, a brief description, and a prominent call-to-action button.
2. **Features Overview**: A section highlighting key features or offerings of the rubox, presented in a visually appealing format with icons and short descriptions.
3. **Testimonials**: A carousel or grid layout showcasing user testimonials to build credibility and trust.
4. **Call to Action (CTA)**: A clear and compelling CTA section encouraging users to take the desired action, such as signing up or learning more.
5. **Contact Information**: A simple contact form or details section for users to reach out with inquiries or feedback.

## 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 vertical stacking of sections, with the hero at the top, followed by features, testimonials, CTA, and contact information, ensuring straightforward navigation and a clear visual hierarchy.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui for UI components.
2. **Create Layout**: Develop the main layout structure using Tailwind CSS to ensure responsiveness and clean design.
3. **Implement Hero Section**: Add the hero section with a background image or color, a headline, description, and CTA button styled with the primary color.
4. **Build Features Section**: Create a features section using cards or icons that highlight the benefits of the rubox, ensuring to maintain the minimalist aesthetic.
5. **Add Testimonials**: Implement a testimonials section that showcases user reviews, possibly using a slider for interactivity.
6. **Design CTA Section**: Design the CTA section to be prominent and persuasive, guiding users to take actions like signing up or exploring further.
7. **Contact Form**: Add a simple contact form or display contact details, ensuring it aligns with the overall design style.
8. **Test Responsiveness**: Ensure all components are responsive and function well on various devices and screen sizes.

## USER EXPERIENCE
Users will be greeted by a clean and engaging hero section that captures their attention. As they scroll down, they will easily navigate through the features and testimonials, which are designed to be visually appealing and informative. The CTA will encourage them to engage further, while the contact section provides a straightforward way for users to connect. Overall, the design will prioritize user experience through intuitive navigation and a visually cohesive layout.