added contact page

ausspeedruns · Sep 11, 2023 · 7e25e05 · 7e25e05
1 parent 1c8f93f
commit 7e25e05
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 8 deletions.
diff --git a/apps/nextjs/components/Footer/Footer.module.scss b/apps/nextjs/components/Footer/Footer.module.scss
@@ -31,6 +31,11 @@
       a {
         font-weight: 500;
       }
+
+      .email
+      {
+        text-decoration: underline !important;
+      }
     }
   }
 }

diff --git a/apps/nextjs/components/Footer/Footer.tsx b/apps/nextjs/components/Footer/Footer.tsx
@@ -6,11 +6,11 @@ import {
 	faInstagram,
 	faTiktok,
 	// faFacebook,
-} from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styles from './Footer.module.scss';
-import { globals } from '../../globals';
-import Link from 'next/link';
+} from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from "./Footer.module.scss";
+import { globals } from "../../globals";
+import Link from "next/link";
 
 interface FooterProps {
 	className?: string;
@@ -25,9 +25,10 @@ const Footer = (props: FooterProps) => {
 				<div className={styles.acknowledgement}>
 					<div className="content">
 						<p>
-							In the spirit of reconciliation, AusSpeedruns acknowledges the Traditional Custodians of country
-							throughout Australia and their connections to land, sea and community. We pay our respect to their elders
-							past and present and extend that respect to all Aboriginal and Torres Strait Islander peoples today.
+							In the spirit of reconciliation, AusSpeedruns acknowledges the Traditional Custodians of
+							country throughout Australia and their connections to land, sea and community. We pay our
+							respect to their elders past and present and extend that respect to all Aboriginal and
+							Torres Strait Islander peoples today.
 						</p>
 					</div>
 				</div>
@@ -82,6 +83,8 @@ const Footer = (props: FooterProps) => {
 						<Link href="/policies">Policies</Link>
 						{/* <Link href="/prize-terms">Prize Terms</Link> */}
 						<Link href="/press-kit">Press Kit</Link>
+						<Link href="/contact">Contact</Link>
+						<a className={styles.email} href="mailto:[email protected]">[email protected]</a>
 					</div>
 				</div>
 			</div>

diff --git a/apps/nextjs/pages/contact.tsx b/apps/nextjs/pages/contact.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import styles from "../styles/BasicPage.module.scss";
+
+import Head from "next/head";
+import DiscordEmbed from "../components/DiscordEmbed";
+
+export const ContactPage: React.FC = () => {
+	return (
+		<div>
+			<Head>
+				<title>Contact - AusSpeedruns</title>
+				<DiscordEmbed title="Contact - AusSpeedruns" pageUrl="/contact" />
+			</Head>
+			<div className={styles.background} />
+			<div className={styles.content}>
+				<h1>Contact Us</h1>
+				<section>
+					<h2>Email</h2>
+					<a href="mailto:[email protected]">
+						[email protected]
+					</a>
+				</section>
+				<section>
+					<h2>Twitter / X</h2>
+					<a href="https://twitter.com/AusSpeedruns" target="_blank" rel="noopener noreferrer">
+						@AusSpeedruns
+					</a>
+				</section>
+				<section>
+					<h2>Discord</h2>
+					<a href="https://discord.ausspeedruns.com/" target="_blank" rel="noopener noreferrer">
+						Link to Server
+					</a>
+				</section>
+				<section>
+					<h2>YouTube</h2>
+					<a href="https://www.youtube.com/ausspeedruns" target="_blank" rel="noopener noreferrer">
+						@AusSpeedruns
+					</a>
+				</section>
+				<section>
+					<h2>Instagram</h2>
+					<a href="https://www.instagram.com/ausspeedruns/" target="_blank" rel="noopener noreferrer">
+						@AusSpeedruns
+					</a>
+				</section>
+				<section>
+					<h2>Twitch</h2>
+					<a href="http://twitch.tv/ausspeedruns" target="_blank" rel="noopener noreferrer">
+						AusSpeedruns
+					</a>
+				</section>
+				<section>
+					<h2>Tiktok</h2>
+					<a href="http://tiktok.com/@ausspeedruns" target="_blank" rel="noopener noreferrer">
+						@AusSpeedruns
+					</a>
+				</section>
+			</div>
+		</div>
+	);
+};
+
+export default ContactPage;
diff --git a/apps/nextjs/styles/BasicPage.module.scss b/apps/nextjs/styles/BasicPage.module.scss
@@ -0,0 +1,45 @@
+@use "base";
+@import "./responsive.scss";
+@import "./colors.scss";
+
+.background {
+	background-image: url("./img/MuralSmall.jpg");
+	background-size: 43%;
+	background-position: center;
+	flex-grow: 1;
+	position: fixed;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	display: block;
+	width: 100%;
+	height: 100%;
+	filter: blur(2px);
+	z-index: -1;
+	transform: scale(1.1);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 700px;
+	min-height: 75vh;
+	padding: 1rem 150px;
+	background-color: #ffffff;
+	box-shadow: 0px 0px 24px 19px rgba(0, 0, 0, 0.3);
+
+	@include breakpoint($sm-zero-only) {
+		width: 100%;
+		padding: 32px 16px;
+	}
+
+	h1 {
+		text-align: center;
+	}
+
+	section {
+		width: 100%;
+		padding: 1rem 0;
+	}
+}