kleap
/
app-dreamy-armadillo-flit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update app/categories/page.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:29:47 +00:00
parent 382b8f18f0
commit 05d121bfd4
1 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/categories/page.tsx Normal file
View File

@ -0,0 +1,40 @@
"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Footer } from "@/components/footer";
import { products } from "@/lib/data";
import Link from "next/link";
export default function CategoriesPage() {
const categories = [
{ name: "Electronics", icon: "🔌", image: "https://images.unsplash.com/photo-1498049794561-7780e7231661?q=80&w=1000&auto=format&fit=crop" },
{ name: "Fashion", icon: "👕", image: "https://images.unsplash.com/photo-1445205170230-053b830c6050?q=80&w=1000&auto=format&fit=crop" },
{ name: "Groceries", icon: "🍎", image: "https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=1000&auto=format&fit=crop" },
{ name: "Hotel Supplies", icon: "🏨", image: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?q=80&w=1000&auto=format&fit=crop" },
];
return (
<main className="min-h-screen bg-neutral-50">
<Container className="py-20">
<Heading className="mb-12">Shop by Category</Heading>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{categories.map((cat) => (
<Link key={cat.name} href={`/products?category=${cat.name}`} className="group">
<div className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-md transition-all">
<div className="aspect-[4/3] relative">
<img src={cat.image} alt={cat.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
<div className="absolute bottom-4 left-4 text-white">
<span className="text-3xl mb-2 block">{cat.icon}</span>
<h3 className="text-xl font-bold">{cat.name}</h3>
</div>
</div>
</div>
</Link>
))}
</div>
</Container>
<Footer />
</main>
);
}