Fixed eventCard rendering and calendar icon bug on eventsPage and fixed navBar disappearing 'Team' button.

components/EventCard.tsx

@@ -10,17 +10,44 @@ interface CardInterface {
   img: string;
 }
 function EventCard({ header, body, time, img }: CardInterface) {
+  // Only show image if it's not a default or empty value
+  const hasImage = img && !img.includes('default');
   return (
     <div className={styles.container}>
       <div className={styles.text}>
         <div className={styles.header}>{header}</div>
-        <div className={styles.body}>
-          <div style={{ flex: '1' }}>{body}</div>
-          <Image src={img} width={300} height={300} />
+        <div
+          className={
+            hasImage ? styles.body : `${styles.body} ${styles['no-image']}`
+          }
+        >
+          {hasImage ? (
+            <>
+              <div className={styles['event-image-wrapper']}>
+                <Image
+                  src={img}
+                  width={300}
+                  height={300}
+                  className={styles['event-image']}
+                  alt={header}
+                />
+              </div>
+              <div className={styles['body-text']}>{body}</div>
+            </>
+          ) : (
+            <div className={styles['body-text'] + ' ' + styles['full-width']}>
+              {body}
+            </div>
+          )}
         </div>
         <div className={styles.time}>
-          <Image src="/icons8-calendar-24.png" width={20} height={20} />
-          <div>&nbsp;{time}</div>
+          <Image
+            src="/icons8-calendar-24.png"
+            width={20}
+            height={20}
+            alt="calendar icon"
+          />
+          <span>{time}</span>
         </div>
       </div>
     </div>

components/Navbar.tsx

@@ -56,12 +56,11 @@ const Navbar = () => {
           </div>
           <div>
             <ul
-              className={styles['nav-item-list']}
-              id={clicked ? styles.active : ''}
+              className={`${styles['nav-item-list']} ${clicked ? styles.active : ''}`}
             >
               <li>
                 <Link href="/teamPage">
-                  <a className={styles['nav-item-list']}>Team</a>
+                  <a>Team</a>
                 </Link>
               </li>
               <li>
@@ -76,7 +75,7 @@ const Navbar = () => {
               </li>
             </ul>
           </div>
-          <div id={styles['small-screen']}>
+          <div className={styles['small-screen']}>
             <i onClick={() => setClicked(!clicked)}>
               {clicked ? <FaTimes /> : <FaBars />}
             </i>

pages/index.tsx

@@ -3,7 +3,7 @@ import { GetStaticProps } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
 import MainLayout from '../components/MainLayout';
-import discord from '../public/discord.png';
+import slack from '../public/acmwslack_1.png';
 import event1 from '../public/event1.png';
 import event2 from '../public/event2.png';
 import event3 from '../public/event3.png';
@@ -69,32 +69,6 @@ export default function Home({ committee }: Props): JSX.Element {
               />
             </div>
 
-            <div
-              style={{
-                    display: 'block',
-                    width: '95%',
-                    margin: '10px auto',
-                    backgroundColor: 'transparent',
-                    color: '#56B7A0',
-                    textAlign: 'center',
-                    fontWeight: '600',
-                    fontSize: '1.2rem',
-                    padding: '12px 0',
-                    border: '3px solid #56B7A0',
-                    borderRadius: '20px',
-                    letterSpacing: '0.3px',
-                    textDecoration: 'none',
-              }}
-            >
-              The ACM Internship Program is now open! Apply by October 14th! <br/>
-              <a
-                  style={{ padding: '2%', marginLeft: '2%', color: '#56B7A0'}}
-                  href="https://acm.cs.ucla.edu/internship"
-                >
-                  Join Us
-                </a>
-            </div>
-
             <div>
               <div className={styles.heading} style={{ margin: '1%' }}>
                 <h1 className={styles.title} style={{ margin: '5%' }}>
@@ -123,22 +97,8 @@ export default function Home({ committee }: Props): JSX.Element {
                 >
                   <Image src={ins} alt="Instagram logo" />
                 </a>
-
-                <a
-                  href="https://discord.gg/JjbSf45cY"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                <Image src={discord} alt="Discord logo" width={50} height={50} />
-                </a>
-
-                <a
-                  href="https://www.linkedin.com/company/acm-w-acm-ucla/"
-                  target="_blank"
-                  rel="noreferrer"
-                >
+                <Image src={slack} alt="Slack logo" />
                 <Image src={linkedin} alt="Linkedin logo" />
-                </a>
               </div>
             </div>
             <div

styles/EventCard.module.scss

@@ -24,24 +24,138 @@
   line-height: 2em;
 }
 
+/* Your two-column area with image + details */
 .body {
   display: flex;
-  gap: 4rem;
   overflow-wrap: break-word;
   font-size: 0.9rem;
+  background: #fff;
+  gap: 1rem;
+}
+
+.body img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+  border-radius: 10px;
 }
 
 .time {
   color: vars.$committee-color;
   font-family: "Courier New", Courier, monospace;
   font-weight: bold;
   font-size: 1rem;
-  display: flex;
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  align-items: center;
   margin-top: 15px;
+  gap: 0.5rem;
+}
+
+.time img {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  vertical-align: middle;
+  margin-bottom: 2px;
+}
+
+.event-image-wrapper {
+  flex: 0 0 30%;
+  max-width: 30%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0;
+  background: #fff;
+}
+
+.event-image {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 10px;
+  display: block;
+}
+
+.body-text {
+  flex: 1 1 70%;
+  max-width: 70%;
+  display: flex;
+  align-items: center;
+  color: #000;
+}
+
+.full-width {
+  flex: 1 1 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 1024px) {
+  .body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .event-image-wrapper {
+    flex: 0 0 30%;
+    max-width: 30%;
+  }
+
+  .body-text,
+  .full-width {
+    flex: 1 1 70%;
+    max-width: 70%;
+  }
+
+  .no-image .body-text,
+  .no-image .full-width {
+    flex: 1 1 100% !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    display: block !important;
+  }
 }
 
-@media (max-width: 1175px) {
+@media (max-width: 768px) {
   .body {
-    display: inline;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .body img {
+    max-width: 85%;
+    margin-bottom: 1rem;
+  }
+
+  .event-image {
+    width: 100%;
+    max-width: 85%;
+  }
+
+  .event-image-wrapper {
+    flex: none;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .body-text,
+  .full-width {
+    flex: none !important;
+    max-width: none !important;
+    width: 100% !important;
+    display: block !important;
+    align-items: unset !important;
+  }
+}
+
+@media (max-width: 500px) {
+  .container {
+    margin: 0.5rem;
+    padding: 0.5rem;
   }
 }

styles/Events.module.scss

@@ -94,3 +94,61 @@
   flex-wrap: wrap;
   gap: 2rem;
 }
+
+@media (max-width: 1024px) {
+  .card,
+  .past-card {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .events-section {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .main {
+    padding: 1rem;
+  }
+
+  .calendar-and-events-wrapper {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+
+  .calendar-container,
+  .events-section {
+    flex: none;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+
+  .calendar-container iframe {
+    height: 50vh;
+  }
+
+  .events-section {
+    max-width: 100%;
+    padding: 0;
+    height: auto;
+  }
+
+  .card {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    min-height: auto;
+  }
+
+  .past-card {
+    width: 100%;
+  }
+
+  .past-events-grid {
+    justify-content: center;
+  }
+}

styles/Navbar.module.scss

@@ -19,7 +19,7 @@
   justify-content: center;
 }
 
-.nav-item-list#active {
+.nav-item-list.active {
   right: 0;
 }
 
@@ -56,10 +56,15 @@
 }
 
 #small-screen {
+  /* keep an ID fallback for global usage if needed, but expose a class for CSS Modules */
   display: none;
 }
 
-#small-screen i:hover {
+.small-screen {
+  display: none;
+}
+
+.small-screen i:hover {
   color: vars.$committee-color;
 }
 
@@ -88,6 +93,12 @@
     display: block;
   }
 
+  /* also expose the class-based selector for CSS Modules */
+  .small-screen {
+    display: block;
+  }
+
+  .small-screen i,
   #small-screen i {
     font-size: 24px;
     cursor: pointer;

styles/globals.scss

@@ -7,6 +7,8 @@ html,
 body {
   padding: 0;
   margin: 0;
+  width: 100%;
+  overflow-x: hidden;
 }
 
 a {
@@ -29,4 +31,6 @@ description-list {
 
 main {
   padding-top: 10vh;
+  max-width: 100vw; /* Keep main content within screen width */
+  overflow-x: hidden;
 }