design

components/TileGrid.tsx

@@ -12,25 +12,38 @@ export const TileGrid = () => {
 
   if (!mounted) return null;
 
+  const rows = 15;
+  const cols = 20;
+
   return (
-    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[5]">
-      {/* The lighting tiles (actual squares) */}
-      <div className="absolute inset-0 grid grid-cols-8 md:grid-cols-12 grid-rows-8 md:grid-rows-12">
-        {[...Array(144)].map((_, i) => (
-          <motion.div
-            key={i}
-            initial={{ opacity: 0 }}
-            animate={{ 
-              opacity: [0, Math.random() > 0.92 ? 0.4 : 0, 0],
+    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
+      <div className="flex flex-col gap-3 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
+        {[...Array(rows)].map((_, rowIndex) => (
+          <div 
+            key={rowIndex} 
+            className="flex gap-3 justify-center"
+            style={{ 
+              transform: rowIndex % 2 === 0 ? 'translateX(0)' : 'translateX(80px)',
             }}
-            transition={{ 
-              duration: 3 + Math.random() * 4, 
-              repeat: Infinity, 
-              delay: Math.random() * 10,
-              ease: "easeInOut"
-            }}
-            className="w-full h-full bg-accent/20 border border-accent/5"
-          />
+          >
+            {[...Array(cols)].map((_, colIndex) => (
+              <motion.div
+                key={`${rowIndex}-${colIndex}`}
+                initial={{ opacity: 0.05 }}
+                animate={{ 
+                  opacity: [0.05, Math.random() > 0.9 ? 0.25 : 0.05, 0.05],
+                  scale: [1, Math.random() > 0.9 ? 1.05 : 1, 1]
+                }}
+                transition={{ 
+                  duration: 5 + Math.random() * 5, 
+                  repeat: Infinity, 
+                  delay: Math.random() * 20,
+                  ease: "easeInOut"
+                }}
+                className="w-32 h-32 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0"
+              />
+            ))}
+          </div>
         ))}
       </div>
     </div>