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
53 lines
2.8 KiB
TypeScript
53 lines
2.8 KiB
TypeScript
'use client'
|
||
import Link from 'next/link'
|
||
export default function ShopPage() {
|
||
const products = [
|
||
{ title: 'Worst Club Best Members', emoji: '🦆', desc: 'Inspired by Nerisa\'s Happy Mail program' },
|
||
{ title: 'More Than A Diagnosis', emoji: '💪', desc: 'Strength, resilience, and full life' },
|
||
{ title: 'I Don\'t Want To I Get To', emoji: '✨', desc: 'Jes\'s empowering perspective shift' },
|
||
{ title: 'Ribbon Collection', emoji: '🎗️', desc: 'Support all cancer types equally' }
|
||
]
|
||
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="/shop" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Shop</Link>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<section className="bg-gradient-to-br from-indigo-50 to-purple-50 py-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<div className="text-6xl mb-6">🛍️</div>
|
||
<h1 className="text-5xl font-bold text-gray-900 mb-6">Shop Our Collections</h1>
|
||
<p className="text-2xl text-gray-700">Purpose-driven apparel for our community</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">
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||
{products.map((product) => (
|
||
<div key={product.title} className="bg-gray-50 rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
|
||
<div className="text-5xl mb-4">{product.emoji}</div>
|
||
<h3 className="text-lg font-bold text-gray-900 mb-2">{product.title}</h3>
|
||
<p className="text-gray-700">{product.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="text-center">
|
||
<a href="https://www.morethanadiagnosis.org/category/all-products" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Shop All Products</a>
|
||
</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 text-center">
|
||
<p>© 2025 More Than A Diagnosis. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
)
|
||
}
|