components/OrganizedContent/ReadAll.tsx

@@ -8,6 +8,8 @@ import {
   OrganizedContent,
 } from "@/components/OrganizedContent";
 
+import { GetShapesConfig } from "../ShapesBackground";
+
 import { Header } from "./Header";
 
 export interface SerializedSection {
@@ -26,6 +28,7 @@ export interface Options {
   pagePath: string;
   title: string;
   image: string;
+  getShapesConfig?: GetShapesConfig;
   imagePosition?: "left" | "right";
   link?: ComponentType<LinkProps>;
   description?: string;
@@ -35,13 +38,14 @@ export function createReadAllPage({
   title,
   image,
   pagePath,
+  getShapesConfig,
   link,
   description,
   imagePosition,
 }: Options) {
   const Link = link ?? createLink(pagePath);
 
-  return function Page({ sections }: Props) {
+  function Page({ sections }: Props) {
     const readAllSection = createReadAllSection(
       sections.map(({ section, content }) => ({
         section,
@@ -71,5 +75,9 @@ export function createReadAllPage({
         </OrganizedContent>
       </Header>
     );
-  };
+  }
+
+  Page.getShapesConfig = getShapesConfig;
+
+  return Page;
 }

components/OrganizedContent/Section.tsx

@@ -21,13 +21,14 @@ export function createSectionPage({
   title,
   image,
   pagePath,
+  getShapesConfig,
   link,
   description,
   imagePosition,
 }: Options) {
   const Link = link ?? createLink(pagePath);
 
-  return function Page(this: void, { content, sections, current }: Props) {
+  function Page(this: void, { content, sections, current }: Props) {
     return (
       <Header
         title={title}
@@ -44,5 +45,9 @@ export function createSectionPage({
         </OrganizedContent>
       </Header>
     );
-  };
+  }
+
+  Page.getShapesConfig = getShapesConfig;
+
+  return Page;
 }

components/ShapesBackground.module.css

@@ -0,0 +1,20 @@
+.shapesContainer {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -10;
+}
+
+.shape {
+  --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
+    brightness(92%) contrast(93%);
+  --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
+    brightness(91%) contrast(88%);
+
+  position: absolute;
+  filter: var(--blue);
+  opacity: 20%;
+}

components/ShapesBackground.tsx

@@ -0,0 +1,308 @@
+import { useWindowDimension } from "hooks/useWindowDimension";
+import { useRouter } from "next/router";
+import React, { CSSProperties, useEffect, useRef, useState } from "react";
+
+import { Image } from "./Image";
+
+import styles from "./ShapesBackground.module.css";
+
+const MOBILE_WIDTH = 768;
+
+interface Props {
+  getConfig?: GetShapesConfig;
+}
+
+export function ShapesBackground({ getConfig }: Props) {
+  const [config, setConfig] = useState<ShapesConfig>({});
+  const [prevWidth, setPrevWidth] = useState<number>(-1);
+  const [prevRoute, setPrevRoute] = useState<string>("");
+  const { width, height } = useWindowDimension();
+  const shapesContainerRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const containerWidth = shapesContainerRef.current?.offsetWidth;
+    const containerHeight = shapesContainerRef.current?.offsetHeight;
+
+    // In general, rerun getShapesConfig() if the screen size changes from desktop to mobile (or vice versa)
+    if (
+      containerWidth == null ||
+      containerHeight == null ||
+      !(
+        router.asPath === "/" ||
+        router.asPath !== prevRoute ||
+        prevWidth < 0 ||
+        (prevWidth <= MOBILE_WIDTH && MOBILE_WIDTH < width) ||
+        (prevWidth > MOBILE_WIDTH && MOBILE_WIDTH >= width)
+      )
+    ) {
+      return;
+    }
+
+    setPrevWidth(width);
+    setPrevRoute(router.asPath);
+    setConfig(getConfig?.(containerWidth, containerHeight) ?? {});
+  }, [getConfig, width, height, prevWidth, prevRoute, router.asPath]);
+
+  return (
+    <div className={styles.shapesContainer} ref={shapesContainerRef}>
+      {Object.entries(config).map(([type, instances]) =>
+        instances.map((attributes, idx) => (
+          <Shape
+            key={idx.toString() + type}
+            type={type as ShapeType}
+            style={attributes}
+          />
+        ))
+      )}
+    </div>
+  );
+}
+
+function Shape(props: { type: ShapeType; style: CSSProperties }) {
+  return (
+    <Image
+      src={`/images/shapes/${props.type}.svg`}
+      className={styles.shape}
+      style={props.style}
+    />
+  );
+}
+
+export type ShapeType =
+  | "asterisk"
+  | "circle"
+  | "cross"
+  | "dots"
+  | "hash"
+  | "plus"
+  | "ring"
+  | "triangle"
+  | "triangleBig"
+  | "waves"
+  | "wavesBig";
+
+export type ShapesConfig = {
+  [key in ShapeType]?: CSSProperties[];
+};
+
+export type GetShapesConfig = (width: number, height: number) => ShapesConfig;
+
+type ShapeSize = {
+  [key in ShapeType]: {
+    size: "big" | "small";
+    width: number;
+    height: number;
+    // 0 <= minAngle, maxAngle <= 180
+    minAngle?: number;
+    maxAngle?: number;
+  };
+};
+
+const shapeTypes: ShapeType[] = [
+  "asterisk",
+  "circle",
+  "cross",
+  "dots",
+  "hash",
+  "plus",
+  "ring",
+  "triangle",
+  "triangleBig",
+  "waves",
+  "wavesBig",
+];
+
+const shapesSizes: ShapeSize = {
+  asterisk: {
+    size: "big",
+    width: 168,
+    height: 168,
+  },
+  circle: {
+    size: "big",
+    width: 132,
+    height: 132,
+  },
+  cross: {
+    size: "big",
+    width: 150,
+    height: 150,
+  },
+  dots: {
+    size: "big",
+    width: 232,
+    height: 250,
+  },
+  hash: {
+    size: "small",
+    width: 60,
+    height: 60,
+  },
+  plus: {
+    size: "small",
+    width: 48,
+    height: 48,
+  },
+  ring: {
+    size: "small",
+    width: 70,
+    height: 70,
+  },
+  triangle: {
+    size: "small",
+    width: 68,
+    height: 68,
+    minAngle: 15,
+    maxAngle: 26,
+  },
+  triangleBig: {
+    size: "big",
+    width: 138,
+    height: 138,
+    minAngle: 15,
+    maxAngle: 26,
+  },
+  waves: {
+    size: "small",
+    width: 102,
+    height: 50,
+  },
+  wavesBig: {
+    size: "big",
+    width: 252,
+    height: 132,
+  },
+};
+
+const shapesBySize = {
+  big: shapeTypes.filter((shape) => shapesSizes[shape]["size"] == "big"),
+  small: shapeTypes.filter((shape) => shapesSizes[shape]["size"] == "small"),
+};
+
+// Used to generate random shapes in the margins
+export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
+  if (window.innerWidth <= MOBILE_WIDTH) {
+    return mobileShapesConfig;
+  }
+
+  const defaultConfig: ShapesConfig = {};
+  const gap = 20;
+  const minBoxWidth = 150;
+  const boxWidth = Math.max(minBoxWidth, (pageWidth - 800 - 2 * gap) / 2);
+  const boxHeight = 400;
+  const shapeGenerationProbability = 0.85;
+
+  for (let y = 0; y + boxHeight <= pageHeight; y += gap + boxHeight) {
+    for (let x = 0; x <= 1; ++x) {
+      if (Math.random() > shapeGenerationProbability) {
+        continue;
+      }
+
+      const size =
+        boxWidth > minBoxWidth && (y == 0 || y + 2 * boxHeight > pageHeight)
+          ? "big"
+          : "small";
+      const shape: ShapeType = getRandomShape(size);
+      const verticalOffset = getVerticalOffset(boxHeight, shape);
+      const horizontalOffset = getHorizontalOffset(boxWidth - 2 * gap, shape);
+      const shapeWidth = shapesSizes[shape]["width"];
+      const shapeHeight = shapesSizes[shape]["height"];
+      const angle = getRandomAngle(shape);
+      const colour = getRandomColour();
+      const opacity = getRandomOpacity(colour);
+
+      defaultConfig[shape] ??= [];
+      defaultConfig[shape]?.push({
+        top: `${((y + verticalOffset) / 16).toFixed(5)}rem`,
+        left:
+          x == 0
+            ? `${(((horizontalOffset + gap) / window.innerWidth) * 100).toFixed(
+                5
+              )}vw`
+            : "unset",
+        right:
+          x == 1
+            ? `${(((horizontalOffset + gap) / window.innerWidth) * 100).toFixed(
+                5
+              )}vw`
+            : "unset",
+        width: `${(shapeWidth / 16).toFixed(5)}rem`,
+        height: `${(shapeHeight / 16).toFixed(5)}rem`,
+        transform: `rotate(${angle}deg)`,
+        filter: `var(--${colour})`,
+        opacity: `${opacity}%`,
+      });
+    }
+  }
+
+  return defaultConfig;
+}) as GetShapesConfig;
+
+function getRandomShape(size: "big" | "small"): ShapeType {
+  const idx = Math.floor(Math.random() * shapesBySize[size].length);
+  return shapesBySize[size][idx];
+}
+
+function getVerticalOffset(boxHeight: number, shape: ShapeType): number {
+  const padding = shapesSizes[shape]["height"];
+  return Math.floor(Math.random() * (boxHeight - padding));
+}
+
+function getHorizontalOffset(boxWidth: number, shape: ShapeType): number {
+  const padding = shapesSizes[shape]["width"];
+  return shapesSizes[shape]["size"] == "big"
+    ? Math.floor(Math.random() * (boxWidth - padding / 2) - padding / 2)
+    : Math.floor(Math.random() * (boxWidth - padding));
+}
+
+function getRandomAngle(shape: ShapeType): number {
+  const minAngle = shapesSizes[shape]["minAngle"] ?? 0;
+  const maxAngle = shapesSizes[shape]["maxAngle"] ?? 0;
+  const direction = Math.random() < 0.5 ? 1 : -1;
+  return (
+    (minAngle + Math.floor(Math.random() * (maxAngle - minAngle + 1))) *
+    direction
+  );
+}
+
+function getRandomColour(): "blue" | "teal" {
+  return Math.random() < 0.7 ? "blue" : "teal";
+}
+
+function getRandomOpacity(colour: "blue" | "teal"): number {
+  if (colour === "blue") {
+    return Math.random() < 0.8 ? 20 : 25;
+  } else {
+    return Math.random() < 0.8 ? 25 : 30;
+  }
+}
+
+// Used for most mobile pages
+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/_app.module.css

@@ -4,9 +4,9 @@
   min-height: 100vh;
 }
 
-/* This makes the footer stay at the bottom, even if there's not much content
- * on the screen.
- */
 .contentContainer {
+  position: relative;
+
+  /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/
   flex-grow: 1;
 }

pages/_app.tsx

@@ -11,6 +11,11 @@ import { HorizontalLine } from "@/components/HorizontalLine";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
 import { Pre } from "@/components/Pre";
+import {
+  defaultGetShapesConfig,
+  GetShapesConfig,
+  ShapesBackground,
+} from "@/components/ShapesBackground";
 import { ThemeProvider } from "@/components/Theme";
 
 import styles from "./_app.module.css";
@@ -36,6 +41,9 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}
           <div className={styles.contentContainer}>
+            <ShapesBackground
+              getConfig={Component.getShapesConfig ?? defaultGetShapesConfig}
+            />
             <Layout>
               <Component {...pageProps} />
             </Layout>
@@ -53,6 +61,7 @@ type PageComponent = NextComponentType<
   Record<string, unknown>
 > & {
   Layout?: ComponentType<{ children: ReactNode }>;
+  getShapesConfig?: GetShapesConfig;
 };
 
 type AppProps = DefaultAppProps & {

pages/about/index.module.css

@@ -1,5 +1,5 @@
 .page {
-  margin-bottom: calc(60rem / 16);
+  margin: calc(20rem / 16) 0 calc(60rem / 16);
 }
 
 .title {
@@ -10,7 +10,6 @@
 
 .content {
   color: var(--text);
-  background-color: var(--primary-background);
 }
 
 .content span {

pages/about/index.tsx

@@ -4,6 +4,10 @@ import { ConnectWithUs } from "@/components/ConnectWithUs";
 import { DefaultLayout } from "@/components/DefaultLayout";
 import { EmailSignup } from "@/components/EmailSignup";
 import { Image } from "@/components/Image";
+import {
+  GetShapesConfig,
+  mobileShapesConfig,
+} from "@/components/ShapesBackground";
 
 import Content from "../../content/about/index.mdx";
 
@@ -30,3 +34,83 @@ export default function AboutUs() {
 AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
   return <div className={styles.page}>{props.children}</div>;
 };
+
+AboutUs.getShapesConfig = (() => {
+  const desktopConfig = {
+    cross: [
+      {
+        top: "calc(16rem / 16)",
+        left: "calc(-78rem / 16)",
+        width: "calc(150rem / 16)",
+        height: "calc(150rem / 16)",
+        transform: "rotate(30deg)",
+      },
+    ],
+    dots: [
+      {
+        top: "calc(520rem / 16)",
+        right: "calc(-120rem / 16)",
+        width: "calc(292rem / 16)",
+        height: "calc(330rem / 16)",
+        transform: "rotate(-29deg)",
+      },
+    ],
+    hash: [
+      {
+        top: "calc(528rem / 16)",
+        left: "60vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+      {
+        bottom: "calc(440rem / 16)",
+        right: "84vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+    ],
+    triangle: [
+      {
+        top: "calc(554rem / 16)",
+        right: "80vw",
+        width: "calc(68rem / 16)",
+        height: "calc(68rem / 16)",
+        transform: "rotate(-26deg)",
+      },
+      {
+        top: "calc(2190rem / 16)",
+        right: "4vw",
+        width: "calc(68rem / 16)",
+        height: "calc(68rem / 16)",
+        transform: "rotate(-26deg)",
+      },
+    ],
+    waves: [
+      {
+        top: "calc(1300rem / 16)",
+        left: "2vw",
+        width: "calc(102rem / 16)",
+        height: "calc(50rem / 16)",
+      },
+    ],
+    wavesBig: [
+      {
+        top: "calc(42rem / 16)",
+        right: "calc(-160rem / 16)",
+        width: "calc(376rem / 16)",
+        height: "calc(132rem / 16)",
+      },
+      {
+        bottom: "calc(40rem / 16)",
+        left: "calc(-174rem / 16)",
+        width: "calc(376rem / 16)",
+        height: "calc(132rem / 16)",
+      },
+    ],
+  };
+
+  if (window.innerWidth <= 768) {
+    return mobileShapesConfig;
+  }
+  return desktopConfig;
+}) as GetShapesConfig;

pages/index.module.css

@@ -110,7 +110,7 @@
   gap: 1rem;
 }
 
-/* On a smaller desktop screen, make the events/new flow vertically */
+/* On a smaller desktop screen, make the events/news flow vertically */
 @media only screen and (max-width: calc(1100rem / 16)) {
   .cards {
     flex-direction: column;

pages/index.tsx

@@ -9,6 +9,7 @@ import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { Link } from "@/components/Link";
 import { NewsCard } from "@/components/NewsCard";
+import { GetShapesConfig } from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
 import { Event, getUpcomingEvents } from "@/lib/events";
 import { News, getRecentNews } from "@/lib/news";
@@ -117,3 +118,188 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
     },
   };
 };
+
+Home.getShapesConfig = (() => {
+  const bigDesktopConfig = {
+    dots: [
+      {
+        top: "calc(0.06 * (580rem / 0.65) / 16)",
+        right: "90vw",
+        width: "calc(168rem / 16)",
+        height: "calc(204rem / 16)",
+        filter: "var(--teal)",
+        opacity: "25%",
+      },
+    ],
+    hash: [
+      {
+        top: "calc(0.32 * (580rem / 0.65) / 16)",
+        left: "12vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+      {
+        top: "calc(0.25 * (580rem / 0.65) / 16)",
+        right: "9vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+    ],
+    plus: [
+      {
+        top: "calc(0.42 * (580rem / 0.65) / 16)",
+        right: "22vw",
+        width: "calc(48rem / 16)",
+        height: "calc(48rem / 16)",
+      },
+    ],
+    triangle: [
+      {
+        top: "calc(0.05 * (580rem / 0.65) / 16)",
+        left: "20vw",
+        width: "calc(68rem / 16)",
+        height: "calc(68rem / 16)",
+        transform: "rotate(18deg)",
+        filter: "var(--teal)",
+        opacity: "30%",
+      },
+      {
+        top: "calc(0.02 * (580rem / 0.65) / 16)",
+        right: "40vw",
+        width: "calc(68rem / 16)",
+        height: "calc(68rem / 16)",
+        transform: "rotate(-26deg)",
+      },
+    ],
+    waves: [
+      {
+        top: "calc(0.5 * (580rem / 0.65) / 16)",
+        left: "24vw",
+        width: "calc(116rem / 16)",
+        height: "calc(58rem / 16)",
+        filter: "var(--teal)",
+      },
+      {
+        top: "calc(0.1 * (580rem / 0.65) / 16)",
+        right: "18vw",
+        width: "calc(102rem / 16)",
+        height: "calc(50rem / 16)",
+        filter: "var(--teal)",
+      },
+    ],
+  };
+
+  const mediumDesktopConfig = {
+    dots: [{ ...bigDesktopConfig["dots"][0], top: "6vh" }],
+    hash: [
+      { ...bigDesktopConfig["hash"][0], top: "32vh" },
+      { ...bigDesktopConfig["hash"][1], top: "25vh" },
+    ],
+    plus: [{ ...bigDesktopConfig["plus"][0], top: "42vh" }],
+    triangle: [
+      { ...bigDesktopConfig["triangle"][0], top: "5vh" },
+      { ...bigDesktopConfig["triangle"][1], top: "2vh" },
+    ],
+    waves: [
+      { ...bigDesktopConfig["waves"][0], top: "50vh" },
+      { ...bigDesktopConfig["waves"][1], top: "10vh" },
+    ],
+  };
+
+  const smallDesktopConfig = {
+    dots: [
+      {
+        ...bigDesktopConfig["dots"][0],
+        top: "calc(0.06 * (420rem / 0.65) / 16)",
+      },
+    ],
+    hash: [
+      {
+        ...bigDesktopConfig["hash"][0],
+        top: "calc(0.32 * (420rem / 0.65) / 16)",
+      },
+      {
+        ...bigDesktopConfig["hash"][1],
+        top: "calc(0.25 * (420rem / 0.65) / 16)",
+      },
+    ],
+    plus: [
+      {
+        ...bigDesktopConfig["plus"][0],
+        top: "calc(0.42 * (420rem / 0.65) / 16)",
+      },
+    ],
+    triangle: [
+      {
+        ...bigDesktopConfig["triangle"][0],
+        top: "calc(0.05 * (420rem / 0.65) / 16)",
+      },
+      {
+        ...bigDesktopConfig["triangle"][1],
+        top: "calc(0.02 * (420rem / 0.65) / 16)",
+      },
+    ],
+    waves: [
+      {
+        ...bigDesktopConfig["waves"][0],
+        top: "calc(0.5 * (420rem / 0.65) / 16)",
+      },
+      {
+        ...bigDesktopConfig["waves"][1],
+        top: "calc(0.1 * (420rem / 0.65) / 16)",
+      },
+    ],
+  };
+
+  const mobileConfig = {
+    dots: [
+      {
+        top: "0",
+        right: "80vw",
+        width: "calc(168rem / 16)",
+        height: "calc(152rem / 16)",
+      },
+    ],
+    hash: [
+      {
+        top: "calc(190rem / 16)",
+        right: "87vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+    ],
+    triangle: [
+      {
+        top: "calc(266rem / 16)",
+        right: "78vw",
+        width: "calc(45rem / 16)",
+        height: "calc(45rem / 16)",
+        transform: "rotate(-26deg)",
+      },
+      {
+        top: "calc(4rem / 16)",
+        right: "3vw",
+        width: "calc(45rem / 16)",
+        height: "calc(45rem / 16)",
+        transform: "rotate(16deg)",
+      },
+    ],
+    waves: [
+      {
+        top: "calc(168rem / 16)",
+        left: "86vw",
+        width: "calc(102rem / 16)",
+        height: "calc(50rem / 16)",
+      },
+    ],
+  };
+
+  if (window.innerWidth <= 768) {
+    return mobileConfig;
+  } else if (window.innerHeight <= 420 / 0.65) {
+    return smallDesktopConfig;
+  } else if (window.innerHeight <= 580 / 0.65) {
+    return mediumDesktopConfig;
+  }
+  return bigDesktopConfig;
+}) as GetShapesConfig;

pages/news/[year]/[term].tsx

@@ -5,6 +5,11 @@ import { MDXRemote } from "next-mdx-remote";
 import React from "react";
 
 import { NewsCard } from "@/components/NewsCard";
+import {
+  ShapesConfig,
+  defaultGetShapesConfig,
+  GetShapesConfig,
+} from "@/components/ShapesBackground";
 import {
   getNewsBySlug,
   getNewsByTerm,
@@ -44,6 +49,12 @@ export default function TermNews({ year, term, news }: Props) {
   );
 }
 
+TermNews.getShapesConfig = ((width, height) => {
+  return window.innerWidth <= 768
+    ? ({} as ShapesConfig)
+    : defaultGetShapesConfig(width, height);
+}) as GetShapesConfig;
+
 export const getStaticProps: GetStaticProps<Props, Params> = async (
   context
 ) => {

pages/news/archive.tsx

@@ -3,6 +3,11 @@ import { GetStaticProps } from "next";
 import React from "react";
 
 import { Link } from "@/components/Link";
+import {
+  ShapesConfig,
+  GetShapesConfig,
+  defaultGetShapesConfig,
+} from "@/components/ShapesBackground";
 
 import styles from "./archive.module.css";
 
@@ -32,6 +37,12 @@ export default function NewsArchive({ items }: Props) {
   );
 }
 
+NewsArchive.getShapesConfig = ((width, height) => {
+  return window.innerWidth <= 768
+    ? ({} as ShapesConfig)
+    : defaultGetShapesConfig(width, height);
+}) as GetShapesConfig;
+
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const years = (await getNewsYears()).reverse();
   const yearsWithTerms = await Promise.all(

public/images/shapes/asterisk.svg

@@ -0,0 +1,12 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
+<circle cx="59.9683" cy="59.9683" r="54.9683" fill="black" stroke="#1482E3" stroke-width="10"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M-8.36816 60.9453H129.559" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M4.60156 100.83L116.17 19.8027" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M38.4902 125.515L81.1653 -5.57812" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M80.4682 125.515L37.9326 -5.57812" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M114.498 100.83L2.92871 19.8027" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+</g>
+</svg>

public/images/shapes/circle.svg

@@ -0,0 +1,9 @@
+<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="66" cy="66.2598" rx="66" ry="65.5" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="30.0022" y1="-0.302145" x2="121.576" y2="91.9712" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.996875"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

public/images/shapes/cross.svg

@@ -0,0 +1,50 @@
+<svg width="213" height="183" viewBox="0 0 213 183" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M91.3398 16.4819L116.275 17.0557" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M104.134 31.9237L103.457 1.64575" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M122.073 17.1893L147.008 17.763" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M134.866 32.6317L134.188 2.35364" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M152.808 17.8965L177.743 18.4701" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M165.6 33.3389L164.923 3.06079" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M183.542 18.6033L208.477 19.1771" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M196.336 34.0449L195.659 3.76709" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M92.1738 53.8025L117.109 54.3762" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M104.968 69.2444L104.291 38.9663" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.6533 53.1L86.5884 53.6736" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M74.4459 68.5422L73.7686 38.2643" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.1299 52.3983L56.0651 52.972" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M43.9245 67.8395L43.2471 37.5615" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M122.908 54.5085L147.843 55.0822" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M135.701 69.9508L135.023 39.6727" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M153.643 55.2159L178.578 55.7897" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M166.435 70.6582L165.758 40.3802" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M184.378 55.922L209.313 56.4958" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M197.171 71.364L196.494 41.0861" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M93.0107 91.1217L117.946 91.6954" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M105.803 106.564L105.126 76.286" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M62.4893 90.4198L87.4245 90.9935" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M75.2838 105.86L74.6064 75.5825" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.9668 89.7175L56.9021 90.2914" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.7603 105.159L44.083 74.8807" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.44434 89.0162L26.3795 89.5899" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.2379 104.457L13.5605 74.1792" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M123.743 91.8296L148.678 92.4033" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M136.537 107.271L135.859 76.9927" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M154.477 92.5358L179.412 93.1096" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M167.27 107.977L166.593 77.699" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M185.211 93.243L210.146 93.8168" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M198.004 108.685L197.326 78.4071" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M93.8438 128.439L118.779 129.013" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M106.636 143.882L105.959 113.604" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.6807 165.73L119.616 166.304" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M107.473 181.172L106.796 150.894" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M63.3232 127.736L88.2585 128.31" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M76.1158 143.178L75.4385 112.9" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M124.579 129.145L149.514 129.719" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M137.373 144.587L136.695 114.309" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M125.345 163.431L150.28 164.005" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M138.137 178.874L137.46 148.596" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M155.313 129.852L180.249 130.426" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M168.106 145.295L167.429 115.017" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M186.049 130.558L210.984 131.132" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M198.842 146L198.164 115.722" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/shapes/dots.svg

@@ -0,0 +1,75 @@
+<svg width="153" height="165" viewBox="0 0 153 165" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 94.7004 162.165)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 106.46 16.7117)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 77.3694 153.499)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 108.935 153.499)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 125.029 153.499)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 138.955)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 125.338 139.265)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 108.626 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 94.6996 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 77.3685 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 60.0379 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 42.7074 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 30.327)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 30.2268)" fill="black"/>
+<circle opacity="0.5" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 30.2268)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 46.4207)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 46.3584)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 46.3584)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 46.3186)" fill="black"/>
+<circle opacity="0.5" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 46.3186)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 64.6796)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 64.3076)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 64.3076)" fill="black"/>
+<ellipse opacity="0.5" rx="1.85686" ry="1.85686" transform="matrix(1.31134e-07 1 1 -1.31134e-07 150.406 64.3705)" fill="black"/>
+<ellipse opacity="0.5" rx="1.85686" ry="1.85686" transform="matrix(1.31134e-07 1 1 -1.31134e-07 1.85686 64.3705)" fill="black"/>
+<circle opacity="0.5" r="2.16633" transform="matrix(1.31134e-07 1 1 -1.31134e-07 90.6766 2.16633)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 64.2679)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 64.2679)" fill="black"/>
+<circle r="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 76.1317 64.9891)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 64.2679)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 64.2679)" fill="black"/>
+<circle opacity="0.5" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 64.2679)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 79.5351)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 79.1631)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 79.1631)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 79.1233)" fill="black"/>
+<circle r="2.78529" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.338 79.5333)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 95.0078)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 94.6358)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 94.6358)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 74.8307 16.7744)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 94.5979)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 94.5979)" fill="black"/>
+<circle r="3.09476" transform="matrix(4.37114e-08 1 1 -4.37114e-08 76.7495 94.6983)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 94.5979)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 94.5979)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 94.5979)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 108.625)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 108.834)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 108.834)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 123.48)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 123.069)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 123.069)" fill="black"/>
+</svg>

public/images/shapes/hash.svg

@@ -0,0 +1,6 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="33.1655" y1="101" x2="33.1655" y2="5" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="72.0322" y1="101" x2="72.0322" y2="5" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="101" y1="71.4316" x2="5" y2="71.4316" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="101" y1="32.5664" x2="5" y2="32.5664" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/shapes/plus.svg

@@ -0,0 +1,4 @@
+<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 40.9141H76.9" stroke="black" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.9136 76.9V5" stroke="black" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/shapes/ring.svg

@@ -0,0 +1,3 @@
+<svg width="186" height="186" viewBox="0 0 186 186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="92.8184" cy="92.8185" r="60.6326" transform="rotate(45 92.8184 92.8185)" stroke="black" stroke-width="10"/>
+</svg>

public/images/shapes/triangle.svg

@@ -0,0 +1,3 @@
+<svg width="118" height="102" viewBox="0 0 118 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.77052 97L59 10L109.229 97H8.77052Z" stroke="black" stroke-width="10"/>
+</svg>

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>

public/images/shapes/waves.svg

@@ -0,0 +1,4 @@
+<svg width="164" height="76" viewBox="0 0 164 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M123.404 17.0056C125.205 18.9565 128.246 19.0782 130.197 17.2774C132.148 15.4766 132.27 12.4352 130.469 10.4843L123.404 17.0056ZM80.0893 16.0374L76.2919 18.9852L80.0893 16.0374ZM79.4289 15.1867L75.6315 18.1345L79.4289 15.1867ZM54.0979 16.2242L57.7885 19.3048L54.0979 16.2242ZM23.5426 17.4409L24.5319 18.7154L32.1268 12.8198L31.1375 11.5453L23.5426 17.4409ZM57.7885 19.3048L59.0112 17.8399L51.6299 11.6789L50.4073 13.1437L57.7885 19.3048ZM75.6315 18.1345L76.2919 18.9852L83.8868 13.0896L83.2264 12.2389L75.6315 18.1345ZM123.261 16.8509L123.404 17.0056L130.469 10.4843L130.326 10.3296L123.261 16.8509ZM107.821 17.9959C111.4 12.7347 118.945 12.1752 123.261 16.8509L130.326 10.3296C121.813 1.10695 106.931 2.21053 99.8717 12.588L107.821 17.9959ZM76.2919 18.9852C84.4118 29.4455 100.373 28.9447 107.821 17.9959L99.8717 12.588C96.0956 18.1389 88.0035 18.3928 83.8868 13.0896L76.2919 18.9852ZM59.0112 17.8399C63.3756 12.6112 71.4551 12.7543 75.6315 18.1345L83.2264 12.2389C75.2868 2.01084 59.927 1.73863 51.6299 11.6789L59.0112 17.8399ZM24.5319 18.7154C32.8887 29.4808 49.0555 29.7673 57.7885 19.3048L50.4073 13.1437C45.6069 18.8948 36.7204 18.7373 32.1268 12.8198L24.5319 18.7154ZM31.1375 11.5453C23.4468 1.63788 8.64288 1.16467 0.335104 10.5606L7.53794 16.9293C11.8546 12.0472 19.5466 12.2931 23.5426 17.4409L31.1375 11.5453Z" fill="black"/>
+<path d="M155.404 61.0056C157.205 62.9565 160.246 63.0782 162.197 61.2774C164.148 59.4766 164.27 56.4352 162.469 54.4843L155.404 61.0056ZM112.089 60.0374L108.292 62.9852L112.089 60.0374ZM111.429 59.1867L107.632 62.1345L111.429 59.1867ZM86.0979 60.2242L89.7885 63.3048L86.0979 60.2242ZM55.5426 61.4409L56.5319 62.7154L64.1268 56.8198L63.1375 55.5453L55.5426 61.4409ZM89.7885 63.3048L91.0112 61.8399L83.6299 55.6789L82.4073 57.1437L89.7885 63.3048ZM107.632 62.1345L108.292 62.9852L115.887 57.0896L115.226 56.2389L107.632 62.1345ZM155.261 60.8509L155.404 61.0056L162.469 54.4843L162.326 54.3296L155.261 60.8509ZM139.821 61.9959C143.4 56.7347 150.945 56.1752 155.261 60.8509L162.326 54.3296C153.813 45.1069 138.931 46.2105 131.872 56.588L139.821 61.9959ZM108.292 62.9852C116.412 73.4455 132.373 72.9447 139.821 61.9959L131.872 56.588C128.096 62.1389 120.003 62.3928 115.887 57.0896L108.292 62.9852ZM91.0112 61.8399C95.3756 56.6112 103.455 56.7543 107.632 62.1345L115.226 56.2389C107.287 46.0108 91.927 45.7386 83.6299 55.6789L91.0112 61.8399ZM56.5319 62.7154C64.8887 73.4808 81.0555 73.7673 89.7885 63.3048L82.4073 57.1437C77.6069 62.8948 68.7204 62.7373 64.1268 56.8198L56.5319 62.7154ZM63.1375 55.5453C55.4468 45.6379 40.6429 45.1647 32.3351 54.5606L39.5379 60.9293C43.8546 56.0472 51.5466 56.2931 55.5426 61.4409L63.1375 55.5453Z" fill="black"/>
+</svg>

public/images/shapes/wavesBig.svg

@@ -0,0 +1,4 @@
+<svg width="386" height="202" viewBox="0 0 386 202" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M221.271 50.532L216.667 48.5827L221.271 50.532ZM168.395 54.1229L163.893 56.298L168.395 54.1229ZM220.296 52.8367L215.691 50.8874L220.296 52.8367ZM115.325 51.8264L119.762 54.1313L115.325 51.8264ZM113.474 55.3882L117.912 57.6931L113.474 55.3882ZM54.809 48.9023L50.3069 51.0774L50.3069 51.0774L54.809 48.9023ZM50.3069 51.0774L53.0477 56.7505L62.0519 52.4004L59.3112 46.7273L50.3069 51.0774ZM117.912 57.6931L119.762 54.1313L110.888 49.5214L109.037 53.0832L117.912 57.6931ZM163.151 54.7618L163.893 56.298L172.897 51.9479L172.155 50.4117L163.151 54.7618ZM224.9 54.7861L225.876 52.4814L216.667 48.5827L215.691 50.8874L224.9 54.7861ZM225.876 52.4814C233.047 35.544 256.502 34.1238 265.664 50.0724L274.336 45.0912C261.056 21.9758 227.06 24.0341 216.667 48.5827L225.876 52.4814ZM163.893 56.298C176.422 82.2314 213.671 81.3083 224.9 54.7861L215.691 50.8874C207.815 69.4916 181.686 70.1392 172.897 51.9479L163.893 56.298ZM119.762 54.1313C128.971 36.4027 154.46 36.7731 163.151 54.7618L172.155 50.4117C159.884 25.0108 123.892 24.4878 110.888 49.5214L119.762 54.1313ZM53.0477 56.7505C66.0396 83.6424 104.144 84.1962 117.912 57.6931L109.037 53.0832C99.0644 72.2813 71.4629 71.8802 62.0519 52.4004L53.0477 56.7505ZM59.3112 46.7273C47.6386 22.5664 13.5558 21.6627 0.619446 45.1712L9.38055 49.9923C18.4012 33.5996 42.1675 34.2297 50.3069 51.0774L59.3112 46.7273Z" fill="black"/>
+<path d="M226.325 142.45L221.888 140.145L226.325 142.45ZM278.653 143.21L274.151 145.385L278.653 143.21ZM168.55 145.199L164.048 147.374L168.55 145.199ZM165.809 139.526L161.307 141.701L165.809 139.526ZM161.307 141.701L164.048 147.374L173.052 143.024L170.311 137.351L161.307 141.701ZM228.912 148.317L230.762 144.755L221.888 140.145L220.037 143.707L228.912 148.317ZM274.151 145.385L274.893 146.922L283.897 142.571L283.155 141.035L274.151 145.385ZM335.9 145.41L336.876 143.105L327.667 139.206L326.691 141.511L335.9 145.41ZM336.876 143.105C344.047 126.167 367.502 124.747 376.664 140.696L385.336 135.715C372.056 112.599 338.06 114.658 327.667 139.206L336.876 143.105ZM274.893 146.922C287.422 172.855 324.671 171.932 335.9 145.41L326.691 141.511C318.815 160.115 292.686 160.763 283.897 142.571L274.893 146.922ZM230.762 144.755C239.971 127.026 265.46 127.397 274.151 145.385L283.155 141.035C270.884 115.634 234.892 115.111 221.888 140.145L230.762 144.755ZM164.048 147.374C177.04 174.266 215.144 174.82 228.912 148.317L220.037 143.707C210.064 162.905 182.463 162.504 173.052 143.024L164.048 147.374ZM170.311 137.351C158.639 113.19 124.556 112.286 111.619 135.795L120.381 140.616C129.401 124.223 153.168 124.853 161.307 141.701L170.311 137.351Z" fill="black"/>
+</svg>