Add insane effect

ui/src/pages/login.tsx

@@ -7,7 +7,7 @@ import { Label } from "@ui/components/ui/label";
 import { useTheme } from "@ui/contexts/ThemeContext";
 import { useLoginEmail } from "@ui/hooks/auth";
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 
@@ -25,6 +25,33 @@ export function LoginPage() {
     password: "",
   });
 
+  // 3D Parallax effect
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [transform, setTransform] = useState("");
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return;
+
+    const card = cardRef.current;
+    const rect = card.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+
+    const rotateX = ((y - centerY) / centerY) * -10; // Max 10 degrees tilt
+    const rotateY = ((x - centerX) / centerX) * 10;
+
+    setTransform(
+      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`
+    );
+  };
+
+  const handleMouseLeave = () => {
+    setTransform("");
+  };
+
   // Theme
   const { theme, setTheme } = useTheme();
 
@@ -63,10 +90,15 @@ export function LoginPage() {
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-[length:400%_400%] relative overflow-hidden">
       <AnimatedBackground />
       <div
+        ref={cardRef}
         className={twMerge(
-          "w-full max-w-lg rounded-2xl animate-border-light",
-          "shadow-2xl shadow-primary/10"
+          "w-full max-w-lg rounded-2xl",
+          "shadow-2xl shadow-black/20 dark:shadow-black/40",
+          "transition-transform duration-200 ease-out will-change-transform"
         )}
+        style={{ transform }}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10">

ui/src/pages/signup.tsx

@@ -7,7 +7,7 @@ import { Label } from "@ui/components/ui/label";
 import { useTheme } from "@ui/contexts/ThemeContext";
 import { useSignUp } from "@ui/hooks/auth";
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 
@@ -29,6 +29,33 @@ export function SignUpPage() {
     business_name: "",
   });
 
+  // 3D Parallax effect
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [transform, setTransform] = useState("");
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return;
+
+    const card = cardRef.current;
+    const rect = card.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+
+    const rotateX = ((y - centerY) / centerY) * -10; // Max 10 degrees tilt
+    const rotateY = ((x - centerX) / centerX) * 10;
+
+    setTransform(
+      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`
+    );
+  };
+
+  const handleMouseLeave = () => {
+    setTransform("");
+  };
+
   // Theme
   const { theme, setTheme } = useTheme();
 
@@ -109,10 +136,15 @@ export function SignUpPage() {
     >
       <AnimatedBackground />
       <div
+        ref={cardRef}
         className={twMerge(
-          "w-full max-w-xl rounded-2xl animate-border-light",
-          "shadow-2xl shadow-primary/10"
+          "w-full max-w-xl rounded-2xl",
+          "shadow-2xl shadow-black/20 dark:shadow-black/40",
+          "transition-transform duration-200 ease-out will-change-transform"
         )}
+        style={{ transform }}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10">