Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,397 +2,71 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import FooterBase from '@/components/sections/footer/FooterBase';
 
-export default function LandingPage() {
+export default function MedicalLandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="background-highlight"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
+        borderRadius="soft"
-        contentWidth="small"
+        contentWidth="medium"
-        sizing="largeSmallSizeMediumTitles"
+        sizing="largeSizeMediumTitles"
-        background="noiseDiagonalGradient"
+        background="noise"
-        cardStyle="soft-shadow"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="primary-glow"
+        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
-        headingFontWeight="light"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+          <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "hero" },
-          name: "Services",
+              { name: "Services", id: "services" }
-          id: "features",
+            ]}
-        },
+            brandName="ClinicalAI"
-        {
+            button={{ text: "Contact" }}
-          name: "About",
+          />
-          id: "about",
+        </div>
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-      ]}
-      brandName="MediCare Plus"
-      button={{
-        text: "Book Appointment",
-        href: "#contact",
-      }}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitTestimonial
+          <HeroBillboard
-      background={{
+            title="Future of Clinical Intelligence"
-        variant: "radial-gradient",
+            description="Empowering healthcare providers with advanced AI-driven tools for smarter documentation and patient care."
-      }}
+            background={{ variant: "radial-gradient" }}
-      title="Compassionate Care, Advanced Medical Solutions"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DtiGco1xSO7W3FFY9GO1jcdoQI/uploaded-1779108376004-rwze57pr.png?_wi=1"
-      description="Your health is our priority. We provide comprehensive medical services with a patient-first approach in a comfortable, modern setting."
+            buttons={[{ text: "Get Started", href: "#services" }]}
-      testimonials={[
+          />
-        {
+        </div>
-          name: "John Doe",
-          handle: "@johndoe",
-          testimonial: "Excellent care and friendly staff. Truly the best medical experience.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/two-men-sit-waiting-room-with-monitor-showing-word-health-screen_482257-64766.jpg?_wi=1",
-          imageAlt: "professional doctor smiling clinic background",
-        },
-        {
-          name: "Jane Smith",
-          handle: "@janesmith",
-          testimonial: "Professional doctors and fast service. Highly recommended.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-examining-girl-by-stethoscope-medical-office-pandemic-pediatrician-specialist-medicine-with-mask-providing-health-care-services-consultation-treatment-hospital-cabinet_482257-14515.jpg?_wi=1",
-          imageAlt: "professional doctor smiling clinic background",
-        },
-        {
-          name: "Robert Brown",
-          handle: "@robbrown",
-          testimonial: "Great facilities and very thorough check-ups.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-medic-looking-coronavirus-illustration-laptop-with-sick-patient-talking-about-medication-prevention-virus-animation-display-cure-disease-medical-cabinet_482257-45670.jpg?_wi=1",
-          imageAlt: "professional doctor smiling clinic background",
-        },
-        {
-          name: "Alice Green",
-          handle: "@alicegreen",
-          testimonial: "A very calming atmosphere for a clinic. I felt well taken care of.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/scientist-conducting-gel-electrophoresis-biological-process-as-part-coronavirus-research_181624-756.jpg?_wi=1",
-          imageAlt: "professional doctor smiling clinic background",
-        },
-        {
-          name: "Marcus V.",
-          handle: "@marcusv",
-          testimonial: "Efficient and knowledgeable medical staff. Exceptional.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-hotel-interior-space_23-2150683473.jpg",
-          imageAlt: "professional doctor smiling clinic background",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Book Consultation",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/two-men-sit-waiting-room-with-monitor-showing-word-health-screen_482257-64766.jpg?_wi=2"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/doctor-is-asking-patient-symptom_53876-146010.jpg",
-          alt: "Doctor is asking patient for the symptom",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/african-american-nurse-evaluating-lab-test-results-discussing-recovery-plan_482257-122745.jpg",
-          alt: "African american nurse evaluating lab test results and discussing recovery plan",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-doctors-sitting-together_23-2149856230.jpg",
-          alt: "Medium shot doctors sitting together",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medical-assistant-showing-glucose-levels-test-measurement_482257-132036.jpg",
-          alt: "Medical assistant showing glucose levels test measurement",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/two-men-sit-waiting-room-with-monitor-showing-word-health-screen_482257-64766.jpg",
-          alt: "professional doctor smiling clinic background",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Advanced Care",
-        },
-        {
-          type: "text",
-          text: "Compassionate Staff",
-        },
-        {
-          type: "text",
-          text: "Modern Facilities",
-        },
-        {
-          type: "text",
-          text: "Patient First",
-        },
-        {
-          type: "text",
-          text: "Reliable Results",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="services" data-section="services">
-      <FeatureCardTwentyNine
+          <FeatureCardMedia
-      animationType="slide-up"
+            title="Clinical Services Suite"
-      textboxLayout="split"
+            description="Transform your practice with our high-trust clinical integration tools."
-      gridVariant="three-columns-all-equal-width"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            animationType="blur-reveal"
-      features={[
+            useInvertedBackground={false}
-        {
+            features={[
-          title: "Diagnostic Services",
+              {
-          description: "High-tech equipment for accurate diagnostics.",
+                id: "ai-chat",                title: "AI Clinical Assistant",                description: "Seamless AI consultation support with support for voice, text, and video inputs.",                tag: "Productivity",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DtiGco1xSO7W3FFY9GO1jcdoQI/uploaded-1779108376004-rwze57pr.png?_wi=2"
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-examining-girl-by-stethoscope-medical-office-pandemic-pediatrician-specialist-medicine-with-mask-providing-health-care-services-consultation-treatment-hospital-cabinet_482257-14515.jpg?_wi=2",
+              },
-          titleImageSrc: "",
+              {
-          buttonText: "Learn More",
+                id: "doc-translation",                title: "Medical Documentation Translation",                description: "High-precision translation for complex clinical documentation in multiple languages.",                tag: "Compliance",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DtiGco1xSO7W3FFY9GO1jcdoQI/uploaded-1779108376004-rwze57pr.png?_wi=3"
-        },
+              }
-        {
+            ]}
-          title: "General Consultations",
+          />
-          description: "Personalized health advice for every patient.",
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/female-medic-looking-coronavirus-illustration-laptop-with-sick-patient-talking-about-medication-prevention-virus-animation-display-cure-disease-medical-cabinet_482257-45670.jpg?_wi=2",
-          titleImageSrc: "",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Preventative Care",
-          description: "Dedicated screening and wellness plans.",
-          imageSrc: "http://img.b2bpic.net/free-photo/scientist-conducting-gel-electrophoresis-biological-process-as-part-coronavirus-research_181624-756.jpg?_wi=2",
-          titleImageSrc: "",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Imaging & Radiology",
-          description: "Advanced imaging for early detection.",
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-patients-looking-x-ray-sitting-medical-office-physician-specialist-medicine-providing-health-care-services-consultation-radiographic-treatment-clinic-hospital-cabinet_482257-14534.jpg",
-          titleImageSrc: "",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Specialty Consultations",
-          description: "Meet our team of board-certified specialists.",
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-with-protection-mask-visor-typing-treatment-laptop-while-mother-comes-with-daughter-consultation-hospital-coronavirus-pandemic-equipped-nurse-talking-with-patients_482257-14494.jpg",
-          titleImageSrc: "",
-          buttonText: "Learn More",
-        },
-      ]}
-      title="Our Specialized Medical Services"
-      description="We offer a wide range of diagnostic and treatment services tailored to your personal health needs."
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="footer" data-section="footer">
-      <TextSplitAbout
+          <FooterBase
-      useInvertedBackground={false}
+            logoText="ClinicalAI"
-      title="Dedicated to Your Long-Term Wellness"
+            columns={[{ title: "Product", items: [{ label: "AI Chat", href: "#" }, { label: "Documentation", href: "#" }] }]}
-      description={[
+          />
-        "MediCare Plus was founded on the belief that everyone deserves high-quality medical attention.",
+        </div>
-        "We integrate traditional medicine with modern technology to ensure the best possible outcomes for our community.",
-      ]}
-      buttons={[
-        {
-          text: "Meet Our Team",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah Miller",
-          role: "Patient",
-          company: "Happy Family",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-patient-clinic_23-2149103571.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael Lee",
-          role: "Patient",
-          company: "Local Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/sick-patient-waiting-doctor-give-treatment-support-while-sitting-hospital-ward-bed-woman-with-disease-receiving-medical-care-clinic-with-heart-rate-monitor-iv-drip-bag_482257-38667.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily Davis",
-          role: "Patient",
-          company: "GrowthCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling-while-talking-doctor_107420-73983.jpg",
-        },
-        {
-          id: "4",
-          name: "David Wilson",
-          role: "Patient",
-          company: "StartupXYZ",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-male-doctor-wearing-doctor-uniform-with-stethoscope-showing-phone-call-gesture-points-isolated-white-wall_141793-83692.jpg",
-        },
-        {
-          id: "5",
-          name: "Karen White",
-          role: "Patient",
-          company: "WellnessLab",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-woman-talking_23-2148894920.jpg",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "20k+",
-          label: "Patients Treated",
-        },
-        {
-          value: "15",
-          label: "Expert Specialists",
-        },
-        {
-          value: "99%",
-          label: "Satisfaction Rate",
-        },
-      ]}
-      title="Trusted by Thousands of Families"
-      description="Your health journey is ours. Here's what our community says about their care experience."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Our Impact on Healthcare"
-      tag="Reliability"
-      metrics={[
-        {
-          id: "m1",
-          value: "24/7",
-          description: "Available Emergency Support",
-        },
-        {
-          id: "m2",
-          value: "100+",
-          description: "Medical Procedures Available",
-        },
-        {
-          id: "m3",
-          value: "5.0",
-          description: "Avg Clinic Rating",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Do I need an appointment?",
-          content: "Yes, we recommend booking an appointment to ensure the shortest wait times.",
-        },
-        {
-          id: "q2",
-          title: "Are you open on weekends?",
-          content: "We offer limited hours on Saturdays for emergency consultation visits.",
-        },
-        {
-          id: "q3",
-          title: "Do you accept insurance?",
-          content: "Yes, we work with all major insurance providers in the region.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Have questions about our services or appointments? We have answers."
-      faqsAnimation="blur-reveal"
-      imageSrc="http://img.b2bpic.net/free-photo/senior-medic-showing-diagnosis-laptop-sick-patient-explaining-disease-medicine-treatment-checkup-visit-appointment-waiting-room-doctor-woman-doing-medical-examination_482257-48869.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contact"
-      title="Book Your Appointment"
-      description="Ready to get started? Enter your email below and our team will contact you shortly to confirm your booking."
-      imageSrc="http://img.b2bpic.net/free-photo/woman-doctor-white-uniform-standing-hall_1157-33397.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6r4wk4"
-      logoText="MediCare Plus"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Services",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fafffb;
+  --background: #f5f5f5;
-  --card: #f7fffa;
+  --card: #ffffff;
-  --foreground: #001a0a;
+  --foreground: #1c1c1c;
-  --primary-cta: #0a7039;
+  --primary-cta: #1c1c1c;
   --primary-cta-text: #fafffb;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #001a0a;
-  --accent: #a8d9be;
+  --accent: #15479c;
-  --background-accent: #6bbf8e;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);