Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a veterinary clinic in Lviv. The primary goal is to create a clean and informative single-page website that effectively communicates the clinic's services, encourages pet owners to contact the clinic, and highlights the benefits of choosing this veterinary service.

## CORE FEATURES
1. **Hero Section**: An engaging hero area featuring a welcoming message, a brief introduction to the clinic, and a prominent call-to-action button (e.g., "Contact Us" or "Book an Appointment").
2. **Services Offered**: A concise overview of the veterinary services provided, including descriptions for each service (e.g., general check-ups, vaccinations, surgeries).
3. **Testimonials**: A section displaying customer reviews to build trust and credibility with potential clients.
4. **About Us**: A brief section that introduces the clinic's mission, vision, and values, along with the team of veterinary professionals.
5. **Contact Form**: An easy-to-use contact form allowing visitors to get in touch with the clinic for inquiries or appointment bookings.
6. **Location & Hours**: Information about the clinic's location, contact details, and operating hours, possibly integrated with a map for easy navigation.

## 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 vertical stacking format with distinct sections for the hero, services, testimonials, about us, contact, and location, ensuring smooth scrolling and a cohesive user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required for a landing page but can use local state for form handling if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Layout Structure**: Develop the main layout with a header, hero section, service cards, testimonials, about section, contact form, and footer.
4. **Implement Hero Section**: Design the hero area with a background image or color, welcome text, and call-to-action button styled with the primary color.
5. **Services Section**: Create service cards that display the services offered using Tailwind CSS for styling and layout.
6. **Testimonials Section**: Develop a simple carousel or grid to showcase customer testimonials.
7. **About Us Section**: Write a brief introduction about the clinic and its team.
8. **Contact Form**: Build a contact form with essential fields (name, email, message) and handle submissions (consider using local state).
9. **Location & Hours Section**: Include a map and contact details using a map API if desired.
10. **Responsive Design**: Ensure the layout is fully responsive, adjusting for different screen sizes and devices.

## USER EXPERIENCE
Visitors will be greeted with a welcoming hero section that captures their attention. They can easily navigate through the services offered, read testimonials from satisfied clients, and learn about the clinic's mission. The contact form will be straightforward, allowing easy inquiry submissions. The overall experience will be streamlined, ensuring that users can effortlessly find information and take action, such as contacting the clinic or booking an appointment.