201 lines
9.8 KiB
TypeScript
201 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
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 HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { CheckCircle, Award, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="grid"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Diagrams", id: "diagrams" },
|
|
{ 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" },
|
|
]}
|
|
buttons={[{ text: "Get Started", href: "#about" }]}
|
|
/>
|
|
</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="diagrams" data-section="diagrams">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "1", title: "Reproductive Anatomy", subtitle: "Understanding the system", category: "Anatomy", value: "Details" },
|
|
{ id: "2", title: "Testicle Diagram", subtitle: "Visual awareness", category: "Visualization", value: "Detailed" },
|
|
{ id: "3", title: "Staging Diagram", subtitle: "Progression levels", category: "Staging", value: "Levels" },
|
|
{ id: "4", title: "Treatment Flowchart", subtitle: "Recovery pathway", category: "Treatment", value: "Protocols" },
|
|
]}
|
|
title="Visual Medical Information"
|
|
description="Review these illustrative diagrams to better understand testicular health, staging, and common medical pathways."
|
|
/>
|
|
</div>
|
|
|
|
<div id="risks" data-section="risks">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ id: "1", title: "Undescended Testicle", subtitle: "Structural factor", category: "Risk", value: "Factor" },
|
|
{ id: "2", title: "Family History", subtitle: "Genetics", category: "Risk", value: "Factor" },
|
|
{ id: "3", title: "Personal History", subtitle: "Prior instances", category: "Risk", value: "Factor" },
|
|
]}
|
|
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">
|
|
<FeatureCardTwentyEight
|
|
animationType="opacity"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "1", title: "Self-Examination", subtitle: "Regular habits", category: "Method", value: "Weekly" },
|
|
{ id: "2", title: "Regular Checkups", subtitle: "Doctor visits", category: "Screening", value: "Annual" },
|
|
{ id: "3", title: "Seek Medical Advice", subtitle: "Professional help", category: "Action", value: "Urgent" },
|
|
]}
|
|
title="Finding Early Signs"
|
|
description="Recognizing physical changes early is the best way to ensure timely treatment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="symptoms" data-section="symptoms">
|
|
<FeatureCardTwentyEight
|
|
animationType="scale-rotate"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ id: "1", title: "Painless Lump", subtitle: "Key indicator", category: "Symptom", value: "Notice" },
|
|
{ id: "2", title: "Heaviness", subtitle: "Area feeling", 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."
|
|
/>
|
|
</div>
|
|
|
|
<div id="support" data-section="support">
|
|
<FeatureCardTwentyEight
|
|
animationType="opacity"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "1", title: "Emotional Wellbeing", subtitle: "Self-esteem", category: "Support", value: "Care" },
|
|
{ id: "2", title: "Sexuality", subtitle: "Guidance", category: "Support", value: "Resources" },
|
|
{ id: "3", title: "Fertility Resources", subtitle: "Preservation", category: "Support", value: "Available" },
|
|
]}
|
|
title="Supportive Care"
|
|
description="Resources to help navigate the physical and emotional aspects of the journey."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", name: "Mark S.", role: "Survivor", company: "Patient", rating: 5, 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.", role: "Patient", company: "Recovering", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-young-man-model-dressed-jeans-clothes-fashion-man-posing_158538-4982.jpg" },
|
|
]}
|
|
title="Patient Perspectives"
|
|
description="Stories and insights from those who have navigated the diagnosis."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<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." },
|
|
{ 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: "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." }
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Answers to common queries about testicular health."
|
|
faqsAnimation="blur-reveal"
|
|
textboxLayout="split"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<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" }}
|
|
buttonText="Contact CCS"
|
|
useInvertedBackground={false}
|
|
onSubmit={(email) => console.log(email)}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Cancer Info Canada"
|
|
leftLink={{ text: "Home", href: "#hero" }}
|
|
rightLink={{ text: "Support", href: "#support" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|