Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a high-conversion landing page for an aesthetic clinic, designed to attract potential clients and provide key information about services offered. The page will emphasize a clean, minimalist aesthetic to enhance user experience and drive conversions through strategic calls to action.

## CORE FEATURES
1. **Hero Section**: A captivating hero section featuring a prominent headline, subheadline, and a call-to-action (CTA) button that encourages users to book an appointment or learn more about services.
2. **Services Overview**: A concise display of the clinic's main services, each with a brief description and an accompanying image, allowing users to quickly understand what is offered.
3. **Testimonials**: A section showcasing client testimonials to build trust and credibility, featuring quotes and client names or initials.
4. **Before & After Gallery**: A visually engaging gallery that displays before and after images of treatments, highlighting the clinic's results.
5. **Contact Form**: A simple contact form for inquiries, allowing users to easily reach out for more information or to schedule appointments.
6. **Footer**: A footer that includes social media links, contact information, and additional navigation links.

## 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 be a single-page design with a vertical scroll structure, featuring distinct sections for the hero, services, testimonials, gallery, contact form, and footer.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React with TypeScript project and install Tailwind CSS and shadcn/ui for styling.
2. **Create the Layout**: Structure the landing page using a main container with sections for the hero, services, testimonials, before & after gallery, contact form, and footer.
3. **Design the Hero Section**: Implement the hero section with a headline, subheadline, and a prominent CTA button styled with the primary color.
4. **Add Services Overview**: Create a grid layout for the services section, ensuring each service has a title, description, and image.
5. **Incorporate Testimonials**: Design a carousel or grid layout for displaying testimonials, ensuring a clean presentation.
6. **Build the Before & After Gallery**: Implement a responsive gallery for before and after images, ensuring images are optimized for web.
7. **Create the Contact Form**: Set up a simple contact form that captures user inquiries, styled according to the design specifications.
8. **Implement the Footer**: Add a footer with essential links and social media icons.
9. **Optimize for Mobile**: Ensure the layout is fully responsive across different devices and screen sizes.
10. **Conduct Testing**: Test the functionality of the CTA buttons, contact form, and overall user experience to ensure a seamless interaction.

## USER EXPERIENCE
Users will be greeted with an inviting hero section that clearly conveys the clinic's value proposition. As they scroll down, they will encounter easily digestible sections highlighting services, real testimonials from satisfied clients, and engaging visual content showcasing results. The contact form will be easily accessible, allowing users to connect effortlessly. The overall design will prioritize clarity and simplicity, ensuring users can navigate the information without distractions while being encouraged to take action.