256 lines
15 KiB
TypeScript
256 lines
15 KiB
TypeScript
'use client'
|
||
|
||
import Link from 'next/link'
|
||
|
||
export default function Home() {
|
||
return (
|
||
<main className="min-h-screen bg-background text-text font-sans selection:bg-primary-200 selection:text-primary-900">
|
||
{/* Header */}
|
||
<header className="sticky top-0 z-50 bg-background/80 backdrop-blur-md border-b border-primary-100">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||
<div className="flex items-center justify-between">
|
||
<Link href="/" className="text-2xl font-heading font-bold text-primary-700 hover:text-primary-600 transition-colors">
|
||
MoreThanADiagnosis
|
||
</Link>
|
||
<nav className="hidden md:flex gap-8">
|
||
<Link href="/" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Home</Link>
|
||
<Link href="/podcast" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Podcast</Link>
|
||
<Link href="/resources" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Resources</Link>
|
||
<Link href="/happymail" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Happy Mail</Link>
|
||
<Link href="/supportgroup" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Support Group</Link>
|
||
<Link href="/shop" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Shop</Link>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative overflow-hidden py-24 lg:py-32">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-primary-50 via-background to-secondary-50 opacity-70 -z-10" />
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center max-w-4xl mx-auto">
|
||
<h1 className="text-5xl md:text-7xl font-heading font-bold text-primary-800 mb-8 leading-tight">
|
||
You are more than <br className="hidden md:block" /> a diagnosis.
|
||
</h1>
|
||
<h2 className="text-2xl md:text-3xl text-text-muted mb-10 font-light leading-relaxed">
|
||
Connecting Through Stories, <span className="text-accent font-medium">Thriving Through Community</span>
|
||
</h2>
|
||
<p className="text-xl text-text-muted max-w-2xl mx-auto mb-12 leading-relaxed">
|
||
A sanctuary for connection, encouragement, and support. Join us on a journey where we explore the human experience beyond medical labels.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link
|
||
href="/supportgroup"
|
||
className="inline-flex items-center justify-center px-8 py-4 bg-primary text-white font-semibold rounded-full hover:bg-primary-600 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
|
||
>
|
||
Join Our Community
|
||
</Link>
|
||
<Link
|
||
href="/resources"
|
||
className="inline-flex items-center justify-center px-8 py-4 bg-white text-primary-700 font-semibold rounded-full border-2 border-primary-100 hover:border-primary-300 hover:bg-primary-50 transition-all"
|
||
>
|
||
Explore Resources
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Happy Mail Section */}
|
||
<section className="py-24 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid md:grid-cols-2 gap-16 items-center">
|
||
<div className="order-2 md:order-1">
|
||
<div className="bg-secondary-50 rounded-3xl p-10 md:p-14 relative overflow-hidden">
|
||
<div className="absolute top-0 right-0 w-64 h-64 bg-secondary-100 rounded-full -mr-32 -mt-32 opacity-50" />
|
||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-secondary-200 rounded-full -ml-24 -mb-24 opacity-50" />
|
||
<div className="relative z-10 text-center">
|
||
<div className="text-8xl mb-6 animate-bounce-slow">💌</div>
|
||
<p className="text-secondary-800 font-heading font-bold text-xl">From the Worst Club's Best Members</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="order-1 md:order-2">
|
||
<span className="text-accent font-bold tracking-wider uppercase text-sm mb-2 block">Spreading Joy</span>
|
||
<h3 className="text-4xl font-heading font-bold text-primary-800 mb-6">Happy Mail</h3>
|
||
<p className="text-xl text-text-muted mb-6 leading-relaxed">
|
||
Happy Mail is a small way to remind you: you're seen, supported, and not alone. Nerisa sends free, joy-filled snail mail to folks navigating the hard stuff - just because.
|
||
</p>
|
||
|
||
<div className="mb-10 bg-primary-50 rounded-2xl p-6 border border-primary-100">
|
||
<h4 className="text-lg font-bold text-primary-800 mb-4">Who Can Receive Happy Mail?</h4>
|
||
<ul className="space-y-3 text-text-muted">
|
||
{['Cancer diagnosis or treatment', 'Chronic illness or rare disease', 'Medical limbo or recovery'].map((item, i) => (
|
||
<li key={i} className="flex items-center gap-3">
|
||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-success text-white flex items-center justify-center text-sm">✓</span>
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<Link
|
||
href="/happymail"
|
||
className="inline-flex items-center px-6 py-3 bg-secondary text-secondary-900 font-semibold rounded-full hover:bg-secondary-400 transition-colors"
|
||
>
|
||
Order Happy Mail
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Connect Section */}
|
||
<section className="py-24 bg-primary-700 text-white relative overflow-hidden">
|
||
<div className="absolute inset-0 bg-[url('/pattern.svg')] opacity-5" />
|
||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
||
<h3 className="text-4xl font-heading font-bold mb-10">Connect</h3>
|
||
<blockquote className="text-2xl md:text-3xl font-serif italic mb-12 leading-relaxed opacity-90">
|
||
"We're here to create a safe, supportive space where you can connect with others, share your story, and find hope. Cancer and chronic illness can feel so isolating, but together, we're stronger."
|
||
</blockquote>
|
||
<Link
|
||
href="/supportgroup"
|
||
className="inline-block px-10 py-4 bg-white text-primary-800 font-bold rounded-full hover:bg-primary-50 transition-all shadow-lg hover:scale-105"
|
||
>
|
||
Learn More
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Podcast Section */}
|
||
<section className="py-24 bg-background">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16">
|
||
<h3 className="text-4xl font-heading font-bold text-primary-800 mb-4">The Podcast</h3>
|
||
<p className="text-text-muted max-w-2xl mx-auto">Real conversations about life beyond the medical chart.</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12 items-center bg-white rounded-3xl p-8 md:p-12 shadow-sm border border-primary-50">
|
||
<div className="bg-gradient-to-br from-accent/20 to-secondary/20 rounded-2xl p-12 text-center aspect-square flex items-center justify-center">
|
||
<div className="text-8xl">🎙️</div>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-2xl font-heading font-bold text-primary-800 mb-6">More Than A Diagnosis</h4>
|
||
<p className="text-text-muted mb-8 leading-relaxed">
|
||
Hosts Jes and Den are lifelong friends who found their way back to each other thanks to the wild ride of cancer and chronic illness. Jes went through triple-negative breast cancer and now navigates the long-term side effects of treatment. Den lives with FAP, a rare genetic condition. Through it all, they've found the magic of community.
|
||
</p>
|
||
<Link
|
||
href="/podcast"
|
||
className="inline-flex items-center px-8 py-3 bg-primary text-white font-semibold rounded-full hover:bg-primary-600 transition-colors"
|
||
>
|
||
Listen Now
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Resources Section */}
|
||
<section className="py-24 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h3 className="text-4xl font-heading font-bold text-primary-800 mb-8">Resources</h3>
|
||
<p className="text-xl text-text-muted max-w-3xl mx-auto mb-12 leading-relaxed">
|
||
We know how scary and overwhelming it can be to receive a diagnosis. We've put together a list of helpful resources to attempt to make this journey even just a little bit easier for you.
|
||
</p>
|
||
<Link
|
||
href="/resources"
|
||
className="inline-block px-8 py-4 bg-secondary text-secondary-900 font-semibold rounded-full hover:bg-secondary-400 transition-colors"
|
||
>
|
||
Browse Resources
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Wings of Remembrance Section */}
|
||
<section className="py-24 bg-primary-50">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<span className="text-accent font-bold tracking-wider uppercase text-sm mb-2 block">Honoring Legacies</span>
|
||
<h3 className="text-4xl font-heading font-bold text-primary-800 mb-8">Wings of Remembrance</h3>
|
||
<p className="text-xl text-text-muted max-w-3xl mx-auto mb-12 leading-relaxed">
|
||
We invite you to share a tribute—a memory, message, or reflection—to honor those who shaped our journey. Together, we create a tapestry of wings that celebrates their legacy.
|
||
</p>
|
||
<Link
|
||
href="/inlovingmemory"
|
||
className="inline-block px-8 py-4 bg-white text-primary-700 font-semibold rounded-full border border-primary-200 hover:bg-primary-50 transition-colors shadow-sm"
|
||
>
|
||
Share Your Tribute
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Shop Section */}
|
||
<section className="py-24 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16">
|
||
<h3 className="text-4xl font-heading font-bold text-primary-800 mb-4">Shop Our Collections</h3>
|
||
<p className="text-text-muted">Wear your story with pride.</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||
{[
|
||
{ name: 'Worst Club Best Members', icon: '🦆', color: 'bg-primary-50' },
|
||
{ name: 'More Than A Diagnosis', icon: '💪', color: 'bg-secondary-50' },
|
||
{ name: 'I Don\'t Want To I Get To', icon: '✨', color: 'bg-accent/10' },
|
||
{ name: 'Ribbon Collection', icon: '🎗️', color: 'bg-primary-100' }
|
||
].map((collection) => (
|
||
<div key={collection.name} className={`${collection.color} rounded-2xl p-8 text-center hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer group`}>
|
||
<div className="text-5xl mb-6 group-hover:scale-110 transition-transform duration-300">{collection.icon}</div>
|
||
<h4 className="text-lg font-bold text-primary-900">{collection.name}</h4>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="text-center">
|
||
<Link
|
||
href="/shop"
|
||
className="inline-block px-8 py-4 bg-primary text-white font-semibold rounded-full hover:bg-primary-600 transition-colors"
|
||
>
|
||
Visit Shop
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="bg-primary-900 text-white py-16 border-t border-primary-800">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid md:grid-cols-4 gap-12 mb-12">
|
||
<div>
|
||
<h4 className="font-heading font-bold text-lg mb-6 text-primary-100">Navigation</h4>
|
||
<ul className="space-y-3">
|
||
<li><Link href="/" className="text-primary-200 hover:text-white transition-colors">Home</Link></li>
|
||
<li><Link href="/podcast" className="text-primary-200 hover:text-white transition-colors">Podcast</Link></li>
|
||
<li><Link href="/resources" className="text-primary-200 hover:text-white transition-colors">Resources</Link></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-heading font-bold text-lg mb-6 text-primary-100">Community</h4>
|
||
<ul className="space-y-3">
|
||
<li><Link href="/supportgroup" className="text-primary-200 hover:text-white transition-colors">Support Group</Link></li>
|
||
<li><Link href="/groups" className="text-primary-200 hover:text-white transition-colors">Support Circle</Link></li>
|
||
<li><Link href="/thejournal" className="text-primary-200 hover:text-white transition-colors">The Journal</Link></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-heading font-bold text-lg mb-6 text-primary-100">More</h4>
|
||
<ul className="space-y-3">
|
||
<li><Link href="/happymail" className="text-primary-200 hover:text-white transition-colors">Happy Mail</Link></li>
|
||
<li><Link href="/inlovingmemory" className="text-primary-200 hover:text-white transition-colors">In Loving Memory</Link></li>
|
||
<li><Link href="/shop" className="text-primary-200 hover:text-white transition-colors">Shop</Link></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-heading font-bold text-lg mb-6 text-primary-100">Connect</h4>
|
||
<ul className="space-y-3">
|
||
<li><Link href="/meetus" className="text-primary-200 hover:text-white transition-colors">Meet Us</Link></li>
|
||
<li><a href="https://www.morethanadiagnosis.org" className="text-primary-200 hover:text-white transition-colors">Original Site</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="border-t border-primary-800 pt-8 text-center text-primary-400">
|
||
<p>© 2025 More Than A Diagnosis. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
)
|
||
}
|