src/app/services/page.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles } from "lucide-react";
+
+export default function ServicesPage() {
+  const handleCallClick = () => {
+    window.location.href = "tel:+919876543210";
+  };
+
+  const handleEmailClick = () => {
+    window.location.href = "mailto:info@trusmile.com";
+  };
+
+  const handleBookAppointment = () => {
+    const appointmentSection = document.getElementById("services-section");
+    if (appointmentSection) {
+      appointmentSection.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  const handleNavigateToHome = () => {
+    window.location.href = "/";
+  };
+
+  const handleNavigateToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="solid"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Trusmile"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "About", id: "about" },
+            { name: "Why Us", id: "whyus" },
+            { name: "Testimonials", id: "testimonials" },
+          ]}
+          button={{
+            text: "Book Appointment",            onClick: handleBookAppointment,
+          }}
+          animateOnLoad={true}
+          className="backdrop-blur-md bg-opacity-95"
+          navItemClassName="text-sm font-medium tracking-wide"
+          buttonClassName="px-6 py-2.5 rounded-full font-semibold"
+          buttonTextClassName="text-sm"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Advanced Dental Services"
+          description="Comprehensive dental treatments delivered with precision, care, and expertise. From preventive care to cosmetic solutions, we offer the full spectrum of modern dentistry."
+          tag="Our Services"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23918.jpg"
+          imageAlt="Advanced dental treatment facility"
+          textPosition="bottom-left"
+          showBlur={true}
+          showDimOverlay={true}
+          buttons={[
+            { text: "Book Consultation", onClick: handleBookAppointment },
+            { text: "Call Clinic", onClick: handleCallClick },
+          ]}
+          buttonAnimation="slide-up"
+          className="relative overflow-hidden"
+          containerClassName="relative z-10"
+          textBoxClassName="space-y-6"
+          titleClassName="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight"
+          descriptionClassName="text-lg md:text-xl leading-relaxed max-w-2xl"
+          tagClassName="inline-block px-4 py-2 rounded-full text-sm font-semibold"
+          buttonContainerClassName="flex gap-4 flex-wrap"
+          buttonClassName="px-8 py-3 rounded-full font-semibold transition-all duration-300"
+          buttonTextClassName="text-base font-semibold"
+        />
+      </div>
+
+      <div id="services-section" data-section="services-section">
+        <FeatureCardEight
+          title="Complete Dental Solutions"
+          description="We provide a full range of dental services using state-of-the-art technology and evidence-based techniques to ensure optimal results and patient satisfaction."
+          tag="Premium Treatments"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: 1,
+              title: "General Dentistry",              description: "Routine dental checkups, oral examinations, cleaning, and preventive care to maintain healthy teeth and gums year-round.",              imageSrc: "http://img.b2bpic.net/free-photo/stomatolog-holding-x-ray-senior-woman-sitting-orange-chair-dentist-cabinet-medical-teeth-care-taker-holding-patient-radiography-tablet-pc-near-patient-standing-up_482257-12549.jpg",              imageAlt: "General dentistry examination and checkup"},
+            {
+              id: 2,
+              title: "Cosmetic Dentistry",              description: "Teeth whitening, veneers, bonding, and smile makeovers to enhance your natural beauty and boost your confidence.",              imageSrc: "http://img.b2bpic.net/free-photo/female-patient-receiving-dental-treatment_107420-65463.jpg",              imageAlt: "Cosmetic dental treatment"},
+            {
+              id: 3,
+              title: "Dental Fillings & Restoration",              description: "Modern filling materials and restoration techniques to treat cavities and restore tooth strength and appearance.",              imageSrc: "http://img.b2bpic.net/free-photo/dentist-treats-childs-tooth-using-rubber-dam-closeup-tooth-treatment_169016-66792.jpg",              imageAlt: "Dental filling cavity restoration treatment"},
+            {
+              id: 4,
+              title: "Root Canal Treatment",              description: "Advanced endodontic treatment to remove infection from inside the tooth and save your natural tooth.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-patient-mouth-undergoing-dental-check-up_107420-65610.jpg",              imageAlt: "Root canal treatment procedure"},
+            {
+              id: 5,
+              title: "Dental Implants",              description: "Permanent tooth replacement solutions using cutting-edge implant technology for a natural-looking smile.",              imageSrc: "http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23918.jpg",              imageAlt: "Dental implant procedure"},
+            {
+              id: 6,
+              title: "Orthodontics",              description: "Professional teeth straightening services including braces and clear aligners for a perfectly aligned smile.",              imageSrc: "http://img.b2bpic.net/free-photo/stomatolog-holding-x-ray-senior-woman-sitting-orange-chair-dentist-cabinet-medical-teeth-care-taker-holding-patient-radiography-tablet-pc-near-patient-standing-up_482257-12549.jpg",              imageAlt: "Orthodontic treatment"},
+          ]}
+          buttons={[
+            {
+              text: "Schedule Appointment",              onClick: handleBookAppointment,
+            },
+          ]}
+          buttonAnimation="slide-up"
+          className="py-20"
+          containerClassName="max-w-7xl mx-auto px-6"
+          textBoxTitleClassName="text-5xl md:text-6xl font-extrabold mb-4"
+          textBoxDescriptionClassName="text-lg text-gray-700 mb-12"
+          cardClassName="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-shadow duration-300"
+          progressBarClassName="h-1 bg-gradient-to-r rounded-full"
+          stepNumberClassName="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Trusmile"
+          copyrightText="© 2025 Trusmile Dental Clinic. All rights reserved."
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "General Dentistry", onClick: () => handleNavigateToSection("services-section") },
+                { label: "Cosmetic Dentistry", onClick: () => handleNavigateToSection("services-section") },
+                { label: "Root Canal Treatment", onClick: () => handleNavigateToSection("services-section") },
+                { label: "Dental Implants", onClick: () => handleNavigateToSection("services-section") },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "Home", onClick: handleNavigateToHome },
+                { label: "About Us", onClick: handleNavigateToHome },
+                { label: "Testimonials", onClick: handleNavigateToHome },
+                {
+                  label: "Book Appointment",                  onClick: handleBookAppointment,
+                },
+              ],
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Phone: +91 98765 43210", onClick: handleCallClick },
+                { label: "Email: info@trusmile.com", onClick: handleEmailClick },
+                { label: "Address: Surat, Gujarat", href: "#" },
+                { label: "Hours: Mon-Sat 9AM-8PM", href: "#" },
+              ],
+            },
+          ]}
+          onPrivacyClick={() => {
+            console.log("Privacy policy clicked");
+          }}
+          ariaLabel="Trusmile Dental Clinic footer"
+          className="bg-slate-900 text-white"
+          containerClassName="max-w-7xl mx-auto px-6 py-16"
+          logoTextClassName="text-2xl font-extrabold tracking-wider mb-8"
+          columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12"
+          columnClassName="space-y-4"
+          columnTitleClassName="text-lg font-semibold text-white"
+          columnItemClassName="text-sm text-gray-300 hover:text-white transition-colors duration-200"
+          copyrightContainerClassName="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"
+          copyrightTextClassName="text-sm text-gray-400"
+          privacyButtonClassName="text-sm text-gray-300 hover:text-white transition-colors duration-200"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}