Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
Build a premium, modern, conversion-optimized landing page for **Mudey Pets**, a pet grooming service. The primary purpose is to increase booking calls and service inquiries while establishing trust and authority in the Montreal pet grooming industry. The design will reflect a high-end brand experience, combining simplicity with an emotional connection to pet owners.

# CORE FEATURES
1. **Hero Section**: Engaging full-width image of a happy pet, with a clear headline and CTA buttons for booking and contacting.
2. **Services Overview**: Attractive service cards showcasing grooming, boarding, daycare, and pickup/delivery options, each with descriptions and CTA buttons.
3. **About Section**: Emotional storytelling about Mudey Pets, emphasizing care, quality service, and the philosophy of treating pets like family.
4. **Social Proof**: Display of star ratings and customer testimonials to build trust and credibility.
5. **Gallery**: Before/after transformation photos of pets, organized in a grid layout with hover animations and optional filters.
6. **Contact and Booking Form**: Easy-to-use form for appointment requests, along with contact information and a sticky header for accessibility.

# 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 structure includes a full-width hero section, followed by service cards, an emotional about section, social proof, a gallery, and a contact form at the bottom.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified but can use React's built-in state management or Context API if needed.

# IMPLEMENTATION STEPS
1. **Set up the project**: Create a new React project with TypeScript and install Tailwind CSS.
2. **Create the main layout**: Implement a responsive layout that accommodates the hero section, services, about, gallery, and contact form.
3. **Develop the hero section**: Use a full-width image with a headline, subheadline, and prominent CTA buttons.
4. **Build service cards**: Create individual cards for each service offered, including icons, descriptions, and buttons.
5. **Design the about section**: Write engaging content that tells the story of Mudey Pets and its core philosophy.
6. **Implement social proof**: Set up a review section with star ratings and testimonials.
7. **Create the gallery**: Design a grid layout for before/after photos with hover animations and filters.
8. **Add the contact and booking form**: Implement a form that captures user details for appointment requests.
9. **Ensure mobile responsiveness**: Test and refine the design for mobile compatibility.
10. **Optimize for SEO**: Use relevant keywords and optimize headings.

# USER EXPERIENCE
Key user interactions include navigating through clear CTA buttons, engaging with the service cards, reading testimonials, and easily filling out the booking form. The design will prioritize smooth scrolling and quick loading times to ensure a pleasant browsing experience, reinforcing trust and professionalism in the Mudey Pets brand.