Add get involved page shapes background

pages/get-involved.tsx

@@ -3,6 +3,10 @@ import React from "react";
 import { ConnectWithUs } from "@/components/ConnectWithUs";
 import { EmailSignup } from "@/components/EmailSignup";
 import { Image } from "@/components/Image";
+import {
+  GetShapesConfig,
+  mobileShapesConfig,
+} from "@/components/ShapesBackground";
 
 import Content from "../content/get-involved.mdx";
 
@@ -33,3 +37,63 @@ export default function GetInvolved() {
     </div>
   );
 }
+
+GetInvolved.getShapesConfig = (() => {
+  const desktopConfig = {
+    hash: [
+      {
+        top: "calc(860rem / 16)",
+        right: "90vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+        filter: "var(--teal)",
+        opacity: "30%",
+      },
+    ],
+    plus: [
+      {
+        top: "calc(540rem / 16)",
+        left: "90vw",
+        width: "calc(48rem / 16)",
+        height: "calc(48rem / 16)",
+        filter: "var(--teal)",
+        opacity: "30%",
+      },
+    ],
+    triangle: [
+      {
+        top: "calc(280rem / 16)",
+        right: "86vw",
+        width: "calc(68rem / 16)",
+        height: "calc(68rem / 16)",
+        transform: "rotate(-26deg)",
+        filter: "var(--teal)",
+        opacity: "30%",
+      },
+    ],
+    waves: [
+      {
+        bottom: "calc(580rem / 16)",
+        left: "88vw",
+        width: "calc(116rem / 16)",
+        height: "calc(58rem / 16)",
+        filter: "var(--teal)",
+        opacity: "30%",
+      },
+    ],
+    wavesBig: [
+      {
+        top: "0",
+        right: "89vw",
+        width: "calc(234rem / 16)",
+        height: "calc(115rem / 16)",
+        transform: "scaleX(-1)",
+      },
+    ],
+  };
+
+  if (window.innerWidth <= 768) {
+    return mobileShapesConfig;
+  }
+  return desktopConfig;
+}) as GetShapesConfig;