Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,16 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Facebook, Instagram, Twitter } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -22,8 +21,8 @@ export default function LandingPage() {
         contentWidth="smallMedium"
         sizing="mediumLargeSizeMediumTitles"
         background="noiseDiagonalGradient"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="radial-glow"
         secondaryButtonStyle="layered"
         headingFontWeight="bold"
     >
@@ -32,60 +31,39 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
-          id: "#hero",
-        },
+          name: "Home",          id: "#hero"},
         {
-          name: "About",
-          id: "#about",
-        },
+          name: "About",          id: "#about"},
         {
-          name: "Services",
-          id: "#services",
-        },
+          name: "Services",          id: "#services"},
         {
-          name: "Experience",
-          id: "#experience",
-        },
+          name: "Experience",          id: "#experience"},
         {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
+          name: "Testimonials",          id: "#testimonials"},
         {
-          name: "FAQ",
-          id: "#faq",
-        },
+          name: "FAQ",          id: "#faq"},
         {
-          name: "Contact",
-          id: "#contact",
-        },
+          name: "Contact",          id: "#contact"},
       ]}
       brandName="DR Shyama Prasad Mukherjee"
       button={{
-        text: "Book Appointment",
-        href: "#contact",
-      }}
+        text: "Book Appointment",        href: "#contact"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       logoText="DR Shyama Prasad Mukherjee"
       description="Your Trusted Physician with Over 10 Years of Dedicated Experience in Patient Care."
       buttons={[
         {
-          text: "Book Appointment",
-          href: "#contact",
-        },
+          text: "Book Appointment",          href: "#contact"},
         {
-          text: "Learn More",
-          href: "#about",
-        },
+          text: "Learn More",          href: "#about"},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/doctor-clinic-interior_1398-732.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/doctor-clinic-interior_1398-732.jpg?_wi=1"
       imageAlt="Portrait of Dr. Shyama Prasad Mukherjee"
       mediaAnimation="opacity"
     />
@@ -105,23 +83,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "General Consultation & Diagnosis",
-          description: "Expert assessment and accurate diagnosis for various health concerns, providing clarity and direction for your treatment.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-nurse-clinic_23-2149741265.jpg",
-          imageAlt: "Doctor consulting with patient",
-        },
+          title: "General Consultation & Diagnosis",          description: "Expert assessment and accurate diagnosis for various health concerns, providing clarity and direction for your treatment.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-nurse-clinic_23-2149741265.jpg",          imageAlt: "Doctor consulting with patient"},
         {
-          title: "Chronic Disease Management",
-          description: "Long-term care and management plans for chronic conditions like diabetes, hypertension, and heart disease, focusing on stability and quality of life.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-insulin-diabetic-syringe-injection_1150-14492.jpg",
-          imageAlt: "Patient receiving chronic disease care",
-        },
+          title: "Chronic Disease Management",          description: "Long-term care and management plans for chronic conditions like diabetes, hypertension, and heart disease, focusing on stability and quality of life.",          imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-insulin-diabetic-syringe-injection_1150-14492.jpg",          imageAlt: "Patient receiving chronic disease care"},
         {
-          title: "Preventive Health Checkups",
-          description: "Routine health screenings and personalized advice to help you maintain optimal health and prevent future illnesses.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-nurse-practicing-medicine-clinic_23-2149868916.jpg",
-          imageAlt: "Patient during a health checkup",
-        },
+          title: "Preventive Health Checkups",          description: "Routine health screenings and personalized advice to help you maintain optimal health and prevent future illnesses.",          imageSrc: "http://img.b2bpic.net/free-photo/female-nurse-practicing-medicine-clinic_23-2149868916.jpg",          imageAlt: "Patient during a health checkup"},
       ]}
       title="Our Specialized Medical Services"
       description="Offering a wide range of expert medical services designed to address your health needs comprehensively."
@@ -135,34 +101,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "years",
-          value: "10+",
-          title: "Years of Experience",
-          items: [
-            "Comprehensive patient care",
-            "Advanced medical practices",
-            "Continual professional development",
-          ],
+          id: "years",          value: "10+",          title: "Years of Experience",          items: [
+            "Comprehensive patient care",            "Advanced medical practices",            "Continual professional development"],
         },
         {
-          id: "patients",
-          value: "2000+",
-          title: "Happy Patients Served",
-          items: [
-            "Personalized care approach",
-            "Trusted health partner",
-            "Community health focus",
-          ],
+          id: "patients",          value: "2000+",          title: "Happy Patients Served",          items: [
+            "Personalized care approach",            "Trusted health partner",            "Community health focus"],
         },
         {
-          id: "satisfaction",
-          value: "98%",
-          title: "Patient Satisfaction Rate",
-          items: [
-            "High-quality medical service",
-            "Attentive and empathetic staff",
-            "Positive treatment outcomes",
-          ],
+          id: "satisfaction",          value: "98%",          title: "Patient Satisfaction Rate",          items: [
+            "High-quality medical service",            "Attentive and empathetic staff",            "Positive treatment outcomes"],
         },
       ]}
       title="Decades of Dedication and Expertise"
@@ -175,35 +123,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Anjali Sharma",
-          imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-1396.jpg",
-          imageAlt: "Patient Anjali Sharma",
-        },
+          id: "1",          name: "Anjali Sharma",          imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-1396.jpg",          imageAlt: "Patient Anjali Sharma"},
         {
-          id: "2",
-          name: "Rajesh Kumar",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-doctor-medical-suit-yellow-background_179666-27774.jpg",
-          imageAlt: "Patient Rajesh Kumar",
-        },
+          id: "2",          name: "Rajesh Kumar",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-doctor-medical-suit-yellow-background_179666-27774.jpg",          imageAlt: "Patient Rajesh Kumar"},
         {
-          id: "3",
-          name: "Priya Singh",
-          imageSrc: "http://img.b2bpic.net/free-photo/shining-face-beautiful-woman-home_329181-1327.jpg",
-          imageAlt: "Patient Priya Singh",
-        },
+          id: "3",          name: "Priya Singh",          imageSrc: "http://img.b2bpic.net/free-photo/shining-face-beautiful-woman-home_329181-1327.jpg",          imageAlt: "Patient Priya Singh"},
         {
-          id: "4",
-          name: "Suresh Gupta",
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-man-white-shirt-pink-bowtie_273609-42014.jpg",
-          imageAlt: "Patient Suresh Gupta",
-        },
+          id: "4",          name: "Suresh Gupta",          imageSrc: "http://img.b2bpic.net/free-photo/senior-man-white-shirt-pink-bowtie_273609-42014.jpg",          imageAlt: "Patient Suresh Gupta"},
         {
-          id: "5",
-          name: "Meena Devi",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-fitness-woman_171337-13339.jpg",
-          imageAlt: "Patient Meena Devi",
-        },
+          id: "5",          name: "Meena Devi",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-fitness-woman_171337-13339.jpg",          imageAlt: "Patient Meena Devi"},
       ]}
       cardTitle="What Our Patients Say"
       cardTag="Hear from Our Valued Patients"
@@ -212,75 +140,69 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqBase
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
         {
-          id: "1",
-          title: "What are your clinic hours?",
-          content: "Our clinic is open Monday to Friday, from 9:00 AM to 5:00 PM. We are closed on weekends and public holidays. Please call ahead for specific holiday hours.",
-        },
+          id: "1",          title: "What are your clinic hours?",          content: "Our clinic is open Monday to Friday, from 9:00 AM to 5:00 PM. We are closed on weekends and public holidays. Please call ahead for specific holiday hours."},
         {
-          id: "2",
-          title: "How can I book an appointment?",
-          content: "You can book an appointment by calling our reception at +91-9876543210 during clinic hours, or by sending us a message through the contact form on our website. Online booking options are coming soon!",
-        },
+          id: "2",          title: "How can I book an appointment?",          content: "You can book an appointment by calling our reception at +91-9876543210 during clinic hours, or by sending us a message through the contact form on our website. Online booking options are coming soon!"},
         {
-          id: "3",
-          title: "Do you accept new patients?",
-          content: "Yes, Dr. Shyama Prasad Mukherjee is currently accepting new patients. We look forward to welcoming you to our practice and providing you with excellent medical care. Please contact us to schedule your first visit.",
-        },
+          id: "3",          title: "Do you accept new patients?",          content: "Yes, Dr. Shyama Prasad Mukherjee is currently accepting new patients. We look forward to welcoming you to our practice and providing you with excellent medical care. Please contact us to schedule your first visit."},
       ]}
       title="Frequently Asked Questions"
       description="Find quick answers to common questions about our medical practice, appointments, and services."
       faqsAnimation="slide-up"
+      showCard={true}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplitForm
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Get in Touch"
-      title="Schedule Your Appointment Today"
-      description="Contact us to book a consultation with Dr. Shyama Prasad Mukherjee. Our friendly team is ready to assist you."
-      buttons={[
-        {
-          text: "Call Us Now",
-          href: "tel:+919876543210",
-        },
-        {
-          text: "Send a Message",
-          href: "mailto:info@drshyamaprasadmukherjee.com",
-        },
+      title="Experience Personalized Care"
+      description="Schedule a premium appointment with Dr. Shyama Prasad Mukherjee. Our dedicated team is ready to provide you with exceptional medical guidance."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
+        { name: "email", type: "email", placeholder: "Your Email Address", required: true },
+        { name: "phone", type: "tel", placeholder: "Your Phone Number" }
       ]}
+      textarea={{ name: "message", placeholder: "Your Message", rows: 5 }}
+      imageSrc="http://img.b2bpic.net/free-photo/doctor-clinic-interior_1398-732.jpg?_wi=2"
+      imageAlt="Doctor in clinic discussing medical reports"
+      buttonText="Book Now"
+      onSubmit={() => alert('Appointment booked!')}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
+      <FooterBase
       logoText="DR Shyama Prasad Mukherjee"
-      copyrightText="© 2024 DR Shyama Prasad Mukherjee. All rights reserved."
-      socialLinks={[
+      columns={[
         {
-          icon: Facebook,
-          href: "#",
-          ariaLabel: "Facebook",
+          title: "Services",          items: [
+            { label: "General Consultation", href: "#services" },
+            { label: "Chronic Disease Management", href: "#services" },
+            { label: "Preventive Health", href: "#services" },
+          ],
         },
         {
-          icon: Instagram,
-          href: "#",
-          ariaLabel: "Instagram",
+          title: "About Us",          items: [
+            { label: "Our Story", href: "#about" },
+            { label: "Our Mission", href: "#about" },
+            { label: "Experience", href: "#experience" },
+          ],
         },
         {
-          icon: Twitter,
-          href: "#",
-          ariaLabel: "Twitter",
+          title: "Contact",          items: [
+            { label: "Book Appointment", href: "#contact" },
+            { label: "Clinic Hours", href: "#faq" },
+            { label: "Location", href: "#contact" },
+          ],
         },
       ]}
+      copyrightText="© 2024 DR Shyama Prasad Mukherjee. All rights reserved."
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f3251;
-  --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);