| import Link from "next/link"; |
|
|
| export default function Home() { |
| return ( |
| <> |
| {/* TopNavBar */} |
| <nav className="w-full top-0 sticky bg-surface dark:bg-on-background border-b border-outline-variant z-50"> |
| <div className="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto"> |
| {/* Logo */} |
| <div className="flex items-center gap-1 md:gap-2"> |
| <span className="material-symbols-outlined text-primary font-bold text-2xl" data-icon="psychology">psychology</span> |
| <span className="text-xl md:text-hero-lg md:font-hero-lg font-bold text-primary dark:text-inverse-primary">MindCheck</span> |
| </div> |
| |
| {/* Desktop Links */} |
| <div className="hidden md:flex items-center gap-8"> |
| <a className="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#how-it-works">How it works</a> |
| <Link className="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="/history">History</Link> |
| <Link href="/chat" className="font-body-md text-body-md bg-primary-container text-on-primary px-5 py-3 rounded active:scale-95 duration-150 hover:opacity-90 whitespace-nowrap"> |
| Start Screening |
| </Link> |
| </div> |
| |
| {/* Mobile Links */} |
| <div className="flex md:hidden items-center gap-4"> |
| <Link href="/history" className="text-on-surface-variant hover:text-primary p-2 flex items-center"> |
| <span className="material-symbols-outlined text-2xl" data-icon="history">history</span> |
| </Link> |
| </div> |
| </div> |
| </nav> |
| |
| {/* Main Content */} |
| <main className="flex-grow flex flex-col items-center w-full max-w-container-max mx-auto px-gutter py-section-padding gap-stack-lg mt-8 md:mt-16"> |
| {/* Hero Section */} |
| <section className="w-full grid grid-cols-1 md:grid-cols-12 gap-8 items-center"> |
| {/* Left: Content (60%) */} |
| <div className="md:col-span-7 flex flex-col gap-stack-md"> |
| <h1 className="font-hero-lg-mobile md:font-hero-lg text-hero-lg-mobile md:text-hero-lg text-on-surface"> |
| Understand your mental health in 5 minutes |
| </h1> |
| <p className="font-body-md text-body-md text-on-surface-variant max-w-lg"> |
| 8 short PHQ-8 based questions. Anonymous, free, and does not replace professional diagnosis. |
| </p> |
| <div className="flex flex-wrap items-center gap-4 mt-4"> |
| <Link href="/chat" className="font-body-md text-body-md bg-primary-container text-on-primary px-5 py-3 rounded active:scale-95 duration-150 hover:opacity-90"> |
| Start Screening |
| </Link> |
| <a className="font-body-md text-body-md text-primary font-medium hover:underline flex items-center gap-1" href="#how-it-works"> |
| How it works <span className="material-symbols-outlined text-sm" data-icon="arrow_forward">arrow_forward</span> |
| </a> |
| </div> |
| </div> |
| |
| {/* Right: Abstract Decorative Block (40%) */} |
| <div className="md:col-span-5 relative h-48 md:h-80 w-full flex justify-center items-center"> |
| {/* Stacked Cards */} |
| <div className="absolute bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg rotate-6 opacity-60"></div> |
| <div className="absolute bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg -rotate-3 opacity-80"></div> |
| {/* Main Foreground Card */} |
| <div className="relative bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg p-6 flex flex-col justify-center items-center shadow-sm"> |
| <span className="font-label-uppercase text-label-uppercase text-secondary mb-2">PHQ-8 SCORE</span> |
| <span className="text-4xl md:text-5xl font-bold text-primary mb-4">14</span> |
| {/* Fake Bar Chart Snippet */} |
| <div className="w-full flex gap-2 h-10 items-end px-4"> |
| <div className="w-1/4 bg-surface-variant h-1/2 rounded-t"></div> |
| <div className="w-1/4 bg-primary-fixed-dim h-3/4 rounded-t"></div> |
| <div className="w-1/4 bg-primary-container h-full rounded-t"></div> |
| <div className="w-1/4 bg-surface-variant h-1/4 rounded-t"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| {/* Feature Cards Row */} |
| <section id="how-it-works" className="w-full grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 scroll-mt-24"> |
| <div className="bg-surface border-[0.5px] border-outline-variant rounded-lg p-6 flex flex-col gap-2 hover:shadow-md transition-shadow duration-300"> |
| <span className="material-symbols-outlined text-primary mb-2 text-[24px]" data-icon="visibility_off" style={{ fontVariationSettings: "'FILL' 0, 'wght' 300" }}>visibility_off</span> |
| <h3 className="font-section-heading text-section-heading text-on-surface">Anonymous & Free</h3> |
| <p className="font-body-md text-body-md text-on-surface-variant">Data is not stored permanently. All processing happens locally.</p> |
| </div> |
| <div className="bg-surface border-[0.5px] border-outline-variant rounded-lg p-6 flex flex-col gap-2 hover:shadow-md transition-shadow duration-300"> |
| <span className="material-symbols-outlined text-primary mb-2 text-[24px]" data-icon="assignment" style={{ fontVariationSettings: "'FILL' 0, 'wght' 300" }}>assignment</span> |
| <h3 className="font-section-heading text-section-heading text-on-surface">PHQ-8 Based</h3> |
| <p className="font-body-md text-body-md text-on-surface-variant">Validated global medical questionnaire standard used by professionals.</p> |
| </div> |
| <div className="bg-surface border-[0.5px] border-outline-variant rounded-lg p-6 flex flex-col gap-2 hover:shadow-md transition-shadow duration-300"> |
| <span className="material-symbols-outlined text-primary mb-2 text-[24px]" data-icon="bolt" style={{ fontVariationSettings: "'FILL' 0, 'wght' 300" }}>bolt</span> |
| <h3 className="font-section-heading text-section-heading text-on-surface">Instant Results</h3> |
| <p className="font-body-md text-body-md text-on-surface-variant">Get an immediate summary with AI-powered analysis of your responses.</p> |
| </div> |
| </section> |
| |
| {/* PHQ-8 Educational Section */} |
| <section id="about-phq8" className="w-full mt-16 scroll-mt-24"> |
| <div className="bg-surface-container-low border border-outline-variant rounded-2xl p-5 md:p-12 shadow-sm"> |
| <div className="flex flex-col md:flex-row gap-6 md:gap-12 items-center"> |
| <div className="flex-1 flex flex-col gap-4"> |
| <div className="inline-flex items-center gap-2 px-3 py-1 bg-primary-container text-on-primary-container rounded-full w-max mb-2"> |
| <span className="material-symbols-outlined text-sm" data-icon="school">school</span> |
| <span className="font-label-uppercase text-label-uppercase font-bold">Clinical Standard</span> |
| </div> |
| <h2 className="font-hero-lg-mobile md:font-hero-lg text-hero-lg-mobile md:text-hero-lg text-on-surface font-semibold"> |
| What is the PHQ-8? |
| </h2> |
| <p className="font-body-md text-body-md text-on-surface-variant leading-relaxed"> |
| The <strong>Patient Health Questionnaire (PHQ-8)</strong> is a standardized diagnostic tool used by healthcare professionals worldwide to screen for and measure the severity of depression. It consists of 8 carefully formulated questions based on the DSM-5 criteria for major depressive disorder. |
| </p> |
| |
| <h3 className="font-section-heading text-section-heading mt-4 font-semibold text-on-surface">Severity Categories</h3> |
| <ul className="space-y-3 font-body-md text-body-md text-on-surface-variant"> |
| <li className="flex items-start gap-3"> |
| <span className="w-3 h-3 rounded-full bg-green-500 mt-1.5 shrink-0"></span> |
| <div><strong>0-4: Minimal</strong> — No specific treatment typically needed. Normal emotional fluctuations.</div> |
| </li> |
| <li className="flex items-start gap-3"> |
| <span className="w-3 h-3 rounded-full bg-amber-500 mt-1.5 shrink-0"></span> |
| <div><strong>5-9: Mild</strong> — Watchful waiting recommended. Mild symptoms that may not significantly impact daily life.</div> |
| </li> |
| <li className="flex items-start gap-3"> |
| <span className="w-3 h-3 rounded-full bg-orange-500 mt-1.5 shrink-0"></span> |
| <div><strong>10-14: Moderate</strong> — Treatment plan and consultation with a mental health professional is recommended.</div> |
| </li> |
| <li className="flex items-start gap-3"> |
| <span className="w-3 h-3 rounded-full bg-red-400 mt-1.5 shrink-0"></span> |
| <div><strong>15-19: Moderately Severe</strong> — Active treatment with pharmacotherapy and/or psychotherapy is highly recommended.</div> |
| </li> |
| <li className="flex items-start gap-3"> |
| <span className="w-3 h-3 rounded-full bg-red-600 mt-1.5 shrink-0"></span> |
| <div><strong>20-24: Severe</strong> — Immediate initiation of treatment and referral to a specialist is strongly advised.</div> |
| </li> |
| </ul> |
| </div> |
| |
| <div className="flex-1 w-full max-w-lg aspect-video rounded-xl overflow-hidden shadow-lg border border-outline-variant bg-black"> |
| <iframe |
| width="100%" |
| height="100%" |
| src="https://www.youtube.com/embed/8Su5VtKeXU8" |
| title="What is depression? - Helen M. Farrell" |
| frameBorder="0" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| allowFullScreen |
| ></iframe> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| {/* How It Works Steps */} |
| <section className="w-full mt-12"> |
| <h2 className="font-section-heading text-section-heading text-on-surface mb-8 text-center">How It Works</h2> |
| <div className="grid grid-cols-2 md:grid-cols-4 gap-6"> |
| {[ |
| { icon: "chat_bubble", title: "Answer 8 Questions", desc: "Our chatbot asks 8 PHQ-8 interview questions — answer via quick chips or type freely." }, |
| { icon: "psychology", title: "AI Analysis", desc: "Your responses are analyzed using a trained MPNet deep learning model from DAIC-WOZ research." }, |
| { icon: "analytics", title: "Get Your Score", desc: "Receive per-question scores (0-3), total PHQ-8 score, and severity classification." }, |
| { icon: "history", title: "Track Progress", desc: "Save results to your local history and track your mental health over time." }, |
| ].map((step, i) => ( |
| <div key={i} className="flex flex-col items-center text-center gap-3 p-4"> |
| <div className="w-12 h-12 rounded-full bg-primary-container flex items-center justify-center mb-2"> |
| <span className="material-symbols-outlined text-on-primary text-[22px]" data-icon={step.icon}>{step.icon}</span> |
| </div> |
| <span className="font-label-uppercase text-label-uppercase text-secondary">Step {i + 1}</span> |
| <h3 className="font-body-md text-body-md font-semibold text-on-surface">{step.title}</h3> |
| <p className="font-caption-sm text-caption-sm text-on-surface-variant">{step.desc}</p> |
| </div> |
| ))} |
| </div> |
| </section> |
| </main> |
| |
| {/* Footer */} |
| <footer className="w-full py-section-padding border-t border-outline-variant bg-surface-container-lowest dark:bg-background mt-auto"> |
| <div className="flex flex-col items-center text-center px-gutter max-w-container-max mx-auto gap-4"> |
| <span className="material-symbols-outlined text-primary text-[24px]" data-icon="favorite" style={{ fontVariationSettings: "'FILL' 1" }}>favorite</span> |
| <p className="font-caption-sm text-caption-sm text-on-surface-variant max-w-2xl"> |
| MindCheck is not a replacement for professional medical diagnosis. Please contact mental health professionals if you are in an emergency. |
| </p> |
| <p className="font-caption-sm text-caption-sm text-on-surface-variant opacity-60">© {new Date().getFullYear()} MindCheck. All rights reserved.</p> |
| </div> |
| </footer> |
| </> |
| ); |
| } |
|
|
