Add animations

src/animations/FadeIn.jsx

@@ -0,0 +1,30 @@
+import { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+export default function FadeIn({ children, duration }) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  const mainControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+    }
+  }, [isInView, mainControls]);
+
+  return (
+    <div ref={ref}>
+      <motion.div
+        variants={{
+          hidden: { opacity: 0 },
+          visible: { opacity: 1 },
+        }}
+        initial="hidden"
+        animate={mainControls}
+        transition={{ duration }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}

src/animations/SlideIn.jsx

@@ -0,0 +1,31 @@
+import { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+export default function SlideIn({ children, duration, delay, className }) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  const mainControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+    }
+  }, [isInView, mainControls]);
+
+  return (
+    <div ref={ref} className={className}>
+      <motion.div
+        variants={{
+          hidden: { opacity: 0, x: -60 },
+          visible: { opacity: 1, x: 0 },
+        }}
+        initial="hidden"
+        animate={mainControls}
+        transition={{ duration, delay }}
+        className="h-full"
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}