Initial commit of project structure

Pottery-website/components/PageLoader.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const PageLoader: React.FC = () => {
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-stone-100 dark:bg-stone-900">
+            <div className="relative">
+                {/* Animated Pottery Outline */}
+                <motion.svg
+                    width="120"
+                    height="160"
+                    viewBox="0 0 120 160"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <motion.path
+                        d="M30 150C30 155.523 34.4772 160 40 160H80C85.5228 160 90 155.523 90 150V140H30V150Z"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        className="text-stone-800 dark:text-stone-200"
+                        initial={{ pathLength: 0, opacity: 0 }}
+                        animate={{ pathLength: 1, opacity: 1 }}
+                        transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatType: "reverse" }}
+                    />
+                    <motion.path
+                        d="M30 140C30 140 10 100 10 60C10 32.3858 32.3858 10 60 10C87.6142 10 110 32.3858 110 60C110 100 90 140 90 140H30Z"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        className="text-stone-800 dark:text-stone-200"
+                        initial={{ pathLength: 0, opacity: 0 }}
+                        animate={{ pathLength: 1, opacity: 1 }}
+                        transition={{ duration: 2, ease: "easeInOut", repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
+                    />
+                    <motion.ellipse
+                        cx="60"
+                        cy="10"
+                        rx="25"
+                        ry="5"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        className="text-stone-800 dark:text-stone-200"
+                        initial={{ pathLength: 0, opacity: 0 }}
+                        animate={{ pathLength: 1, opacity: 1 }}
+                        transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatType: "reverse", delay: 1 }}
+                    />
+                </motion.svg>
+
+                <motion.div
+                    className="mt-8 text-center"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8, repeat: Infinity, repeatType: "reverse" }}
+                >
+                    <span className="font-display text-sm tracking-[0.3em] uppercase text-stone-500">Shaping</span>
+                </motion.div>
+            </div>
+        </div>
+    );
+};
+
+export default PageLoader;