+
+
diff --git a/pages/index.mdx b/pages/index.mdx
deleted file mode 100644
index 7a6200c7..00000000
--- a/pages/index.mdx
+++ /dev/null
@@ -1 +0,0 @@
-Visit the [playground](/playground)
diff --git a/pages/index.module.css b/pages/index.module.css
new file mode 100644
index 00000000..ec2407d6
--- /dev/null
+++ b/pages/index.module.css
@@ -0,0 +1,201 @@
+.page {
+ padding-bottom: calc(60rem / 16);
+}
+
+.intro {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ position: relative;
+
+ height: 65vh;
+ min-height: calc(420rem / 16);
+ max-height: calc(580rem / 16);
+}
+
+.introTop {
+ flex-grow: 1;
+}
+
+.introContent {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.introBottom {
+ flex-grow: 1;
+ min-height: calc(132rem / 16);
+}
+
+.clubTitleWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+
+.clubTitleWrapper img {
+ height: calc(70rem / 16);
+}
+
+.clubTitle {
+ font-family: "Futura", "sans-serif";
+ font-size: calc(33rem / 16);
+ text-align: center;
+ color: var(--home-title-purple);
+}
+
+.clubDescription {
+ margin-bottom: calc(50rem / 16);
+ text-align: center;
+ color: var(--purple-2);
+}
+
+.clubDescription br {
+ display: none;
+}
+
+.codey {
+ position: absolute;
+ bottom: calc(-124rem / 16);
+ right: calc(20rem / 16);
+ z-index: -1;
+}
+
+.cardsBackground {
+ margin: 0;
+ width: 100%;
+
+ background-color: var(--off-white);
+}
+
+.cards {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-start;
+ gap: calc(100rem / 16);
+
+ padding: calc(42rem / 16) calc(100rem / 16);
+}
+
+.cardsHeading {
+ margin: 1rem 0 calc(8rem / 16);
+ font-size: calc(24rem / 16);
+ font-weight: 700;
+}
+
+.cardsDescription {
+ margin: calc(8rem / 16) 0 1rem;
+}
+
+.cardsDescription br {
+ display: none;
+}
+
+.cardsDividingLine {
+ display: none;
+}
+
+.eventCards {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+/* On a smaller desktop screen, make the events/new flow vertically */
+@media only screen and (max-width: calc(1100rem / 16)) {
+ .cards {
+ flex-direction: column;
+ align-items: center;
+ gap: calc(32rem / 16);
+ }
+
+ .cards > section {
+ max-width: calc(540rem / 16);
+ }
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+ .page {
+ padding-bottom: calc(30rem / 16);
+ }
+
+ .intro {
+ height: calc(330rem / 16);
+ min-height: unset;
+ max-height: unset;
+ }
+
+ .introContent {
+ padding: 1rem;
+ max-width: calc(260rem / 16);
+ }
+
+ .introBottom {
+ min-height: calc(100rem / 16);
+ }
+
+ .clubTitleWrapper img {
+ display: none;
+ }
+
+ .clubTitle {
+ margin: calc(8rem / 16) 0;
+ font-size: calc(20rem / 16);
+ }
+
+ .clubDescription {
+ margin: calc(8rem / 16) 0 calc(26rem / 16);
+ color: var(--purple-2);
+ }
+
+ .clubDescription br {
+ display: inline;
+ }
+
+ .codey {
+ bottom: calc(-46rem / 16);
+ right: auto;
+ z-index: -1;
+ height: calc(120rem / 16);
+ }
+
+ .cards {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ gap: calc(8rem / 16);
+
+ padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
+ }
+
+ .cards > section {
+ max-width: unset;
+ }
+
+ .cardsHeading {
+ margin: 0;
+ font-size: calc(18rem / 16);
+ font-weight: 600;
+ }
+
+ .cardsDescription br {
+ display: inline;
+ }
+
+ .cardsDividingLine {
+ display: block;
+ margin: 1rem 0 calc(34rem / 16);
+ height: calc(1rem / 16);
+ border: none;
+ background-color: var(--purple-2);
+ }
+}
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 00000000..a64dd9ab
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { Image } from "../components/Image";
+import { SocialLinks } from "../components/SocialLinks";
+import { EventDescriptionCard } from "../components/EventDescriptionCard";
+import { NewsCard } from "../components/NewsCard";
+import { ConnectWithUs } from "../components/ConnectWithUs";
+import { EmailSignup } from "../components/EmailSignup";
+import { DefaultLayout } from "../components/DefaultLayout";
+import styles from "./index.module.css";
+
+// temporary event and news imports
+import OOTBReact, {
+ metadata as OOTBReactEventMetadata,
+} from "../content/playground/ootb-react.event.mdx";
+import AltTab, {
+ metadata as altTabEventMetadata,
+} from "../content/playground/alt-tab.event.mdx";
+import UnavailableContent, {
+ metadata as unavailableMetadata,
+} from "../content/playground/unavailable.news.mdx";
+
+export default function Home() {
+ const events = [
+ { Content: OOTBReact, metadata: OOTBReactEventMetadata },
+ { Content: AltTab, metadata: altTabEventMetadata },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+ {/* TODO: add links to past events and past news */}
+
+ Upcoming Events
+ See past events here
+
+
+ {events.map(({ metadata }) => (
+
+ ))}
+
+
+
+ News
+
+ Updates from our execs!
+ See past news here
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
+ return
{props.children}
;
+};
diff --git a/public/fonts/futura-bold.woff b/public/fonts/futura-bold.woff
new file mode 100644
index 00000000..99f00c60
Binary files /dev/null and b/public/fonts/futura-bold.woff differ
diff --git a/public/fonts/futura-bold.woff2 b/public/fonts/futura-bold.woff2
new file mode 100644
index 00000000..05dbc943
Binary files /dev/null and b/public/fonts/futura-bold.woff2 differ
diff --git a/public/images/home/codey_sitting.svg b/public/images/home/codey_sitting.svg
new file mode 100644
index 00000000..bd48f8ff
--- /dev/null
+++ b/public/images/home/codey_sitting.svg
@@ -0,0 +1,27 @@
+
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 00000000..7190a60b
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,3 @@
+{
+ "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}