Updated Sponsors Carousel To Show New Sponsors (#444)

frontend/app/page.tsx

@@ -105,7 +105,7 @@ const HomePage = () => {
         {/* <!-- Sponsors --> */}
         <div className="my-12 mx-auto">
           <h3 className="font-bold text-3xl mb-0 text-jb-headings dark:text-jb-dark-headings">
-            Featuring Jobs From
+            Our Sponsors
           </h3>
           <p className="text-lg text-jb-subheadings dark:text-jb-dark-subheadings my-4 mx-16 sm:mx-0">
             We aim to give you a pleasant student working experience by partnering up with only the

frontend/components/SponsorCarousel/SponsorCarousel.module.css

@@ -41,6 +41,14 @@
   animation-timing-function: linear;
 }
 
+.staticSponsorContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
 .carouselBarLeft {
   left: 0;
   top: 0;

frontend/components/SponsorCarousel/SponsorCarousel.tsx

@@ -1,79 +1,66 @@
 import React from 'react';
 import Image from 'next/image';
-import AmazonLogo from 'assets/companies/amazonLogo.png';
-import AtlassianLogo from 'assets/companies/atlassianLogo.png';
-import CanvaLogo from 'assets/companies/canvaLogo.png';
-import GoogleLogo from 'assets/companies/googleLogo.png';
 import JaneStreetLogo from 'assets/companies/janeStreetLogo.png';
-import PearlerLogo from 'assets/companies/PearlerLogo.png';
+import TikTokLogo from 'assets/companies/tiktokLogo.png';
 import styles from './SponsorCarousel.module.css';
 
 const sponsors = [
-  {
-    company: 'Google',
-    logo: GoogleLogo
-  },
-  {
-    company: 'Amazon',
-    logo: AmazonLogo
-  },
-  {
-    company: 'Pearler',
-    logo: PearlerLogo
-  },
-  {
-    company: 'Canva',
-    logo: CanvaLogo
-  },
   {
     company: 'Jane Street',
     logo: JaneStreetLogo
   },
   {
-    company: 'Atlassian',
-    logo: AtlassianLogo
+    company: 'TikTok',
+    logo: TikTokLogo
   }
 ];
 
-const SponsorCarousel = () => {
+const Images = () => {
   return (
-    <div>
-      <div className="relative overflow-hidden grow-0 shrink-0 basis-[230px]">
-        <div className={styles.carouselBarLeft} />
-        <div className="relative w-[1450px] h-[100px] my-10 grow-0 shrink-0 basis-auto">
-          <div className={`${styles.sponsorContainer} ${styles.carouselAnimationFirst}`}>
-            {sponsors.map(({ company, logo }) => (
-              <div className="grow-1 shrink-1 basis-[200px] min-w-0 m-5" key={company}>
-                <Image
-                  className="select-none pointer-events-none object-contain w-full"
-                  width={100}
-                  height={100}
-                  src={logo}
-                  loading="lazy"
-                  alt={company}
-                />
-              </div>
-            ))}
-          </div>
-          <div className={`${styles.sponsorContainer} ${styles.carouselAnimationSecond}`}>
-            {sponsors.map(({ company, logo }) => (
-              <div className="grow-1 shrink-1 basis-[200px] min-w-0 m-5" key={company}>
-                <Image
-                  className="select-none pointer-events-none object-contain w-full"
-                  src={logo}
-                  width={100}
-                  height={100}
-                  loading="lazy"
-                  alt={company}
-                />
-              </div>
-            ))}
-          </div>
+    <>
+      {sponsors.map(({ company, logo }) => (
+        <div className="grow-1 shrink-1 basis-[200px] min-w-0 m-5" key={company}>
+          <Image
+            className="select-none pointer-events-none object-contain w-full"
+            width={100}
+            height={100}
+            src={logo}
+            loading="lazy"
+            alt={company}
+          />
+        </div>
+      ))}
+    </>
+  );
+};
+
+const DynamicSponsors = () => {
+  return (
+    <div className="relative overflow-hidden grow-0 shrink-0 basis-[230px]">
+      <div className={styles.carouselBarLeft} />
+      <div className="relative w-[1450px] h-[100px] my-10 grow-0 shrink-0 basis-auto">
+        <div className={`${styles.sponsorContainer} ${styles.carouselAnimationFirst}`}>
+          <Images />
+        </div>
+        <div className={`${styles.sponsorContainer} ${styles.carouselAnimationSecond}`}>
+          <Images />
         </div>
-        <div className={styles.carouselBarRight} />
       </div>
+      <div className={styles.carouselBarRight} />
     </div>
   );
 };
 
+const StaticSponsors = () => {
+  return (
+    <div className={styles.staticSponsorContainer}>
+      <Images />
+    </div>
+  );
+};
+
+const SponsorCarousel = () => {
+  return <div>{sponsors.length > 3 ? <DynamicSponsors /> : <StaticSponsors />}</div>;
+};
+
 export default SponsorCarousel;