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

Merge version_2 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
@@ -32,13 +32,21 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "About",          id: "about"},
+          name: "About",
+          id: "about",
+        },
         {
-          name: "Services",          id: "services"},
+          name: "Services",
+          id: "services",
+        },
         {
-          name: "Reviews",          id: "reviews"},
+          name: "Reviews",
+          id: "reviews",
+        },
         {
-          name: "Contact",          id: "contact"},
+          name: "Contact",
+          id: "contact",
+        },
       ]}
       brandName="Celebrita"
     />
@@ -47,24 +55,100 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       background={{
-        variant: "plain"}}
+        variant: "plain",
+      }}
       title="Professional Skin Care Excellence"
       description="Providing expert dermatological consultations and personalized treatment plans in Peshawar. Trust our expertise for your healthiest skin."
       testimonials={[
         {
-          name: "Rashid Ali",          handle: "@rashid",          testimonial: "Very competent doctor!",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-testing-colours_23-2150538710.jpg"},
+          name: "Rashid Ali",
+          handle: "@rashid",
+          testimonial: "Very competent doctor!",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-testing-colours_23-2150538710.jpg",
+        },
         {
-          name: "Hamza Jan",          handle: "@hamzaj",          testimonial: "Professional and kind.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-wearing-white-coat_23-2149844582.jpg"},
+          name: "Hamza Jan",
+          handle: "@hamzaj",
+          testimonial: "Professional and kind.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-wearing-white-coat_23-2149844582.jpg",
+        },
+        {
+          name: "Rahim Ullah",
+          handle: "@rahim",
+          testimonial: "Highly recommended service.",
+          rating: 4,
+          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-woman-doctor-with-toothy-smile-generated-by-ai_188544-29156.jpg",
+        },
+        {
+          name: "Sana Khan",
+          handle: "@sana",
+          testimonial: "Great experience with the clinic.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-medic-examining-male-patient-office-routine-checkup-discussing-about-treatment-plan_482257-135628.jpg",
+        },
+        {
+          name: "Ali Abbas",
+          handle: "@ali",
+          testimonial: "Clear results after just one visit.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-doctor-checking-patient_23-2149726926.jpg",
+        },
       ]}
       buttons={[
         {
-          text: "Book Consultation",          href: "#contact"},
+          text: "Book Consultation",
+          href: "#contact",
+        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DzRmTAEgOQeLBbpl3non4OH7hP/uploaded-1779283559262-o9vucjvs.jpg"
       imageAlt="dermatologist consulting patient skin health"
       mediaAnimation="slide-up"
+      avatars={[
+        {
+          src: "http://img.b2bpic.net/free-photo/doctor-preparing-consult_23-2149309927.jpg",
+          alt: "Patient portrait",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/smiling-female-doctor-holding-stethoscope_268835-944.jpg",
+          alt: "Patient portrait",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/female-doctor-special-equipment_23-2148980727.jpg",
+          alt: "Patient portrait",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",
+          alt: "Patient portrait",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/closeup-playful-woman-making-frame-winking_1262-1748.jpg",
+          alt: "Patient portrait",
+        },
+      ]}
+      marqueeItems={[
+        {
+          type: "text",
+          text: "Expert Dermatological Care",
+        },
+        {
+          type: "text",
+          text: "Clinical Precision",
+        },
+        {
+          type: "text",
+          text: "Advanced Treatment Plans",
+        },
+        {
+          type: "text",
+          text: "Patient-Centric Health",
+        },
+        {
+          type: "text",
+          text: "Trusted by Thousands",
+        },
+      ]}
     />
   </div>
 
@@ -83,18 +167,25 @@ export default function LandingPage() {
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwentyFive
+      <FeatureHoverPattern
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
         {
-          title: "Dermatological Diagnosis",          description: "Expert assessment of skin conditions.",          icon: Activity,
-          mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/doctor-preparing-consult_23-2149309927.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/doctor-preparing-consult_23-2149309927.jpg?_wi=2" }]
+          icon: Activity,
+          title: "Dermatological Diagnosis",
+          description: "Expert assessment of skin conditions.",
         },
         {
-          title: "Cosmetic Care",          description: "Revitalizing treatments for radiant skin.",          icon: Sparkles,
-          mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-doctor-holding-stethoscope_268835-944.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-doctor-holding-stethoscope_268835-944.jpg?_wi=2" }]
+          icon: Sparkles,
+          title: "Cosmetic Care",
+          description: "Revitalizing treatments for radiant skin.",
+        },
+        {
+          icon: Activity,
+          title: "Ongoing Follow-up",
+          description: "Monitoring your progress for better results.",
         },
       ]}
       title="Our Clinical Services"
@@ -106,8 +197,31 @@ export default function LandingPage() {
       <TestimonialCardTwelve
       useInvertedBackground={false}
       testimonials={[
-        { id: "1", name: "Rashid Ali", imageSrc: "http://img.b2bpic.net/free-photo/smiling-dentist-clinic_107420-74053.jpg" },
-        { id: "2", name: "Hamza Jan", imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-entrepreneur_1098-15359.jpg" },
+        {
+          id: "1",
+          name: "Rashid Ali",
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-dentist-clinic_107420-74053.jpg",
+        },
+        {
+          id: "2",
+          name: "Hamza Jan",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-entrepreneur_1098-15359.jpg",
+        },
+        {
+          id: "3",
+          name: "Rahim Ullah",
+          imageSrc: "http://img.b2bpic.net/free-photo/female-doctor-putting-medical-mask_23-2148757395.jpg",
+        },
+        {
+          id: "4",
+          name: "Patient 4",
+          imageSrc: "http://img.b2bpic.net/free-photo/little-girl-painting-with-flour-her-mother-face_23-2148327944.jpg",
+        },
+        {
+          id: "5",
+          name: "Patient 5",
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-thinking-girl-kitchen-wearing-bathrobe-steeple-fingers-looking-aside-thoughtful_1258-193226.jpg",
+        },
       ]}
       cardTitle="Patient Experiences"
       cardTag="4.0/5"
@@ -119,8 +233,21 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        { id: "1", title: "How to book?", content: "You can visit our clinic in Bashirabad or call us." },
-        { id: "2", title: "What are the hours?", content: "We are open daily until 9 PM." },
+        {
+          id: "1",
+          title: "How to book?",
+          content: "You can visit our clinic in Bashirabad or call us.",
+        },
+        {
+          id: "2",
+          title: "What are the hours?",
+          content: "We are open daily until 9 PM.",
+        },
+        {
+          id: "3",
+          title: "Is follow-up required?",
+          content: "Yes, we prioritize your skin health follow-ups.",
+        },
       ]}
       sideTitle="Patient Queries"
       sideDescription="Everything you need to know about your appointment."
@@ -134,8 +261,21 @@ export default function LandingPage() {
       title="Clinical Impact"
       tag="Results"
       metrics={[
-        { id: "1", value: "100+", description: "Daily Consultations" },
-        { id: "2", value: "98%", description: "Patient Satisfaction" },
+        {
+          id: "1",
+          value: "100+",
+          description: "Daily Consultations",
+        },
+        {
+          id: "2",
+          value: "98%",
+          description: "Patient Satisfaction",
+        },
+        {
+          id: "3",
+          value: "10+",
+          description: "Years Experience",
+        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -147,8 +287,18 @@ export default function LandingPage() {
       title="Book Your Appointment"
       description="Ready for healthier skin? Contact us today at our Bashirabad clinic."
       inputs={[
-        { name: "name", type: "text", placeholder: "Full Name", required: true },
-        { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+        {
+          name: "name",
+          type: "text",
+          placeholder: "Full Name",
+          required: true,
+        },
+        {
+          name: "phone",
+          type: "tel",
+          placeholder: "Phone Number",
+          required: true,
+        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DzRmTAEgOQeLBbpl3non4OH7hP/uploaded-1779283245168-74dz2izf.jpg"
       imageAlt="location pin on map"
@@ -158,7 +308,32 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        { title: "Information", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
+        {
+          title: "Information",
+          items: [
+            {
+              label: "About",
+              href: "#about",
+            },
+            {
+              label: "Services",
+              href: "#services",
+            },
+          ],
+        },
+        {
+          title: "Support",
+          items: [
+            {
+              label: "Help",
+              href: "#",
+            },
+            {
+              label: "Terms",
+              href: "#",
+            },
+          ],
+        },
       ]}
       bottomLeftText="© 2024 Celebrita Skin Care"
       bottomRightText="Bashirabad, Peshawar, Pakistan"