Update src/app/page.tsx

2026-03-07 17:00:16 +00:00 · 2026-03-07 16:59:21 +00:00 · 2026-03-07 16:57:55 +00:00 · 2026-03-07 16:57:55 +00:00 · 2026-03-07 16:52:09 +00:00 · 2026-03-07 16:52:05 +00:00
2 changed files with 60 additions and 156 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,57 +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: "Expert Dental Care | Premium Dental Services & Treatment",  description: "Experience expert dental care with advanced technology and skilled dentists. Comprehensive cosmetic, restorative, and preventive dental services for your perfect smile.",  keywords: "expert dental care, cosmetic dentistry, dental implants, professional dentist, premium dental services",  metadataBase: new URL("https://expertdentalcare.com"),
-  alternates: {
-    canonical: "https://expertdentalcare.com"
-  },
-  openGraph: {
-    title: "Expert Dental Care | Premium Dental Services & Treatment",    description: "Experience expert dental care with advanced technology and skilled dentists. Comprehensive cosmetic, restorative, and preventive dental services for your perfect smile.",    siteName: "Expert Dental Care",    type: "website",    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg",        alt: "Expert dental care"
-      }
-    ]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Expert Dental Care | Premium Dental Services & Treatment",    description: "Experience expert dental care with advanced technology and skilled 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: `
@@ -1419,7 +1381,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,14 +2,13 @@

 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 HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
 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, CheckCircle } 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";

@@ -50,54 +49,6 @@ const TIME_SLOTS: TimeSlot[] = [
  { time: '04:00 PM', available: true },
 ];

-// Pre-generate random values outside of render to avoid impure function violations
-const generateRandomValues = () => {
-  return Array.from({ length: 30 }).map(() => ({
-    delay: Math.random() * 2,
-    duration: 3 + Math.random() * 2,
-    x: Math.random() * 100,
-    y: Math.random() * 100,
-    size: 2 + Math.random() * 4,
-    offsetX: Math.random() * 100 - 50,
-    offsetY: Math.random() * 100 - 50,
-  }));
-};
-
-const RANDOM_VALUES = generateRandomValues();
-
-function FloatingDotsAnimation() {
-  return (
-    <div className="fixed inset-0 pointer-events-none overflow-hidden">
-      {RANDOM_VALUES.map((values, i) => (
-        <div
-          key={i}
-          className="absolute rounded-full bg-magenta-500 opacity-60"
-          style={{
-            width: `${values.size}px`,
-            height: `${values.size}px`,
-            left: `${values.x}%`,
-            top: `${values.y}%`,
-            animation: `float-dots ${values.duration}s ease-in-out ${values.delay}s infinite`,
-            backgroundColor: '#ff00ff',
-          }}
-        />
-      ))}
-      <style>{`
-        @keyframes float-dots {
-          0%, 100% {
-            transform: translate(0, 0) scale(1);
-            opacity: 0.3;
-          }
-          50% {
-            transform: translate(var(--tx), var(--ty)) scale(1.2);
-            opacity: 0.8;
-          }
-        }
-      `}</style>
-    </div>
-  );
-}
-
 function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose: () => void; onSubmit: (data: any) => void }) {
  const [state, setState] = React.useState<BookingState>({
    isOpen,
@@ -158,6 +109,12 @@ function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose:
    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++) {
@@ -184,7 +141,7 @@ function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose:
            onClick={onClose}
            className="p-2 hover:bg-blue-200 rounded-lg transition"
          >
-            <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+            <X size={24} className="text-gray-600" />
          </button>
        </div>

@@ -242,7 +199,7 @@ function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose:
                  >
                    <div className="font-semibold text-gray-900">{service.name}</div>
                    <div className="text-sm text-gray-500 flex items-center gap-1 mt-1">
-                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> {service.duration}
+                      <Clock size={14} /> {service.duration}
                    </div>
                  </button>
                ))}
@@ -400,6 +357,7 @@ export default function LandingPage() {

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

@@ -416,7 +374,6 @@ export default function LandingPage() {
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
-      <FloatingDotsAnimation />
      <BookingModal
        isOpen={bookingOpen}
        onClose={() => setBookingOpen(false)}
@@ -440,58 +397,38 @@ export default function LandingPage() {
      </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", onClick: () => setBookingOpen(true) },
-            { 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
+        <HeroBillboardRotatedCarousel
          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"
-            },
+          background={{ variant: "sparkles-gradient" }}
+          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", onClick: () => setBookingOpen(true) }]}
          buttonAnimation="slide-up"
+          carouselItems={[
+            {
+              id: "1",              imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg?_wi=1",              imageAlt: "Cosmetic smile enhancement"
+            },
+            {
+              id: "2",              imageSrc: "http://img.b2bpic.net/free-photo/old-man-sitting-dentist-s-office_1157-19454.jpg",              imageAlt: "Advanced dental implant procedure"
+            },
+            {
+              id: "3",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-dental-treatment-from-male-dentist-clinic_662251-2591.jpg",              imageAlt: "Professional dental cleaning"
+            },
+            {
+              id: "4",              imageSrc: "http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg",              imageAlt: "Dental care treatment"
+            },
+            {
+              id: "5",              imageSrc: "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",              imageAlt: "Modern dental office"
+            },
+            {
+              id: "6",              imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg?_wi=2",              imageAlt: "Cosmetic smile enhancement"
+            }
+          ]}
        />
      </div>

@@ -506,7 +443,7 @@ export default function LandingPage() {
          ]}
          useInvertedBackground={true}
          buttons={[
-            { text: "Discover Our Practice", href: "#services" },
+            { text: "Discover Our Practice", href: "#about" },
            { text: "Meet Our Team", href: "#testimonials" },
          ]}
          buttonAnimation="slide-up"
@@ -514,7 +451,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"
@@ -524,16 +461,22 @@ 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", onClick: () => setBookingOpen(true) }]}
          buttonAnimation="slide-up"
@@ -600,10 +543,10 @@ export default function LandingPage() {
          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	04c289ee17	Update src/app/page.tsx	2026-03-07 17:00:16 +00:00
bender	55bfa8e535	Update src/app/page.tsx	2026-03-07 16:59:21 +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	7192fb24f2	Merge version_4 into main Merge version_4 into main	2026-03-07 16:39:33 +00:00