Update src/app/page.tsx
This commit is contained in:
483
src/app/page.tsx
483
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user