|
|
|
|
@@ -2,15 +2,15 @@
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import ReactLenis from "lenis/react";
|
|
|
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
|
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
|
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
|
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
|
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
|
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
|
|
|
import AboutMetric from '@/components/sections/about/MetricSplitMediaAbout';
|
|
|
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
|
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
|
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
|
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
|
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
|
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
|
|
|
import { Activity, AlertCircle, Award, BarChart2, BookOpen, CheckCircle, Circle, Droplets, Eye, Heart, History, Info, Leaf, Smile, Users, Book } from "lucide-react";
|
|
|
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
|
|
|
import { CheckCircle, Award, Users } from "lucide-react";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
return (
|
|
|
|
|
@@ -42,22 +42,16 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroCentered
|
|
|
|
|
<HeroBillboardGallery
|
|
|
|
|
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" },
|
|
|
|
|
mediaItems={[
|
|
|
|
|
{ imageSrc: "https://img.freepik.com/free-photo/doctor-explaining-medical-results-patient_23-2148753232.jpg", imageAlt: "Doctor discussing health" },
|
|
|
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0BY6YGjaH2FevfcX4Qru3wDep/uploaded-1778012613419-w2dugafv.jpg", imageAlt: "Testicular health awareness model" },
|
|
|
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0BY6YGjaH2FevfcX4Qru3wDep/uploaded-1778012554202-wiir7dx9.jpg", imageAlt: "Patient support and care" },
|
|
|
|
|
]}
|
|
|
|
|
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" },
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -65,25 +59,27 @@ export default function LandingPage() {
|
|
|
|
|
<AboutMetric
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
title="Testicular Cancer Overview"
|
|
|
|
|
description="An overview of the high curability rates and importance of early detection in testicular health management."
|
|
|
|
|
metrics={[
|
|
|
|
|
{ icon: CheckCircle, label: "Early Detection", value: "95%+" },
|
|
|
|
|
{ icon: Award, label: "Curability Rate", value: "High" },
|
|
|
|
|
{ icon: Users, label: "Survivor Network", value: "Growing" },
|
|
|
|
|
{ title: "Early Detection Success", value: "95%+" },
|
|
|
|
|
{ title: "Curability Rate", value: "High" },
|
|
|
|
|
{ title: "Survivor Network", value: "Growing" },
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0BY6YGjaH2FevfcX4Qru3wDep/uploaded-1778012693115-goqipzbl.jpg"
|
|
|
|
|
metricsAnimation="slide-up"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="diagrams" data-section="diagrams">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
<FeatureCardTwentyEight
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
features={[
|
|
|
|
|
{ icon: Book, title: "Reproductive Anatomy", description: "Understand the structure of the male reproductive system." },
|
|
|
|
|
{ icon: Eye, title: "Testicle Diagram", description: "Detailed visualization of testicle anatomy for awareness." },
|
|
|
|
|
{ icon: Activity, title: "Staging Diagram", description: "Clear breakdown of cancer staging levels." },
|
|
|
|
|
{ icon: BarChart2, title: "Treatment Flowchart", description: "Standard process from diagnosis to recovery protocols." },
|
|
|
|
|
{ id: "1", title: "Reproductive system", subtitle: "you may be asking if you are aloud to have kids or have a healthy system and the anwser is yes you can after surgical removal it is 95% proven that you can live a normal life", category: "Anatomy", value: "Details" },
|
|
|
|
|
{ id: "2", title: "Testicle Diagram", subtitle: "", category: "Visualization", value: "Detailed" },
|
|
|
|
|
{ id: "3", title: " Diagram", subtitle: "", category: "Staging", value: "Levels" },
|
|
|
|
|
{ id: "4", title: "Types of Treatment", subtitle: "there are different types of treaments the fastest being surgical removal of the infected testical,then there is chemotherepy and radiation ", category: "Treatment", value: "Protocols" },
|
|
|
|
|
]}
|
|
|
|
|
title="Visual Medical Information"
|
|
|
|
|
description="Review these illustrative diagrams to better understand testicular health, staging, and common medical pathways."
|
|
|
|
|
@@ -91,14 +87,14 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="risks" data-section="risks">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
<FeatureCardTwentyEight
|
|
|
|
|
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." },
|
|
|
|
|
{ id: "1", title: "Undescended Testicle", subtitle: "Structural factor", category: "Risk", value: "Factor" },
|
|
|
|
|
{ id: "2", title: "How do you get it you may ask? ", subtitle: "Testicular cancer occurs when germ cells in the testical undergo DNA changes causing them to multiply rapidly and form a tumer ", category: "Risk", value: "Factor" },
|
|
|
|
|
{ id: "3", title: "How do doctors treat the cancer? ", subtitle: "testicaler cancer treatment is highly effective usually involving surgical removal of the affected testical.Docters would sugest chemotherapy or radition depending on the stage or type ", category: "Risk", value: "Factor" },
|
|
|
|
|
]}
|
|
|
|
|
title="Know the Risks"
|
|
|
|
|
description="Factors for testicular cancer include having an undescended testicle, family history, and personal history."
|
|
|
|
|
@@ -106,14 +102,14 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="detection" data-section="detection">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
<FeatureCardTwentyEight
|
|
|
|
|
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." },
|
|
|
|
|
{ id: "1", title: "Self-Examination", subtitle: "Perform a monthly testicular self-exam, preferably in a warm shower, by gently rolling each testicle between your fingers to check for painless lumps, swelling, or changes in size, shape, or consistency ", category: "Method", value: "Weekly" },
|
|
|
|
|
{ id: "2", title: "Regular Checkups", subtitle: "", category: "Screening", value: "Annual" },
|
|
|
|
|
{ id: "3", title: "Seek Medical Advice", subtitle: "", category: "Action", value: "Urgent" },
|
|
|
|
|
]}
|
|
|
|
|
title="Finding Early Signs"
|
|
|
|
|
description="Recognizing physical changes early is the best way to ensure timely treatment."
|
|
|
|
|
@@ -121,14 +117,14 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="symptoms" data-section="symptoms">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
<FeatureCardTwentyEight
|
|
|
|
|
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." },
|
|
|
|
|
{ id: "1", title: "Painless Lump", subtitle: "Key indicator", category: "Symptom", value: "Notice" },
|
|
|
|
|
{ id: "2", title: "Heaviness", subtitle: "Common symptoms of testicular cancer include a painless lump or swelling in one testicle, a feeling of heaviness in the scrotum, and a dull ache in the lower abdomen or groin ", category: "Symptom", value: "Notice" },
|
|
|
|
|
{ id: "3", title: "Fluid Swelling", subtitle: "Sudden changes", category: "Symptom", value: "Urgent" },
|
|
|
|
|
]}
|
|
|
|
|
title="Common Symptoms"
|
|
|
|
|
description="Pay attention to these physical indicators that warrant a doctor's visit."
|
|
|
|
|
@@ -136,14 +132,14 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="support" data-section="support">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
<FeatureCardTwentyEight
|
|
|
|
|
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." },
|
|
|
|
|
{ id: "1", title: "Emotional Wellbeing", subtitle: "If you are falling into depresion or feeling overwellmed reach out to someone you trust or a therapist or a loved one ", category: "Support", value: "Care" },
|
|
|
|
|
{ id: "2", title: "Sexuality", subtitle: "", category: "Support", value: "Resources" },
|
|
|
|
|
{ id: "3", title: "Fertility Resources", subtitle: "you be wondering can i have kids after having testicalur cancer the anwser is yes evan with one testical is possible", category: "Support", value: "Available" },
|
|
|
|
|
]}
|
|
|
|
|
title="Supportive Care"
|
|
|
|
|
description="Resources to help navigate the physical and emotional aspects of the journey."
|
|
|
|
|
@@ -151,13 +147,14 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardSix
|
|
|
|
|
<TestimonialCardOne
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
gridVariant="uniform-all-items-equal"
|
|
|
|
|
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: "1", name: "Mark S.", role: "Survivor", company: "Patient", rating: 5, imageSrc: "https://img.freepik.com/free-photo/close-up-portrait-happy-smiling-man-beard_23-2148443588.jpg" },
|
|
|
|
|
{ id: "2", name: "James L.", role: "Patient", company: "Recovering", rating: 5, imageSrc: "https://img.freepik.com/free-photo/portrait-handsome-smiling-young-man_23-2148753245.jpg" },
|
|
|
|
|
]}
|
|
|
|
|
title="Patient Perspectives"
|
|
|
|
|
description="Stories and insights from those who have navigated the diagnosis."
|
|
|
|
|
@@ -165,7 +162,7 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="faq" data-section="faq">
|
|
|
|
|
<FaqSplitText
|
|
|
|
|
<FaqBase
|
|
|
|
|
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." },
|
|
|
|
|
@@ -173,31 +170,33 @@ export default function LandingPage() {
|
|
|
|
|
{ id: "3", title: "What is the age range?", content: "While it can occur at any age, it is most frequently diagnosed in men between the ages of 15 and 35." },
|
|
|
|
|
{ id: "4", title: "Where can I find support?", content: "Many national cancer organizations provide dedicated support lines, peer mentorship, and wellness resources." }
|
|
|
|
|
]}
|
|
|
|
|
sideTitle="Frequently Asked Questions"
|
|
|
|
|
sideDescription="Answers to common queries about testicular health."
|
|
|
|
|
title="Frequently Asked Questions"
|
|
|
|
|
description="Answers to common queries about testicular health."
|
|
|
|
|
faqsAnimation="blur-reveal"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactText
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
<ContactCenter
|
|
|
|
|
tag="Contact"
|
|
|
|
|
title="Get Professional Support"
|
|
|
|
|
description="Reach out to professional support services in Canada, including BC Cancer and the Canadian Cancer Society."
|
|
|
|
|
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" }]}
|
|
|
|
|
buttonText="Contact CCS"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
onSubmit={(email) => console.log(email)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterLogoEmphasis
|
|
|
|
|
columns={[
|
|
|
|
|
{ items: [{ label: "Home", href: "#hero" }, { label: "Diagrams", href: "#diagrams" }] },
|
|
|
|
|
{ items: [{ label: "Support", href: "#support" }] },
|
|
|
|
|
]}
|
|
|
|
|
<FooterLogoReveal
|
|
|
|
|
logoText="Cancer Info Canada"
|
|
|
|
|
leftLink={{ text: "Home", href: "#hero" }}
|
|
|
|
|
rightLink={{ text: "Support", href: "#support" }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ReactLenis>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
