Initial commit of project structure

Pottery-website/pages/Atelier.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Atelier: React.FC = () => {
+    return (
+        <div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
+            <div className="max-w-[1920px] mx-auto px-6 md:px-12">
+                {/* Intro */}
+                <div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-32 items-center">
+                    <div className="md:col-span-5 md:col-start-2">
+                        <motion.span
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ duration: 1 }}
+                            className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
+                        >
+                            The Studio
+                        </motion.span>
+                        <motion.h1
+                            initial={{ y: 30, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            transition={{ delay: 0.2, duration: 0.8 }}
+                            className="font-display text-5xl md:text-7xl lg:text-8xl leading-none text-text-main dark:text-white mb-8"
+                        >
+                            Formed by<br />Hand & Fire
+                        </motion.h1>
+                        <motion.p
+                            initial={{ y: 30, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            transition={{ delay: 0.4, duration: 0.8 }}
+                            className="font-body text-lg font-light text-stone-500 leading-relaxed max-w-lg"
+                        >
+                            Our atelier is a sanctuary of slow creation. Located in the quiet hills, we practice the ancient art of wheel-throwing, honoring the raw beauty of natural clay.
+                        </motion.p>
+                    </div>
+                    <div className="md:col-span-12 lg:col-span-6 relative h-[600px] lg:h-[800px] w-full">
+                        <motion.div
+                            initial={{ clipPath: 'inset(100% 0 0 0)' }}
+                            animate={{ clipPath: 'inset(0% 0 0 0)' }}
+                            transition={{ delay: 0.2, duration: 1.5, ease: "easeOut" }}
+                            className="h-full w-full"
+                        >
+                            <img src="/pottery-studio.png" alt="Atelier Studio" className="w-full h-full object-cover" />
+                        </motion.div>
+                    </div>
+                </div>
+
+                {/* Philosophy Section */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-stone-200 dark:border-stone-800 pt-24">
+                    {[
+                        { title: "Material", text: "We work exclusively with locally sourced stoneware clay bodies, rich in iron and character." },
+                        { title: "Process", text: "Every piece is wheel-thrown, trimmed, and glazed by hand, ensuring no two objects are identical." },
+                        { title: "Function", text: "Designed to be used and loved. Our ceramics are durable, food-safe, and meant for daily rituals." }
+                    ].map((item, idx) => (
+                        <motion.div
+                            key={item.title}
+                            initial={{ y: 20, opacity: 0 }}
+                            whileInView={{ y: 0, opacity: 1 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: idx * 0.2, duration: 0.8 }}
+                            className="p-8 hover:bg-white dark:hover:bg-black transition-colors duration-500"
+                        >
+                            <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">{item.title}</h3>
+                            <p className="font-body font-light text-stone-500 leading-relaxed">{item.text}</p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Atelier;