fix: performance issues

components/TileGrid.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import React, { useEffect, useState } from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import React, { useEffect, useState } from "react";
+import { m } from "framer-motion";
 
 export const TileGrid = () => {
   const [mounted, setMounted] = useState(false);
@@ -12,42 +12,41 @@ export const TileGrid = () => {
 
   if (!mounted) return null;
 
-  const rows = 15;
-  const cols = 20;
+  const rows = 7;
+  const cols = 8;
 
   return (
     <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
-      <LazyMotion features={domAnimation}>
-      <div className="flex flex-col gap-3 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
+      <div className="flex flex-col gap-8 md:gap-12 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
         {[...Array(rows)].map((_, rowIndex) => (
           <div
             key={rowIndex}
-            className="flex gap-3 justify-center"
+            className="flex gap-8 md:gap-12 justify-center"
             style={{
-              transform: rowIndex % 2 === 0 ? 'translateX(0)' : 'translateX(80px)',
+              transform:
+                rowIndex % 2 === 0 ? "translateX(0)" : "translateX(100px)",
             }}
           >
             {[...Array(cols)].map((_, colIndex) => (
               <m.div
                 key={`${rowIndex}-${colIndex}`}
-                initial={{ opacity: 0.05 }}
+                initial={{ opacity: 0.03 }}
                 animate={{
-                  opacity: [0.05, Math.random() > 0.9 ? 0.25 : 0.05, 0.05],
-                  scale: [1, Math.random() > 0.9 ? 1.05 : 1, 1]
+                  opacity: [0.03, Math.random() > 0.8 ? 0.15 : 0.03, 0.03],
+                  scale: [1, Math.random() > 0.8 ? 1.02 : 1, 1],
                 }}
                 transition={{
-                  duration: 5 + Math.random() * 5,
+                  duration: 8 + Math.random() * 8,
                   repeat: Infinity,
-                  delay: Math.random() * 20,
-                  ease: "easeInOut"
+                  delay: Math.random() * 15,
+                  ease: "easeInOut",
                 }}
-                className="w-24 h-24 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-2xl md:rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0"
+                className="w-32 h-32 md:w-56 md:h-56 bg-white/5 rounded-3xl md:rounded-[3rem] border border-white/10 shadow-[0_8px_32px_0_rgba(31,38,135,0.03)] shrink-0 will-change-transform"
               />
             ))}
           </div>
         ))}
       </div>
-      </LazyMotion>
     </div>
   );
 };