more cleanup

frontend/src/components/listing/ListingLoadingSkeleton.tsx

@@ -4,35 +4,35 @@ const ListingLoadingSkeleton = () => {
       {/* Left side - Image section */}
       <div className="w-full lg:w-1/2 relative flex gap-4">
         {/* Main image skeleton */}
-        <div className="flex-1 aspect-square bg-gray-200 rounded-lg animate-pulse" />
+        <div className="flex-1 aspect-square bg-gray-400 rounded-lg animate-pulse" />
       </div>
 
       {/* Right side - Content section */}
       <div className="w-full lg:w-1/2">
         {/* Title skeleton */}
         <div className="py-4 md:py-8">
-          <div className="h-8 bg-gray-200 rounded-full w-3/4 mb-4 animate-pulse" />
+          <div className="h-8 bg-gray-400 rounded-full w-3/4 mb-4 animate-pulse" />
         </div>
 
-        <div className="h-[1px] bg-gray-200 w-full mb-4" />
+        <div className="h-[1px] bg-gray-400 w-full mb-4" />
 
         {/* Creator info skeleton */}
         <div className="py-4 md:py-8">
-          <div className="h-6 bg-gray-200 rounded-full w-1/2 mb-2 animate-pulse" />
+          <div className="h-6 bg-gray-400 rounded-full w-1/2 mb-2 animate-pulse" />
           <div className="flex gap-4 mt-2">
-            <div className="h-4 bg-gray-200 rounded-full w-24 animate-pulse" />
-            <div className="h-4 bg-gray-200 rounded-full w-32 animate-pulse" />
+            <div className="h-4 bg-gray-400 rounded-full w-24 animate-pulse" />
+            <div className="h-4 bg-gray-400 rounded-full w-32 animate-pulse" />
           </div>
         </div>
 
-        <div className="h-[1px] bg-gray-200 w-full mb-4" />
+        <div className="h-[1px] bg-gray-400 w-full mb-4" />
 
         {/* Description skeleton */}
         <div className="py-8 space-y-4">
-          <div className="h-4 bg-gray-200 rounded-full w-full animate-pulse" />
-          <div className="h-4 bg-gray-200 rounded-full w-5/6 animate-pulse" />
-          <div className="h-4 bg-gray-200 rounded-full w-4/6 animate-pulse" />
-          <div className="h-4 bg-gray-200 rounded-full w-5/6 animate-pulse" />
+          <div className="h-4 bg-gray-400 rounded-full w-full animate-pulse" />
+          <div className="h-4 bg-gray-400 rounded-full w-5/6 animate-pulse" />
+          <div className="h-4 bg-gray-400 rounded-full w-4/6 animate-pulse" />
+          <div className="h-4 bg-gray-400 rounded-full w-5/6 animate-pulse" />
         </div>
       </div>
     </div>

frontend/src/components/listings/ListingGridCard.tsx

@@ -27,13 +27,25 @@ const ListingGridCard = ({
       <div className="relative pb-[100%]">
         {listing?.artifacts[0]?.artifact_type === "image" &&
         listing?.artifacts[0]?.urls.small ? (
-          <img
-            src={listing.artifacts[0].urls.small}
-            alt={listing.name}
-            className="absolute top-0 left-0 w-full h-full object-cover"
-          />
+          <div className="absolute top-0 left-0 w-full h-full p-2">
+            <img
+              src={listing.artifacts[0].urls.small}
+              alt={listing.name}
+              className="rounded-xl object-cover w-full h-full"
+            />
+          </div>
         ) : (
-          <div className="absolute top-0 left-0 w-full h-full" />
+          <div className="absolute top-0 left-0 w-full h-full p-2">
+            <svg
+              className="w-full h-full rounded-xl text-gray-700 bg-gray-900"
+              xmlns="http://www.w3.org/2000/svg"
+              preserveAspectRatio="none"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </div>
         )}
       </div>
       <div className="p-3 flex-grow flex flex-col justify-between">

frontend/src/components/listings/ListingGridSkeleton.tsx

@@ -1,9 +1,6 @@
 const ListingGridSkeleton = () => {
   return (
-    <div
-      role="status"
-      className="p-4 border border-gray-800 rounded shadow animate-pulse"
-    >
+    <div role="status" className="p-4 rounded animate-pulse">
       <div className="flex items-center justify-center h-48 mb-4 bg-gray-800 rounded">
         <svg
           className="w-10 h-10 text-gray-200"

frontend/src/components/nav/Navbar.tsx

@@ -31,8 +31,8 @@ const Navbar = () => {
   return (
     <>
       <nav className="fixed w-full z-50 top-0 start-0 bg-background border-b border-gray-1/10">
-        <div className="relative flex justify-between py-3 mx-4 sm:mx-6 md:mx-10 xl:mx-16 2xl:mx-28 font-mono">
-          <div className="flex justify-between w-full lg:w-auto gap-3">
+        <div className="relative flex items-center justify-between py-3 mx-4 sm:mx-6 md:mx-10 xl:mx-16 2xl:mx-28 font-mono">
+          <div className="flex items-center justify-between w-full lg:w-auto gap-3">
             <Link
               to={ROUTES.HOME.path}
               className="flex items-center lg:flex-grow-0 bg-black border border-gray-1 p-2"
@@ -42,7 +42,7 @@ const Navbar = () => {
             <Button
               onClick={() => setShowSidebar(true)}
               variant="ghost"
-              className="lg:hidden text-gray-1 p-4 text-sm"
+              className="lg:hidden text-gray-1 p-2 text-sm flex items-center"
             >
               <FaBars size={20} />
             </Button>

frontend/src/components/pages/About.tsx

@@ -1,8 +1,9 @@
-import PageHeader from "../ui/PageHeader";
+import PageHeader from "@/components/ui/PageHeader";
+import Container from "@/components/ui/container";
 
 const About = () => {
   return (
-    <div className="container mx-auto px-4">
+    <Container>
       <div className="text-center bg-gray-12 text-gray-1 rounded-lg p-8">
         <h1 className="text-4xl font-bold mb-4">K-Scale Labs</h1>
 
@@ -89,7 +90,7 @@ const About = () => {
           </div>
         </footer>
       </div>
-    </div>
+    </Container>
   );
 };
 

frontend/src/components/pages/Home.tsx

@@ -31,10 +31,10 @@ const Home: React.FC = () => {
 
 const HeroSection: React.FC = () => {
   return (
-    <section className="relative overflow-hidden h-[80vh] md:h-[40vh] rounded-lg">
+    <section className="relative overflow-hidden h-[40vh] rounded-lg">
       <PageHeader>
         <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black border border-gray-500 rounded-lg p-4">
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-1">
+          <h1 className="text-2xl sm:text-4xl md:text-6xl font-bold text-gray-1">
             K-Scale Labs
           </h1>
           <p className="text-gray-400 mt-2">

frontend/src/components/pages/PrivacyPolicy.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 
+import Container from "@/components/ui/container";
+
 const PrivacyPolicy: React.FC = () => {
   return (
-    <div className="container mx-auto px-4 py-8">
+    <Container>
       <h1 className="text-3xl font-bold mb-2">Privacy Policy</h1>
       <p className="mb-4 text-sm text-gray-600">
         Last updated {new Date().toLocaleDateString()}
@@ -54,7 +56,7 @@ const PrivacyPolicy: React.FC = () => {
       <p className="mt-8 text-sm text-gray-600">
         © 2024 K-Scale Labs. All Rights Reserved.
       </p>
-    </div>
+    </Container>
   );
 };
 

frontend/src/components/pages/TermsOfService.tsx

@@ -1,6 +1,8 @@
+import Container from "@/components/ui/container";
+
 const TermsOfService = () => {
   return (
-    <div className="container mx-auto px-4 py-8">
+    <Container>
       <h1 className="text-3xl font-bold mb-2">Terms of Service</h1>
       <p className="mb-4 text-sm text-gray-600">
         Last updated {new Date().toLocaleDateString()}
@@ -231,7 +233,7 @@ const TermsOfService = () => {
       <p className="mt-8 text-sm text-gray-600">
         © 2024 K-Scale Labs. All Rights Reserved.
       </p>
-    </div>
+    </Container>
   );
 };
 

frontend/src/components/ui/PageHeader.tsx

@@ -19,6 +19,9 @@ const PageHeader = ({ children }: Props) => {
   const fakeMouseAngleRef = useRef(0);
   const isRealMouseActiveRef = useRef(false);
 
+  const isMobile = window.innerWidth < 600;
+  const cellSize = isMobile ? 3 : 5;
+
   // Initialize grid with R-pentomino pattern and random points
   const initializeGrid = useCallback((rows: number, cols: number) => {
     const grid = Array(rows)
@@ -42,14 +45,32 @@ const PageHeader = ({ children }: Props) => {
       });
     });
 
-    // Add random points (1% of cells)
-    const numberOfRandomPoints = Math.floor(cols * rows * 0.01);
+    // Add more random points (10% of cells)
+    const numberOfRandomPoints = Math.floor(cols * rows * 0.1);
     for (let i = 0; i < numberOfRandomPoints; i++) {
       const randomX = Math.floor(Math.random() * cols);
       const randomY = Math.floor(Math.random() * rows);
       grid[randomY][randomX] = true;
     }
 
+    // Add additional clusters of points
+    const numberOfClusters = Math.floor((cols * rows) / 2000);
+    for (let i = 0; i < numberOfClusters; i++) {
+      const clusterX = Math.floor(Math.random() * cols);
+      const clusterY = Math.floor(Math.random() * rows);
+      const clusterSize = Math.floor(Math.random() * 5) + 3;
+
+      for (let dy = -clusterSize; dy <= clusterSize; dy++) {
+        for (let dx = -clusterSize; dx <= clusterSize; dx++) {
+          if (Math.random() < 0.4) {
+            const x = (clusterX + dx + cols) % cols;
+            const y = (clusterY + dy + rows) % rows;
+            grid[y][x] = true;
+          }
+        }
+      }
+    }
+
     return grid;
   }, []);
 
@@ -170,22 +191,30 @@ const PageHeader = ({ children }: Props) => {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    // Responsive cell size
-    const isMobile = window.innerWidth < 600;
-    const cellSize = isMobile ? 3 : 5;
+    // Move canvas setup into a separate function
+    const setupCanvas = () => {
+      const containerWidth =
+        canvas.parentElement?.clientWidth || window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const cols = Math.floor(containerWidth / cellSize);
+      const rows = Math.floor((viewportHeight * 0.4) / cellSize);
+
+      canvas.width = cols * cellSize;
+      canvas.height = rows * cellSize;
 
-    // Set canvas size
-    const containerWidth =
-      canvas.parentElement?.clientWidth || window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const cols = Math.floor(containerWidth / cellSize);
-    const rows = Math.floor((viewportHeight * 0.4) / cellSize);
+      // Reinitialize grid when canvas is resized
+      gridRef.current = initializeGrid(rows, cols);
+    };
 
-    canvas.width = cols * cellSize;
-    canvas.height = rows * cellSize;
+    // Initial setup
+    setupCanvas();
+
+    // Add resize handler
+    const handleResize = () => {
+      setupCanvas();
+    };
 
-    // Initialize grid
-    gridRef.current = initializeGrid(rows, cols);
+    window.addEventListener("resize", handleResize);
 
     const animate = () => {
       // Draw current state
@@ -210,7 +239,7 @@ const PageHeader = ({ children }: Props) => {
       if (!isRealMouseActiveRef.current) {
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
-        const radiusX = Math.min(canvas.width * 0.33, 200);
+        const radiusX = Math.min(canvas.width * 0.45, 400);
         const radiusY = Math.min(canvas.height * 0.3, 100);
 
         targetPosRef.current = {
@@ -292,12 +321,13 @@ const PageHeader = ({ children }: Props) => {
       }
       canvas.removeEventListener("pointermove", handlePointerMove);
       canvas.removeEventListener("pointerleave", handlePointerLeave);
+      window.removeEventListener("resize", handleResize); // Clean up resize listener
     };
   }, [initializeGrid, updateGrid, clearLineBetweenPoints]);
 
   return (
-    <div className="relative w-full h-[40vh] overflow-hidden">
-      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
+    <div className="relative overflow-hidden h-full w-full">
+      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
       {children}
     </div>
   );