Add page transitions

src/web/src/app/page.jsx

@@ -6,6 +6,6 @@ import { HeroSection1, HeroSection2, HeroSection3 } from "@/components/hero";
 // Exports
 export default function Index() {
   return (
-    <div></div>
+    <div>Home</div>
   );
 }

src/web/src/app/projects/page.jsx

@@ -6,6 +6,7 @@
 export default function Projects() {
   return (
     <div>
+      projects
     </div>
   );
 }

src/web/src/app/template.js

@@ -0,0 +1,5 @@
+import PageTransition from "@/components/transitions";
+
+export default function rootTemplate({ children }) {
+  return <PageTransition>{children}</PageTransition>;
+}

src/web/src/components/transitions.jsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { motion } from "framer-motion";
+
+const PageTransition = ({ children }) => (
+  <motion.div
+    initial={{ x: 300, opacity: 0 }}
+    animate={{ x: 0, opacity: 1 }}
+    exit={{ x: 300, opacity: 0 }}
+    transition={{
+      type: "spring",
+      stiffness: 260,
+      damping: 20,
+    }}
+  >
+    {children}
+  </motion.div>
+);
+export default PageTransition;