HealthCare Plus

About This Template

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.

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.

Features

• 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
• 4 Zod-typed content collections — services (6), blog (5), team (3), testimonials (3), all Markdown
• Health blog with a four-category Zod enum (Health Tips, Medical News, Patient Stories, Wellness), author, date and featured image
• Patient Portal section — 6 cards: appointment booking, medical records, prescription refills, online bill pay, secure messaging with your doctor and virtual visits
• Trust signals block — 6 award and accreditation cards plus 4 animated credibility stats
• Testimonials rendered from frontmatter with 1–5 star ratings
• Contact page with appointment form including a reason-for-visit select — demo submit handler ready to swap for your endpoint
• IntersectionObserver reveals that re-trigger in both scroll directions via data-reveal and data-reveal-stagger
• Lenis smooth scroll (duration 1.0, wheelMultiplier 1.8) synced to the GSAP ticker with lagSmoothing off
• Astro View Transitions with shared-element morph on blog post title and category, plus full GSAP/Lenis teardown between pages
• All imagery optimized to WebP via getImage(), scroll-aware nav with accessible hamburger menu, prefers-reduced-motion support and TypeScript strict

Deployment