pages/_app.css

@@ -20,6 +20,8 @@ body {
   );
   /* used in mobile navbar background */
   --navbar-gray: #787878b2;
+  /* used in home page */
+  --home-title-purple: #27153e;
 
   color: var(--black);
   font-family: "Poppins", "sans-serif";

pages/index.module.css

@@ -1,8 +1,33 @@
 .intro {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
+
+  height: calc(560rem / 16);
+}
+
+.clubTitleWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: calc(15rem / 16);
+}
+
+.clubTitleWrapper img {
+  height: calc(70rem / 16);
+}
+
+.clubTitle {
+  /* TODO: use Futura font family */
+  font-size: calc(33rem / 16);
+  color: var(--home-title-purple);
+}
+
+.clubDescription {
+  margin-bottom: calc(50rem / 16);
+  color: var(--purple-2);
 }
 
 .cards {
@@ -10,11 +35,25 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+
+  background-color: var(--off-white);
 }
 
-.connect {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
+.cardsHeading {
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+/* TODO: use <ConnectWithUs> and <EmailSighup> components and get rid of below styles */
+.connectHeading {
+  font-weight: 600;
+  color: var(--blue-2);
+}
+
+.socials {
+  margin-bottom: calc(64rem / 16);
+}
+
+.socials div {
+  justify-content: start;
 }

pages/index.tsx

@@ -1,27 +1,47 @@
 import React from "react";
+import { Image } from "../components/Image";
+import { SocialLinks } from "../components/SocialLinks";
 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 className={styles.clubTitleWrapper}>
+          <Image src="/images/logo-icon.svg" alt="CSC Logo" />
+          <h1 className={styles.clubTitle}>Computer Science Club</h1>
+        </div>
+        <p className={styles.clubDescription}>
+          University of Waterloo&apos;s student computing community
+        </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>Upcoming Events</h3>
+          <h3 className={styles.cardsHeading}>Upcoming Events</h3>
           <p>See past events here</p>
           <p>event cards</p>
         </div>
         <div className={styles.news}>
-          <h3>News</h3>
+          <h3 className={styles.cardsHeading}>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>
+      {/* TODO: use <ConnectWithUs> and <EmailSighup> components */}
+      <div className={styles.contact}>
+        <h2 className={styles.connectHeading}>Connect with us!</h2>
+        <p>
+          Drop by any of our social media outlets to learn more about us, keep
+          up-to-date with our upcoming events, or to chat with our members!
+        </p>
+        <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>
     </>
   );