Deploy

2026-06-23 08:47:16 +00:00
parent 87b0641c02
commit 2d6750056f
1 changed files with 60 additions and 0 deletions
@@ -0,0 +1,60 @@
+import Link from "next/link"
+import Image from "next/image"
+
+export default function CategorySection() {
+  const categories = [
+    {
+      name: "Streetwear",
+      slug: "streetwear",
+      image:
+        "https://images.pexels.com/photos/9522954/pexels-photo-9522954.jpeg?auto=compress&cs=tinysrgb&h=350",
+      count: "24 items",
+    },
+    {
+      name: "Casual",
+      slug: "casual",
+      image:
+        "https://images.pexels.com/photos/9522954/pexels-photo-9522954.jpeg?auto=compress&cs=tinysrgb&h=350",
+      count: "18 items",
+    },
+    {
+      name: "Accessories",
+      slug: "accessories",
+      image:
+        "https://images.pexels.com/photos/13408576/pexels-photo-13408576.jpeg?auto=compress&cs=tinysrgb&h=350",
+      count: "12 items",
+    },
+  ]
+
+  return (
+    <section data-vula-section="category" className="py-20 lg:py-28 bg-neutral-50" id="categories">
+      <div className="container mx-auto px-6 max-w-6xl">
+        <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#0a0a0a] mb-12">
+          Shop by Category
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {categories.map((cat) => (
+            <Link
+              key={cat.slug}
+              href={`/products?category=${cat.slug}`}
+              className="group relative overflow-hidden rounded-none aspect-[4/5] bg-neutral-100 block"
+            >
+              <Image
+                src={cat.image}
+                alt={`${cat.name} category`}
+                fill
+                sizes="(max-width: 768px) 100vw, 33vw"
+                className="object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a]/70 via-[#0a0a0a]/20 to-transparent" />
+              <div className="absolute bottom-0 left-0 right-0 p-6">
+                <h3 className="text-2xl font-bold text-white">{cat.name}</h3>
+                <p className="text-sm text-neutral-300 mt-1">{cat.count}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}