Added footer

.vscode/settings.json

@@ -3,6 +3,7 @@
     "aipicker",
     "colorpicker",
     "Customizer",
+    "davegizmo",
     "drei",
     "editortabs",
     "filepicker",

client/src/components/Footer.jsx

@@ -0,0 +1,16 @@
+import { motion } from "framer-motion";
+
+import { slideAnimation } from "../config/motion";
+
+const Footer = () => {
+
+  return (
+    <>
+        <motion.footer className="text-gray-800 w-fit mx-auto pb-1" {...slideAnimation('up')}>
+            created with <span className="text-red-600">❤️</span> by <a href="https://davegizmo.vercel.app" target="_blank" className="underline">davegizmo</a>
+        </motion.footer>
+    </>
+  )
+}
+
+export default Footer

client/src/pages/Home.jsx

@@ -9,42 +9,47 @@ import {
     headTextAnimation,
     slideAnimation
  } from "../config/motion";
+import Footer from "../components/Footer";
 
 const Home = () => {
     const snap = useSnapshot(state);
 
   return (
-    <AnimatePresence>
-        {snap.intro && (
-            <motion.section className="home"  {...slideAnimation('left')} >
-                <motion.header {...slideAnimation('down')}>
-                    <img src="./ai.webp"
-                    alt="logo" 
-                    className="w-12 h-12 object-contain"/>
-                </motion.header>
-
-                <motion.div className="home-content" {...headContainerAnimation}>
-                    <motion.div {...headTextAnimation}>
-                        <h1 className="head-text">
-                            LET&apos;S <br className="xl:block hidden"/> DO IT.
-                        </h1>
-                    </motion.div>
-                    <motion.div {...headContentAnimation} className="flex flex-col gap-5">
-                        <p className="max-w-md text-gray-600 font-normal">
-                            Design your dream shirt in 3D with our groundbreaking customization tool. <strong>Let your creativity loose</strong>{" "}and express yourself.
-                        </p>
-
-                        <CustomButton
-                            type="filled"
-                            title="Customize it"
-                            handleClick={() => state.intro = false}
-                            customStyles="w-fit px-4 py-2.5 font-bold text-sm"
-                        />
+    <>
+        <AnimatePresence>
+            {snap.intro && (
+                <motion.article className="home"  {...slideAnimation('left')} >
+                    <motion.header {...slideAnimation('down')}>
+                        <img src="./ai.webp"
+                        alt="logo"
+                        className="w-12 h-12 object-contain"/>
+                    </motion.header>
+                    <motion.div className="home-content" {...headContainerAnimation}>
+                        <motion.div {...headTextAnimation}>
+                            <h1 className="head-text">
+                                LET&apos;S <br className="xl:block hidden"/> DO IT.
+                            </h1>
+                        </motion.div>
+                        <motion.div {...headContentAnimation} className="flex flex-col gap-5">
+                            <p className="max-w-md text-gray-600 font-normal">
+                                Design your dream shirt in 3D with our groundbreaking customization tool. <strong>Let your creativity loose</strong>{" "}and express yourself.
+                            </p>
+                            <CustomButton
+                                type="filled"
+                                title="Customize it"
+                                handleClick={() => state.intro = false}
+                                customStyles="w-fit px-4 py-2.5 font-bold text-sm"
+                            />
+                        </motion.div>
                     </motion.div>
-                </motion.div>
-            </motion.section>
-        )}
-    </AnimatePresence>
+                </motion.article>
+            )}
+        </AnimatePresence>
+
+        <motion.div className="z-10 w-full absolute bottom-0">
+            <Footer />
+        </motion.div>
+    </>
   )
 }