components/ShapesBackground.tsx

@@ -41,6 +41,7 @@ export type ShapeType =
   | "plus"
   | "ring"
   | "triangle"
+  | "triangleBig"
   | "waves"
   | "waveBig";
 
@@ -60,6 +61,7 @@ function Shape(props: { type: ShapeType; style: CSSProperties }) {
   );
 }
 
+// Used for most mobile pages
 export const mobileShapesConfig = {
   dots: [
     {
@@ -87,3 +89,33 @@ export const mobileShapesConfig = {
     },
   ],
 };
+
+// Used for Constitution, Code of Conduct, and Our Supporters desktop pages
+export const aboutShapesConfig = {
+  cross: [
+    {
+      top: "calc(400rem / 16)",
+      right: "90vw",
+      width: "calc(225rem / 16)",
+      height: "calc(225rem / 16)",
+      transform: "rotate(30deg)",
+    },
+  ],
+  triangleBig: [
+    {
+      bottom: "calc(120rem / 16)",
+      left: "91vw",
+      width: "calc(138rem / 16)",
+      height: "calc(138rem / 16)",
+      transform: "rotate(-25deg)",
+    },
+  ],
+  wavesBig: [
+    {
+      top: "calc(-32rem / 16)",
+      left: "88vw",
+      width: "calc(296rem / 16)",
+      height: "calc(254rem / 16)",
+    },
+  ],
+};

pages/about/our-supporters.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 
 import { Image } from "@/components/Image";
+import {
+  GetShapesConfig,
+  aboutShapesConfig,
+  mobileShapesConfig,
+} from "@/components/ShapesBackground";
 
 import Content from "../../content/about/our-supporters.mdx";
 
@@ -19,3 +24,10 @@ export default function OurSupporters() {
     </>
   );
 }
+
+OurSupporters.getShapesConfig = (() => {
+  if (window.innerWidth <= 768) {
+    return mobileShapesConfig;
+  }
+  return aboutShapesConfig;
+}) as GetShapesConfig;

public/images/shapes/triangleBig.svg

@@ -0,0 +1,3 @@
+<svg width="129" height="112" viewBox="0 0 129 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.02026 109.35L64.8232 5.76872L124.626 109.35L5.02026 109.35Z" stroke="black" stroke-width="5.04411"/>
+</svg>