88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { SiteHeader } from "@/components/site-header"
|
|
import { SiteFooter } from "@/components/site-footer"
|
|
import { PageHero } from "@/components/page-hero"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
|
|
const categories = [
|
|
{
|
|
name: "Birthday",
|
|
slug: "birthday",
|
|
image: "/cards/birthday/BDY-001.jpg",
|
|
description: "Celebrate with our pop-up birthday cards",
|
|
},
|
|
{
|
|
name: "Christmas",
|
|
slug: "christmas",
|
|
image: "/cards/christmas/CHR-001.jpg",
|
|
description: "Festive 3D Christmas greetings",
|
|
},
|
|
{
|
|
name: "Valentine's Day",
|
|
slug: "valentines-day",
|
|
image: "/cards/valentines/VAL-001.jpg",
|
|
description: "Express your love with our Valentine cards",
|
|
},
|
|
{
|
|
name: "Wedding",
|
|
slug: "wedding",
|
|
image: "/cards/wedding/WED-001.jpg",
|
|
description: "Elegant wedding celebration cards",
|
|
},
|
|
{
|
|
name: "Baby",
|
|
slug: "baby",
|
|
image: "/cards/baby/BBY-001.jpg",
|
|
description: "Welcome the new arrival",
|
|
},
|
|
{
|
|
name: "3D Monuments",
|
|
slug: "monuments",
|
|
image: "/cards/monuments/MON-001.jpg",
|
|
description: "Iconic landmarks in 3D",
|
|
},
|
|
{
|
|
name: "Sentiments",
|
|
slug: "sentiments",
|
|
image: "/cards/sentiments/SEN-001.jpg",
|
|
description: "Thank you, get well, and more",
|
|
},
|
|
{
|
|
name: "Specialty",
|
|
slug: "specialty",
|
|
image: "/cards/specialty/SPC-002.jpg",
|
|
description: "Unique cards for special moments",
|
|
},
|
|
]
|
|
|
|
export default function YourOccasionsPage() {
|
|
return (
|
|
<>
|
|
<SiteHeader />
|
|
<PageHero title="Your Occasions" breadcrumbs={[{ label: "Home", href: "/" }]} />
|
|
|
|
<div className="container mx-auto px-4 py-12">
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
{categories.map((category) => (
|
|
<Link key={category.slug} href={`/category/${category.slug}`} className="group">
|
|
<div className="relative aspect-[150/185] overflow-hidden rounded-lg border-2 border-border hover:border-primary transition-colors">
|
|
<Image
|
|
src={category.image || "/placeholder.svg"}
|
|
alt={category.name}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-3 text-center font-semibold text-lg group-hover:text-primary transition-colors">
|
|
{category.name}
|
|
</h3>
|
|
<p className="text-center text-sm text-muted-foreground mt-1">{category.description}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<SiteFooter />
|
|
</>
|
|
)
|
|
}
|