Changed the navbar

app/(pages)/layout.tsx

@@ -0,0 +1,16 @@
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+
+export default function PagesLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+}

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;
+function useGridSize() {
-const GRID_ROWS = 12;
+  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)`,
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
-        gridTemplateRows: `repeat(${GRID_ROWS}, 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)}

app/components/Navbar.tsx

@@ -18,9 +18,9 @@ export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-200">
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800">
       {/* Announcement Bar */}
-      <div className="bg-black text-white overflow-hidden">
+      <div className="bg-lime-400 text-black overflow-hidden">
         <div className="whitespace-nowrap py-2 text-xs tracking-widest flex">
 
           {/* Track */}
@@ -48,7 +48,7 @@ export default function Navbar() {
           {/* Logo */}
           <Link href="/" className="flex items-center gap-2 group">
             <Diamond className="w-6 h-6 text-lime-400 group-hover:rotate-12 transition-transform" />
-            <span className="text-xl font-bold tracking-tight">ARTSPLASH</span>
+            <span className="text-xl font-bold tracking-tight text-white">ARTSPLASH</span>
           </Link>
 
           {/* Desktop Navigation */}
@@ -57,7 +57,7 @@ export default function Navbar() {
               <Link
                 key={link.href}
                 href={link.href}
-                className="text-sm font-medium tracking-wide text-zinc-700 hover:text-black transition-colors relative group"
+                className="text-sm font-medium tracking-wide text-zinc-300 hover:text-white transition-colors relative group"
               >
                 {link.label}
                 <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-lime-400 group-hover:w-full transition-all duration-300" />
@@ -78,7 +78,7 @@ export default function Navbar() {
           {/* Mobile Menu Button */}
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="lg:hidden p-2 hover:bg-zinc-100 rounded-lg transition-colors"
+            className="lg:hidden p-2 hover:bg-zinc-800 rounded-lg transition-colors text-white"
             aria-label="Toggle menu"
           >
             {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
@@ -93,7 +93,7 @@ export default function Navbar() {
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
-            className="lg:hidden bg-white border-t border-zinc-200"
+            className="lg:hidden bg-zinc-950 border-t border-zinc-800"
           >
             <div className="px-4 py-6 space-y-4">
               {navLinks.map((link) => (
@@ -101,7 +101,7 @@ export default function Navbar() {
                   key={link.href}
                   href={link.href}
                   onClick={() => setIsOpen(false)}
-                  className="block text-lg font-medium text-zinc-700 hover:text-black hover:pl-2 transition-all"
+                  className="block text-lg font-medium text-zinc-300 hover:text-white hover:pl-2 transition-all"
                 >
                   {link.label}
                 </Link>

app/globals.css

@@ -1,8 +1,8 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  --background: #000000;
-  --foreground: #171717;
+  --foreground: #ffffff;
   --lime: #c5ff00;
 }
 
@@ -14,6 +14,12 @@
   --font-mono: var(--font-geist-mono);
 }
 
+html,
+body {
+  height: 100%;
+  min-height: 100vh;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
@@ -50,7 +56,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: #18181b;
 }
 
 ::-webkit-scrollbar-thumb {

app/layout.tsx

@@ -26,7 +26,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-black`}>
         {children}
       </body>
     </html>