From 7ae5ff3b03afec1e96c378499e095a3ce33a6542 Mon Sep 17 00:00:00 2001 From: Amy Date: Mon, 23 Aug 2021 01:38:54 -0400 Subject: [PATCH] Add about us page desktop shapes background --- components/ShapesBackground.tsx | 3 +- pages/about/index.module.css | 3 +- pages/about/index.tsx | 78 +++++++++++++++++++++++++++++ public/images/shapes/cross.svg | 82 ++++++++++++++++++------------- public/images/shapes/wavesBig.svg | 4 ++ 5 files changed, 134 insertions(+), 36 deletions(-) create mode 100644 public/images/shapes/wavesBig.svg diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index 851e2433..0827682d 100644 --- a/components/ShapesBackground.tsx +++ b/components/ShapesBackground.tsx @@ -41,7 +41,8 @@ export type ShapeType = | "plus" | "ring" | "triangle" - | "waves"; + | "waves" + | "waveBig"; export type ShapesConfig = { [key in ShapeType]?: CSSProperties[]; diff --git a/pages/about/index.module.css b/pages/about/index.module.css index c3fc0309..abc9f0b7 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -1,5 +1,5 @@ .page { - margin-bottom: calc(20rem / 16); + margin: calc(20rem / 16) 0; } .title { @@ -10,7 +10,6 @@ .content { color: var(--text); - background-color: var(--primary-background); } .content span { diff --git a/pages/about/index.tsx b/pages/about/index.tsx index ad641899..661b7269 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -4,6 +4,7 @@ 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 Content from "../../content/about/index.mdx"; @@ -30,3 +31,80 @@ export default function AboutUs() { AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) { return
{props.children}
; }; + +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(520rem / 16)", + right: "80vw", + 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)", + }, + ], + }; + + return desktopConfig; +}) as GetShapesConfig; diff --git a/public/images/shapes/cross.svg b/public/images/shapes/cross.svg index 1ece2257..6e4955ae 100644 --- a/public/images/shapes/cross.svg +++ b/public/images/shapes/cross.svg @@ -1,34 +1,50 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/shapes/wavesBig.svg b/public/images/shapes/wavesBig.svg new file mode 100644 index 00000000..a71a5d3e --- /dev/null +++ b/public/images/shapes/wavesBig.svg @@ -0,0 +1,4 @@ + + + +