Veterinária Demonstration project
Pata Amiga — a veterinary clinic site that reassures pet parents
A warm, clinical-but-friendly website for a veterinary clinic in Rio de Mouro: hand-drawn animal line icons, a four-step appointment request, a 24h emergency band with tap-to-call, and pet health plans with per-species monthly pricing.
feitura.pt/demo/pata-amiga — Live
We run a small veterinary clinic in Rio de Mouro and most of our clients find us through word of mouth. We need a website that makes anxious pet parents feel safe before they even call: our emergency phone impossible to miss, clear prices for services and monthly health plans, our team with their credentials, and a way to request an appointment from a phone in under a minute — dog, cat or rabbit.
What's inside
- Four-step appointment request (species → reason → preferred day → contact) with per-step validation and a demo-safe confirmation
- Hand-drawn inline SVG line icons: dog, cat, rabbit and paw, reused across hero, booking and plan toggles
- High-contrast 24h emergency band with an oversized tap-to-call phone number
- Emergency shortcut inside the booking flow — choosing 'Emergency' surfaces the phone immediately
- Pet health plans with a dog/cat toggle that switches monthly EUR pricing live
- Services grid with transparent starting prices for consultations, vaccination, surgery, dental and home visits
- Team section with initials avatars and OMV registration numbers — no stock photos
- Fully bilingual PT/EN with a native toggle, semantic landmarks, 44px+ touch targets and reduced-motion support
Build log
- Design system: white + warm coral + sage palette, oversized friendly type, contrast audit; sketch the dog/cat/rabbit line icon set
- Hero with SVG animal composition, trust chips and the 24h emergency band with tap-to-call
- Four-step appointment request with per-step validation, emergency shortcut and demo sink confirmation
- Services grid, health plans with dog/cat price toggle, team and contact sections
- PT/EN copy pass, responsive recomposition at 768/1100px, accessibility and reduced-motion QA
Stack
- Laravel
- Inertia.js
- Vue.js
- TypeScript
- Tailwind CSS
Lighthouse
95
Performance
100
Accessibility
100
Best practices
100
SEO