Add about us page mobile shapes background

components/ShapesBackground.tsx

@@ -59,3 +59,31 @@ function Shape(props: { type: ShapeType; style: CSSProperties }) {
     />
   );
 }
+
+export const mobileShapesConfig = {
+  dots: [
+    {
+      top: "calc(-6rem / 16)",
+      left: "calc(-95rem / 16)",
+      width: "calc(166rem / 16)",
+      height: "calc(150rem / 16)",
+    },
+  ],
+  hash: [
+    {
+      top: "calc(88rem / 16)",
+      right: "15vw",
+      width: "calc(40rem / 16)",
+      height: "calc(40rem / 16)",
+    },
+  ],
+  triangle: [
+    {
+      top: "calc(20rem / 16)",
+      right: "1vw",
+      width: "calc(45rem / 16)",
+      height: "calc(45rem / 16)",
+      transform: "rotate(17deg)",
+    },
+  ],
+};

pages/about/index.tsx

@@ -4,7 +4,10 @@ import { ConnectWithUs } from "@/components/ConnectWithUs";
 import { DefaultLayout } from "@/components/DefaultLayout";
 import { EmailSignup } from "@/components/EmailSignup";
 import { Image } from "@/components/Image";
-import { GetShapesConfig } from "@/components/ShapesBackground";
+import {
+  GetShapesConfig,
+  mobileShapesConfig,
+} from "@/components/ShapesBackground";
 
 import Content from "../../content/about/index.mdx";
 
@@ -106,5 +109,8 @@ AboutUs.getShapesConfig = (() => {
     ],
   };
 
+  if (window.innerWidth <= 768) {
+    return mobileShapesConfig;
+  }
   return desktopConfig;
 }) as GetShapesConfig;