Switch to version 17: modified src/app/page.tsx

Merge version_18 into main

src/app/page.tsx

@@ -1,178 +1,110 @@
 "use client";
 
-import React from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroSplit from "@/components/sections/hero/HeroSplit";
-import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
-import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
-import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
-import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
 import FaqBase from "@/components/sections/faq/FaqBase";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Check, MapPin, Clock, Award } from "lucide-react";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import { Mail, CheckCircle2 } from "lucide-react";
 
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "Services", id: "services" },
-  { name: "Why Choose Us", id: "why-choose" },
-  { name: "Testimonials", id: "testimonials" },
-  { name: "Contact", id: "contact" },
-];
-
-const navButton = {
-  text: "Book Appointment",  href: "contact"};
-
-export default function Home() {
+const page = () => {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
-      sizing="medium"
+      sizing="large"
       background="none"
       cardStyle="solid"
       primaryButtonStyle="gradient"
-      secondaryButtonStyle="solid"
+      secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered navItems={navItems} button={navButton} />
+      <NavbarStyleFullscreen
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "About", id: "#why-choose-us" },
+          { name: "Services", id: "#services" },
+          { name: "Pricing", id: "#pricing" },
+          { name: "FAQ", id: "#faq" },
+        ]}
+        brandName="EXPERT DENTAL CARE"
+        bottomLeftText="Global Community"
+        bottomRightText="hello@example.com"
+      />
 
       <div id="hero" data-section="hero">
-        <HeroSplit
-          background={{ variant: "plain" }}
-          title="Expert Dental Care for Your Smile"
-          description="Providing professional dental services with the latest technology and techniques. Transform your smile today."
-          tag="Premium Dental Care"
-          imagePosition="right"
-          imageSrc="/api/placeholder/500/600"
-          imageAlt="Dental care professional"
-          mediaAnimation="none"
+        <HeroLogo
+          logoText="EXPERT DENTAL CARE"
+          description="Professional Dental Services for Your Smile"
           buttons={[
-            {
-              text: "Learn More",              href: "why-choose"},
-            {
-              text: "Book Now",              href: "contact"},
+            { text: "Learn More", href: "#why-choose-us" },
+            { text: "Contact Us", href: "#contact" },
           ]}
+          imageSrc="/placeholders/placeholder5.jpg?_wi=1"
+          imageAlt="Dental care background"
+        />
+      </div>
+
+      <div id="why-choose-us" data-section="why-choose-us">
+        <MediaAbout
+          title="Why Choose EXPERT DENTAL CARE"
+          description="We are committed to providing the highest quality dental care with a focus on patient comfort and satisfaction. Our team of experienced professionals uses the latest technology to ensure the best outcomes."
+          tag="About Us"
+          imageSrc="/placeholders/placeholder5.jpg?_wi=2"
+          imageAlt="Our dental clinic"
+          buttons={[
+            { text: "Learn More", href: "#services" },
+            { text: "Schedule Appointment", href: "#contact" },
+          ]}
+          useInvertedBackground={false}
         />
       </div>
 
       <div id="services" data-section="services">
-        <FeatureCardNineteen
+        <FeatureCardTwentySeven
           features={[
             {
-              id: 1,
-              tag: "Preventive",              title: "Teeth Cleaning",              subtitle: "Professional cleaning and maintenance",              description: "Regular professional cleanings help prevent cavities, gum disease, and other oral health issues. Our hygienists use advanced techniques to keep your teeth and gums healthy.",              imageSrc: "/api/placeholder/500/400?_wi=1",              imageAlt: "Teeth cleaning",              buttons: [
-                {
-                  text: "Learn more",                  href: "#services"},
-              ],
-            },
+              id: "1",              title: "Teeth Cleaning",              description: "Professional teeth cleaning to remove plaque and tartar, keeping your teeth healthy and bright.",              imageSrc: "/placeholders/placeholder5.jpg?_wi=3",              imageAlt: "Teeth cleaning service"},
             {
-              id: 2,
-              tag: "Restorative",              title: "Dental Implants",              subtitle: "Permanent tooth replacement solution",              description: "Dental implants are the gold standard for tooth replacement. They look and feel natural while providing a long-lasting solution that preserves your jawbone.",              imageSrc: "/api/placeholder/500/400?_wi=2",              imageAlt: "Dental implants",              buttons: [
-                {
-                  text: "Learn more",                  href: "#services"},
-              ],
-            },
+              id: "2",              title: "Dental Implants",              description: "Advanced dental implant solutions to replace missing teeth with natural-looking results.",              imageSrc: "/placeholders/placeholder5.jpg?_wi=4",              imageAlt: "Dental implants service"},
             {
-              id: 3,
-              tag: "Cosmetic",              title: "Teeth Whitening",              subtitle: "Professional whitening treatments",              description: "Achieve a brighter, whiter smile with our professional whitening treatments. Safe, effective, and long-lasting results that will boost your confidence.",              imageSrc: "/api/placeholder/500/400?_wi=3",              imageAlt: "Teeth whitening",              buttons: [
-                {
-                  text: "Learn more",                  href: "#services"},
-              ],
-            },
+              id: "3",              title: "Teeth Whitening",              description: "Safe and effective teeth whitening treatments to achieve a brighter, more confident smile.",              imageSrc: "/placeholders/placeholder5.jpg?_wi=5",              imageAlt: "Teeth whitening service"},
             {
-              id: 4,
-              tag: "Treatment",              title: "Root Canal Treatment",              subtitle: "Saving infected or damaged teeth",              description: "Root canal therapy is designed to eliminate bacteria from the infected root canal, prevent reinfection of the tooth, and save the natural tooth.",              imageSrc: "/api/placeholder/500/400?_wi=4",              imageAlt: "Root canal treatment",              buttons: [
-                {
-                  text: "Learn more",                  href: "#services"},
-              ],
-            },
+              id: "4",              title: "Root Canal Treatment",              description: "Expert root canal treatment to save your tooth and relieve pain from infection.",              imageSrc: "/placeholders/placeholder5.jpg?_wi=6",              imageAlt: "Root canal treatment"},
           ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
           title="Our Services"
-          description="Comprehensive dental care tailored to your needs"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="why-choose" data-section="why-choose">
-        <MetricCardSeven
-          metrics={[
-            {
-              id: "1",              value: "25+",              title: "Years of Experience",              items: [
-                "Expert dental professionals",                "Proven track record",                "Trusted by thousands"],
-            },
-            {
-              id: "2",              value: "10,000+",              title: "Happy Patients",              items: [
-                "5-star reviews",                "High satisfaction rates",                "Long-term relationships"],
-            },
-            {
-              id: "3",              value: "100%",              title: "Advanced Technology",              items: [
-                "Latest equipment",                "Digital imaging",                "Painless procedures"],
-            },
-            {
-              id: "4",              value: "7/24",              title: "Patient Support",              items: [
-                "Emergency services",                "Online consultations",                "Flexible scheduling"],
-            },
-          ]}
-          title="Why Choose EXPERT DENTAL CARE"
-          description="We're committed to providing exceptional dental services with a focus on patient comfort and satisfaction."
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSixteen
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Johnson",              role: "Business Owner",              company: "Tech Solutions Inc",              rating: 5,
-              imageSrc: "/api/placeholder/400/400?_wi=1",              imageAlt: "Sarah Johnson"},
-            {
-              id: "2",              name: "Michael Chen",              role: "Marketing Director",              company: "Creative Agency",              rating: 5,
-              imageSrc: "/api/placeholder/400/400?_wi=2",              imageAlt: "Michael Chen"},
-            {
-              id: "3",              name: "Emily Rodriguez",              role: "Consultant",              company: "Global Partners",              rating: 5,
-              imageSrc: "/api/placeholder/400/400?_wi=3",              imageAlt: "Emily Rodriguez"},
-          ]}
-          kpiItems={[
-            { value: "98%", label: "Patient Satisfaction" },
-            { value: "500+", label: "Successful Treatments" },
-            { value: "15+", label: "Industry Awards" },
-          ]}
-          animationType="slide-up"
-          title="What Our Patients Say"
-          description="Read testimonials from our satisfied patients who have experienced our exceptional care."
+          description="We offer a comprehensive range of dental services to meet all your oral health needs."
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="pricing" data-section="pricing">
-        <PricingCardNine
+        <PricingCardFive
           plans={[
             {
-              id: "basic",              title: "Basic Care",              price: "$99",              period: "/visit",              imageSrc: "/api/placeholder/500/400?_wi=5",              imageAlt: "Basic care plan",              button: { text: "Choose Plan", href: "contact" },
-              features: [
-                "Regular cleaning",                "X-ray examination",                "Fluoride treatment",                "Personalized advice"],
+              id: "basic",              tag: "Basic Plan",              price: "$99",              period: "/month",              description: "Essential dental care for maintaining your oral health.",              button: { text: "Get Started", href: "#contact" },              featuresTitle: "What's Included:",              features: [
+                "Regular checkups",                "Professional cleaning",                "Oral health consultation"],
             },
             {
-              id: "standard",              title: "Standard Care",              price: "$199",              period: "/visit",              imageSrc: "/api/placeholder/500/400?_wi=6",              imageAlt: "Standard care plan",              button: { text: "Choose Plan", href: "contact" },
-              features: [
-                "Everything in Basic",                "Cavity filling",                "Root canal therapy",                "Priority scheduling"],
+              id: "professional",              tag: "Professional Plan",              price: "$199",              period: "/month",              description: "Comprehensive dental care with advanced treatments.",              button: { text: "Get Started", href: "#contact" },              featuresTitle: "What's Included:",              features: [
+                "All Basic Plan features",                "X-rays and diagnostics",                "Cosmetic treatments",                "Priority scheduling"],
             },
             {
-              id: "premium",              title: "Premium Care",              price: "$399",              period: "/visit",              imageSrc: "/api/placeholder/500/400?_wi=7",              imageAlt: "Premium care plan",              button: { text: "Choose Plan", href: "contact" },
-              features: [
-                "Everything in Standard",                "Dental implants",                "Cosmetic treatments",                "VIP support"],
+              id: "premium",              tag: "Premium Plan",              price: "$399",              period: "/month",              description: "Premium dental care with specialized treatments and priority support.",              button: { text: "Get Started", href: "#contact" },              featuresTitle: "What's Included:",              features: [
+                "All Professional Plan features",                "Dental implants coverage",                "Emergency 24/7 support",                "Dedicated dentist"],
             },
           ]}
           animationType="slide-up"
-          title="Our Pricing Plans"
-          description="Affordable dental care options for every budget."
+          title="Our Pricing"
+          description="Choose the plan that works best for you and your family."
           textboxLayout="default"
           useInvertedBackground={false}
         />
@@ -183,22 +115,19 @@ export default function Home() {
           faqs={[
             {
               id: "1",              title: "How often should I visit the dentist?",              content:
-                "We recommend visiting your dentist every 6 months for regular cleanings and check-ups. However, if you have specific concerns or gum disease, more frequent visits may be necessary."},
+                "Most people should visit their dentist twice a year for regular checkups and cleanings. However, some may need more frequent visits depending on their oral health condition."},
             {
-              id: "2",              title: "Are dental implants painful?",              content:
-                "The implant procedure is performed under anesthesia, so you won't feel pain during the surgery. You may experience some mild discomfort after the procedure, which can be managed with pain medication."},
+              id: "2",              title: "Are dental implants safe?",              content:
+                "Yes, dental implants are a safe and effective solution for replacing missing teeth. They are made from biocompatible materials and have a high success rate when properly placed and maintained."},
             {
               id: "3",              title: "How long does teeth whitening last?",              content:
-                "Professional teeth whitening results typically last between 6-12 months, depending on your habits. We recommend touch-ups annually to maintain your bright smile."},
+                "Professional teeth whitening results typically last between 6 months to 2 years, depending on your lifestyle and maintenance habits. Regular touch-ups can help maintain the results."},
             {
-              id: "4",              title: "What can I do to prevent cavities?",              content:
-                "Brush your teeth twice daily with fluoride toothpaste, floss daily, limit sugary foods and drinks, and visit your dentist regularly for cleanings and check-ups."},
-            {
-              id: "5",              title: "Do you offer emergency dental services?",              content:
-                "Yes, we offer emergency dental services for urgent situations. Please call our office immediately if you're experiencing severe dental pain or trauma."},
+              id: "4",              title: "What should I do if I have a dental emergency?",              content:
+                "If you have a dental emergency, please contact our office immediately. We offer emergency appointments and can provide guidance on initial care until you can see us."},
           ]}
           title="Frequently Asked Questions"
-          description="Find answers to common questions about our dental services."
+          description="Find answers to common questions about our dental services and treatments."
           textboxLayout="default"
           useInvertedBackground={false}
           faqsAnimation="slide-up"
@@ -206,63 +135,21 @@ export default function Home() {
       </div>
 
       <div id="contact" data-section="contact">
-        <section className="py-20">
-          <div className="w-[var(--width-content-width)] mx-auto px-[var(--vw-1_5)]">
-            <div className="text-center mb-12">
-              <h2 className="text-4xl md:text-5xl font-bold mb-4">
-                Contact Us
-              </h2>
-              <p className="text-lg text-foreground/75 max-w-2xl mx-auto">
-                Get in touch with our team to schedule an appointment or ask any
-                questions.
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
-              <div className="text-center">
-                <div className="flex justify-center mb-4">
-                  <MapPin className="w-8 h-8 text-primary-cta" />
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Address</h3>
-                <p className="text-foreground/75">
-                  123 Dental Street
-                  <br />
-                  New York, NY 10001
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="flex justify-center mb-4">
-                  <Clock className="w-8 h-8 text-primary-cta" />
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Hours</h3>
-                <p className="text-foreground/75">
-                  Mon-Fri: 9:00 AM - 6:00 PM
-                  <br />
-                  Sat: 10:00 AM - 4:00 PM
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="flex justify-center mb-4">
-                  <Award className="w-8 h-8 text-primary-cta" />
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Phone</h3>
-                <p className="text-foreground/75">
-                  (555) 123-4567
-                  <br />
-                  (555) 987-6543
-                </p>
-              </div>
-            </div>
-          </div>
-        </section>
+        <ContactCTA
+          tag="Get in Touch"
+          tagIcon={Mail}
+          title="Ready to Improve Your Smile?"
+          description="Contact us today to schedule your appointment and experience the highest quality dental care."
+          buttons={[
+            { text: "Schedule Appointment", href: "tel:+1234567890" },
+            { text: "Send Message", href: "mailto:hello@example.com" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
       </div>
-
-      <FooterCard
-        logoText="EXPERT DENTAL CARE"
-        copyrightText="© 2025 EXPERT DENTAL CARE. All rights reserved."
-      />
     </ThemeProvider>
   );
-}
+};
+
+export default page;