🦷 Dentplant Website

A state-of-the-art, premium bilingual (English & Greek) website for Dr. Angelo Moshopoulos' Dental Implants & Aesthetics Clinic located in Paleo Faliro, Greece. Built on vanilla HTML, vanilla Javascript, and a modern compiled Tailwind CSS v4 design system.

---

🎨 Key Features & Architectural Highlights

1. Unified Sage-Green / Mint-White Branding

• Refined Aesthetics: The entire website features a soothing, premium medical-grade slight green-teal tint (mist) at the top of each page that fades smoothly down into an elegant, warm-white off-white canvas.
• Glow Gradients: Visual highlights and headers start with a soft light-cream glow at the top, transitioning down into the sage-green page bodies.

2. High-Impact Treatment Heroes

• Porcelain Veneers & Teeth Whitening: Clean, split-column presentation blocks featuring premium typography, Dynamic Badges, and high-quality imagery.
• Clear Aligners: High-impact, copy-writer approved intro section detailing invisible orthodontics.
• Responsive Layouts: Interactive links and buttons are rigidly sized to prevent layout shift when toggling languages.

3. Dynamic Bilingual Translation Engine (js/i18n.js)

• Fully centralized dictionary-based i18n manager that dynamically renders Greek (EL) and English (EN) variants on-click with zero page reloads.
• Uses standard data-i18n attributes on target DOM elements for immediate visual updates.

4. Interactive Micro-Components

• Before/After Image Sliders: Slide handle dragging for comparative clinical outcomes.
• FAQ Accordions: Smooth, custom animated drop-down question modules.
• Responsive Navigation: Mobile sidebar drawer menus and dedicated appointment modal overlays.
• Social Footers: Unified modern vector (SVG) social icons that scale beautifully on hover.

5. High Performance & Lightweight Footprint

• 100% WebP Media: All clinical photos, blog graphics, and brand assets are optimized in .webp format, dramatically accelerating page load speeds.
• Optimized Assets: The entire public site footprint is reduced to just 9.6 MB, ensuring minimal resource consumption and compatibility with lightweight hosting plans.

6. Interactive AI Chatbot (Gemini-Powered)

• Bilingual Assistant: Integrates an interactive patient assistant widget that answers clinical, booking, and contact inquiries in both Greek and English.
• Secure Backend API Proxy: Employs a PHP proxy script (api/chat.php) to route requests securely to the Google Gemini API, protecting secrets and injecting customized system instructions.

---

📂 Project Structure

├── about.html                   # Doctor profile page
├── aesthetics.html              # Cosmetic dentistry page (Whitening & Veneers)
├── clear-aligners.html          # Invisible orthodontics page
├── implants.html                # Premium dental implants page
├── oral-surgery.html            # Advance oral surgery page
├── index.html                   # Homepage
├── blog.html                    # Blog hub
├── booking.html                 # Booking success & tracking page
├── contact.html                 # Contact details & MAP
├── article-*.html               # Six full-page dental learning resources
├── article/                     # Standalone news articles generated by the blog bot
│   └── news-*.html
├── api/
│   └── chat.php                 # PHP backend proxy securely routing to Gemini API
├── css/
│   ├── input.css                # Source styles & Tailwind v4 theme variables
│   └── output.css               # Compiled style utilities
├── js/
│   ├── i18n.js                  # Central bilingual dictionary and switch logic
│   ├── main.js                  # Interactive core layout & navbar triggers
│   ├── chatbot.js               # Gemini-powered interactive patient assistant
│   ├── blog.js                  # Dynamic blog rendering pipeline
│   └── booking.js               # Appointment modal orchestration
├── assets/images/               # Core brand media, SVGs, and visuals
├── images/                      # Media assets
│   └── blog/                    # Localized and WebP-optimized blog images
├── data/posts.json              # Blog post database
├── package.json                 # Compile scripts and dev dependencies
└── .gitignore                   # Local workspace clean rules

---

🛠️ Local Development & Build Flow

To compile style sheets locally, ensure you have Node.js installed, then follow these commands:

1. Install Dependencies

npm install

2. Run CSS Compiler (Tailwind v4)

To automatically compile and bundle all utility styles from css/input.css into css/output.css:

npm run build:css

---

📖 Managing Bilingual Translations

All copy on the site is centralized in js/i18n.js.

To add or update text:

1. Locate the dictionary in js/i18n.js.
2. Add your translation key and value in the Greek section (el: { ... }) and the English section (en: { ... }).
3. Bind the key to the HTML markup using the data-i18n attribute:

<span data-i18n="your_translation_key">Default Greek fallback text</span>

---

🤖 Automated Blog Publishing

The blog posts and their corresponding media assets are managed by the sibling dental-blog-bot agent pipeline.

Core Automation Capabilities:

1. Bilingual Post Drafts: Scrapes dental news journals, generating high-quality clinical translations (Greek/English).
2. Local Image Localization & WebP Optimization: External hotlinked images are automatically downloaded, optimized to .webp format at quality 85 using Pillow, saved to images/blog/, and converted to clean local paths.
3. Structured SEO & JSON-LD: Automatically injects OpenGraph headers, Twitter cards, canonical tags, dynamic multilingual title switches, and schema.org BlogPosting JSON-LD data to every generated standalone page.