100 lines
2.3 KiB
TypeScript
100 lines
2.3 KiB
TypeScript
import React from "react";
|
||
|
||
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
||
import { EmailSignup } from "@/components/EmailSignup";
|
||
import { Image } from "@/components/Image";
|
||
import {
|
||
GetShapesConfig,
|
||
mobileShapesConfig,
|
||
} from "@/components/ShapesBackground";
|
||
|
||
import Content from "../content/get-involved.mdx";
|
||
|
||
import styles from "./get-involved.module.css";
|
||
|
||
export default function GetInvolved() {
|
||
return (
|
||
<div className={styles.page}>
|
||
<header>
|
||
<div className={styles.headerText}>
|
||
<h1>Get Involved!</h1>
|
||
<p>
|
||
If you’re interested in helping out with CS Club, don’t hesitate to
|
||
get in touch with us!
|
||
</p>
|
||
</div>
|
||
<Image src="images/get-involved/codey.svg" className={styles.codey} />
|
||
</header>
|
||
<main className={styles.content}>
|
||
<Content />
|
||
</main>
|
||
<div className={styles.connectWithUs}>
|
||
<ConnectWithUs />
|
||
</div>
|
||
<div className={styles.emailSignup}>
|
||
<EmailSignup />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
GetInvolved.getShapesConfig = (() => {
|
||
const desktopConfig = {
|
||
hash: [
|
||
{
|
||
top: "calc(860rem / 16)",
|
||
right: "90vw",
|
||
width: "calc(60rem / 16)",
|
||
height: "calc(60rem / 16)",
|
||
filter: "var(--teal)",
|
||
opacity: "30%",
|
||
},
|
||
],
|
||
plus: [
|
||
{
|
||
top: "calc(540rem / 16)",
|
||
left: "90vw",
|
||
width: "calc(48rem / 16)",
|
||
height: "calc(48rem / 16)",
|
||
filter: "var(--teal)",
|
||
opacity: "30%",
|
||
},
|
||
],
|
||
triangle: [
|
||
{
|
||
top: "calc(280rem / 16)",
|
||
right: "86vw",
|
||
width: "calc(68rem / 16)",
|
||
height: "calc(68rem / 16)",
|
||
transform: "rotate(-26deg)",
|
||
filter: "var(--teal)",
|
||
opacity: "30%",
|
||
},
|
||
],
|
||
waves: [
|
||
{
|
||
bottom: "calc(580rem / 16)",
|
||
left: "88vw",
|
||
width: "calc(116rem / 16)",
|
||
height: "calc(58rem / 16)",
|
||
filter: "var(--teal)",
|
||
opacity: "30%",
|
||
},
|
||
],
|
||
wavesBig: [
|
||
{
|
||
top: "0",
|
||
right: "89vw",
|
||
width: "calc(234rem / 16)",
|
||
height: "calc(115rem / 16)",
|
||
transform: "scaleX(-1)",
|
||
},
|
||
],
|
||
};
|
||
|
||
if (window.innerWidth <= 768) {
|
||
return mobileShapesConfig;
|
||
}
|
||
return desktopConfig;
|
||
}) as GetShapesConfig;
|