Files
DetnalCare/components/services/PediatricDentistry.tsx
Iliyan Angelov 39077550ef Dental Care
2025-11-16 14:29:51 +02:00

83 lines
3.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"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>
);
}