pages/index.mdx

@@ -1 +0,0 @@
-Visit the [playground](/playground)

pages/index.module.css

@@ -0,0 +1,20 @@
+.intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.connect {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}

pages/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./index.module.css";
+
+export default function Home() {
+  return (
+    <>
+      <div className={styles.intro}>
+        <h1>Computer Science Club</h1>
+        <p>University of Waterloo&apos;s student computing community</p>
+      </div>
+      <div className={styles.cards}>
+        <div className={styles.events}>
+          <h3>Upcoming Events</h3>
+          <p>See past events here</p>
+          <p>event cards</p>
+        </div>
+        <div className={styles.news}>
+          <h3>News</h3>
+          <p>Updates from our execs! See past news here</p>
+          <p>news card</p>
+        </div>
+      </div>
+      <div className={styles.connect}>
+        <p>socials</p>
+      </div>
+    </>
+  );
+}