pages/index.module.css

@@ -30,21 +30,44 @@
   color: var(--purple-2);
 }
 
-.cards {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+.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);
+}
+
 .cardsHeading {
-  margin-bottom: 1rem;
+  margin: 1rem 0;
   font-weight: 700;
 }
 
-/* TODO: use <ConnectWithUs> and <EmailSighup> components and get rid of below styles */
+.eventCards {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+/* TODO: use <ConnectWithUs> and <EmailSighup> components and modify/get rid of below styles */
+.contact {
+  margin: 0 auto;
+  max-width: calc(800rem / 16);
+  padding: calc(20rem / 16);
+  padding-bottom: calc(20rem / 16);
+}
+
 .connectHeading {
   font-weight: 600;
   color: var(--blue-2);
@@ -55,5 +78,5 @@
 }
 
 .socials div {
-  justify-content: start;
+  justify-content: flex-start;
 }

pages/index.tsx

@@ -1,9 +1,27 @@
 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 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 (
     <>
       <div className={styles.intro}>
@@ -16,17 +34,28 @@ export default function Home() {
         </p>
         <SocialLinks color="gradient" size="big" />
       </div>
-      <div className={styles.cards}>
-        {/* TODO: add links to past events and past news */}
-        <div className={styles.events}>
-          <h3 className={styles.cardsHeading}>Upcoming Events</h3>
-          <p>See past events here</p>
-          <p>event cards</p>
-        </div>
-        <div className={styles.news}>
-          <h3 className={styles.cardsHeading}>News</h3>
-          <p>Updates from our execs! See past news here</p>
-          <p>news card</p>
+      <div className={styles.cardsBackground}>
+        <div className={styles.cards}>
+          {/* TODO: add links to past events and past news */}
+          <div className={styles.events}>
+            <h3 className={styles.cardsHeading}>Upcoming Events</h3>
+            <p>See past events here</p>
+            <div className={styles.eventCards}>
+              {events.map(({ metadata }) => (
+                <EventDescriptionCard
+                  {...metadata}
+                  key={metadata.name + metadata.date.toString()}
+                />
+              ))}
+            </div>
+          </div>
+          <div className={styles.news}>
+            <h3 className={styles.cardsHeading}>News</h3>
+            <p>Updates from our execs! See past news here</p>
+            <NewsCard {...unavailableMetadata}>
+              <UnavailableContent />
+            </NewsCard>
+          </div>
         </div>
       </div>
       {/* TODO: use <ConnectWithUs> and <EmailSighup> components */}
@@ -39,10 +68,12 @@ export default function Home() {
         <div className={styles.socials}>
           <SocialLinks color="gradient" size="small" />
         </div>
-        {/* TODO: add link to Feedback Form */}
         <p>Send feedback through our Feedback Form</p>
-        {/* TODO: add email signup */}
       </div>
     </>
   );
 }
+
+Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
+  return props.children;
+};