Changed the navbar

app/components/Hero.tsx

@@ -1,15 +1,39 @@
 "use client";
 
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, useState } from "react";
 import Link from "next/link";
 import gsap from "gsap";
 
-const GRID_COLS = 20;
-const GRID_ROWS = 12;
+function useGridSize() {
+  const [gridSize, setGridSize] = useState({ cols: 20, rows: 12 });
+
+  useEffect(() => {
+    const updateGridSize = () => {
+      const width = window.innerWidth;
+      if (width < 640) {
+        // Mobile
+        setGridSize({ cols: 8, rows: 10 });
+      } else if (width < 1024) {
+        // Tablet
+        setGridSize({ cols: 12, rows: 10 });
+      } else {
+        // Desktop
+        setGridSize({ cols: 20, rows: 12 });
+      }
+    };
+
+    updateGridSize();
+    window.addEventListener("resize", updateGridSize);
+    return () => window.removeEventListener("resize", updateGridSize);
+  }, []);
+
+  return gridSize;
+}
 
 function TileGrid() {
   const gridRef = useRef<HTMLDivElement>(null);
   const tilesRef = useRef<(HTMLDivElement | null)[]>([]);
+  const { cols, rows } = useGridSize();
 
   const handleMouseEnter = useCallback((index: number) => {
     const tile = tilesRef.current[index];
@@ -37,16 +61,21 @@ function TileGrid() {
     }
   }, []);
 
+  // Reset refs array when grid size changes
+  useEffect(() => {
+    tilesRef.current = [];
+  }, [cols, rows]);
+
   return (
     <div
       ref={gridRef}
       className="absolute inset-0 grid z-0"
       style={{
-        gridTemplateColumns: `repeat(${GRID_COLS}, 1fr)`,
-        gridTemplateRows: `repeat(${GRID_ROWS}, 1fr)`,
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, 1fr)`,
       }}
     >
-      {Array.from({ length: GRID_COLS * GRID_ROWS }).map((_, index) => (
+      {Array.from({ length: cols * rows }).map((_, index) => (
         <div
           key={index}
           onMouseEnter={() => handleMouseEnter(index)}