🦷 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

git clone https://github.com/Ruhanpaco/whitepearl-dental.git

2️⃣ Install dependencies

npm install

3️⃣ Run the development server

npm run dev

4️⃣ Build for production

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