med-experts - GitLite

KO | EN

gitlite — search

#generative-ai #chatbot #mysql #rust #python #chatgpt #proxy #video #http #security

med-experts

(★ 12)

A free and open source medical and physiotherapy landing page template built with Next.js and Tailwind CSS. It features a modern responsive design, service pages, appointment booking, contact and inquiry forms with email integration, patient testimonials, FAQs, dark mode, and SEO-ready components, making it easy to customize for clinics, hospitals.

File Explorer

ZIP Download

- - index.jsx
  - Intro.jsx
  - Qualification.jsx
  - Skills.jsx
- - DownLeftSide.jsx
  - DownRightSide.jsx
  - index.jsx
- - DownLeftSide.jsx
  - DownRightSide.jsx
  - index.jsx
  - UpSide.jsx
- - Page.jsx
  - PageBanner.jsx
  - Section.jsx
  - Seo.jsx
  - Ticker.jsx
  - TitleAndDescription.jsx
- - InternalServerError.jsx
  - NotFound.jsx
- - DownSide.jsx
  - index.jsx
  - UpSide.jsx
- - About.jsx
  - Banner.jsx
  - ChooseUs.jsx
  - CtaSection.jsx
  - Features.jsx
  - Gallery.jsx
  - index.jsx
  - Testimonial.jsx
- - Footer.jsx
  - Header.jsx
  - index.jsx
  - SubHeader.jsx
- - PrivacyPolicy.jsx
  - TermsAndConditions.jsx
- - DownSide.jsx
  - index.jsx
  - UpSide.jsx
- index.js
- global.js
- - appointment.js
  - contact.js
- 404.js
- 500.js
- _app.js
- _document.js
- about.js
- appointment.js
- contact.js
- faq.js
- index.js
- privacy-policy.js
- services.js
- terms.js
- - banner.jpeg
  - cta.jpeg
  - page-banner.jpeg
  - profile.png
- - video-1.mp4
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- logo.png
- site.webmanifest
- 1.png
- 2.png
- globals.css
- mail.js
.env.txt
.gitattributes
.gitignore
banner.png
LICENSE
next.config.js
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.js

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <img src="banner.png" alt="Med Experts Banner" width="100%">
</p>

<h1 align="center">Med Experts</h1>

<p align="center">
  Med Experts is a modern physiotherapy and rehabilitation website built with Next.js and Tailwind CSS.
  It presents clinic services, patient testimonials, a gallery, FAQs, policies, and email-powered appointment and contact forms in a polished, responsive layout.
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Framework-Next.js%2013-black?logo=next.js" alt="Next.js 13">
  <img src="https://img.shields.io/badge/Frontend-React%2018-61DAFB?logo=react&logoColor=black" alt="React 18">
  <img src="https://img.shields.io/badge/Styling-Tailwind_CSS-38B2AC?logo=tailwindcss&logoColor=white" alt="Tailwind CSS">
  <img src="https://img.shields.io/badge/Theme-next--themes-111827" alt="next-themes">
  <img src="https://img.shields.io/badge/Email-Nodemailer%20%2B%20Google%20APIs-0EA5E9" alt="Nodemailer">
  <img src="https://img.shields.io/badge/License-See%20LICENSE-lightgrey" alt="License">
</p>

<p align="center">
  <a href="#overview">Overview</a> |
  <a href="#features">Features</a> |
  <a href="#tech-stack">Tech Stack</a> |
  <a href="#project-structure">Structure</a> |
  <a href="#getting-started">Getting Started</a> |
  <a href="#environment-variables">Environment Variables</a> |
  <a href="#scripts">Scripts</a> |
  <a href="#forms-and-email-flows">Forms & Email Flows</a> |
  <a href="#screenshots">Screenshots</a> |
  <a href="#deployment-notes">Deployment Notes</a>
</p>

## Overview

Med Experts is a responsive marketing and booking website for a physiotherapy clinic.
The site is organized as a small, component-driven Next.js application with:

- a homepage with banner, features, about, call-to-action, reasons to choose the clinic, gallery, and testimonials
- a services page with conditions and treatment types
- an about page with clinic story and capabilities
- an FAQ page for common patient questions
- a contact page with location, contact details, and a message form
- an appointment page with a service selector and appointment request form
- privacy policy and terms pages for trust and compliance
- custom 404 and 500 error pages

The UI is styled with Tailwind CSS and supports light/dark theming through `next-themes`.

## Features

### Home and Marketing Pages

- Hero/banner section with clinic branding.
- Feature highlights and clinic values.
- Clinic introduction and call-to-action blocks.
- Patient count and treatment stats.
- Services summary cards.
- Gallery section with images and embedded video.
- Patient testimonials carousel.

### Service Discovery

- Services page listing treatment options and clinic capabilities.
- Dedicated cards for common concerns and therapy types.
- Working-hours section and quick appointment prompt.

### Appointment Booking

- Appointment request form with:
  - first name
  - last name
  - email
  - phone number
  - service selector
  - message
- Client-side validation for email and phone.
- Form submission routed to a Next.js API endpoint.
- Appointment requests are emailed to the clinic inbox.

### Contact

- Contact form for general inquiries.
- Embedded map and clinic contact information.
- Contact submissions are emailed to the configured receiver address.

### Trust and Support

- FAQ page for common patient questions.
- Privacy policy page.
- Terms and conditions page.
- WhatsApp widget for quick communication.
- Phone, email, address, and opening hours surfaced in the footer and contact sections.

### UX and Presentation

- Responsive layout across desktop and mobile.
- Sticky header navigation with drawer menu on smaller screens.
- Light/dark theme toggle.
- PWA assets and SEO metadata.
- Prebuilt loading experience and custom error pages.

## Tech Stack

| Layer | Technologies |
| --- | --- |
| Framework | Next.js 13 |
| UI | React 18 |
| Styling | Tailwind CSS 3 |
| Theme Management | `next-themes` |
| Forms / Email | Next.js API routes, Nodemailer, Google APIs OAuth2 |
| Media / Slideshow | Swiper, Next Image, HTML video |
| Icons and UI Helpers | `react-icons`, `react-whatsapp-widget`, `react-countup` |

## Project Structure
```bash
med-experts/
├── README.md
├── LICENSE
├── banner.png
├── next.config.js
├── tailwind.config.js
├── postcss.config.js
├── data/
│   └── global.js
├── pages/
│   ├── index.js
│   ├── about.js
│   ├── services.js
│   ├── faq.js
│   ├── contact.js
│   ├── appointment.js
│   ├── privacy-policy.js
│   ├── terms.js
│   └── api/
│       ├── contact.js
│       └── appointment.js
├── components/
│   ├── home/
│   ├── services/
│   ├── contact/
│   ├── appointment/
│   ├── faquestions/
│   ├── about/
│   ├── layout/
│   ├── customs/
│   └── error/
├── utils/
│   └── mail.js
├── public/
│   ├── images/
│   ├── videos/
│   └── favicon/
├── screenshots/
│   ├── banner/
│   └── fullpage/
└── package.json
```

## Getting Started

### Prerequisites

- Node.js 16 or newer
- npm
- A Google account with Gmail OAuth2 credentials for sending appointment and contact emails

### Install Dependencies

```bash
npm install
```

### Run Locally

```bash
npm run dev
```

Open the site at `http://localhost:3000`.

### Build for Production

```bash
npm run build
npm run start
```

## Environment Variables

Create a `.env.local` file in the project root.

```env
MAILING_SERVICE_CLIENT_ID=your_google_oauth_client_id
MAILING_SERVICE_CLIENT_SECRET=your_google_oauth_client_secret
MAILING_SERVICE_REFRESH_TOKEN=your_google_oauth_refresh_token
SENDER_EMAIL_ADDRESS=your_email@example.com
RECIEVER_EMAIL_ADDRESS=clinic_inbox@example.com
```

Note: the code expects `RECIEVER_EMAIL_ADDRESS` with that exact spelling, matching `utils/mail.js`.

## Scripts

| Command | Description |
| --- | --- |
| `npm run dev` | Start the development server. |
| `npm run build` | Build the site for production. |
| `npm run start` | Start the production server. |
| `npm run lint` | Run the Next.js linter. |

## Forms and Email Flows

### Contact Form

- Submits `name`, `email`, and `message` to `/api/contact`.
- Sends an email to the configured receiver address.
- Returns a confirmation message after successful submission.

### Appointment Form

- Submits `name`, `email`, `phone`, `subject`, and `message` to `/api/appointment`.
- Validates email and phone input before sending.
- Sends a booking request email to the configured receiver address.

## API Routes

All backend logic is handled with Next.js API routes.

| Route | Purpose |
| --- | --- |
| `POST /api/contact` | Sends a general inquiry email. |
| `POST /api/appointment` | Sends an appointment request email. |

## Screenshots

The repository includes full-page previews:

<table>
  <tr>
    <td align="center">
      <strong>Preview 1</strong><br><br>
      <img src="screenshots/1.png" width="420" alt="Med Experts screenshot 1">
    </td>
    <td align="center">
      <strong>Preview 2</strong><br><br>
      <img src="screenshots/2.png" width="420" alt="Med Experts screenshot 2">
    </td>
  </tr>
</table>

## Deployment Notes

- Update the clinic information in `data/global.js` before deployment.
- Replace the placeholder phone number, address, and contact email with production details.
- Configure Google OAuth2 and Gmail access for the email workflows.
- Ensure `RECIEVER_EMAIL_ADDRESS` points to the clinic inbox that should receive form submissions.
- The site is ready for deployment on Vercel or any other Next.js-compatible host.

## License

The repository includes a `LICENSE` file, but no explicit license metadata is declared in `package.json`. Check the license file before redistributing or publishing the project.

## Credits

Built by **Ashish Kumar**.