HealthCare Plus

HealthCare Plus is a conversion-focused website template for clinics, private practices, and multi-specialty medical groups. Six routes cover home, about, services, a health blog with article pages, and contact. The home page stacks eight sections: a split hero with role-based quick actions, a searchable Find a Doctor directory, services, awards and accreditations, a patient portal, team, testimonials, and a closing CTA. Doctors filter live by name or specialty through a search input and specialty tabs, with an empty state and reset. Four Zod-typed content collections, services, blog, team, testimonials, keep every piece of copy in Markdown. GSAP ScrollTrigger drives scrubbed hero parallax, cards tilt in 3D on hover, and stat counters animate. Teal #0891b2 with warm orange #f97316 on warm off-white, Lenis smooth scroll, and Astro View Transitions throughout.

What’s inside

• 6 routes, Home, About, Services, Blog index, Blog article, Contact
• Find a Doctor directory, live search by name or specialty plus specialty filter tabs, empty state and reset button
• Scrubbed hero parallax with GSAP ScrollTrigger, headline, photo and floating stat cards move at three different depths (desktop only, >768px)
• Animated stat counters, 5,000 patients, 98% satisfaction, 15 years, counted up over 2s with requestAnimationFrame
• Sticky Book Appointment button that slides in after 600px of scroll
• 3D tilt hover on service, doctor, team and blog cards, perspective(800px), ±12° rotation with scale3d, listeners cleaned up via AbortController

The signature

Scroll the home page and the hero comes apart in layers. A single scrubbed ScrollTrigger pushes the headline block down 120px while fading it to 0.85, drives the photo 180px down and scales it to 0.95, and floats the three stat cards upward at increasing rates (-100px, -200px, -300px) for real parallax depth. At the same time the numbers count up to 5,000 patients, 98% satisfaction and 15 years, and a sticky Book Appointment button slides in once you pass 600px. The parallax is deliberately desktop-only, so mobile stays fast and stable.

See it live

The demo is public: https://fpsjago.github.io/medical-template-premium/. 6 pages, built with Astro 5, TypeScript, Scoped CSS, GSAP, Lenis.