Add src/lib/animations/framer-motion-wrapper.tsx

src/lib/animations/framer-motion-wrapper.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import React from 'react';
+import { motion, AnimatePresence, Variants } from 'framer-motion';
+
+export { motion, AnimatePresence };
+export type { Variants };
+
+interface FramerMotionWrapperProps {
+  children: React.ReactNode;
+  variants?: Variants;
+  initial?: string | boolean;
+  animate?: string | boolean;
+  exit?: string | boolean;
+  transition?: object;
+  className?: string;
+  [key: string]: any; // Allows for other motion props
+}
+
+/**
+ * A generic Framer Motion wrapper for animating elements.
+ * Provides a simple way to use `motion.div` with common animation properties.
+ */
+export function FramerMotionWrapper({
+  children,
+  variants,
+  initial = "hidden",  animate = "visible",  exit = "exit",  transition,
+  className,
+  ...rest
+}: FramerMotionWrapperProps) {
+  return (
+    <motion.div
+      variants={variants}
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      transition={transition}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Example variants for common animations
+export const fadeInVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.8 } },
+  exit: { opacity: 0, transition: { duration: 0.5 } },
+};
+
+export const slideUpVariants: Variants = {
+  hidden: { opacity: 0, y: 50 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } },
+  exit: { opacity: 0, y: -50, transition: { duration: 0.4, ease: "easeIn" } },
+};