pages/index.module.css

@@ -56,10 +56,15 @@
 }
 
 .cardsHeading {
-  margin: 1rem 0;
+  margin: 1rem 0 calc(8rem / 16);
+  font-size: calc(24rem / 16);
   font-weight: 700;
 }
 
+.cardsDescription {
+  margin: calc(8rem / 16) 0 1rem;
+}
+
 .eventCards {
   display: flex;
   flex-direction: column;
@@ -75,16 +80,3 @@
   padding: calc(20rem / 16);
   padding-bottom: calc(20rem / 16);
 }
-
-.connectHeading {
-  font-weight: 600;
-  color: var(--blue-2);
-}
-
-.socials {
-  margin-bottom: calc(64rem / 16);
-}
-
-.socials div {
-  justify-content: flex-start;
-}

pages/index.tsx

@@ -24,7 +24,7 @@ export default function Home() {
 
   return (
     <>
-      <div className={styles.intro}>
+      <main className={styles.intro}>
         <div className={styles.clubTitleWrapper}>
           <Image src="/images/logo-icon.svg" alt="CSC Logo" />
           <h1 className={styles.clubTitle}>Computer Science Club</h1>
@@ -38,13 +38,13 @@ export default function Home() {
           src="/images/home/codey_sitting.svg"
           alt="CSC mascot Codey, a blue shiba with circular glasses"
         />
-      </div>
+      </main>
       <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>
+          <section className={styles.events}>
+            <h2 className={styles.cardsHeading}>Upcoming Events</h2>
+            <p className={styles.cardsDescription}>See past events here</p>
             <div className={styles.eventCards}>
               {events.map(({ metadata }) => (
                 <EventDescriptionCard
@@ -53,27 +53,20 @@ export default function Home() {
                 />
               ))}
             </div>
-          </div>
-          <div className={styles.news}>
-            <h3 className={styles.cardsHeading}>News</h3>
-            <p>Updates from our execs! See past news here</p>
+          </section>
+          <section className={styles.news}>
+            <h2 className={styles.cardsHeading}>News</h2>
+            <p className={styles.cardsDescription}>
+              Updates from our execs! See past news here
+            </p>
             <NewsCard {...unavailableMetadata}>
               <UnavailableContent />
             </NewsCard>
-          </div>
+          </section>
         </div>
       </div>
-      {/* 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>
-        <p>Send feedback through our Feedback Form</p>
+        {/* TODO: use <ConnectWithUs> and <EmailSighup> components */}
       </div>
     </>
   );