2021-07-18 03:37:48 -04:00
|
|
|
import React from "react";
|
2021-08-13 04:16:37 -04:00
|
|
|
|
|
|
|
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
|
|
|
import { DefaultLayout } from "@/components/DefaultLayout";
|
|
|
|
import { EmailSignup } from "@/components/EmailSignup";
|
|
|
|
import { Image } from "@/components/Image";
|
2021-08-27 01:45:14 -04:00
|
|
|
import {
|
|
|
|
GetShapesConfig,
|
|
|
|
mobileShapesConfig,
|
|
|
|
} from "@/components/ShapesBackground";
|
2021-08-30 19:20:16 -04:00
|
|
|
import { Title } from "@/components/Title";
|
2021-08-13 04:16:37 -04:00
|
|
|
|
2021-07-18 03:37:48 -04:00
|
|
|
import Content from "../../content/about/index.mdx";
|
2021-08-13 04:16:37 -04:00
|
|
|
|
2021-07-18 03:37:48 -04:00
|
|
|
import styles from "./index.module.css";
|
|
|
|
|
|
|
|
export default function AboutUs() {
|
|
|
|
return (
|
|
|
|
<>
|
2021-08-30 19:20:16 -04:00
|
|
|
<Title>About</Title>
|
2021-07-18 03:37:48 -04:00
|
|
|
<div className={styles.titleContainer}>
|
|
|
|
<h1 className={styles.title}>About Us!</h1>
|
2021-08-28 13:05:39 -04:00
|
|
|
<Image src="/images/about-us.svg" className={styles.codey} />
|
2021-07-18 03:37:48 -04:00
|
|
|
</div>
|
|
|
|
<div className={styles.content}>
|
|
|
|
<Content />
|
|
|
|
</div>
|
2021-07-27 02:06:37 -04:00
|
|
|
<DefaultLayout>
|
|
|
|
<ConnectWithUs />
|
|
|
|
<EmailSignup />
|
|
|
|
</DefaultLayout>
|
2021-07-18 03:37:48 -04:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
|
2021-07-27 02:06:37 -04:00
|
|
|
return <div className={styles.page}>{props.children}</div>;
|
2021-07-18 03:37:48 -04:00
|
|
|
};
|
2021-08-27 01:45:14 -04:00
|
|
|
|
|
|
|
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;
|