Update src/app/page.tsx

2026-03-07 20:01:34 +00:00 · 2026-03-07 19:47:55 +00:00 · 2026-03-07 19:46:31 +00:00 · 2026-03-07 19:43:51 +00:00 · 2026-03-07 19:43:50 +00:00 · 2026-03-07 17:13:37 +00:00
2 changed files with 418 additions and 111 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,54 +1,19 @@
 import type { Metadata } from "next";
-import { Source_Sans_3 } from "next/font/google";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
+import "./styles/variables.css";
+import "./styles/base.css";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const sourceSans3 = Source_Sans_3({
-  variable: "--font-source-sans-3",  subsets: ["latin"],
-});
-
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});

 export const metadata: Metadata = {
-  title: "Luxury Dental Practice | Premium Care & Advanced Dentistry",  description: "Experience luxury dental care with advanced technology and expert dentists. Premium cosmetic, restorative, and preventive services for your perfect smile.",  keywords: "luxury dental care, cosmetic dentistry, dental implants, professional dentist, premium dental services",  metadataBase: new URL("https://dentalexcellence.com"),
-  alternates: {
-    canonical: "https://dentalexcellence.com"},
-  openGraph: {
-    title: "Luxury Dental Practice | Premium Care & Advanced Dentistry",    description: "Experience luxury dental care with advanced technology and expert dentists. Premium cosmetic, restorative, and preventive services for your perfect smile.",    siteName: "Dental Excellence",    type: "website",    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg",        alt: "Premium dental care"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Luxury Dental Practice | Premium Care & Advanced Dentistry",    description: "Experience luxury dental care with advanced technology and expert dentists.",    images: [
-      "http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg"],
-  },
-};
+  title: "Expert Dental Care",  description: "Premium dental services with luxury care and advanced technology"};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${sourceSans3.variable} ${halant.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className="antialiased">{children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1416,7 +1381,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,16 +2,365 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
-import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import HeroSplitKPI from "@/components/sections/hero/HeroSplitKPI";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
 import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Star, Sparkles, Award, Heart, Mail } from "lucide-react";
+import { Star, Sparkles, Award, Heart, Mail, Calendar, X, Clock, Users, CheckCircle } from "lucide-react";
+import { useState } from "react";
+import React from "react";
+
+interface TimeSlot {
+  time: string;
+  available: boolean;
+}
+
+interface BookingState {
+  isOpen: boolean;
+  step: 'service' | 'date' | 'time' | 'confirmation';
+  selectedService: string | null;
+  selectedDate: string | null;
+  selectedTime: string | null;
+  name: string;
+  email: string;
+  phone: string;
+}
+
+const SERVICES = [
+  { id: 'cosmetic', name: 'Cosmetic Dentistry', duration: '1 hour' },
+  { id: 'implants', name: 'Dental Implants', duration: '2 hours' },
+  { id: 'cleaning', name: 'Professional Cleaning', duration: '45 minutes' },
+  { id: 'root-canal', name: 'Root Canal', duration: '1.5 hours' },
+  { id: 'orthodontics', name: 'Orthodontics Consultation', duration: '30 minutes' },
+];
+
+const TIME_SLOTS: TimeSlot[] = [
+  { time: '09:00 AM', available: true },
+  { time: '09:30 AM', available: true },
+  { time: '10:00 AM', available: false },
+  { time: '10:30 AM', available: true },
+  { time: '11:00 AM', available: true },
+  { time: '02:00 PM', available: true },
+  { time: '02:30 PM', available: false },
+  { time: '03:00 PM', available: true },
+  { time: '03:30 PM', available: true },
+  { time: '04:00 PM', available: true },
+];
+
+function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose: () => void; onSubmit: (data: any) => void }) {
+  const [state, setState] = React.useState<BookingState>({
+    isOpen,
+    step: 'service',
+    selectedService: null,
+    selectedDate: null,
+    selectedTime: null,
+    name: '',
+    email: '',
+    phone: '',
+  });
+
+  React.useEffect(() => {
+    setState(prev => ({ ...prev, isOpen }));
+  }, [isOpen]);
+
+  const handleServiceSelect = (serviceId: string) => {
+    setState(prev => ({
+      ...prev,
+      selectedService: serviceId,
+      step: 'date',
+    }));
+  };
+
+  const handleDateSelect = (date: string) => {
+    setState(prev => ({
+      ...prev,
+      selectedDate: date,
+      step: 'time',
+    }));
+  };
+
+  const handleTimeSelect = (time: string) => {
+    setState(prev => ({
+      ...prev,
+      selectedTime: time,
+      step: 'confirmation',
+    }));
+  };
+
+  const handleInputChange = (field: string, value: string) => {
+    setState(prev => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = () => {
+    const service = SERVICES.find(s => s.id === state.selectedService);
+    onSubmit({
+      service: service?.name,
+      date: state.selectedDate,
+      time: state.selectedTime,
+      name: state.name,
+      email: state.email,
+      phone: state.phone,
+    });
+    onClose();
+  };
+
+  const getNextAvailableDate = () => {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    return tomorrow.toISOString().split('T')[0];
+  };
+
+  const getDateRangeOptions = () => {
+    const dates = [];
+    for (let i = 1; i <= 30; i++) {
+      const date = new Date();
+      date.setDate(date.getDate() + i);
+      dates.push(date.toISOString().split('T')[0]);
+    }
+    return dates;
+  };
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+        {/* Header */}
+        <div className="sticky top-0 bg-gradient-to-r from-blue-50 to-blue-100 px-6 py-6 flex justify-between items-center border-b">
+          <h2 className="text-2xl font-bold text-gray-900">Schedule Your Appointment</h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-blue-200 rounded-lg transition"
+          >
+            <X size={24} className="text-gray-600" />
+          </button>
+        </div>
+
+        {/* Progress Indicator */}
+        <div className="px-6 py-4 bg-gray-50 border-b">
+          <div className="flex justify-between items-center">
+            {['Service', 'Date', 'Time', 'Confirm'].map((label, idx) => (
+              <React.Fragment key={label}>
+                <div className={`flex flex-col items-center ${
+                  state.step === ['service', 'date', 'time', 'confirmation'][idx]
+                    ? 'text-blue-600'
+                    : idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step)
+                    ? 'text-green-600'
+                    : 'text-gray-400'
+                }`}>
+                  <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold ${
+                    state.step === ['service', 'date', 'time', 'confirmation'][idx]
+                      ? 'bg-blue-600 text-white'
+                      : idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step)
+                      ? 'bg-green-600 text-white'
+                      : 'bg-gray-200 text-gray-600'
+                  }`}>
+                    {idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step) ? '✓' : idx + 1}
+                  </div>
+                  <span className="text-xs mt-1">{label}</span>
+                </div>
+                {idx < 3 && (
+                  <div className={`flex-1 h-1 mx-2 ${
+                    idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step)
+                      ? 'bg-green-600'
+                      : 'bg-gray-200'
+                  }`} />
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {/* Service Selection */}
+          {state.step === 'service' && (
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold text-gray-900 mb-6">Select a Service</h3>
+              <div className="grid grid-cols-1 gap-3">
+                {SERVICES.map(service => (
+                  <button
+                    key={service.id}
+                    onClick={() => handleServiceSelect(service.id)}
+                    className={`p-4 rounded-lg border-2 text-left transition ${
+                      state.selectedService === service.id
+                        ? 'border-blue-600 bg-blue-50'
+                        : 'border-gray-200 hover:border-blue-400'
+                    }`}
+                  >
+                    <div className="font-semibold text-gray-900">{service.name}</div>
+                    <div className="text-sm text-gray-500 flex items-center gap-1 mt-1">
+                      <Clock size={14} /> {service.duration}
+                    </div>
+                  </button>
+                ))}
+              </div>
+              <button
+                onClick={() => setState(prev => ({ ...prev, step: 'date' }))}
+                disabled={!state.selectedService}
+                className="w-full mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-300 transition"
+              >
+                Continue
+              </button>
+            </div>
+          )}
+
+          {/* Date Selection */}
+          {state.step === 'date' && (
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold text-gray-900 mb-6">Select a Date</h3>
+              <div className="grid grid-cols-4 gap-2 max-h-64 overflow-y-auto">
+                {getDateRangeOptions().map(date => (
+                  <button
+                    key={date}
+                    onClick={() => handleDateSelect(date)}
+                    className={`p-3 rounded-lg border-2 text-center text-sm font-medium transition ${
+                      state.selectedDate === date
+                        ? 'border-blue-600 bg-blue-50 text-blue-600'
+                        : 'border-gray-200 hover:border-blue-400 text-gray-700'
+                    }`}
+                  >
+                    {formatDate(date)}
+                  </button>
+                ))}
+              </div>
+              <div className="flex gap-3 mt-6">
+                <button
+                  onClick={() => setState(prev => ({ ...prev, step: 'service' }))}
+                  className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition"
+                >
+                  Back
+                </button>
+                <button
+                  onClick={() => setState(prev => ({ ...prev, step: 'time' }))}
+                  disabled={!state.selectedDate}
+                  className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-300 transition"
+                >
+                  Continue
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Time Selection */}
+          {state.step === 'time' && (
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold text-gray-900 mb-6">Select a Time</h3>
+              <div className="grid grid-cols-3 gap-2">
+                {TIME_SLOTS.map(slot => (
+                  <button
+                    key={slot.time}
+                    onClick={() => slot.available && handleTimeSelect(slot.time)}
+                    disabled={!slot.available}
+                    className={`p-3 rounded-lg border-2 text-center font-medium transition ${
+                      state.selectedTime === slot.time
+                        ? 'border-blue-600 bg-blue-50 text-blue-600'
+                        : slot.available
+                        ? 'border-gray-200 hover:border-blue-400 text-gray-700'
+                        : 'border-gray-100 bg-gray-100 text-gray-400 cursor-not-allowed'
+                    }`}
+                  >
+                    {slot.time}
+                  </button>
+                ))}
+              </div>
+              <div className="flex gap-3 mt-6">
+                <button
+                  onClick={() => setState(prev => ({ ...prev, step: 'date' }))}
+                  className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition"
+                >
+                  Back
+                </button>
+                <button
+                  onClick={() => setState(prev => ({ ...prev, step: 'confirmation' }))}
+                  disabled={!state.selectedTime}
+                  className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-300 transition"
+                >
+                  Continue
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Confirmation */}
+          {state.step === 'confirmation' && (
+            <div className="space-y-6">
+              <div className="bg-green-50 border border-green-200 rounded-lg p-4 flex gap-3">
+                <CheckCircle size={24} className="text-green-600 flex-shrink-0" />
+                <div>
+                  <div className="font-semibold text-green-900">Appointment Details</div>
+                  <div className="text-sm text-green-700 mt-1">
+                    {SERVICES.find(s => s.id === state.selectedService)?.name} on {formatDate(state.selectedDate!)} at {state.selectedTime}
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-gray-900">Your Information</h3>
+                <input
+                  type="text"
+                  placeholder="Full Name"
+                  value={state.name}
+                  onChange={e => handleInputChange('name', e.target.value)}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600"
+                />
+                <input
+                  type="email"
+                  placeholder="Email Address"
+                  value={state.email}
+                  onChange={e => handleInputChange('email', e.target.value)}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600"
+                />
+                <input
+                  type="tel"
+                  placeholder="Phone Number"
+                  value={state.phone}
+                  onChange={e => handleInputChange('phone', e.target.value)}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600"
+                />
+              </div>
+
+              <div className="flex gap-3">
+                <button
+                  onClick={() => setState(prev => ({ ...prev, step: 'time' }))}
+                  className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition"
+                >
+                  Back
+                </button>
+                <button
+                  onClick={handleSubmit}
+                  disabled={!state.name || !state.email || !state.phone}
+                  className="flex-1 px-6 py-3 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 disabled:bg-gray-300 transition"
+                >
+                  Confirm Booking
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

 export default function LandingPage() {
+  const [bookingOpen, setBookingOpen] = useState(false);
+
+  const handleBookingSubmit = (data: any) => {
+    console.log('Booking submitted:', data);
+    // Here you would typically send this to your backend
+    alert(`Booking confirmed for ${data.name} on ${data.date} at ${data.time}`);
+  };
+
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
@@ -25,9 +374,15 @@ export default function LandingPage() {
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
+      <BookingModal
+        isOpen={bookingOpen}
+        onClose={() => setBookingOpen(false)}
+        onSubmit={handleBookingSubmit}
+      />
+
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
-          brandName="Dental Excellence"
+          brandName="Expert Dental Care"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
@@ -35,61 +390,33 @@ export default function LandingPage() {
            { name: "Contact", id: "contact" },
          ]}
          button={{
-            text: "Schedule Appointment",            href: "#contact"}}
+            text: "Schedule Appointment",            onClick: () => setBookingOpen(true),
+          }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
-        <HeroSplitKpi
-          title="Premium Dental Care Excellence"
-          description="Experience world-class dental treatment in a luxurious, calming environment. Our expert team delivers exceptional results with cutting-edge technology and personalized care for every patient."
-          tag="Trusted by 1000+ Patients"
-          tagIcon={Star}
-          tagAnimation="slide-up"
-          background={{ variant: "glowing-orb" }}
-          kpis={[
-            { value: "25+", label: "Years Experience" },
-            { value: "99%", label: "Patient Satisfaction" },
-            { value: "500+", label: "Successful Smiles" },
-          ]}
-          enableKpiAnimation={true}
-          buttons={[
-            { text: "Book Consultation", href: "#contact" },
-            { text: "Learn More", href: "#services" },
-          ]}
-          buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg"
-          imageAlt="Beautiful professional smile"
-          mediaAnimation="slide-up"
-          imagePosition="right"
-        />
-      </div>
-
-      <div id="services" data-section="services">
-        <ProductCardTwo
+        <HeroSplitKPI
          title="Premium Dental Services"
          description="Discover our comprehensive range of luxury dental treatments designed to enhance your smile and oral health."
          tag="Our Services"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          products={[
-            {
-              id: "1",              brand: "Cosmetic Dentistry",              name: "Smile Enhancement",              price: "From $500",              rating: 5,
-              reviewCount: "248",              imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg",              imageAlt: "Cosmetic smile enhancement"},
-            {
-              id: "2",              brand: "Restorative",              name: "Dental Implants",              price: "From $2,500",              rating: 5,
-              reviewCount: "189",              imageSrc: "http://img.b2bpic.net/free-photo/old-man-sitting-dentist-s-office_1157-19454.jpg",              imageAlt: "Advanced dental implant procedure"},
-            {
-              id: "3",              brand: "Preventive Care",              name: "Professional Cleaning",              price: "From $150",              rating: 5,
-              reviewCount: "342",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-dental-treatment-from-male-dentist-clinic_662251-2591.jpg",              imageAlt: "Professional dental cleaning"},
+          textSide="left"
+          imageSrc="http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg?_wi=1"
+          imageAlt="Cosmetic smile enhancement"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Book Consultation", onClick: () => setBookingOpen(true) },
+            { text: "Learn More", href: "#about" },
          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          buttons={[{ text: "View All Services", href: "#contact" }]}
          buttonAnimation="slide-up"
+          kpis={[
+            { value: "25+", label: "Years Experience" },
+            { value: "10K+", label: "Happy Patients" },
+            { value: "98%", label: "Satisfaction Rate" },
+          ]}
        />
      </div>

@@ -98,12 +425,13 @@ export default function LandingPage() {
          heading={[
            { type: "text", content: "Luxury Dental Excellence with" },
            {
-              type: "image",              src: "http://img.b2bpic.net/free-photo/dental-clinic-interior-with-modern-dentistry-equipment-orange-color-stomatology-cabinet-with-nobody-it-orange-equipment-oral-treatment_482257-12486.jpg",              alt: "Modern dental office"},
+              type: "image",              src: "http://img.b2bpic.net/free-photo/dental-clinic-interior-with-modern-dentistry-equipment-orange-color-stomatology-cabinet-with-nobody-it-orange-equipment-oral-treatment_482257-12486.jpg",              alt: "Modern dental office"
+            },
            { type: "text", content: "State-of-the-Art Care" },
          ]}
          useInvertedBackground={true}
          buttons={[
-            { text: "Discover Our Practice", href: "#services" },
+            { text: "Discover Our Practice", href: "#about" },
            { text: "Meet Our Team", href: "#testimonials" },
          ]}
          buttonAnimation="slide-up"
@@ -111,7 +439,7 @@ export default function LandingPage() {
      </div>

      <div id="features" data-section="features">
-        <FeatureCardOne
+        <FeatureCardNine
          title="Why Choose Us"
          description="We combine luxury amenities with cutting-edge dental technology to create an unparalleled patient experience."
          tag="Our Advantages"
@@ -121,15 +449,24 @@ export default function LandingPage() {
          useInvertedBackground={false}
          features={[
            {
-              title: "Patient Comfort",              description: "Relax in our luxurious treatment rooms with premium seating, ambient lighting, and calming environments designed for maximum comfort.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-patient_23-2148396133.jpg",              imageAlt: "Comfortable patient treatment area"},
+              id: 1,
+              title: "Patient Comfort",              description: "Relax in our luxurious treatment rooms with premium seating, ambient lighting, and calming environments designed for maximum comfort.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-patient_23-2148396133.jpg?_wi=1", imageAlt: "Comfortable patient treatment area" },
+              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-patient_23-2148396133.jpg?_wi=2", imageAlt: "Comfortable patient treatment area" }
+            },
            {
-              title: "Advanced Technology",              description: "We invest in the latest dental technology including digital imaging, laser treatments, and computer-guided implant placement.",              imageSrc: "http://img.b2bpic.net/free-photo/dentist-doctor-patient-looking-digital-teeh-x-ray-dental-office-person-pov-stomatology-wearing-protective-face-mask-gloves-pointing-teeth-radiography-stomatological-clinic_482257-13097.jpg",              imageAlt: "Advanced dental technology"},
+              id: 2,
+              title: "Advanced Technology",              description: "We invest in the latest dental technology including digital imaging, laser treatments, and computer-guided implant placement.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/dentist-doctor-patient-looking-digital-teeh-x-ray-dental-office-person-pov-stomatology-wearing-protective-face-mask-gloves-pointing-teeth-radiography-stomatological-clinic_482257-13097.jpg?_wi=1", imageAlt: "Advanced dental technology" },
+              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/dentist-doctor-patient-looking-digital-teeh-x-ray-dental-office-person-pov-stomatology-wearing-protective-face-mask-gloves-pointing-teeth-radiography-stomatological-clinic_482257-13097.jpg?_wi=2", imageAlt: "Advanced dental technology" }
+            },
            {
-              title: "Expert Team",              description: "Our board-certified dentists and specialists have over 25 years combined experience delivering exceptional results.",              imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-talking-with-nurse_23-2148757329.jpg",              imageAlt: "Professional dental team"},
+              id: 3,
+              title: "Expert Team",              description: "Our board-certified dentists and specialists have over 25 years combined experience delivering exceptional results.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-talking-with-nurse_23-2148757329.jpg?_wi=1", imageAlt: "Professional dental team" },
+              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-talking-with-nurse_23-2148757329.jpg?_wi=2", imageAlt: "Professional dental team" }
+            },
          ]}
-          gridVariant="three-columns-all-equal-width"
+          showStepNumbers={true}
          animationType="slide-up"
-          buttons={[{ text: "Schedule Appointment", href: "#contact" }]}
+          buttons={[{ text: "Schedule Appointment", onClick: () => setBookingOpen(true) }]}
          buttonAnimation="slide-up"
        />
      </div>
@@ -147,17 +484,23 @@ export default function LandingPage() {
          speed={40}
          testimonials={[
            {
-              id: "1",              name: "Sarah Mitchell",              handle: "CEO, Tech Innovations",              testimonial: "Dr. Chen transformed my smile completely. The care and attention to detail was exceptional. I've never felt more confident!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"},
+              id: "1",              name: "Sarah Mitchell",              handle: "CEO, Tech Innovations",              testimonial: "Dr. Chen transformed my smile completely. The care and attention to detail was exceptional. I've never felt more confident!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
+            },
            {
-              id: "2",              name: "James Rodriguez",              handle: "Marketing Director",              testimonial: "The entire experience was luxury from start to finish. Modern facilities, expert care, and results beyond my expectations.",              imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg",              imageAlt: "James Rodriguez"},
+              id: "2",              name: "James Rodriguez",              handle: "Marketing Director",              testimonial: "The entire experience was luxury from start to finish. Modern facilities, expert care, and results beyond my expectations.",              imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg",              imageAlt: "James Rodriguez"
+            },
            {
-              id: "3",              name: "Emily Watson",              handle: "Business Owner",              testimonial: "Finally found a dentist who understands premium care. The comfort level and professionalism are unmatched in the city.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Emily Watson"},
+              id: "3",              name: "Emily Watson",              handle: "Business Owner",              testimonial: "Finally found a dentist who understands premium care. The comfort level and professionalism are unmatched in the city.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Emily Watson"
+            },
            {
-              id: "4",              name: "David Thompson",              handle: "Entrepreneur",              testimonial: "My implant procedure was seamless and painless. The team made me feel completely at ease throughout the entire process.",              imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling-while-talking-doctor_107420-73983.jpg",              imageAlt: "David Thompson"},
+              id: "4",              name: "David Thompson",              handle: "Entrepreneur",              testimonial: "My implant procedure was seamless and painless. The team made me feel completely at ease throughout the entire process.",              imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling-while-talking-doctor_107420-73983.jpg",              imageAlt: "David Thompson"
+            },
            {
-              id: "5",              name: "Lisa Anderson",              handle: "Designer",              testimonial: "The smile makeover exceeded all my dreams. Dr. Chen's expertise combined with the luxurious setting made it truly special.",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              imageAlt: "Lisa Anderson"},
+              id: "5",              name: "Lisa Anderson",              handle: "Designer",              testimonial: "The smile makeover exceeded all my dreams. Dr. Chen's expertise combined with the luxurious setting made it truly special.",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              imageAlt: "Lisa Anderson"
+            },
            {
-              id: "6",              name: "Michael Chang",              handle: "Consultant",              testimonial: "Best dental investment I've made. The quality, comfort, and results speak volumes. Highly recommend to everyone!",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg",              imageAlt: "Michael Chang"},
+              id: "6",              name: "Michael Chang",              handle: "Consultant",              testimonial: "Best dental investment I've made. The quality, comfort, and results speak volumes. Highly recommend to everyone!",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg",              imageAlt: "Michael Chang"
+            },
          ]}
        />
      </div>
@@ -183,15 +526,15 @@ export default function LandingPage() {

      <div id="footer" data-section="footer">
        <FooterBase
-          logoText="Dental Excellence"
-          copyrightText="© 2025 Dental Excellence. All rights reserved."
+          logoText="Expert Dental Care"
+          copyrightText="© 2025 Expert Dental Care. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
-                { label: "Cosmetic Dentistry", href: "#services" },
-                { label: "Implants", href: "#services" },
-                { label: "Preventive Care", href: "#services" },
-                { label: "Emergency Care", href: "#services" },
+                { label: "Cosmetic Dentistry", href: "#about" },
+                { label: "Implants", href: "#about" },
+                { label: "Preventive Care", href: "#about" },
+                { label: "Emergency Care", href: "#contact" },
              ],
            },
            {
Author	SHA1	Message	Date
bender	80a77b9215	Update src/app/page.tsx	2026-03-07 20:01:34 +00:00
bender	a28b8c81aa	Update src/app/page.tsx	2026-03-07 19:47:55 +00:00
bender	153055bfb4	Update src/app/page.tsx	2026-03-07 19:46:31 +00:00
bender	8ca343e350	Switch to version 6: modified src/app/page.tsx	2026-03-07 19:43:51 +00:00
bender	763086b1b1	Switch to version 6: modified src/app/layout.tsx	2026-03-07 19:43:50 +00:00
bender	146aae97ec	Switch to version 7: modified src/app/page.tsx	2026-03-07 17:13:37 +00:00
bender	c96426061d	Switch to version 7: modified src/app/layout.tsx	2026-03-07 17:13:37 +00:00
bender	0ecd603482	Switch to version 6: modified src/app/page.tsx	2026-03-07 17:13:23 +00:00
bender	b8f9a350b2	Switch to version 6: modified src/app/layout.tsx	2026-03-07 17:13:22 +00:00
bender	ea7d4c8d43	Merge version_7 into main Merge version_7 into main	2026-03-07 17:10:43 +00:00
bender	cce61c48a3	Update src/app/page.tsx	2026-03-07 17:10:39 +00:00
bender	b72aeb9031	Update src/app/layout.tsx	2026-03-07 17:10:38 +00:00
bender	2b7a1c49ee	Switch to version 5: modified src/app/page.tsx	2026-03-07 17:05:50 +00:00
bender	1e39cfd4be	Switch to version 5: modified src/app/layout.tsx	2026-03-07 17:05:49 +00:00
bender	b16995238f	Switch to version 4: modified src/app/page.tsx	2026-03-07 17:05:36 +00:00
bender	c9c62de5f5	Switch to version 4: modified src/app/layout.tsx	2026-03-07 17:05:35 +00:00
bender	a31b409bbc	Switch to version 5: modified src/app/page.tsx	2026-03-07 17:05:06 +00:00
bender	ca844cddde	Switch to version 5: modified src/app/layout.tsx	2026-03-07 17:05:05 +00:00
bender	34a680df35	Switch to version 6: modified src/app/page.tsx	2026-03-07 17:02:57 +00:00
bender	7276d20164	Switch to version 6: modified src/app/layout.tsx	2026-03-07 17:02:56 +00:00
bender	ba939da9ff	Switch to version 5: modified src/app/page.tsx	2026-03-07 17:02:32 +00:00
bender	19e0e8b1fa	Switch to version 5: modified src/app/layout.tsx	2026-03-07 17:02:31 +00:00
bender	594476ac3b	Switch to version 4: modified src/app/page.tsx	2026-03-07 17:02:16 +00:00
bender	fa1f36dffe	Switch to version 4: modified src/app/layout.tsx	2026-03-07 17:02:16 +00:00
bender	c2996b5452	Switch to version 5: modified src/app/page.tsx	2026-03-07 17:01:57 +00:00
bender	8b1e85e222	Switch to version 5: modified src/app/layout.tsx	2026-03-07 17:01:57 +00:00
bender	1f48fa0d0c	Merge version_6 into main Merge version_6 into main	2026-03-07 17:00:20 +00:00
bender	04c289ee17	Update src/app/page.tsx	2026-03-07 17:00:16 +00:00
bender	82f3fd2fad	Merge version_6 into main Merge version_6 into main	2026-03-07 16:59:25 +00:00
bender	55bfa8e535	Update src/app/page.tsx	2026-03-07 16:59:21 +00:00
bender	785f6f369e	Merge version_6 into main Merge version_6 into main	2026-03-07 16:57:59 +00:00
bender	66a2fbe3ec	Update src/app/page.tsx	2026-03-07 16:57:55 +00:00
bender	6b7c08e416	Update src/app/layout.tsx	2026-03-07 16:57:55 +00:00
bender	9b07ffbbce	Merge version_5 into main Merge version_5 into main	2026-03-07 16:52:09 +00:00
bender	075b45d404	Update src/app/page.tsx	2026-03-07 16:52:05 +00:00
bender	65eb8e1c6a	Merge version_5 into main Merge version_5 into main	2026-03-07 16:51:19 +00:00
bender	14b5625c0a	Update src/app/page.tsx	2026-03-07 16:51:15 +00:00
bender	fcb8394ad1	Merge version_5 into main Merge version_5 into main	2026-03-07 16:49:40 +00:00
bender	e135ff8fe7	Update src/app/page.tsx	2026-03-07 16:49:36 +00:00
bender	4f78c3faf1	Update src/app/layout.tsx	2026-03-07 16:49:36 +00:00
bender	7a071d376b	Switch to version 3: modified src/app/page.tsx	2026-03-07 16:44:25 +00:00
bender	134bd05ad7	Merge version_4 into main Merge version_4 into main	2026-03-07 16:41:24 +00:00
bender	79e16537c6	Update src/app/page.tsx	2026-03-07 16:41:20 +00:00
bender	7192fb24f2	Merge version_4 into main Merge version_4 into main	2026-03-07 16:39:33 +00:00
bender	39d5c1f99c	Update src/app/page.tsx	2026-03-07 16:39:23 +00:00
bender	2476b1f9d4	Merge version_3 into main Merge version_3 into main	2026-03-07 14:44:03 +00:00
bender	7f5d885381	Update src/app/page.tsx	2026-03-07 14:43:59 +00:00
bender	6a0e0faec0	Update src/app/layout.tsx	2026-03-07 14:43:59 +00:00
bender	45bae6f702	Merge version_2 into main Merge version_2 into main	2026-03-03 17:05:27 +00:00
bender	0289a8cd92	Update src/app/page.tsx	2026-03-03 17:05:19 +00:00
bender	87b4dc12e0	Merge version_1 into main Merge version_1 into main	2026-03-03 05:55:30 +00:00