diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index 0827682d..f36e1f16 100644 --- a/components/ShapesBackground.tsx +++ b/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)", + }, + ], +}; diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 661b7269..83655cd6 100644 --- a/pages/about/index.tsx +++ b/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;