From cf320b0ce9a877281b8f52b1c3685a4b3a9f6912 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 10 May 2026 06:29:42 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 535 +++++++++++++++--------------------------------
 1 file changed, 168 insertions(+), 367 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4e48189..351166b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,382 +29,183 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Klinik Ikram KB"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Services", id: "services" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Klinik Ikram KB"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Kesihatan Anda, Keutamaan Kami."
-      description="Klinik Ikram Kota Bharu menyediakan rawatan perubatan 24 jam yang profesional, telus, dan mesra pelanggan. Kami sentiasa sedia berkhidmat untuk anda."
-      kpis={[
-        {
-          value: "24/7",
-          label: "Sentiasa Sedia",
-        },
-        {
-          value: "Pakar",
-          label: "Doktor Berpengalaman",
-        },
-        {
-          value: "Moden",
-          label: "Peralatan Canggih",
-        },
-      ]}
-      enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "Temujanji Sekarang",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/empty-medical-office-with-desktop-pc_482257-110139.jpg"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/nobody-doctors-office-with-modern-funiture-medical-facility-empty-examination-cabinet-healthcare-specialist-close-up-white-desk-with-laptop-stethoscope-pens_482257-28596.jpg",
-          alt: "Doctor profile 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-medical-office-with-technology_482257-110140.jpg",
-          alt: "Doctor profile 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-hospital-reception-counter-hallway-waiting-room-seats-medical-examination-appointment-with-physician-registration-desk-with-waiting-area-help-patients-with-disease-diagnosis_482257-51632.jpg",
-          alt: "Doctor profile 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/vacant-hospital-room-with-laptop_482257-119789.jpg",
-          alt: "Doctor profile 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-healthcare-medical-office-no-people-modern-hospital-interior-computer-desk-with-examining-diagnostic-data-checking-disease-doctor-medical-space_482257-64606.jpg",
-          alt: "Doctor profile 5",
-        },
-      ]}
-      avatarText="Dipercayai oleh ribuan pesakit"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Rawatan Kecemasan 24 Jam",
-        },
-        {
-          type: "text",
-          text: "Doktor Pakar Bertauliah",
-        },
-        {
-          type: "text",
-          text: "Peralatan Diagnostik Terkini",
-        },
-        {
-          type: "text",
-          text: "Persekitaran Selesa & Bersih",
-        },
-        {
-          type: "text",
-          text: "Harga Perubatan Berpatutan",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
+            background={{ variant: "gradient-bars" }}
+            title="Kesihatan Anda, Keutamaan Kami."
+            description="Klinik Ikram Kota Bharu menyediakan rawatan perubatan 24 jam yang profesional, telus, dan mesra pelanggan. Kami sentiasa sedia berkhidmat untuk anda."
+            kpis={[
+              { value: "24/7", label: "Sentiasa Sedia" },
+              { value: "Pakar", label: "Doktor Berpengalaman" },
+              { value: "Moden", label: "Peralatan Canggih" },
+            ]}
+            enableKpiAnimation={true}
+            buttons={[{ text: "Temujanji Sekarang", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/empty-medical-office-with-desktop-pc_482257-110139.jpg"
+            mediaAnimation="blur-reveal"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/nobody-doctors-office-with-modern-funiture-medical-facility-empty-examination-cabinet-healthcare-specialist-close-up-white-desk-with-laptop-stethoscope-pens_482257-28596.jpg", alt: "Doctor profile 1" },
+              { src: "http://img.b2bpic.net/free-photo/empty-medical-office-with-technology_482257-110140.jpg", alt: "Doctor profile 2" },
+              { src: "http://img.b2bpic.net/free-photo/empty-hospital-reception-counter-hallway-waiting-room-seats-medical-examination-appointment-with-physician-registration-desk-with-waiting-area-help-patients-with-disease-diagnosis_482257-51632.jpg", alt: "Doctor profile 3" },
+              { src: "http://img.b2bpic.net/free-photo/vacant-hospital-room-with-laptop_482257-119789.jpg", alt: "Doctor profile 4" },
+              { src: "http://img.b2bpic.net/free-photo/empty-healthcare-medical-office-no-people-modern-hospital-interior-computer-desk-with-examining-diagnostic-data-checking-disease-doctor-medical-space_482257-64606.jpg", alt: "Doctor profile 5" },
+            ]}
+            avatarText="Dipercayai oleh ribuan pesakit"
+            marqueeItems={[
+              { type: "text", text: "Rawatan Kecemasan 24 Jam" },
+              { type: "text", text: "Doktor Pakar Bertauliah" },
+              { type: "text", text: "Peralatan Diagnostik Terkini" },
+              { type: "text", text: "Persekitaran Selesa & Bersih" },
+              { type: "text", text: "Harga Perubatan Berpatutan" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={true}
-      title="Perkhidmatan Perubatan Berkualiti"
-      metrics={[
-        {
-          icon: Activity,
-          label: "Rawatan Am",
-          value: "Berkualiti",
-        },
-        {
-          icon: Heart,
-          label: "Check Jantung",
-          value: "ECG",
-        },
-        {
-          icon: Droplet,
-          label: "Vaksin",
-          value: "Segera",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            useInvertedBackground={true}
+            title="Perkhidmatan Perubatan Berkualiti"
+            metrics={[
+              { icon: Activity, label: "Rawatan Am", value: "Berkualiti" },
+              { icon: Heart, label: "Check Jantung", value: "ECG" },
+              { icon: Droplet, label: "Vaksin", value: "Segera" },
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureBorderGlow
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: Activity,
-          title: "Rawatan Am & Drip",
-          description: "Rawatan rutin untuk kesihatan keluarga.",
-        },
-        {
-          icon: ShieldCheck,
-          title: "Pemeriksaan Kesihatan",
-          description: "Check-up lengkap untuk kesejahteraan anda.",
-        },
-        {
-          icon: User,
-          title: "Kesihatan Lelaki",
-          description: "Program khusus yang telus dan profesional.",
-        },
-      ]}
-      title="Rawatan Kami"
-      description="Menawarkan pelbagai perkhidmatan perubatan dengan standard kualiti tertinggi."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureBorderGlow
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { icon: Activity, title: "Rawatan Am & Drip", description: "Rawatan rutin untuk kesihatan keluarga." },
+              { icon: ShieldCheck, title: "Pemeriksaan Kesihatan", description: "Check-up lengkap untuk kesejahteraan anda." },
+              { icon: User, title: "Kesihatan Lelaki", description: "Program khusus yang telus dan profesional." },
+            ]}
+            title="Rawatan Kami"
+            description="Menawarkan pelbagai perkhidmatan perubatan dengan standard kualiti tertinggi."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      textboxLayout="split"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          title: "Puas Hati",
-          description: "Maklum balas pelanggan yang positif.",
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-using-x-ray-unit-control-panel-patient_107420-63776.jpg",
-        },
-        {
-          id: "m2",
-          value: "Pakar",
-          title: "Doktor Mesra",
-          description: "Penjelasan jelas dan mudah difahami.",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-hospital-machinery-illuminates-blue-mri-scanner-generated-by-ai_188544-44420.jpg",
-        },
-        {
-          id: "m3",
-          value: "Bersih",
-          title: "Persekitaran Selesa",
-          description: "Klinik yang terjaga kebersihannya.",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-nurse-takes-notes-consultation-with-old-people_482257-122742.jpg",
-        },
-      ]}
-      title="Kecemerlangan Klinikal"
-      description="Hasil perkhidmatan kami yang dipercayai oleh masyarakat."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardEleven
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            metrics={[
+              {
+                id: "m1",                value: "100%",                title: "Puas Hati",                description: "Maklum balas pelanggan yang positif.",                imageSrc: "http://img.b2bpic.net/free-photo/doctor-using-x-ray-unit-control-panel-patient_107420-63776.jpg"},
+              {
+                id: "m2",                value: "Pakar",                title: "Doktor Mesra",                description: "Penjelasan jelas dan mudah difahami.",                imageSrc: "http://img.b2bpic.net/free-photo/modern-hospital-machinery-illuminates-blue-mri-scanner-generated-by-ai_188544-44420.jpg"},
+              {
+                id: "m3",                value: "Bersih",                title: "Persekitaran Selesa",                description: "Klinik yang terjaga kebersihannya.",                imageSrc: "http://img.b2bpic.net/free-photo/african-american-nurse-takes-notes-consultation-with-old-people_482257-122742.jpg"},
+            ]}
+            title="Kecemerlangan Klinikal"
+            description="Hasil perkhidmatan kami yang dipercayai oleh masyarakat."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          title: "Sangat Membantu",
-          quote: "Doktor sangat membantu dan penjelasan jelas.",
-          name: "Hindunitul Syifa",
-          role: "Pelanggan",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-female-doctor-patient_23-2149844603.jpg",
-        },
-        {
-          id: "t2",
-          title: "Peralatan Canggih",
-          quote: "Peralatan canggih, doktor pakar dan mesra.",
-          name: "Chegumark",
-          role: "Pelanggan",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-posing-patient_23-2148757390.jpg",
-        },
-        {
-          id: "t3",
-          title: "Penerangan Jelas",
-          quote: "Penjelasan doktor berkaitan keadaan kesihatan sangat jelas.",
-          name: "Khairul Izzuddin",
-          role: "Pelanggan",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-happy-nurse-duty-communicating-with-mature-man-reception-desk-clinic_637285-471.jpg",
-        },
-        {
-          id: "t4",
-          title: "Bersih Selesa",
-          quote: "Klinik bersih dan selesa, servis sangat terbaik.",
-          name: "Fatin Atikah",
-          role: "Pelanggan",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-healthcare-worker-with-headset-working-hospital-call-center-looking-camera_637285-4900.jpg",
-        },
-        {
-          id: "t5",
-          title: "Profesional",
-          quote: "Staf profesional dan doktor sangat membantu.",
-          name: "Zati Hani",
-          role: "Pelanggan",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nurses-talking_23-2148501139.jpg",
-        },
-      ]}
-      title="Kata Pelanggan Kami"
-      description="Kami amat menghargai kepercayaan yang diberikan oleh pelanggan kami."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTen
+            textboxLayout="split"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", title: "Sangat Membantu", quote: "Doktor sangat membantu dan penjelasan jelas.", name: "Hindunitul Syifa", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-female-doctor-patient_23-2149844603.jpg" },
+              { id: "t2", title: "Peralatan Canggih", quote: "Peralatan canggih, doktor pakar dan mesra.", name: "Chegumark", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-posing-patient_23-2148757390.jpg" },
+              { id: "t3", title: "Penerangan Jelas", quote: "Penjelasan doktor berkaitan keadaan kesihatan sangat jelas.", name: "Khairul Izzuddin", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/young-happy-nurse-duty-communicating-with-mature-man-reception-desk-clinic_637285-471.jpg" },
+              { id: "t4", title: "Bersih Selesa", quote: "Klinik bersih dan selesa, servis sangat terbaik.", name: "Fatin Atikah", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/smiling-healthcare-worker-with-headset-working-hospital-call-center-looking-camera_637285-4900.jpg" },
+              { id: "t5", title: "Profesional", quote: "Staf profesional dan doktor sangat membantu.", name: "Zati Hani", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nurses-talking_23-2148501139.jpg" },
+            ]}
+            title="Kata Pelanggan Kami"
+            description="Kami amat menghargai kepercayaan yang diberikan oleh pelanggan kami."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      plans={[
-        {
-          id: "p1",
-          price: "RM 50",
-          name: "Rawatan Asas",
-          buttons: [
-            {
-              text: "Pilih",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Pemeriksaan Am",
-            "Ubat-ubatan Asas",
-            "Konsultasi",
-          ],
-        },
-        {
-          id: "p2",
-          price: "RM 150",
-          name: "Check-up Penuh",
-          buttons: [
-            {
-              text: "Pilih",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "FBC",
-            "ECG",
-            "Body Analysis",
-            "Konsultasi",
-          ],
-        },
-        {
-          id: "p3",
-          price: "RM 250",
-          name: "Wellness Pro",
-          buttons: [
-            {
-              text: "Pilih",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Pakej Penuh",
-            "Program Kesihatan Lelaki",
-            "Rawatan Saraf",
-          ],
-        },
-      ]}
-      title="Pakej Kesihatan"
-      description="Harga berpatutan tanpa mengabaikan kualiti rawatan."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            plans={[
+              {
+                id: "p1",                price: "RM 50",                name: "Rawatan Asas",                buttons: [{ text: "Pilih", href: "#contact" }],
+                features: ["Pemeriksaan Am", "Ubat-ubatan Asas", "Konsultasi"],
+              },
+              {
+                id: "p2",                price: "RM 150",                name: "Check-up Penuh",                buttons: [{ text: "Pilih", href: "#contact" }],
+                features: ["FBC", "ECG", "Body Analysis", "Konsultasi"],
+              },
+              {
+                id: "p3",                price: "RM 250",                name: "Wellness Pro",                buttons: [{ text: "Pilih", href: "#contact" }],
+                features: ["Pakej Penuh", "Program Kesihatan Lelaki", "Rawatan Saraf"],
+              },
+            ]}
+            title="Pakej Kesihatan"
+            description="Harga berpatutan tanpa mengabaikan kualiti rawatan."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Adakah klinik buka 24 jam?",
-          content: "Ya, Klinik Ikram Kota Bharu beroperasi 24 jam sehari.",
-        },
-        {
-          id: "f2",
-          title: "Perlukan temujanji?",
-          content: "Kami mengalu-alukan temujanji, namun kes kecemasan diutamakan.",
-        },
-        {
-          id: "f3",
-          title: "Jenis rawatan apa disediakan?",
-          content: "Kami menyediakan rawatan am, ECG, vaksin, kesihatan lelaki dan banyak lagi.",
-        },
-      ]}
-      sideTitle="Soalan Lazim"
-      sideDescription="Dapatkan jawapan mengenai perkhidmatan kami di sini."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Adakah klinik buka 24 jam?", content: "Ya, Klinik Ikram Kota Bharu beroperasi 24 jam sehari." },
+              { id: "f2", title: "Perlukan temujanji?", content: "Kami mengalu-alukan temujanji, namun kes kecemasan diutamakan." },
+              { id: "f3", title: "Jenis rawatan apa disediakan?", content: "Kami menyediakan rawatan am, ECG, vaksin, kesihatan lelaki dan banyak lagi." },
+            ]}
+            sideTitle="Soalan Lazim"
+            sideDescription="Dapatkan jawapan mengenai perkhidmatan kami di sini."
+            faqsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Hubungi Kami"
-      title="Kami Sedia Membantu"
-      description="Untuk sebarang pertanyaan atau temujanji, sila hubungi kami terus."
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-hospital-receptionist-working-administrative-counter-help-patients-with-appointments-female-secretary-giving-support-healthcare-reception-desk-facility_482257-48713.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Hubungi Kami"
+            title="Kami Sedia Membantu"
+            description="Untuk sebarang pertanyaan atau temujanji, sila hubungi kami terus."
+            imageSrc="http://img.b2bpic.net/free-photo/portrait-hospital-receptionist-working-administrative-counter-help-patients-with-appointments-female-secretary-giving-support-healthcare-reception-desk-facility_482257-48713.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/nobody-hospital-waiting-room-front-desk-with-office-supplies-promotional-flyers-healthcare-facility-empty-reception-counter-with-no-people-private-practice-clinic_482257-45891.jpg"
-      logoText="Klinik Ikram KB"
-      columns={[
-        {
-          title: "Navigasi",
-          items: [
-            {
-              label: "Utama",
-              href: "#hero",
-            },
-            {
-              label: "Servis",
-              href: "#services",
-            },
-            {
-              label: "Testimoni",
-              href: "#testimonials",
-            },
-          ],
-        },
-        {
-          title: "Hubungi",
-          items: [
-            {
-              label: "Alamat",
-              href: "#",
-            },
-            {
-              label: "Telefon",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/nobody-hospital-waiting-room-front-desk-with-office-supplies-promotional-flyers-healthcare-facility-empty-reception-counter-with-no-people-private-practice-clinic_482257-45891.jpg"
+            logoText="Klinik Ikram KB"
+            columns={[
+              {
+                title: "Navigasi",                items: [
+                  { label: "Utama", href: "#hero" },
+                  { label: "Servis", href: "#services" },
+                  { label: "Testimoni", href: "#testimonials" },
+                ],
+              },
+              {
+                title: "Hubungi",                items: [
+                  { label: "Alamat", href: "#" },
+                  { label: "Telefon", href: "#" },
+                ],
+              },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1