drop grid image

src/components/shared/Footer.tsx

@@ -7,12 +7,7 @@ import {pageLinks} from "@site/src/constants/routes"
 const Footer = (): JSX.Element => {
   const year = new Date().getFullYear()
   return (
-    <footer className="bg-tailCall-dark-700 pt-SPACE_10 pb-SPACE_05 flex flex-col items-center justify-center gap-SPACE_10 w-full relative px-SPACE_04">
-      <img
-        src={require("@site/static/images/about/grid-dark.png").default}
-        alt="grid background"
-        className="absolute inset-0 w-full h-full"
-      />
+    <footer className="bg-[#121212] grid-background-footer pt-SPACE_10 pb-SPACE_05 flex flex-col items-center justify-center gap-SPACE_10 w-full relative px-SPACE_04">
       <TailcallLogo className="w-[120px] h-10" />
       <div className="text-content-tiny sm:text-title-small space-x-SPACE_06 text-tailCall-light-500 z-10">
         <Link

src/css/custom.css

@@ -481,6 +481,32 @@ nav.menu {
   z-index: 1;
 }
 
+.grid-background-footer {
+  position: relative;
+  overflow: hidden; /* Ensure the grid doesn't extend beyond the container */
+}
+
+.grid-background-footer::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 150%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  background-size: 50px 20px;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 100%, black 100%);
+  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 50%);
+  z-index: 0;
+}
+
+.grid-background-footer > * {
+  position: relative;
+  z-index: 1;
+}
+
 @media (max-width: 996px) {
   .grid-bg-section {
     background-size: var(--ifm-grid-bg-size-md) var(--ifm-grid-bg-size-md);