dental-clinic

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 7 Open GitHub ↗

Luxury dental clinic website featuring elegant design with Next.js, TailwindCSS, and seamless appointment booking system. Built with modern tech stack and premium aesthetics.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🦷 WhitePearl Dental Clinic Website

A luxury **dental clinic website** built with **Next.js** and **TailwindCSS**, featuring an elegant **black, white, and gold** design.

## ✨ Features  
✅ **Premium UI/UX** – Modern and elegant aesthetics  
✅ **Fully Responsive** – Works seamlessly across all devices  
✅ **Smooth Animations** – Framer Motion-powered transitions  
✅ **Optimized Performance** – SEO-friendly, fast loading  
✅ **Interactive Booking System** – Easy appointment scheduling

---

## 🎨 Design System

### 🎨 Color Palette  
| Color  | Usage |
|--------|--------------------------------|
| 🖤 **Black (`#000000`)** | Backgrounds, text |
| 🤍 **White (`#FFFFFF`)** | Backgrounds, text |
| ✨ **Gold (`#C6A265`)** | Accents, borders, icons |

### 🔤 Typography  
| Font | Usage |
|------|--------------------------|
| 🎩 **Playfair Display** | Headings, titles (luxury feel) |
| ✏️ **Raleway** | Body text (modern, readable) |
| 🔘 **Inter** | UI elements (buttons, labels) |

---

## 📄 Pages Overview  
| Page       | Description |
|------------|------------------------------------------------|
| 🏠 **Home (`/`)** | Hero CTA, services overview, testimonials, statistics |
| 🦷 **Services (`/services`)** | Interactive service cards, filterable grid |
| 👥 **About (`/about`)** | Team profiles, company history, facility showcase |
| 📍 **Contact (`/contact`)** | Contact form, location details, social media links |
| 📅 **Appointment (`/appointment`)** | Booking system, time slot selection |

---

## ⚙️ Tech Stack  
| Technology | Purpose |
|------------|--------------------------------|
| 🚀 **Next.js 14** | React framework for SSR & performance |
| 🎨 **TailwindCSS** | Utility-first styling for responsiveness |
| 🏃 **Framer Motion** | Smooth animations & interactions |
| 🔡 **React Icons** | Icon library for UI elements |
| 🔍 **TypeScript** | Type safety & developer experience |

---

## 📂 Project Structure  
```
src/
├── app/
│   ├── components/    # Reusable UI elements
│   ├── pages/         # Main pages
│   ├── styles/        # Global styles
│   ├── public/assets/ # Images & icons
└── ...
```

---

## 📸 Required Assets  
| Category  | File Location |
|-----------|------------------------------------------------|
| 🏠 **Hero Images** | `/assets/images/hero-bg.jpg`, `/contact-hero.jpg` |
| 🦷 **Service Images** | `/assets/images/services/*.jpg` |
| 👥 **Team Photos** | `/assets/images/team/*.jpg` |
| 🏢 **Facility Images** | `/assets/images/facility/*.jpg` |
| 🔘 **Icons** | `/assets/icons/*.svg` |

---

## ⚡ Performance Optimizations  
✅ **Next.js Image Optimization** – Faster loading images  
✅ **Lazy Loading & Code Splitting** – Optimized resource loading  
✅ **Minified CSS & JS** – Improved speed & efficiency  
✅ **Optimized Fonts** – Faster rendering with `next/font`

---

## 🛠️ Installation & Setup

1️⃣ **Clone the repository**  
```bash
git clone https://github.com/Ruhanpaco/whitepearl-dental.git
```

2️⃣ **Install dependencies**  
```bash
npm install
```

3️⃣ **Run the development server**  
```bash
npm run dev
```

4️⃣ **Build for production**  
```bash
npm run build
```

---

## 🤝 Contributing  
1. **Fork the repository**  
2. **Create a feature branch**  
3. **Commit your changes**  
4. **Push to the branch**  
5. **Open a Pull Request**

---

## 📜 License  
This project is licensed under the **MIT License** – see the LICENSE file for details.

---

Made with ❤️ by [**Ruhan Pacolli**](https://github.com/Ruhanpaco)

dental-clinic

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README