feat: CSS equivalent of grid-dark image

src/components/shared/Footer.tsx

@@ -7,13 +7,11 @@ 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"
-      />
-      <TailcallLogo className="w-[120px] h-10" />
+    <footer
+      className="bg-tailCall-dark-700 grid-dark 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 z-10" />
       <div className="text-content-tiny sm:text-title-small space-x-SPACE_06 text-tailCall-light-500 z-10">
         <Link
           href={pageLinks.docs}

src/css/custom.css

@@ -618,3 +618,43 @@ span.token.tag.script.language-javascript {
   background-origin: border-box;
   background-clip: padding-box, border-box;
 }
+
+.grid-dark {
+  position: relative;
+  width: 100%;
+}
+
+.grid-dark::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.08),
+      rgba(255, 255, 255, 0.08) 0.5px,
+      transparent 1px,
+      transparent 27px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.08),
+      rgba(255, 255, 255, 0.08) 0.5px,
+      transparent 1px,
+      transparent 70px
+    );
+  z-index: 0;
+}
+
+.grid-dark::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.8) 50%);
+  z-index: 1;
+}