From bfeb8ecef180c0dfa3056a77b2a91a9071e13ab9 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Fri, 16 Jan 2026 17:06:53 +0000
Subject: [PATCH] Update components/collections.tsx

---
 components/collections.tsx | 47 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 components/collections.tsx

diff --git a/components/collections.tsx b/components/collections.tsx
new file mode 100644
index 0000000..34c4b0e
--- /dev/null
+++ b/components/collections.tsx
@@ -0,0 +1,47 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Card, CardContent } from "@/components/ui/card";
+import Image from "next/image";
+
+const collections = [
+  {
+    title: "Women Collection",
+    description: "Everyday Soft Luxury. Clean, relaxed silhouettes with gentle structure and breathable fabrics.",
+    image: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=800&auto=format&fit=crop",
+    link: "#women"
+  },
+  {
+    title: "Kids Collection",
+    description: "Gentle by Nature. Ultra-soft, skin-friendly fabrics designed for movement and comfort.",
+    image: "https://images.unsplash.com/photo-1519704943920-18447022ad7d?q=80&w=800&auto=format&fit=crop",
+    link: "#kids"
+  }
+];
+
+export function Collections() {
+  return (
+    <section className="py-24 bg-[#F9F7F2]">
+      <Container>
+        <Heading className="text-center mb-16">The Collections</Heading>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {collections.map((item) => (
+            <Card key={item.title} className="border-none bg-transparent overflow-hidden group cursor-pointer">
+              <div className="relative aspect-[4/5] overflow-hidden">
+                <img 
+                  src={item.image} 
+                  alt={item.title}
+                  className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
+                />
+              </div>
+              <CardContent className="pt-8 px-0">
+                <Heading className="text-2xl mb-3">{item.title}</Heading>
+                <p className="text-neutral-600 mb-4">{item.description}</p>
+                <span className="text-sm font-medium tracking-widest uppercase border-b border-neutral-900 pb-1">Explore</span>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}