Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for "Barba Negra," a platform offering specialized beard treatment products. The main purpose is to effectively market the treatments, highlight customer testimonials, and drive conversions through clear calls to action and a user-friendly experience.

## CORE FEATURES
1. **Hero Section**: An engaging hero section with a promotional banner highlighting "10% OFF" and "Frete Grátis acima de R$ 229," along with a prominent call to action button to "Começar Agora."
2. **Treatment Overview**: A section detailing the various beard treatments offered, including Minoxidil and vitamins, with descriptions of their benefits and usage instructions.
3. **Testimonials**: A dedicated section featuring customer testimonials with images and quotes to build trust and credibility regarding the effectiveness of the treatments.
4. **Scientific Backing**: Information on the science behind the treatments and their effectiveness, including statistics on customer satisfaction.
5. **Contact Section**: A clear contact section with options for customer support and inquiries, integrating WhatsApp for immediate assistance.
6. **Guaranteed Results**: A commitment section explaining the satisfaction guarantee (results in 90 days or money back) to reassure potential customers.

## 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 consist of a full-width hero section, followed by stacked sections for treatment overviews, testimonials, scientific backing, and contact information, all designed to guide the user seamlessly through the content.

## 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 Project**:
   - Initialize a new React application using Create React App with TypeScript.
   - Install Tailwind CSS and configure it for use in the project.
   - Install shadcn/ui for UI components.

2. **Create Basic Structure**:
   - Set up the main components: `Hero`, `TreatmentOverview`, `Testimonials`, `Science`, and `Contact`.
   - Implement a responsive layout using Tailwind CSS classes.

3. **Design the Hero Section**:
   - Use a large image or graphic for the background.
   - Add promotional text and a call-to-action button styled with the primary color and specified border radius.

4. **Implement Treatment Overview**:
   - Create a grid layout to showcase each treatment with images, descriptions, and a "Comprar" button for each product.

5. **Add Testimonials**:
   - Implement a carousel or grid layout to display customer testimonials with their images and quotes.

6. **Create Science Section**:
   - Use concise text and graphics to explain the science behind the treatments and their expected outcomes.

7. **Develop Contact Section**:
   - Include a simple contact form and WhatsApp integration for direct customer support.

8. **Test Responsiveness and Functionality**:
   - Ensure the landing page is mobile-friendly and all links/buttons function correctly.

## USER EXPERIENCE
Users will first encounter the Hero section with striking visuals and a compelling offer. As they scroll, they'll find detailed information on treatments, real customer experiences, and scientific validation, all designed to build trust and encourage purchases. The contact section offers easy access to support, ensuring a seamless experience for inquiries and purchases.