Add solidworks as a sponsor, sidescrolling banner on homepage for sponsor

Author: andy-sorge

app/(main)/page.tsx

@@ -30,10 +30,19 @@ const Page = async () => {
       </div>
       <p style={{ fontSize: "40px", textAlign: "center", margin: "20px" }}>Sponsored By</p>
       <div className={styles.sponsorBanner}>
-        <img className={styles.sponsorLogo} src="/sponsor-logos/osh-park.png" alt="OSH Park" />
-        <img className={styles.sponsorLogo} src="/sponsor-logos/blue-robotics.png" alt="Blue Robotics" />
-        <img className={styles.sponsorLogo} src="/sponsor-logos/real-digital.svg" alt="Real Digital" />
+        <div className={styles.sponsorTrack}>
+          <img className={styles.sponsorLogo} src="/sponsor-logos/osh-park.png" alt="OSH Park" />
+          <img className={styles.sponsorLogo} src="/sponsor-logos/blue-robotics.png" alt="Blue Robotics" />
+          <img className={styles.sponsorLogo} src="/sponsor-logos/real-digital.svg" alt="Real Digital" />
+          <img className={styles.sponsorLogo} src="/sponsor-logos/solidworks.png" alt="Solidworks" />
+          {/* duplicate for seamless loop */}
+          <img className={styles.sponsorLogo} src="/sponsor-logos/osh-park.png" alt="OSH Park" />
+          <img className={styles.sponsorLogo} src="/sponsor-logos/blue-robotics.png" alt="Blue Robotics" />
+          <img className={styles.sponsorLogo} src="/sponsor-logos/real-digital.svg" alt="Real Digital" />
+          <img className={styles.sponsorLogo} src="/sponsor-logos/solidworks.png" alt="Solidworks" />
+        </div>
       </div>
+
       <div className={styles.section}>
         <h2 style={{ fontSize: "40px" }}>Check out our blog!</h2>
         <div className={styles.flexRow}>

app/(main)/sponsors/page.mdx

@@ -8,4 +8,6 @@ You can also donate to the club by going to [foundation.wsu.edu/give](https://fo
 
 ![Blue Robotics](/sponsor-logos/blue-robotics.png "Blue Robotics")
 
-![Real Digital](/sponsor-logos/real-digital.svg "Real Digital")
+![Real Digital](/sponsor-logos/real-digital.svg "Real Digital")
+
+![Solidworks](/sponsor-logos/solidworks.png "Solidworks")

public/sponsor-logos/solidworks.png

@@ -49,17 +49,35 @@
 }
 
 .sponsorBanner {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 10vw;
+    position: relative;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.sponsorTrack {
+    display: inline-flex;
+    animation: scroll 20s linear infinite;
+}
+
+.sponsorBanner:hover .sponsorTrack {
+    animation-play-state: paused;
+}
+
+@keyframes scroll {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-50%);
+    }
 }
 
 .sponsorLogo {
     height: 100px;
     width: auto;
     filter: grayscale(1);
+    margin: 0 50px;
 }
 
 .section {
@@ -116,4 +134,7 @@
         padding-left: 5%;
         padding-right: 5%;
     }
+    .sponsorLogo {
+        height: 40px;
+    }
 }