[CW2-59] Sponsors Carousel

frontend/package.json

@@ -25,6 +25,7 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-multi-carousel": "^2.8.5",
     "tailwindcss": "3.3.3",
     "typescript": "5.1"
   },

frontend/src/components/About/AboutHomepage.tsx

@@ -14,7 +14,7 @@ export default function AboutHomePage() {
                   <Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
                 </div>
                 <h2 className="text-3xl font-extrabold">CSESoc</h2>
-                <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
+                <button className="bg-[#444F6F] w-full my-5 py-2 rounded hover-animate">Follow</button>
               </div>
               {/* RIGHT SIDE */}
               <div className="col-span-4 lg:mt-0 mt-10">

frontend/src/components/Sponsors/SponsorCarousel.tsx

@@ -0,0 +1,51 @@
+import { diamondLinks, goldLinks } from "@/../public/data/sponsorInfos";
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+
+export default function SponsorCarousel() {
+  const responsive = {
+    superLargeDesktop: {
+      breakpoint: { max: 4000, min: 1024 },
+      items: 3,
+    },
+    desktop: {
+      breakpoint: { max: 1024, min: 768 },
+      items: 3,
+    },
+    tablet: {
+      breakpoint: { max: 768, min: 464 },
+      items: 2,
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1,
+    },
+  };
+
+  // Show diamond and gold sponsors in carousel
+  const sponsors = diamondLinks.concat(goldLinks);
+
+  return (
+    <Carousel
+      responsive={responsive}
+      infinite={true}
+      autoPlay={true}
+      arrows={false}
+      autoPlaySpeed={3000}
+      keyBoardControl={false}
+      transitionDuration={500}
+      pauseOnHover={false}
+      containerClass="carousel-container my-8"
+    >
+      {sponsors.map((sponsor, index) => (
+        <div key={index} className="p-4 mx-8 flex justify-center items-center">
+          <img
+            src={sponsor.svg}
+            alt={sponsor.alt}
+            className="h-24"
+          />
+        </div>
+      ))}
+    </Carousel>
+  );
+}

frontend/src/components/Sponsors/index.tsx

@@ -1,50 +1,27 @@
 import React from 'react';
 import Footer from '@/components/Footer';
+import SponsorCarousel from './SponsorCarousel';
 
 const Sponsors = () => {
-  const firstRowBoxesStyling =
-    'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-1 xl:row-end-2 sm:row-start-3 sm:row-end-4 sm:h-auto h-36';
-  const secondRowBoxesStyling =
-    'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36';
-
   return (
     <section
       className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20"
       id="sponsors"
     >
       <div className="text-center">
-        <h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
+        <h2 className="font-bold text-6xl">OUR SPONSORS</h2>
       </div>
-      <div className="flex-1 flex justify-center items-center my-20">
+      <div className="flex-1 flex justify-center items-center my-15">
         <div
-          style={{
-            backgroundImage:
-              'radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)'
-          }}
-          className="overflow-hidden rounded-[4rem] w-[90rem] grid grid-cols-10 xl:grid-row-2 sm:grid-row-5"
+          className="rounded border border-[#595F6D] h-auto overflow-hidden w-[90rem] flex flex-col gap-8 py-8"
         >
-          <div className="flex flex-col justify-center items-center xl:col-span-4 col-span-10 row-start-1 row-end-3 xl:my-0 my-12">
-            <div className="max-w-[15rem]">
-              <h2 className="text-4xl font-black">Our sponsors</h2>
-              <p className="xl:my-10 my-3 text-lg">Check out our very cool sponsors.</p>
-              <a href="sponsors">
-                <button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10 hover-animate">
-                  View our sponsors
-                </button>
-              </a>
-            </div>
-          </div>
-          <div className={`${firstRowBoxesStyling} bg-[rgba(0, 71, 255, 0.33)]`}>
-            <img src="assets/atlassian_logo.svg" alt="Atlassian logo" />
-          </div>
-          <div className={`${firstRowBoxesStyling} bg-[rgba(82, 130, 255, 0.47)]`}>
-            <img src="assets/google_logo.svg" alt="Google logo" />
-          </div>
-          <div className={`${secondRowBoxesStyling} bg-[rgba(48, 93, 255, 0.2)]`}>
-            <img src="assets/freelancer_logo.svg" alt="Freelancer logo" />
-          </div>
-          <div className={`${secondRowBoxesStyling} bg-[rgba(122, 137, 236, 0.27)]`}>
-            <img src="assets/microsoft_logo.svg" alt="Microsoft logo" />
+          <SponsorCarousel />
+          <div className="flex justify-center items-center">
+            <a href="sponsors">
+              <button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
+                Learn More
+              </button>
+            </a>
           </div>
         </div>
       </div>

frontend/src/pages/about/index.tsx

@@ -17,7 +17,7 @@ export default function AboutPage() {
               </div>
               <h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
               <p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
-              <a href="https://www.facebook.com/csesoc/" target="_blank">
+              <a href="https://github.com/csesoc/" target="_blank">
                 <button className="bg-[#444F6F] w-full my-5 py-2 rounded hover-animate">Follow</button>
               </a>
               <p>

frontend/src/pages/sponsors.tsx

@@ -10,67 +10,52 @@ export default function SponsorsPage() {
   const [showModal, setShowModal] = useState(false);
   const [information, setInformation] = useState<sponsorInfo | null>(null);
 
+  const handleSponsorClick = (info: sponsorInfo) => {
+    setInformation(info);
+    setShowModal(true);
+  };
+
   return (
     <Layout>
       <section className="py-8">
-        <h2 className="text-4xl font-black text-center font-bold">Diamond Sponsors</h2>
+        <h2 className="text-4xl font-black text-center font-bold">DIAMOND SPONSORS</h2>
         <div>
           <div className="w-100 flex flex-col gap-16">
             {showModal && (
               <SponsorModal
                 sponsorInfo={information}
-                setFalse={() => {
-                  setShowModal(false);
-                }}
+                setFalse={() => setShowModal(false)}
               />
             )}
             <div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-center rounded border-2 border-[#595F6D] my-10">
               {diamondLinks.map((item, index) => {
                 return (
-                  <div
-                    key={index}
-                    onClick={() => {
-                      setInformation(item);
-                      setShowModal(true);
-                    }}
-                  >
+                  <div key={index} onClick={() => handleSponsorClick(item)}>
                     <img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
                   </div>
                 );
               })}
             </div>
           </div>
         </div>
-        <h2 className="text-4xl font-black text-center font-bold">Gold Sponsors</h2>
+        <h2 className="text-4xl font-black text-center font-bold">GOLD SPONSORS</h2>
         <div>
           <div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] my-10">
             {goldLinks.map((item, index) => {
               return (
-                <div
-                  key={index}
-                  onClick={() => {
-                    setInformation(item);
-                    setShowModal(true);
-                  }}
-                >
+                <div key={index} onClick={() => handleSponsorClick(item)}>
                   <img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
                 </div>
               );
             })}
           </div>
         </div>
-        <h2 className="text-4xl font-black text-center font-bold">Silver Sponsors</h2>
+        <h2 className="text-4xl font-black text-center font-bold">SILVER SPONSORS</h2>
         <div>
           <div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] mt-10">
             {silverLinks.map((item, index) => {
               return (
-                <div
-                  key={index}
-                  onClick={() => {
-                    setInformation(item);
-                    setShowModal(true);
-                  }}
-                >
+                <div key={index} onClick={() => handleSponsorClick(item)}>
                   <img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
                 </div>
               );