Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is for a landing page designed to promote a cloud hosting service for bots and websites. The primary goal is to showcase the service's features, provide clear calls to action, and encourage potential customers to sign up or learn more about the offerings.

## CORE FEATURES
1. **Hero Section**: A prominent introduction with a catchy tagline, brief description, and a strong call-to-action button to sign up or learn more.
2. **Features Overview**: A concise presentation of the key features of the hosting service, such as scalability, reliability, and ease of use.
3. **Pricing Plans**: Clear and straightforward pricing tiers that outline the different packages available for users.
4. **Testimonials**: A section dedicated to customer reviews and endorsements to build trust and credibility.
5. **FAQ Section**: Answers to common questions that potential customers might have about the service.
6. **Contact Form**: A simple form for users to get in touch for inquiries or support.

## 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-page structure with a vertical scroll flow, starting from the hero section, followed by features, pricing, testimonials, FAQ, and ending with the contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified; consider using React's built-in state management for simplicity.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create the Layout**: Develop the main layout structure with sections for the hero, features, pricing, testimonials, FAQ, and contact form.
4. **Implement the Hero Section**: Design the hero section with a catchy tagline and a call-to-action button.
5. **Add Features Overview**: Create a grid or list layout for showcasing the core features of the service.
6. **Design Pricing Plans**: Develop a pricing section that clearly outlines the different plans available.
7. **Incorporate Testimonials**: Add a carousel or grid to display customer testimonials to enhance credibility.
8. **Build FAQ Section**: Create an expandable/collapsible FAQ section for user convenience.
9. **Develop Contact Form**: Implement a form that captures user inquiries, ensuring it is simple and user-friendly.
10. **Style the Application**: Use Tailwind CSS to apply the specified styles, ensuring consistency with the minimalist design.
11. **Test Responsiveness**: Ensure that the landing page is responsive and looks good on various devices.

## USER EXPERIENCE
Users will interact with the landing page through a smooth scrolling experience. The hero section will capture their attention immediately, followed by easily digestible information about the service's features and pricing. Testimonials will provide reassurance, while the FAQ section addresses common concerns. Finally, the contact form will allow users to easily reach out for more information or support, creating a seamless experience from discovery to inquiry.