From 1d934af37381980253825719e151b0e7163c5c4c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 28 Apr 2026 20:47:31 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 483 +++++++++++++++--------------------------------
 1 file changed, 149 insertions(+), 334 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2518e2a..1a482b9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -27,350 +27,165 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Detection",
-          id: "detection",
-        },
-        {
-          name: "Support",
-          id: "support",
-        },
-      ]}
-      brandName="Cancer Info"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Detection", id: "detection" },
+              { name: "Support", id: "support" },
+            ]}
+            brandName="Cancer Info"
+            button={{ text: "Get Started", href: "#about" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Testicular Cancer Information"
-      description="Understanding symptoms, diagnosis, treatment, and support is your first step towards health. Access trusted, accurate information for patients and families."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-male-working-nurse_23-2150829903.jpg",
-          alt: "Doctor",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/man-relaxing-sofa_329181-12161.jpg",
-          alt: "Patient",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/pleased-dark-skinned-pretty-girl-has-toothy-smile-keeps-eyes-shut-embraces-her-old-friend-have-good-relationship_273609-18714.jpg",
-          alt: "Supporter",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-medical-assistant-standing-with-arms-crossed-cabinet-medical-checkup-visit-woman-nurse-working-with-computer-documents-doctors-office-healthcare-system_482257-39772.jpg",
-          alt: "Medical Assistant",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-female-working-nurse_23-2150829743.jpg",
-          alt: "Working Nurse",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#about",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Early Detection",
-        },
-        {
-          type: "text",
-          text: "Medical Guidance",
-        },
-        {
-          type: "text",
-          text: "Survivor Support",
-        },
-        {
-          type: "text",
-          text: "Treatment Options",
-        },
-        {
-          type: "text",
-          text: "Clinical Resources",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroCentered
+            background={{ variant: "gradient-bars" }}
+            title="Testicular Cancer Information"
+            description="Understanding symptoms, diagnosis, treatment, and support is your first step towards health. Access trusted, accurate information for patients and families."
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/portrait-male-working-nurse_23-2150829903.jpg", alt: "Doctor" },
+              { src: "http://img.b2bpic.net/free-photo/man-relaxing-sofa_329181-12161.jpg", alt: "Patient" },
+              { src: "http://img.b2bpic.net/free-photo/pleased-dark-skinned-pretty-girl-has-toothy-smile-keeps-eyes-shut-embraces-her-old-friend-have-good-relationship_273609-18714.jpg", alt: "Supporter" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-medical-assistant-standing-with-arms-crossed-cabinet-medical-checkup-visit-woman-nurse-working-with-computer-documents-doctors-office-healthcare-system_482257-39772.jpg", alt: "Medical Assistant" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-female-working-nurse_23-2150829743.jpg", alt: "Working Nurse" },
+            ]}
+            buttons={[{ text: "Get Started", href: "#about" }]}
+            marqueeItems={[
+              { type: "text", text: "Early Detection" },
+              { type: "text", text: "Medical Guidance" },
+              { type: "text", text: "Survivor Support" },
+              { type: "text", text: "Treatment Options" },
+              { type: "text", text: "Clinical Resources" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={false}
-      title="Testicular Cancer Overview"
-      metrics={[
-        {
-          icon: CheckCircle,
-          label: "Early Detection",
-          value: "95%+",
-        },
-        {
-          icon: Award,
-          label: "Curability Rate",
-          value: "High",
-        },
-        {
-          icon: Users,
-          label: "Survivor Network",
-          value: "Growing",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            useInvertedBackground={false}
+            title="Testicular Cancer Overview"
+            metrics={[
+              { icon: CheckCircle, label: "Early Detection", value: "95%+" },
+              { icon: Award, label: "Curability Rate", value: "High" },
+              { icon: Users, label: "Survivor Network", value: "Growing" },
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="risks" data-section="risks">
-      <FeatureBorderGlow
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          icon: AlertCircle,
-          title: "Undescended Testicle",
-          description: "A testicle that did not move down into the scrotum early on.",
-        },
-        {
-          icon: BookOpen,
-          title: "Family History",
-          description: "Having a close relative with a history of the disease.",
-        },
-        {
-          icon: History,
-          title: "Personal History",
-          description: "Having had testicular cancer in one testicle previously.",
-        },
-      ]}
-      title="Know the Risks"
-      description="Factors for testicular cancer include having an undescended testicle, family history, and personal history."
-    />
-  </div>
+        <div id="risks" data-section="risks">
+          <FeatureBorderGlow
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            features={[
+              { icon: AlertCircle, title: "Undescended Testicle", description: "A testicle that did not move down into the scrotum early on." },
+              { icon: BookOpen, title: "Family History", description: "Having a close relative with a history of the disease." },
+              { icon: History, title: "Personal History", description: "Having had testicular cancer in one testicle previously." },
+            ]}
+            title="Know the Risks"
+            description="Factors for testicular cancer include having an undescended testicle, family history, and personal history."
+          />
+        </div>
 
-  <div id="detection" data-section="detection">
-      <FeatureBorderGlow
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: Eye,
-          title: "Self-Examination",
-          description: "Regularly check for any lumps or firm areas.",
-        },
-        {
-          icon: Activity,
-          title: "Regular Checkups",
-          description: "Discuss any concerns with your primary healthcare provider.",
-        },
-        {
-          icon: Info,
-          title: "Seek Medical Advice",
-          description: "See a doctor promptly if you notice persistent changes.",
-        },
-      ]}
-      title="Finding Early Signs"
-      description="Recognizing physical changes early is the best way to ensure timely treatment."
-    />
-  </div>
+        <div id="detection" data-section="detection">
+          <FeatureBorderGlow
+            animationType="opacity"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { icon: Eye, title: "Self-Examination", description: "Regularly check for any lumps or firm areas." },
+              { icon: Activity, title: "Regular Checkups", description: "Discuss any concerns with your primary healthcare provider." },
+              { icon: Info, title: "Seek Medical Advice", description: "See a doctor promptly if you notice persistent changes." },
+            ]}
+            title="Finding Early Signs"
+            description="Recognizing physical changes early is the best way to ensure timely treatment."
+          />
+        </div>
 
-  <div id="symptoms" data-section="symptoms">
-      <FeatureBorderGlow
-      animationType="scale-rotate"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          icon: Circle,
-          title: "Painless Lump",
-          description: "A lump or enlargement in one testicle.",
-        },
-        {
-          icon: BarChart2,
-          title: "Heaviness",
-          description: "A feeling of heaviness in the scrotum area.",
-        },
-        {
-          icon: Droplets,
-          title: "Fluid Swelling",
-          description: "Sudden collection of fluid in the scrotum.",
-        },
-      ]}
-      title="Common Symptoms"
-      description="Pay attention to these physical indicators that warrant a doctor's visit."
-    />
-  </div>
+        <div id="symptoms" data-section="symptoms">
+          <FeatureBorderGlow
+            animationType="scale-rotate"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            features={[
+              { icon: Circle, title: "Painless Lump", description: "A lump or enlargement in one testicle." },
+              { icon: BarChart2, title: "Heaviness", description: "A feeling of heaviness in the scrotum area." },
+              { icon: Droplets, title: "Fluid Swelling", description: "Sudden collection of fluid in the scrotum." },
+            ]}
+            title="Common Symptoms"
+            description="Pay attention to these physical indicators that warrant a doctor's visit."
+          />
+        </div>
 
-  <div id="support" data-section="support">
-      <FeatureBorderGlow
-      animationType="opacity"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: Heart,
-          title: "Emotional Wellbeing",
-          description: "Access support for body image and self-esteem.",
-        },
-        {
-          icon: Smile,
-          title: "Sexuality",
-          description: "Information and guidance on relationships.",
-        },
-        {
-          icon: Leaf,
-          title: "Fertility Resources",
-          description: "Learn about fertility preservation options available.",
-        },
-      ]}
-      title="Supportive Care"
-      description="Resources to help navigate the physical and emotional aspects of the journey."
-    />
-  </div>
+        <div id="support" data-section="support">
+          <FeatureBorderGlow
+            animationType="opacity"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { icon: Heart, title: "Emotional Wellbeing", description: "Access support for body image and self-esteem." },
+              { icon: Smile, title: "Sexuality", description: "Information and guidance on relationships." },
+              { icon: Leaf, title: "Fertility Resources", description: "Learn about fertility preservation options available." },
+            ]}
+            title="Supportive Care"
+            description="Resources to help navigate the physical and emotional aspects of the journey."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Mark S.",
-          handle: "@survivor",
-          testimonial: "The resources were invaluable during my treatment phase.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-smling-man-with-beard-pointing-left-advertisement-suggest-click-banner_176420-33735.jpg",
-        },
-        {
-          id: "2",
-          name: "James L.",
-          handle: "@patient",
-          testimonial: "Early detection made a huge difference in my journey.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-young-man-model-dressed-jeans-clothes-fashion-man-posing_158538-4982.jpg",
-        },
-        {
-          id: "3",
-          name: "David R.",
-          handle: "@survivor",
-          testimonial: "Understanding the stages helped lower my anxiety.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-man-looking-photographer_23-2148328594.jpg",
-        },
-        {
-          id: "4",
-          name: "Chris B.",
-          handle: "@patient",
-          testimonial: "Support services were vital to my recovery.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-positive-handsome-blond-man-with-beard-moustache-standing-with-crossed-hands-white-shirt-with-slight-smile-confident-expression_176420-17129.jpg",
-        },
-        {
-          id: "5",
-          name: "Alex M.",
-          handle: "@advocate",
-          testimonial: "Advocacy and awareness are key to early diagnosis.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-white-background-business-job_185193-110285.jpg",
-        },
-      ]}
-      title="Patient Perspectives"
-      description="Stories and insights from those who have navigated the diagnosis."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSix
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", name: "Mark S.", handle: "@survivor", testimonial: "The resources were invaluable during my treatment phase.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-smling-man-with-beard-pointing-left-advertisement-suggest-click-banner_176420-33735.jpg" },
+              { id: "2", name: "James L.", handle: "@patient", testimonial: "Early detection made a huge difference in my journey.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-young-man-model-dressed-jeans-clothes-fashion-man-posing_158538-4982.jpg" },
+              { id: "3", name: "David R.", handle: "@survivor", testimonial: "Understanding the stages helped lower my anxiety.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-man-looking-photographer_23-2148328594.jpg" },
+              { id: "4", name: "Chris B.", handle: "@patient", testimonial: "Support services were vital to my recovery.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-positive-handsome-blond-man-with-beard-moustache-standing-with-crossed-hands-white-shirt-with-slight-smile-confident-expression_176420-17129.jpg" },
+              { id: "5", name: "Alex M.", handle: "@advocate", testimonial: "Advocacy and awareness are key to early diagnosis.", imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-white-background-business-job_185193-110285.jpg" },
+            ]}
+            title="Patient Perspectives"
+            description="Stories and insights from those who have navigated the diagnosis."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "Is testicular cancer common?",
-          content: "It is the most common cancer in young people, but overall it remains rare.",
-        },
-        {
-          id: "2",
-          title: "Can it be prevented?",
-          content: "There is no guaranteed way to prevent it, but regular self-exams aid early discovery.",
-        },
-        {
-          id: "3",
-          title: "Where can I get support?",
-          content: "Organizations like the Canadian Cancer Society provide extensive resources.",
-        },
-      ]}
-      sideTitle="Frequently Asked Questions"
-      sideDescription="Answers to common queries about testicular health."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            useInvertedBackground={false}
+            faqs={[
+              { id: "1", title: "Is testicular cancer common?", content: "It is the most common cancer in young people, but overall it remains rare." },
+              { id: "2", title: "Can it be prevented?", content: "There is no guaranteed way to prevent it, but regular self-exams aid early discovery." },
+              { id: "3", title: "Where can I get support?", content: "Organizations like the Canadian Cancer Society provide extensive resources." },
+            ]}
+            sideTitle="Frequently Asked Questions"
+            sideDescription="Answers to common queries about testicular health."
+            faqsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "gradient-bars",
-      }}
-      text="Reach out to professional support services in Canada, including BC Cancer and the Canadian Cancer Society."
-      buttons={[
-        {
-          text: "Contact CCS",
-          href: "https://cancer.ca",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={true}
+            background={{ variant: "gradient-bars" }}
+            text="Reach out to professional support services in Canada, including BC Cancer and the Canadian Cancer Society."
+            buttons={[{ text: "Contact CCS", href: "https://cancer.ca" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Resources",
-              href: "#",
-            },
-            {
-              label: "Support",
-              href: "#support",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="Cancer Info Canada"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }] },
+              { items: [{ label: "Resources", href: "#" }, { label: "Support", href: "#support" }] },
+              { items: [{ label: "Privacy Policy", href: "#" }] },
+            ]}
+            logoText="Cancer Info Canada"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );