From caae728962298ae042b20a94436c1377d4387526 Mon Sep 17 00:00:00 2001
From: Badsha1996 <badshalaskar0@gmail.com>
Date: Thu, 16 Oct 2025 23:44:22 +0530
Subject: [PATCH] mobile fixes

---
 .../src/components/pages/HomePage.tsx         | 192 ++++---
 .../frontend/src/layouts/BackgroundLayout.tsx | 485 +++++++-----------
 2 files changed, 292 insertions(+), 385 deletions(-)

diff --git a/apps/frontend/src/components/pages/HomePage.tsx b/apps/frontend/src/components/pages/HomePage.tsx
index e86a71c..a06ff78 100644
--- a/apps/frontend/src/components/pages/HomePage.tsx
+++ b/apps/frontend/src/components/pages/HomePage.tsx
@@ -86,6 +86,7 @@ const features = [
   "Study Material Creation",
   "Progress Tracking",
 ];
+
 const avatarPool = [
   "https://api.dicebear.com/6.x/adventurer/svg?seed=anime1",
   "https://api.dicebear.com/6.x/adventurer/svg?seed=anime2",
@@ -121,16 +122,8 @@ function HomePage() {
   useEffect(() => {
     const checkDevice = () => {
       const width = window.innerWidth;
-      const isMobileDevice = width < 768;
-
-      // Check for low-end devices
-      const isLowEndDevice =
-        (navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4) ||
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-          navigator.userAgent
-        );
-
-      setIsMobile(isMobileDevice || isLowEndDevice);
+      const isMobileDevice = width < 1024; // Changed from 768 to 1024
+      setIsMobile(isMobileDevice);
     };
 
     checkDevice();
@@ -178,14 +171,16 @@ function HomePage() {
     }));
   }, [realTestimonials]);
 
-  // Handle WebGL context loss
   useEffect(() => {
+    if (isMobile) {
+      return;
+    }
+
     const handleContextLost = (event: Event) => {
       event.preventDefault();
       console.warn("WebGL context lost, attempting to restore...");
       setWebglError(true);
 
-      // Attempt to restore after a delay
       setTimeout(() => {
         setCanvasKey((prev) => prev + 1);
         setWebglError(false);
@@ -213,50 +208,69 @@ function HomePage() {
         );
       }
     };
-  }, [canvasKey]);
+  }, [canvasKey, isMobile]);
 
-  // Main page loading effect
+  // Reduced page loading time
   useEffect(() => {
-    const minLoadTime = setTimeout(() => {
-      setPageLoading(false);
-    }, 2000);
+    const minLoadTime = setTimeout(
+      () => {
+        setPageLoading(false);
+      },
+      isMobile ? 1000 : 2000
+    ); // Faster on mobile
 
     return () => clearTimeout(minLoadTime);
-  }, []);
+  }, [isMobile]);
 
-  // Content animations after loading
+  // Optimized content animations
   useEffect(() => {
     if (!pageLoading) {
       setIsVisible(true);
 
       const text =
         "A single AI-driven platform that transforms the way students and teachers prepare effective study materials";
-      let index = 0;
-      const timer = setInterval(() => {
-        if (index <= text.length) {
-          setTypewriterText(text.slice(0, index));
-          index++;
-        } else {
-          clearInterval(timer);
-        }
-      }, 50);
-
-      const featureTimer = setInterval(() => {
-        setCurrentFeature((prev) => (prev + 1) % features.length);
-      }, 3000);
-
-      const statsTimer = setTimeout(() => {
-        setStats({ users: 25000, questions: 500000, notes: 150000 });
-      }, 1500);
+
+      // Instant text on mobile, typewriter on desktop
+      if (isMobile) {
+        setTypewriterText(text);
+      } else {
+        let index = 0;
+        const timer = setInterval(() => {
+          if (index <= text.length) {
+            setTypewriterText(text.slice(0, index));
+            index++;
+          } else {
+            clearInterval(timer);
+          }
+        }, 50);
+
+        return () => clearInterval(timer);
+      }
+
+      // Slower feature rotation on mobile
+      const featureTimer = setInterval(
+        () => {
+          setCurrentFeature((prev) => (prev + 1) % features.length);
+        },
+        isMobile ? 5000 : 3000
+      );
+
+      // Instant stats on mobile
+      const statsTimer = setTimeout(
+        () => {
+          setStats({ users: 25000, questions: 500000, notes: 150000 });
+        },
+        isMobile ? 500 : 1500
+      );
 
       return () => {
-        clearInterval(timer);
         clearInterval(featureTimer);
         clearTimeout(statsTimer);
       };
     }
-  }, [pageLoading]);
+  }, [pageLoading, isMobile]);
 
+  // Optimized counter for mobile
   const AnimatedCounter: React.FC<{
     end: number;
     duration?: number;
@@ -266,6 +280,13 @@ function HomePage() {
 
     useEffect(() => {
       if (end === 0) return;
+
+      // Instant on mobile
+      if (isMobile) {
+        setCount(end);
+        return;
+      }
+
       let startTime: number;
       const animate = (timestamp: number) => {
         if (!startTime) startTime = timestamp;
@@ -274,7 +295,7 @@ function HomePage() {
         if (progress < 1) requestAnimationFrame(animate);
       };
       requestAnimationFrame(animate);
-    }, [end, duration]);
+    }, [end, duration, isMobile]);
 
     return (
       <span>
@@ -302,41 +323,44 @@ function HomePage() {
         animate={{ opacity: 1 }}
         transition={{ duration: 0.5 }}
       >
-        <div className="fixed inset-0 overflow-hidden pointer-events-none">
-          <div
-            className="absolute -top-40 -right-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-bounce"
-            style={{ animationDuration: "6s" }}
-          ></div>
-          <div
-            className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-bounce"
-            style={{ animationDuration: "8s", animationDelay: "2s" }}
-          ></div>
-          <div
-            className="absolute top-40 left-40 w-60 h-60 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-bounce"
-            style={{ animationDuration: "10s", animationDelay: "4s" }}
-          ></div>
-        </div>
+        {/* Simplified floating blobs - static on mobile */}
+        {!isMobile && (
+          <div className="fixed inset-0 overflow-hidden pointer-events-none">
+            <div
+              className="absolute -top-40 -right-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-10"
+              style={{ animation: "none" }}
+            ></div>
+            <div
+              className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-10"
+              style={{ animation: "none" }}
+            ></div>
+          </div>
+        )}
 
         <div className="relative z-10 w-full pointer-events-auto">
           <div className="flex flex-col justify-center items-center lg:items-start p-6 sm:p-8 md:p-12 lg:p-16 xl:p-24 text-center lg:text-left min-h-screen">
             <div className="max-w-4xl lg:max-w-2xl xl:max-w-4xl mx-auto lg:mx-0">
-              <div
-                ref={canvasContainerRef}
-                className="hidden md:block absolute left-[400px] top-[-200px] inset-0 w-full h-[40%]"
-              >
-                {webglError && (
-                  <div className="flex items-center justify-center h-full">
-                    <div className="text-white/60 text-sm">
-                      Restoring 3D view...
+              {/* 3D Model - Desktop only */}
+              {!isMobile && (
+                <div
+                  ref={canvasContainerRef}
+                  className="hidden md:block absolute left-[400px] top-[-200px] inset-0 w-full h-[40%]"
+                >
+                  {webglError && (
+                    <div className="flex items-center justify-center h-full">
+                      <div className="text-white/60 text-sm">
+                        Restoring 3D view...
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
 
-                {!modelLoaded && !webglError && !isMobile && (
-                  <GlassmorphicLoader size="md" message="Loading 3D model..." />
-                )}
+                  {!modelLoaded && !webglError && (
+                    <GlassmorphicLoader
+                      size="md"
+                      message="Loading 3D model..."
+                    />
+                  )}
 
-                {!isMobile && (
                   <Suspense
                     fallback={
                       <div className="flex items-center justify-center h-full">
@@ -367,14 +391,14 @@ function HomePage() {
                       <Scene />
                     </Canvas>
                   </Suspense>
-                )}
-              </div>
+                </div>
+              )}
 
               <h1
                 className={`text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-8xl xl:text-8xl font-black text-white mb-4 sm:mb-6 leading-tight tracking-tighter transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
-                style={{ transitionDelay: "0.2s" }}
+                style={{ transitionDelay: isMobile ? "0s" : "0.2s" }}
               >
-                <span className="block bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 bg-clip-text text-transparent drop-shadow-xl animate-pulse">
+                <span className="block bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 bg-clip-text text-transparent drop-shadow-xl">
                   DOCLIN NOTE
                 </span>
                 <span className="block text-white drop-shadow-xl">
@@ -385,38 +409,38 @@ function HomePage() {
               <div className="mb-8 h-16">
                 <p
                   className={`text-sm xs:text-base sm:text-lg md:text-xl lg:text-2xl text-white/90 max-w-sm sm:max-w-md lg:max-w-xl mx-auto lg:mx-0 leading-relaxed font-light drop-shadow-md transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
-                  style={{ transitionDelay: "0.4s" }}
+                  style={{ transitionDelay: isMobile ? "0s" : "0.4s" }}
                 >
                   {typewriterText}
-                  <span className="animate-pulse text-blue-400">|</span>
+                  {!isMobile && (
+                    <span className="animate-pulse text-blue-400">|</span>
+                  )}
                 </p>
               </div>
 
               <div className="mb-8">
                 <p
                   className={`text-blue-300 text-lg font-semibold mb-4 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
-                  style={{ transitionDelay: "0.6s" }}
+                  style={{ transitionDelay: isMobile ? "0s" : "0.6s" }}
                 >
                   Currently featuring:{" "}
-                  <span className="text-white animate-pulse">
-                    {features[currentFeature]}
-                  </span>
+                  <span className="text-white">{features[currentFeature]}</span>
                 </p>
               </div>
 
               <div
                 className={`flex flex-row xs:flex-row gap-3 sm:gap-4 justify-center lg:justify-start mb-12 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
-                style={{ transitionDelay: "0.8s" }}
+                style={{ transitionDelay: isMobile ? "0s" : "0.8s" }}
               >
                 <button
-                  className="group px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl text-sm sm:text-base transform hover:scale-105 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm border border-white/20 shadow-lg flex items-center gap-2"
+                  className="group px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl text-sm sm:text-base transform hover:scale-105 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm border border-white/20 shadow-lg flex items-center gap-2 active:scale-95"
                   onClick={() => navigate({ to: "/config" })}
                 >
                   <Play className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                   Generate Questions
                 </button>
                 <button
-                  className="group px-6 sm:px-8 py-3 sm:py-4 bg-white/10 text-white font-semibold rounded-xl text-sm sm:text-base transform hover:scale-105 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm border border-white/10 shadow-lg flex items-center gap-2"
+                  className="group px-6 sm:px-8 py-3 sm:py-4 bg-white/10 text-white font-semibold rounded-xl text-sm sm:text-base transform hover:scale-105 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm border border-white/10 shadow-lg flex items-center gap-2 active:scale-95"
                   onClick={() =>
                     navigate({
                       to: "/contact",
@@ -431,7 +455,7 @@ function HomePage() {
 
               <div
                 className={`grid grid-cols-3 gap-6 mb-12 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
-                style={{ transitionDelay: "1s" }}
+                style={{ transitionDelay: isMobile ? "0s" : "1s" }}
               >
                 <div className="text-center">
                   <div className="text-2xl sm:text-3xl font-bold text-blue-400">
@@ -457,6 +481,7 @@ function HomePage() {
             </div>
           </div>
 
+          {/* Features Section */}
           <div className="px-6 sm:px-8 md:px-12 lg:px-16 xl:px-24 py-16 bg-black/20 backdrop-blur-sm">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-16">
@@ -498,6 +523,7 @@ function HomePage() {
             </div>
           </div>
 
+          {/* Use Cases Section */}
           <div className="px-6 sm:px-8 md:px-12 lg:px-16 xl:px-24 py-16">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-16">
@@ -541,6 +567,7 @@ function HomePage() {
             </div>
           </div>
 
+          {/* Testimonials Section */}
           {testimonialsLoading ? (
             <div className="px-6 sm:px-8 md:px-12 lg:px-16 xl:px-24 py-16 bg-black/20 backdrop-blur-sm">
               <div className="flex justify-center">
@@ -568,7 +595,7 @@ function HomePage() {
                       key={testimonial.id}
                       initial={{ opacity: 0, y: 20 }}
                       animate={{ opacity: 1, y: 0 }}
-                      whileHover={{ scale: 1.02 }}
+                      whileHover={isMobile ? {} : { scale: 1.02 }}
                       className="bg-white/10 backdrop-blur-sm rounded-2xl px-10 py-4 border border-white/10"
                     >
                       <CardContent className="flex flex-col items-center space-y-4">
@@ -577,7 +604,6 @@ function HomePage() {
                             src={testimonial.avatar}
                             alt={testimonial.username ?? "User"}
                           />
-
                           <AvatarFallback className="text-xl">
                             {(testimonial.username ?? "CN")
                               .split(" ")
diff --git a/apps/frontend/src/layouts/BackgroundLayout.tsx b/apps/frontend/src/layouts/BackgroundLayout.tsx
index 50c2f18..ccc7a1d 100644
--- a/apps/frontend/src/layouts/BackgroundLayout.tsx
+++ b/apps/frontend/src/layouts/BackgroundLayout.tsx
@@ -6,90 +6,95 @@ interface BackgroundLayoutProps {
 }
 
 export default function BackgroundLayout({ children }: BackgroundLayoutProps) {
+  const [isMobile, setIsMobile] = React.useState(false);
+  
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
 
-  // Create smooth spring animations for mouse movement
-  const smoothMouseX = useSpring(mouseX, { stiffness: 40, damping: 30 });
-  const smoothMouseY = useSpring(mouseY, { stiffness: 40, damping: 30 });
+  // Detect mobile devices
+  React.useEffect(() => {
+    const checkMobile = () => {
+      const width = window.innerWidth;
+      const isMobileDevice = width < 1024;
+      setIsMobile(isMobileDevice);
+    };
 
-  // Create different transform ranges for various layers (parallax effect)
-  // Subtle tilt values (reduced from 5–8deg to 1–2deg)
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  // ALWAYS call hooks - adjust parameters based on isMobile
+  const smoothMouseX = useSpring(mouseX, { 
+    stiffness: isMobile ? 0 : 40, 
+    damping: isMobile ? 0 : 30 
+  });
+  const smoothMouseY = useSpring(mouseY, { 
+    stiffness: isMobile ? 0 : 40, 
+    damping: isMobile ? 0 : 30 
+  });
+
+  // ALWAYS call useTransform - adjust values based on isMobile
   const rotateX1 = useTransform(
     smoothMouseY,
-    [0, window.innerHeight],
-    [1.5, -1.5]
+    [0, typeof window !== 'undefined' ? window.innerHeight : 1000],
+    isMobile ? [0, 0] : [1.5, -1.5]
   );
   const rotateY1 = useTransform(
     smoothMouseX,
-    [0, window.innerWidth],
-    [-1.5, 1.5]
-  );
-
-  const rotateX2 = useTransform(smoothMouseY, [0, window.innerHeight], [1, -1]);
-  const rotateY2 = useTransform(smoothMouseX, [0, window.innerWidth], [-1, 1]);
-
-  const rotateX3 = useTransform(smoothMouseY, [0, window.innerHeight], [2, -2]);
-  const rotateY3 = useTransform(smoothMouseX, [0, window.innerWidth], [-2, 2]);
-
-  // Transform for particles (subtle movement)
-  const particleX = useTransform(
-    smoothMouseX,
-    [0, window.innerWidth],
-    [-20, 20]
-  );
-  const particleY = useTransform(
-    smoothMouseY,
-    [0, window.innerHeight],
-    [-20, 20]
+    [0, typeof window !== 'undefined' ? window.innerWidth : 1000],
+    isMobile ? [0, 0] : [-1.5, 1.5]
   );
 
-  // Transform for orbs (more dramatic movement)
-  const orbX = useTransform(smoothMouseX, [0, window.innerWidth], [-60, 60]);
-  const orbY = useTransform(smoothMouseY, [0, window.innerHeight], [-60, 60]);
+  // ALWAYS call useTransform for content rotation
+  const contentRotateX = useTransform(rotateX1, (rot) => (rot as number) * 0.1);
+  const contentRotateY = useTransform(rotateY1, (rot) => (rot as number) * 0.1);
 
+  // Memoize particles with consistent hook calls
   const particles = React.useMemo(
     () =>
-      Array.from({ length: 50 }, (_, i) => ({
+      Array.from({ length: isMobile ? 15 : 50 }, (_, i) => ({
         id: i,
         x: Math.random() * 100,
         y: Math.random() * 100,
         size: Math.random() * 4 + 1,
         duration: Math.random() * 20 + 10,
         delay: Math.random() * 20,
-        depth: Math.random() * 0.5 + 0.5, // Depth factor for 3D effect
+        depth: Math.random() * 0.5 + 0.5,
       })),
-    []
+    [isMobile]
   );
 
   const handleMouseMove = (e: React.MouseEvent) => {
-    mouseX.set(e.clientX);
-    mouseY.set(e.clientY);
+    if (!isMobile) {
+      mouseX.set(e.clientX);
+      mouseY.set(e.clientY);
+    }
   };
 
   return (
     <div
       onMouseMove={handleMouseMove}
       className="relative min-h-full overflow-hidden"
-      style={{ perspective: "1000px" }}
+      style={{ perspective: isMobile ? "none" : "1000px" }}
     >
-      {/* Main animated gradient background with 3D rotation */}
+      {/* Background gradient */}
       <motion.div
         className="fixed inset-0 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-800"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        transition={{ duration: 2 }}
-        style={{
+        transition={{ duration: 1 }}
+        style={isMobile ? {} : {
           rotateX: rotateX1,
           rotateY: rotateY1,
           transformStyle: "preserve-3d",
         }}
       />
 
-      {/* Secondary moving gradient overlay with different 3D depth */}
+      {/* Secondary gradient */}
       <motion.div
         className="fixed inset-0 bg-gradient-to-tr from-cyan-600/20 via-transparent to-pink-500/20"
-        animate={{
+        animate={isMobile ? {} : {
           background: [
             "linear-gradient(45deg, rgba(6, 182, 212, 0.2) 0%, transparent 50%, rgba(236, 72, 153, 0.2) 100%)",
             "linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, transparent 50%, rgba(59, 130, 246, 0.2) 100%)",
@@ -102,53 +107,42 @@ export default function BackgroundLayout({ children }: BackgroundLayoutProps) {
           repeat: Infinity,
           ease: "easeInOut",
         }}
-        style={{
-          rotateX: rotateX2,
-          rotateY: rotateY2,
-          transformStyle: "preserve-3d",
-        }}
       />
 
-      {/* Floating light orbs with 3D movement */}
-      <div className="fixed inset-0 pointer-events-none overflow-hidden">
-        {[...Array(6)].map((_, i) => (
-          <motion.div
-            key={`orb-${i}`}
-            className="absolute w-32 h-32 rounded-full blur-xl"
-            style={{
-              background: [
-                "radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%)",
-                "radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%)",
-                "radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%)",
-                "radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%)",
-                "radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, transparent 70%)",
-                "radial-gradient(circle, rgba(251, 146, 60, 0.4) 0%, transparent 70%)",
-              ][i],
-              x: orbX,
-              y: orbY,
-              rotateX: rotateX3,
-              rotateY: rotateY3,
-              transformStyle: "preserve-3d",
-            }}
-            initial={{
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-            }}
-            animate={{
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-            }}
-            transition={{
-              duration: 15 + Math.random() * 10,
-              repeat: Infinity,
-              repeatType: "reverse",
-              ease: "easeInOut",
-            }}
-          />
-        ))}
-      </div>
+      {/* Orbs - conditionally rendered but no hooks inside */}
+      {!isMobile && (
+        <div className="fixed inset-0 pointer-events-none overflow-hidden">
+          {[...Array(3)].map((_, i) => (
+            <motion.div
+              key={`orb-${i}`}
+              className="absolute w-32 h-32 rounded-full blur-xl"
+              style={{
+                background: [
+                  "radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%)",
+                  "radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%)",
+                  "radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%)",
+                ][i],
+              }}
+              initial={{
+                x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000),
+                y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1000),
+              }}
+              animate={{
+                x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000),
+                y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1000),
+              }}
+              transition={{
+                duration: 15 + Math.random() * 10,
+                repeat: Infinity,
+                repeatType: "reverse",
+                ease: "easeInOut",
+              }}
+            />
+          ))}
+        </div>
+      )}
 
-      {/* Floating particles with depth-based mouse interaction */}
+      {/* Particles */}
       <div className="fixed inset-0 pointer-events-none">
         {particles.map((particle) => (
           <motion.div
@@ -159,20 +153,6 @@ export default function BackgroundLayout({ children }: BackgroundLayoutProps) {
               height: particle.size,
               left: `${particle.x}%`,
               top: `${particle.y}%`,
-              x: useTransform(particleX, (x) => x * particle.depth),
-              y: useTransform(particleY, (y) => y * particle.depth),
-              scale: useTransform(
-                [smoothMouseX, smoothMouseY],
-                ([x, y]: number[]) => {
-                  const centerX = window.innerWidth / 2;
-                  const centerY = window.innerHeight / 2;
-                  const distance = Math.sqrt(
-                    (x - centerX) ** 2 + (y - centerY) ** 2
-                  );
-                  const maxDistance = Math.sqrt(centerX ** 2 + centerY ** 2);
-                  return 0.8 + (distance / maxDistance) * 0.4 * particle.depth;
-                }
-              ),
             }}
             animate={{
               y: [0, -100, 0],
@@ -189,44 +169,30 @@ export default function BackgroundLayout({ children }: BackgroundLayoutProps) {
         ))}
       </div>
 
-      {/* Educational pattern overlay with 3D tilt */}
-      <motion.div
-        className="fixed inset-0 pointer-events-none"
-        style={{
-          rotateX: rotateX1,
-          rotateY: rotateY1,
-          transformStyle: "preserve-3d",
-        }}
-      >
-        <div className="absolute inset-0 bg-gradient-to-br from-white/8 via-transparent to-white/8" />
-        <div
-          className="absolute inset-0 opacity-20 mix-blend-overlay"
+      {/* Educational pattern - only on desktop */}
+      {!isMobile && (
+        <motion.div
+          className="fixed inset-0 pointer-events-none"
           style={{
-            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3Cpattern id='educational' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3C!-- Book icon --%3E%3Crect x='6' y='8' width='12' height='15' fill='none' stroke='white' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='8' y1='12' x2='16' y2='12' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3Cline x1='8' y1='15' x2='16' y2='15' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3Cline x1='8' y1='18' x2='14' y2='18' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3C!-- Graduation cap --%3E%3Cpolygon points='24,6 32,9 24,12 16,9' fill='none' stroke='white' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='32' y1='9' x2='32' y2='15' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3Ccircle cx='32' cy='15' r='1.2' fill='white' opacity='0.25'/%3E%3C!-- Pencil --%3E%3Cline x1='2' y1='28' x2='12' y2='38' stroke='white' stroke-width='1' opacity='0.4'/%3E%3Cpolygon points='1,27 4,30 2,32 0,29' fill='white' opacity='0.3'/%3E%3C!-- Mathematical symbols --%3E%3Ctext x='26' y='32' font-family='serif' font-size='6' fill='white' opacity='0.25'%3E∑%3C/text%3E%3Ctext x='6' y='32' font-family='serif' font-size='5' fill='white' opacity='0.25'%3Eπ%3C/text%3E%3Ctext x='32' y='25' font-family='serif' font-size='4' fill='white' opacity='0.2'%3E∫%3C/text%3E%3C!-- Note/document --%3E%3Crect x='22' y='24' width='10' height='12' fill='none' stroke='white' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='24' y1='27' x2='30' y2='27' stroke='white' stroke-width='0.4' opacity='0.3'/%3E%3Cline x1='24' y1='30' x2='30' y2='30' stroke='white' stroke-width='0.4' opacity='0.3'/%3E%3Cline x1='24' y1='33' x2='28' y2='33' stroke='white' stroke-width='0.4' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23educational)'/%3E%3C/svg%3E")`,
+            rotateX: rotateX1,
+            rotateY: rotateY1,
+            transformStyle: "preserve-3d",
           }}
-        />
-      </motion.div>
+        >
+          <div className="absolute inset-0 bg-gradient-to-br from-white/8 via-transparent to-white/8" />
+          <div
+            className="absolute inset-0 opacity-20 mix-blend-overlay"
+            style={{
+              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3Cpattern id='educational' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Crect x='6' y='8' width='12' height='15' fill='none' stroke='white' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='8' y1='12' x2='16' y2='12' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3Cline x1='8' y1='15' x2='16' y2='15' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3Cline x1='8' y1='18' x2='14' y2='18' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3Cpolygon points='24,6 32,9 24,12 16,9' fill='none' stroke='white' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='32' y1='9' x2='32' y2='15' stroke='white' stroke-width='0.6' opacity='0.3'/%3E%3Ccircle cx='32' cy='15' r='1.2' fill='white' opacity='0.25'/%3E%3Cline x1='2' y1='28' x2='12' y2='38' stroke='white' stroke-width='1' opacity='0.4'/%3E%3Cpolygon points='1,27 4,30 2,32 0,29' fill='white' opacity='0.3'/%3E%3Ctext x='26' y='32' font-family='serif' font-size='6' fill='white' opacity='0.25'%3E∑%3C/text%3E%3Ctext x='6' y='32' font-family='serif' font-size='5' fill='white' opacity='0.25'%3Eπ%3C/text%3E%3Ctext x='32' y='25' font-family='serif' font-size='4' fill='white' opacity='0.2'%3E∫%3C/text%3E%3Crect x='22' y='24' width='10' height='12' fill='none' stroke='white' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='24' y1='27' x2='30' y2='27' stroke='white' stroke-width='0.4' opacity='0.3'/%3E%3Cline x1='24' y1='30' x2='30' y2='30' stroke='white' stroke-width='0.4' opacity='0.3'/%3E%3Cline x1='24' y1='33' x2='28' y2='33' stroke='white' stroke-width='0.4' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23educational)'/%3E%3C/svg%3E")`,
+            }}
+          />
+        </motion.div>
+      )}
 
-      {/* Ambient glow effects with mouse interaction */}
+      {/* Ambient glows */}
       <div className="fixed inset-0 pointer-events-none">
         <motion.div
           className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"
-          style={{
-            x: useTransform(orbX, (x) => x * 0.3),
-            y: useTransform(orbY, (y) => y * 0.3),
-            scale: useTransform(
-              [smoothMouseX, smoothMouseY],
-              ([x, y]: number[]) => {
-                const centerX = window.innerWidth / 2;
-                const centerY = window.innerHeight / 2;
-                const distance = Math.sqrt(
-                  (x - centerX) ** 2 + (y - centerY) ** 2
-                );
-                const maxDistance = Math.sqrt(centerX ** 2 + centerY ** 2);
-                return 1 + (distance / maxDistance) * 0.5;
-              }
-            ),
-          }}
           animate={{
             scale: [1, 1.2, 1],
             opacity: [0.1, 0.2, 0.1],
@@ -237,80 +203,59 @@ export default function BackgroundLayout({ children }: BackgroundLayoutProps) {
             ease: "easeInOut",
           }}
         />
-        <motion.div
-          className="absolute top-3/4 right-1/4 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"
-          style={{
-            x: useTransform(orbX, (x) => x * -0.4),
-            y: useTransform(orbY, (y) => y * -0.4),
-            scale: useTransform([smoothMouseX, smoothMouseY], ([x, y]) => {
-              const centerX = window.innerWidth / 2;
-              const centerY = window.innerHeight / 2;
-              const distance = Math.sqrt(
-                ((x as number) - centerX) ** 2 + ((y as number) - centerY) ** 2
-              );
-              const maxDistance = Math.sqrt(centerX ** 2 + centerY ** 2);
-              return 1.2 - (distance / maxDistance) * 0.4;
-            }),
-          }}
-          animate={{
-            scale: [1.2, 1, 1.2],
-            opacity: [0.2, 0.1, 0.2],
-          }}
-          transition={{
-            duration: 8,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 3,
-          }}
-        />
-        <motion.div
-          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-cyan-400/10 rounded-full blur-3xl"
-          style={{
-            x: useTransform(orbX, (x) => x * 0.2),
-            y: useTransform(orbY, (y) => y * 0.2),
-            rotateX: rotateX2,
-            rotateY: rotateY2,
-          }}
-          animate={{
-            scale: [1, 1.3, 1],
-            opacity: [0.15, 0.25, 0.15],
-          }}
-          transition={{
-            duration: 10,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 1.5,
-          }}
-        />
+        {!isMobile && (
+          <>
+            <motion.div
+              className="absolute top-3/4 right-1/4 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"
+              animate={{
+                scale: [1.2, 1, 1.2],
+                opacity: [0.2, 0.1, 0.2],
+              }}
+              transition={{
+                duration: 8,
+                repeat: Infinity,
+                ease: "easeInOut",
+                delay: 3,
+              }}
+            />
+            <motion.div
+              className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-cyan-400/10 rounded-full blur-3xl"
+              animate={{
+                scale: [1, 1.3, 1],
+                opacity: [0.15, 0.25, 0.15],
+              }}
+              transition={{
+                duration: 10,
+                repeat: Infinity,
+                ease: "easeInOut",
+                delay: 1.5,
+              }}
+            />
+          </>
+        )}
       </div>
 
-      {/* Subtle noise texture for depth with 3D tilt */}
-      <motion.div
-        className="fixed inset-0 pointer-events-none"
-        style={{
-          rotateX: rotateX1,
-          rotateY: rotateY1,
-          transformStyle: "preserve-3d",
-        }}
-      >
-        <div
-          className="absolute inset-0 opacity-[0.03] mix-blend-soft-light"
+      {/* Noise texture - only on desktop */}
+      {!isMobile && (
+        <motion.div
+          className="fixed inset-0 pointer-events-none"
           style={{
-            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+            rotateX: rotateX1,
+            rotateY: rotateY1,
+            transformStyle: "preserve-3d",
           }}
-        />
-      </motion.div>
+        >
+          <div
+            className="absolute inset-0 opacity-[0.03] mix-blend-soft-light"
+            style={{
+              backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+            }}
+          />
+        </motion.div>
+      )}
 
-      {/* Academic grid pattern with subtle 3D movement */}
-      <motion.div
-        className="fixed inset-0 pointer-events-none"
-        style={{
-          x: useTransform(particleX, (x) => x * 0.1),
-          y: useTransform(particleY, (y) => y * 0.1),
-          rotateX: rotateX1,
-          rotateY: rotateY1,
-        }}
-      >
+      {/* Grid pattern */}
+      <div className="fixed inset-0 pointer-events-none">
         <div
           className="absolute inset-0 opacity-5"
           style={{
@@ -321,112 +266,48 @@ export default function BackgroundLayout({ children }: BackgroundLayoutProps) {
             backgroundSize: "50px 50px",
           }}
         />
-      </motion.div>
-
-      {/* Floating academic icons with enhanced 3D interaction */}
-      <div className="fixed inset-0 pointer-events-none overflow-hidden">
-        {[...Array(8)].map((_, i) => (
-          <motion.div
-            key={`academic-${i}`}
-            className="absolute text-white/25 drop-shadow-lg"
-            style={{
-              fontSize: `${40 + Math.random() * 30}px`,
-              textShadow: "0 0 20px rgba(255,255,255,0.3)",
-            }}
-            initial={{
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-              rotate: Math.random() * 360,
-            }}
-            animate={{
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-              rotate: Math.random() * 360,
-            }}
-            transition={{
-              duration: 15 + Math.random() * 25,
-              repeat: Infinity,
-              repeatType: "reverse",
-              ease: "easeInOut",
-            }}
-          >
-            {["📝", "📄", "📋", "📝", "📄", "📋", "📝", "📄"][i]}
-          </motion.div>
-        ))}
-      </div>
-
-      {/* Interactive depth indicators (subtle visual cues) */}
-      <div className="fixed inset-0 pointer-events-none">
-        {[...Array(12)].map((_, i) => (
-          <motion.div
-            key={`depth-${i}`}
-            className="absolute w-1 h-1 bg-white/20 rounded-full"
-            style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
-              x: useTransform(particleX, (x) => x * (i + 1) * 0.05),
-              y: useTransform(particleY, (y) => y * (i + 1) * 0.05),
-              scale: useTransform(
-                [smoothMouseX, smoothMouseY],
-                ([x, y]: number[]) => {
-                  const centerX = window.innerWidth / 2;
-                  const centerY = window.innerHeight / 2;
-                  const distance = Math.sqrt(
-                    (x - centerX) ** 2 + (y - centerY) ** 2
-                  );
-                  const maxDistance = Math.sqrt(centerX ** 2 + centerY ** 2);
-                  return 0.5 + (distance / maxDistance) * 1.5;
-                }
-              ),
-              opacity: useTransform(
-                [smoothMouseX, smoothMouseY],
-                ([x, y]: number[]) => {
-                  const centerX = window.innerWidth / 2;
-                  const centerY = window.innerHeight / 2;
-                  const distance = Math.sqrt(
-                    (x - centerX) ** 2 + (y - centerY) ** 2
-                  );
-                  const maxDistance = Math.sqrt(centerX ** 2 + centerY ** 2);
-                  return 0.1 + (distance / maxDistance) * 0.4;
-                }
-              ),
-            }}
-            animate={{
-              scale: [0.5, 1, 0.5],
-              opacity: [0.1, 0.4, 0.1],
-            }}
-            transition={{
-              duration: 3 + Math.random() * 4,
-              repeat: Infinity,
-              ease: "easeInOut",
-              delay: Math.random() * 5,
-            }}
-          />
-        ))}
       </div>
 
-      {/* Mouse follower (subtle cursor enhancement) */}
-      <motion.div
-        className="fixed pointer-events-none w-6 h-6 bg-white/20 rounded-full blur-sm mix-blend-screen"
-        style={{
-          x: useTransform(smoothMouseX, (x) => x - 12),
-          y: useTransform(smoothMouseY, (y) => y - 12),
-          scale: useTransform(
-            [smoothMouseX, smoothMouseY],
-            ([x, y]: number[]) => {
-              const velocity = Math.sqrt(x ** 2 + y ** 2);
-              return Math.min(1 + velocity * 0.0001, 2);
-            }
-          ),
-        }}
-      />
+      {/* Floating icons - reduced for mobile */}
+      {!isMobile && (
+        <div className="fixed inset-0 pointer-events-none overflow-hidden">
+          {[...Array(4)].map((_, i) => (
+            <motion.div
+              key={`academic-${i}`}
+              className="absolute text-white/25 drop-shadow-lg"
+              style={{
+                fontSize: `${40 + Math.random() * 30}px`,
+                textShadow: "0 0 20px rgba(255,255,255,0.3)",
+              }}
+              initial={{
+                x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000),
+                y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1000),
+                rotate: Math.random() * 360,
+              }}
+              animate={{
+                x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000),
+                y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1000),
+                rotate: Math.random() * 360,
+              }}
+              transition={{
+                duration: 15 + Math.random() * 25,
+                repeat: Infinity,
+                repeatType: "reverse",
+                ease: "easeInOut",
+              }}
+            >
+              {["📝", "📄", "📋", "📝"][i]}
+            </motion.div>
+          ))}
+        </div>
+      )}
 
-      {/* Content container with enhanced backdrop and 3D interaction */}
+      {/* Content container */}
       <motion.div
         className="relative min-h-screen"
-        style={{
-          rotateX: useTransform(rotateX1, (rot) => rot * 0.1),
-          rotateY: useTransform(rotateY1, (rot) => rot * 0.1),
+        style={isMobile ? {} : {
+          rotateX: contentRotateX,
+          rotateY: contentRotateY,
           transformStyle: "preserve-3d",
         }}
       >
@@ -436,4 +317,4 @@ export default function BackgroundLayout({ children }: BackgroundLayoutProps) {
       </motion.div>
     </div>
   );
-}
+}
\ No newline at end of file