What's inside

• Sparkles hero with animated Text Generate headline
• Hover-border service cards and gradient photo frame
• Doctor tabs with profile dialogs and paid appointment booking
• Family membership plans with monthly / yearly switch
• Patient portal with appointments and membership status
• Callback request form with validation

1. 1

   Unzip the download

   Extract MediCare-Clinic-Website.zip — you'll get a MediCare-Clinic-Website/ folder with every file the project needs.

2. 2

   Open the folder in VS Code

   Use File → Open Folder…, or run this from a terminal in the folder where you unzipped it:

   $ code MediCare-Clinic-Website

3. 3

   Check Node.js

   Next.js 16 needs Node.js 20.9 or newer. Check with:

   $ node -v

4. 4

   Install dependencies

   Open the VS Code terminal (Ctrl + `) and run:

   $ npm install

5. 5

   Start the dev server

   Then open http://localhost:3000 in your browser — the page reloads as you edit.

   $ npm run dev

6. 6

   Make it yours

   The whole template is one component in src/components/demos/ — text, prices, products and photos are plain objects at the top of that file. Brand colours are the palette in its `theme` object. Effects live in src/components/demos/aceternity/ and shadcn/ui parts in src/components/demos/ui/.

7. 7

   Connect your own services

   Checkout, subscriptions, portal login and forms are front-end simulations: they keep state in the browser and send nothing. Replace their handlers in src/components/demos/premium-features.tsx with your payment provider, auth and email or CRM calls.

8. 8

   Build for production

   Creates an optimised build and serves it. Deploy to Vercel, Netlify or any Node host.

   $ npm run build
   $ npm start