Dental Care

components/services/CosmeticDentistry.tsx

@@ -0,0 +1,70 @@
+"use client"
+import { Sparkles } from "lucide-react";
+import Image from "next/image";
+import { serviceCategories } from "@/lib/types/services-data";
+
+export function CosmeticDentistry() {
+  const cosmeticServices = serviceCategories.find(cat => cat.id === "cosmetic")?.services || [];
+
+  return (
+    <section className="w-full max-w-2xl mt-10 mb-8 mx-auto">
+      <div className="space-y-4 text-center">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-center gap-2">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Cosmetic Dentistry
+          </h2>
+        </div>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-lg tracking-tight md:text-xl">
+          Teeth whitening, veneers, and smile makeovers
+        </p>
+      </div>
+      <div className="rounded-xl border p-6 shadow-lg dark:shadow-xl dark:shadow-gray-900/50 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-2xl dark:hover:shadow-gray-900/70 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/30 dark:to-pink-950/30 mt-8">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="bg-gradient-to-br from-purple-500 to-pink-500 text-white rounded-full p-3 shadow-lg">
+            <Sparkles className="h-6 w-6" />
+          </div>
+          <h3 className="text-xl font-bold">Cosmetic Dentistry</h3>
+          <div className="flex items-center gap-2 sm:ml-4">
+            <Image
+              src="/cervs.jpg"
+              alt="Clyrelle Jade Cervantes"
+              className="w-10 h-10 rounded-full object-cover border"
+              width={40}
+              height={40}
+              priority
+            />
+            <span className="font-semibold">Clyrelle Jade Cervantes</span>
+            <span className="text-primary text-sm">Cosmetic Dentistry Specialist</span>
+          </div>
+        </div>
+        <p className="text-muted-foreground leading-relaxed mb-4">
+          Transform your smile with our advanced cosmetic procedures. From teeth
+          whitening to complete smile makeovers, we help you achieve the perfect
+          smile.
+        </p>
+        <ul className="space-y-2 text-left mb-6">
+          {cosmeticServices.map((service) => (
+            <li key={service.id} className="flex items-center gap-2">
+              <span className="h-2 w-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 inline-block" />
+              {service.name}
+            </li>
+          ))}
+        </ul>
+        {/* Team Member */}
+
+        {/* Pricing */}
+        <div className="mt-4">
+          <div className="font-bold mb-2">Pricing</div>
+          <ul className="text-sm space-y-1">
+            {cosmeticServices.map((service) => (
+              <li key={service.id} className="flex justify-between">
+                <span>{service.name}</span>
+                <span className="font-semibold text-primary">{service.price}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

components/services/EmergencyCare.tsx

@@ -0,0 +1,82 @@
+"use client"
+import { ShieldAlert } from "lucide-react";
+import Image from "next/image";
+
+export function EmergencyCare() {
+  return (
+    <section className="w-full max-w-2xl mt-2 mb-8 mx-auto">
+      <div className="space-y-4 text-center">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-center gap-2">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Emergency Dental Care
+          </h2>
+        </div>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-lg tracking-tight md:text-xl">
+          Same-day treatment for tooth pain, injuries, and urgent issues
+        </p>
+      </div>
+      <div className="rounded-xl border p-6 shadow-lg dark:shadow-xl dark:shadow-gray-900/50 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-2xl dark:hover:shadow-gray-900/70 bg-gradient-to-br from-rose-50 to-red-50 dark:from-rose-950/30 dark:to-red-950/30 mt-8">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="bg-gradient-to-br from-rose-500 to-red-600 text-white rounded-full p-3 shadow-lg">
+            <ShieldAlert className="h-6 w-6" />
+          </div>
+          <h3 className="text-xl font-bold">Emergency Dental Care</h3>
+          <div className="flex items-center gap-2 sm:ml-4">
+            <Image
+              src="/von.jpg"
+              alt="Von Vryan Arguelles"
+              className="w-10 h-10 rounded-full object-cover border"
+              width={40}
+              height={40}
+              priority
+            />
+            <span className="font-semibold">Von Vryan Arguelles</span>
+            <span className="text-primary text-sm">Oral Surgeon</span>
+          </div>
+        </div>
+        <p className="text-muted-foreground leading-relaxed mb-4">
+          Same-day emergency services for dental injuries, severe toothaches,
+          broken teeth, and other urgent dental issues.
+        </p>
+        <ul className="space-y-2 text-left mb-6">
+          <li className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-gradient-to-r from-rose-500 to-red-600 inline-block" />
+            Tooth Pain Relief
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-gradient-to-r from-rose-500 to-red-600 inline-block" />
+            Broken Tooth Repair
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-gradient-to-r from-rose-500 to-red-600 inline-block" />
+            Same-Day Treatment
+          </li>
+        </ul>
+        {/* Team Member */}
+
+        {/* Pricing */}
+        <div className="mt-4">
+          <div className="font-bold mb-2">Pricing</div>
+          <ul className="text-sm space-y-1">
+            <li className="flex justify-between">
+              <span>Tooth Pain Relief</span>
+              <span className="font-semibold text-primary">
+                ₱1,500 – ₱5,000
+              </span>
+            </li>
+            <li className="flex justify-between">
+              <span>Broken Tooth Repair</span>
+              <span className="font-semibold text-primary">
+                ₱3,000 – ₱10,000+
+              </span>
+            </li>
+            <li className="flex justify-between">
+              <span>Same-Day Treatment</span>
+              <span className="font-semibold text-primary">Varies</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

components/services/Orthodontics.tsx

@@ -0,0 +1,73 @@
+"use client"
+import { Brackets } from "lucide-react";
+import Image from "next/image";
+import { serviceCategories } from "@/lib/types/services-data";
+
+export function Orthodontics() {
+  const orthodonticServices = serviceCategories.find(cat => cat.id === "cosmetic")?.services.filter(service =>
+    service.name.toLowerCase().includes('braces') || service.name.toLowerCase().includes('veneers')
+  ) || [];
+
+  return (
+    <section className="w-full max-w-2xl mt-5 mb-8 mx-auto">
+      <div className="space-y-4 text-center">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-center gap-2">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Orthodontics
+          </h2>
+        </div>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-lg tracking-tight md:text-xl">
+          Braces and clear aligners for children and adults
+        </p>
+      </div>
+      <div className="rounded-xl border p-6 shadow-lg dark:shadow-xl dark:shadow-gray-900/50 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-2xl dark:hover:shadow-gray-900/70 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/30 dark:to-emerald-950/30 mt-8">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="bg-gradient-to-br from-green-500 to-emerald-500 text-white rounded-full p-3 shadow-lg">
+            <Brackets className="h-6 w-6" />
+          </div>
+          <h3 className="text-xl font-bold">Orthodontics</h3>
+          <div className="flex items-center gap-2 sm:ml-4">
+            <Image
+              src="/kath.jpg"
+              alt="Kath Estrada"
+              className="w-10 h-10 rounded-full object-cover border"
+              width={40}
+              height={40}
+              priority
+            />
+            <span className="font-semibold">Kath Estrada</span>
+            <span className="text-primary text-sm">
+              Chief Dentist & Orthodontist
+            </span>
+          </div>
+        </div>
+        <p className="text-muted-foreground leading-relaxed mb-4">
+          Straighten your teeth and correct bite issues with traditional braces
+          or modern clear aligners for both children and adults.
+        </p>
+        <ul className="space-y-2 text-left mb-6">
+          {orthodonticServices.map((service) => (
+            <li key={service.id} className="flex items-center gap-2">
+              <span className="h-2 w-2 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 inline-block" />
+              {service.name}
+            </li>
+          ))}
+        </ul>
+        {/* Team Member */}
+
+        {/* Pricing */}
+        <div className="mt-4">
+          <div className="font-bold mb-2">Pricing</div>
+          <ul className="text-sm space-y-1">
+            {orthodonticServices.map((service) => (
+              <li key={service.id} className="flex justify-between">
+                <span>{service.name}</span>
+                <span className="font-semibold text-primary">{service.price}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

components/services/PediatricDentistry.tsx

@@ -0,0 +1,82 @@
+"use client"
+import { Baby } from "lucide-react";
+import Image from "next/image";
+
+export function PediatricDentistry() {
+  return (
+    <section className="w-full max-w-2xl mt-5 mb-8 mx-auto">
+      <div className="space-y-4 text-center">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-center gap-2">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Pediatric Dentistry
+          </h2>
+        </div>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-lg tracking-tight md:text-xl">
+          Gentle, kid-friendly dental care for your little ones
+        </p>
+      </div>
+      <div className="rounded-xl border p-6 shadow-lg dark:shadow-xl dark:shadow-gray-900/50 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-2xl dark:hover:shadow-gray-900/70 bg-gradient-to-br from-yellow-50 to-amber-50 dark:from-yellow-950/30 dark:to-amber-950/30 mt-8">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="bg-gradient-to-br from-yellow-500 to-amber-500 text-white rounded-full p-3 shadow-lg">
+            <Baby className="h-6 w-6" />
+          </div>
+          <h3 className="text-xl font-bold">Pediatric Dentistry</h3>
+          <div className="flex items-center gap-2 sm:ml-4">
+            <Image
+              src="/kath.jpg"
+              alt="Kath Estrada"
+              className="w-10 h-10 rounded-full object-cover border"
+              width={40}
+              height={40}
+              priority
+            />
+            <span className="font-semibold">Kath Estrada</span>
+            <span className="text-primary text-sm">
+              Chief Dentist & Orthodontist
+            </span>
+          </div>
+        </div>
+        <p className="text-muted-foreground leading-relaxed mb-4">
+          Gentle, kid-friendly dental care designed to make children feel
+          comfortable and establish healthy oral hygiene habits from an early
+          age.
+        </p>
+        <ul className="space-y-2 text-left mb-6">
+          <li className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-gradient-to-r from-yellow-500 to-amber-500 inline-block" />
+            Children`s Checkups
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-gradient-to-r from-yellow-500 to-amber-500 inline-block" />
+            Fluoride Treatment
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-gradient-to-r from-yellow-500 to-amber-500 inline-block" />
+            Sealants
+          </li>
+        </ul>
+        {/* Team Member */}
+        {/* Pricing */}
+        <div className="mt-4">
+          <div className="font-bold mb-2">Pricing</div>
+          <ul className="text-sm space-y-1">
+            <li className="flex justify-between">
+              <span>Children`s Checkups</span>
+              <span className="font-semibold text-primary">₱500 – ₱1,500</span>
+            </li>
+            <li className="flex justify-between">
+              <span>Fluoride Treatment</span>
+              <span className="font-semibold text-primary">₱700 – ₱1,500</span>
+            </li>
+            <li className="flex justify-between">
+              <span>Sealants</span>
+              <span className="font-semibold text-primary">
+                ₱1,000 – ₱2,500
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

components/services/PreventiveCare.tsx

@@ -0,0 +1,69 @@
+"use client"
+import { Stethoscope } from "lucide-react";
+import Image from "next/image";
+import { serviceCategories } from "@/lib/types/services-data";
+
+export function PreventiveCare() {
+  const preventiveServices = serviceCategories.find(cat => cat.id === "basic")?.services || [];
+
+  return (
+    <section className="w-full max-w-2xl mt-5 mb-8 mx-auto">
+      <div className="space-y-4 text-center">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-center gap-2">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Preventive Care
+          </h2>
+        </div>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-lg tracking-tight md:text-xl">
+          Cleanings, exams, and routine check-ups to keep smiles healthy
+        </p>
+      </div>
+      <div className="rounded-xl border p-6 shadow-lg dark:shadow-xl dark:shadow-gray-900/50 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-2xl dark:hover:shadow-gray-900/70 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-950/30 dark:to-cyan-950/30 mt-8">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="bg-gradient-to-br from-blue-500 to-cyan-500 text-white rounded-full p-3 shadow-lg">
+            <Stethoscope className="h-6 w-6" />
+          </div>
+          <h3 className="text-xl font-bold">General Dentistry</h3>
+          <div className="flex items-center gap-4 sm:ml-15">
+            <Image
+              src="/dexter.jpg"
+              alt="Dexter Cabanag"
+              className="w-10 h-10 rounded-full object-cover border"
+              width={40}
+              height={40}
+              priority
+            />
+            <span className="font-semibold">Dexter Cabanag</span>
+            <span className="text-primary text-sm">Periodontist</span>
+          </div>
+        </div>
+        <p className="text-muted-foreground leading-relaxed mb-4">
+          Comprehensive oral health care including routine checkups,
+          professional cleanings, and preventive treatments to maintain your
+          dental health.
+        </p>
+        <ul className="space-y-2 text-left mb-6">
+          {preventiveServices.slice(0, 3).map((service) => (
+            <li key={service.id} className="flex items-center gap-2">
+              <span className="h-2 w-2 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 inline-block" />
+              {service.name}
+            </li>
+          ))}
+        </ul>
+        {/* Team Member */}
+        {/* Pricing */}
+        <div className="mt-4">
+          <div className="font-bold mb-2">Pricing</div>
+          <ul className="text-sm space-y-1">
+            {preventiveServices.slice(0, 3).map((service) => (
+              <li key={service.id} className="flex justify-between">
+                <span>{service.name}</span>
+                <span className="font-semibold text-primary">{service.price}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

components/services/types.ts

@@ -0,0 +1,16 @@
+export interface Service {
+  id: string;
+  name: string;
+  description?: string;
+  duration: number;
+  price: string;
+  category: string;
+  isActive: boolean;
+}
+
+export interface Dentist {
+  id: string;
+  name: string;
+  specialization: string | null;
+  image: string | null;
+}