97 lines
4.2 KiB
TypeScript
97 lines
4.2 KiB
TypeScript
import { PageHero } from "@/components/page-hero"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import Link from "next/link"
|
||
import { categories, getCardsByCategory } from "@/data/cards"
|
||
|
||
export default function OurCardsPage() {
|
||
const categoryData = categories.map((category) => ({
|
||
...category,
|
||
count: getCardsByCategory(category.slug).length,
|
||
image: `/category-${category.slug}.jpg`,
|
||
href: `/category/${category.slug}`,
|
||
}))
|
||
|
||
return (
|
||
<>
|
||
<PageHero title="Our Cards" breadcrumbs={[{ label: "Home", href: "/" }]} />
|
||
|
||
<main className="flex-1">
|
||
<section className="py-16">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12">
|
||
<p className="text-lg text-muted-foreground max-w-3xl mx-auto">
|
||
Browse our extensive collection of greeting cards for every occasion. Each card is thoughtfully designed
|
||
and printed on premium paper stock.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{categoryData.map((category) => (
|
||
<Link key={category.name} href={category.href}>
|
||
<Card className="h-full hover:shadow-lg transition-shadow group">
|
||
<CardContent className="p-0">
|
||
<div className="aspect-square relative overflow-hidden rounded-t-lg">
|
||
<img
|
||
src={category.image || "/placeholder.svg"}
|
||
alt={category.name}
|
||
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
</div>
|
||
<div className="p-6">
|
||
<h3 className="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
|
||
{category.name}
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground">{category.count} designs available</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Featured Section */}
|
||
<section className="py-16 bg-muted">
|
||
<div className="container mx-auto px-4">
|
||
<h3 className="text-3xl font-bold text-center mb-12">Why Our Cards Stand Out</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||
<div className="text-center">
|
||
<div className="text-4xl mb-4">🇨🇦</div>
|
||
<h4 className="text-xl font-semibold mb-2">Satisfaction Guaranteed</h4>
|
||
<p className="text-muted-foreground">We stand behind the quality of every card we sell</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-4xl mb-4">🎨</div>
|
||
<h4 className="text-xl font-semibold mb-2">Unique Designs</h4>
|
||
<p className="text-muted-foreground">Original artwork created by talented Canadian artists</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-4xl mb-4">♻️</div>
|
||
<h4 className="text-xl font-semibold mb-2">Eco-Friendly</h4>
|
||
<p className="text-muted-foreground">
|
||
Printed on recycled paper with environmentally conscious practices
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-16">
|
||
<div className="container mx-auto px-4 text-center">
|
||
<h3 className="text-3xl font-bold mb-4">Need Something Custom?</h3>
|
||
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||
We can create personalized cards for your special events and occasions
|
||
</p>
|
||
<Button size="lg" asChild>
|
||
<Link href="/custom-cards">Learn About Custom Cards</Link>
|
||
</Button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</>
|
||
)
|
||
}
|