feat: implement full site animations with framer motion

components/ClientWrapper.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
 import Navbar from "./Navbar";
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
@@ -10,7 +11,17 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
     return (
         <>
             {!isAdmin && <Navbar />}
-            {children}
+            <AnimatePresence mode="wait">
+                <motion.div
+                    key={pathname}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                    transition={{ duration: 0.4, ease: "easeOut" }}
+                >
+                    {children}
+                </motion.div>
+            </AnimatePresence>
         </>
     );
 }