Dog Groomer Website Prompt — Warm Teal and Warm White Dog Grooming Salon Website Design for Lovable, Claude, Bolt and more

# Dog Groomer Website Prompt # websiteprompts.ai Build a warm, friendly dog grooming salon website called "Pawfect Groom" using React + Vite + TypeScript + Tailwind CSS + Framer Motion (motion/react) + shadcn/ui + lucide-react. ## Design System ### Colors ```css :root { --background: 40 22% 97%; /* warm white #faf8f3 */ --foreground: 195 25% 14%; /* deep teal near-black */ --primary: 185 45% 40%; /* warm teal #38929a */ --primary-foreground: 0 0% 100%; --accent: 38 70% 60%; /* warm amber #d4903a */ --surface: 40 18% 91%; /* warm linen */ --muted-foreground: 195 12% 52%; --border: 40 15% 82%; } ``` ### Typography - Import: `https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap` - All text: Plus Jakarta Sans - Headlines: Plus Jakarta Sans 700–800 - Body: Plus Jakarta Sans 300–400 - Labels: Plus Jakarta Sans 600 uppercase 10px letter-spacing 0.10em ## Sections ### 1. Navbar - Sticky warm white background, `backdrop-filter: blur(10px)` - Left: Plus Jakarta Sans 700 wordmark "Pawfect Groom" + small lucide Scissors icon in teal - Right: Services · About · Gallery · Book + "Book now →" teal button ### 2. Hero - Full-viewport, warm white background - Split layout: left content (52%), right large portrait image (aspect-ratio 4/5, rounded-2xl) - Left: - Plus Jakarta Sans 600 uppercase 10px teal label: "Dog Grooming Salon · Richmond, Surrey" - Plus Jakarta Sans 800 `clamp(38px, 5vw, 70px)`: "Your Dog\nDeserves\nthe Best." - Plus Jakarta Sans 300 sub: "Professional grooming for all breeds — baths, trims, nail clipping, and full groom packages" - CTAs: "Book an appointment →" (teal filled) + "View services" (ghost teal) - Trust chips: "City & Guilds Qualified · Insured · All Breeds Welcome" - Hero image: Framer Motion float `y: 0→-5→0`, 7s loop {/* Image brief: happy fluffy dog being groomed, warm salon setting, professional groomer hands, natural light, friendly and cheerful atmosphere */} ### 3. Services - "Our Grooming Services" — Plus Jakarta Sans 800 with teal underline rule - 6-service 3×2 grid: - Full Groom (bath, dry, cut, brush, nails, ear clean — from £45) - Bath & Dry (shampoo, blow-dry, brush out — from £25) - Puppy's First Groom (gentle introduction, from £30) - Nail Clipping (quick and stress-free, from £12) - Teeth Cleaning (enzymatic brush clean, from £15) - De-Shed Treatment (removes loose coat, from £35) - Each card: teal lucide icon, Plus Jakarta Sans 700 service name, Plus Jakarta Sans 300 description, teal price tag - Hover: teal border + teal glow `0 0 18px hsl(185 45% 40% / 0.12)` - Stagger fade-up on scroll ### 4. Why Pawfect - Split: left text, right image - Plus Jakarta Sans 800: "Calm, Caring, and Always Kind" - Plus Jakarta Sans 300: 2 paragraphs — stress-free environment, no cage drying (air dry only), one dog at a time policy, hypoallergenic products available - 4 check points with lucide Check in teal: - "No cage drying — ever" - "One dog in the salon at a time" - "Hypoallergenic products available" - "City & Guilds Level 3 qualified" {/* Image brief: dog groomer gently brushing golden retriever, calm studio, warm natural light, careful and loving technique */} ### 5. Gallery Strip - 5 images, 280px height, horizontal strip, scale on hover, no border radius {/* Image brief: freshly groomed poodle with a bow, salon setting, fluffy and perfect, warm light */} {/* Image brief: golden retriever getting a bath, happy and wet, groomer smiling */} {/* Image brief: dog nail clipping close-up, careful groomer hands, clean professional setting */} {/* Image brief: before/after style grooming result, scruffy terrier transformed, split editorial */} {/* Image brief: cosy dog grooming salon interior, warm tones, tools arranged neatly, welcoming */} ### 6. Breed Guide - "Every Breed Is Welcome" — Plus Jakarta Sans 800 - Centered warm surface section - Plus Jakarta Sans 300: "From chihuahuas to great danes — we tailor every groom to your dog's coat type, temperament, and needs" - 3 horizontal breed category chips: Short Coats · Long Coats · Double Coats - "See breed pricing →" teal link ### 7. Meet the Groomers - "Your Grooming Team" — Plus Jakarta Sans 800 - 3 cards: portrait (square, rounded-xl), Plus Jakarta Sans 700 name, teal specialty chip, short bio - Hover: soft teal glow {/* Image brief: female dog groomer with small fluffy dog on table, professional setting, warm approachable smile */} {/* Image brief: male groomer with large dog, professional, dog grooming salon background */} {/* Image brief: female groomer headshot, warm smile, teal uniform or apron, clean studio */} ### 8. Testimonials - Warm surface section - 3 cards: 5-star row in teal, Plus Jakarta Sans 300 italic quote, owner name + dog breed in Plus Jakarta Sans 10px muted - Stagger fade-up on scroll ### 9. FAQ Accordion - "Common Questions" — Plus Jakarta Sans 800 - 4 items via shadcn/ui: - "How long does a full groom take?" - "What products do you use?" - "Do you take anxious dogs?" - "How often should my dog be groomed?" - Teal left border on open item ### 10. Booking CTA - Full-width teal `#38929a` background - Plus Jakarta Sans 800 white: "Book Your Dog's Next Appointment" - Plus Jakarta Sans 300 white: "Online booking available 24/7 — pick your service, date, and groomer in 60 seconds" - "Book now →" ivory button - "New clients welcome · All breeds · First-time discount available" Plus Jakarta Sans 10px ivory 70% ### 11. Footer - Warm near-black background, Plus Jakarta Sans 700 wordmark "Pawfect Groom" in teal - Instagram · Facebook · Google Maps icons - "© 2026 Pawfect Groom · 8 Hill Street, Richmond, Surrey TW9 · Open Mon–Sat 9am–6pm" ## Animations - Hero image: gentle float y: 0→-5→0, 7s loop - Service grid: stagger fade-up on scroll - Teal rules: scaleX 0→1, 0.5s - Gallery: stagger fade-in ## Responsive - Mobile: stacked hero, single-column service grid, hamburger nav ## Full Copy - Wordmark: "Pawfect Groom" - Hero: "Your Dog Deserves the Best." / "Professional grooming for all breeds — baths, trims, nail clipping, and full groom packages" - Services: Full Groom from £45 · Bath & Dry from £25 · Puppy First Groom from £30 · Nails from £12 · Teeth from £15 · De-Shed from £35 - Testimonial: "Buddy comes home from Pawfect Groom looking and smelling like a completely different dog. He even seems to enjoy it." — Sarah T., golden retriever owner - CTA: "Book Your Dog's Next Appointment" / "Online booking available 24/7"