Initial commit of project structure

Pottery-website/pages/Collections.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { COLLECTIONS } from '../constants';
+
+const Collections: React.FC = () => {
+    return (
+        <>
+            <section className="pt-32 pb-24 px-6 md:px-12 bg-stone-50 dark:bg-stone-900 min-h-screen">
+                <div className="max-w-[1920px] mx-auto">
+                    {/* Header */}
+                    <div className="mb-24 text-center">
+                        <motion.h1
+                            initial={{ y: 20, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            transition={{ delay: 0.5, duration: 0.8 }}
+                            className="font-display text-5xl md:text-7xl font-light mb-6 text-text-main dark:text-white"
+                        >
+                            Collections
+                        </motion.h1>
+                        <motion.p
+                            initial={{ y: 20, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            transition={{ delay: 0.7, duration: 0.8 }}
+                            className="font-body text-stone-500 max-w-xl mx-auto text-lg font-light leading-relaxed"
+                        >
+                            Curated series of functional objects. Each collection explores a distinct form language and glaze palette.
+                        </motion.p>
+                    </div>
+
+                    {/* Grid */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
+                        {COLLECTIONS.map((item, index) => (
+                            <motion.div
+                                key={item.id}
+                                initial={{ y: 40, opacity: 0 }}
+                                animate={{ y: 0, opacity: 1 }}
+                                transition={{ delay: 0.2 + (index * 0.1), duration: 0.8, ease: "easeOut" }}
+                                className="group cursor-pointer"
+                            >
+                                {/* Image Container with Darker Background for Contrast */}
+                                <div className={`relative overflow-hidden mb-6 ${item.aspectRatio || 'aspect-[3/4]'} bg-stone-200 dark:bg-stone-800`}>
+                                    <motion.img
+                                        src={item.image}
+                                        alt={item.title}
+                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 relative z-10"
+                                        whileHover={{ scale: 1.05 }}
+                                    />
+                                    {/* Overlay on hover */}
+                                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500 z-20 pointer-events-none" />
+                                </div>
+
+                                <div className="flex justify-between items-end border-b border-stone-200 dark:border-stone-800 pb-4">
+                                    <div>
+                                        <span className="text-xs uppercase tracking-widest text-stone-400 mb-1 block">{item.number}</span>
+                                        <h3 className="font-display text-2xl text-text-main dark:text-white">{item.title}</h3>
+                                    </div>
+                                    <span className="material-symbols-outlined opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 text-stone-400">arrow_forward</span>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default Collections;