Redesign auth pages and enhance analytics UI with motion

Refactored login and registration pages for a modern, consistent look with animated backgrounds and improved form feedback. Enhanced analytics dashboard and metrics cards with framer-motion animations and visual polish. Updated MotionWrapper for flexible motion props and improved transitions. Minor UI/UX improvements and code cleanup throughout auth and analytics components.

components/ui/motion-wrapper.tsx

@@ -1,15 +1,30 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, HTMLMotionProps } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { forwardRef } from "react";
 
-export function MotionWrapper({ children }: { children: React.ReactNode }) {
-    return (
-        <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, staggerChildren: 0.1 }}
-        >
-            {children}
-        </motion.div>
-    );
+interface MotionWrapperProps extends HTMLMotionProps<"div"> {
+    children: React.ReactNode;
+    className?: string;
 }
+
+export const MotionWrapper = forwardRef<HTMLDivElement, MotionWrapperProps>(
+    ({ children, className, ...props }, ref) => {
+        return (
+            <motion.div
+                ref={ref}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.4, ease: "easeOut" }}
+                className={cn(className)}
+                {...props}
+            >
+                {children}
+            </motion.div>
+        );
+    }
+);
+
+MotionWrapper.displayName = "MotionWrapper";