229fd6ced4
Complete frontend with 10 functional pages: - / (Homepage with all sections: Happy Mail, Connect, Podcast, Resources, Shop, etc) - /podcast (Host profiles and podcast info) - /resources (Resource directory) - /happymail (Happy Mail program details) - /supportgroup (Support group overview) - /groups (Support Circle - The Living Room) - /thejournal (Community stories) - /inlovingmemory (Wings of Remembrance tributes) - /meetus (Connect With Us) - /shop (Product collections) All pages: - Responsive design with Tailwind CSS - Consistent navigation header - Proper internal linking - External links to original site - Professional footer with site map
61 lines
3.2 KiB
TypeScript
61 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
|
|
export default function ResourcesPage() {
|
|
return (
|
|
<main className="min-h-screen bg-white">
|
|
<header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
|
|
<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-bold text-gray-900">MoreThanADiagnosis</Link>
|
|
<nav className="hidden md:flex gap-8">
|
|
<Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
|
|
<Link href="/podcast" className="text-gray-600 hover:text-blue-600">Podcast</Link>
|
|
<Link href="/resources" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Resources</Link>
|
|
<Link href="/happymail" className="text-gray-600 hover:text-blue-600">Happy Mail</Link>
|
|
<Link href="/supportgroup" className="text-gray-600 hover:text-blue-600">Support Group</Link>
|
|
<Link href="/shop" className="text-gray-600 hover:text-blue-600">Shop</Link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="bg-gradient-to-br from-green-50 to-teal-50 py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h1 className="text-5xl font-bold text-gray-900 mb-6">Resources</h1>
|
|
<p className="text-2xl text-gray-700">
|
|
Support and guidance for your journey
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-20 bg-white border-t border-gray-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
|
|
We know how scary and overwhelming it can be to receive a diagnosis, not to mention the financial burden it can bring. That's why we've put together a list of helpful resources to attempt to make this journey even just a little bit easier for you. Be sure to check back often or sign up to receive updates as we are adding new resources all the time!
|
|
</p>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{[
|
|
{ title: 'Financial Support', description: 'Resources for managing medical costs' },
|
|
{ title: 'Mental Health', description: 'Mental health and counseling services' },
|
|
{ title: 'Support Groups', description: 'Connect with others on similar journeys' },
|
|
{ title: 'Medical Information', description: 'Reliable health and diagnosis information' }
|
|
].map((resource) => (
|
|
<div key={resource.title} className="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition-shadow">
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-2">{resource.title}</h3>
|
|
<p className="text-gray-700">{resource.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<p>© 2025 More Than A Diagnosis. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
)
|
|
}
|