Healthcare Hero Section With Booking Calendar
A calm care hero inset as one lavender-to-peach panel: a light Fraunces headline on the left and a live booking calendar on the right, where therapist cards take turns booking a session.
Features
- A live booking card: free slots light up, one is picked, the session is booked and confirmed
- A short stack of therapist cards that takes turns, each with its own times, rating and match
- Light Fraunces headline with one soft italic phrase, on a lavender-to-peach inset panel
- Faint rings behind the card that send out one ripple each time a session is booked
- Client rating and insurer logos as proof, with reassurance ticks under the buttons
- Holds still on the booked state for reduced motion
Best for: Therapy, clinic and telehealth brands that want visitors to see how fast they can book a real appointment.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| announcement | { tag: string; label: string; href: string } | - | Optional news above the headline. |
| title | string | - | The headline. |
| accent | string | - | Optional ending set in soft Fraunces italic. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The ink pill button. |
| secondaryCta | { label: string; href: string } | - | Optional text link with an arrow. |
| reassurance | string[] | - | Short lines under the buttons, each with a tick. |
| rating | { score: string; label: string } | - | Optional star rating line. |
| insurers | { name: string; icon: ComponentType }[] | - | Insurers shown as quiet logos. |
| insurersLabel | string | - | The line above the insurer logos. |
| booking | { weekLabel; days; times; therapists; liveLabel; promptLabel; bookLabel; bookedLabel; nextLabel; confirmNote } | - | The live booking card: five days, the times of day, and the therapists it cycles through with their open slots. |
| nav | { brand: { name; icon }; links: Cta[]; cta: Cta } | - | Optional built-in navbar in this hero's style. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Healthcare Hero Section With Booking Calendar free to use?
Yes. Healthcare Hero Section With Booking Calendar is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Healthcare Hero Section With Booking Calendar work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Healthcare Hero Section With Booking Calendar in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Healthcare Hero Section With Booking Calendar need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Healthcare Hero Section With Booking Calendar accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.