Add slider for member clubs

src/assets/data/clubs.json

@@ -0,0 +1,77 @@
+[
+    {
+        "id": "acm",
+        "name": "Association For Computing Machinery",
+        "logo": "/assets/img/clubs/acm.png",
+        "website": "https://acm-uci.org/",
+        "description": ""
+    },
+    {
+        "id": "ai",
+        "name": "AI at UCI",
+        "logo": "/assets/img/clubs/ai.png",
+        "website": "https://aiclub.ics.uci.edu/",
+        "description": ""
+    },
+    {
+        "id": "blockchain",
+        "name": "Blockchain at UCI",
+        "logo": "/assets/img/clubs/blockchain.png",
+        "website": "https://www.blockchainuci.org/",
+        "description": ""
+    },
+    {
+        "id": "ctc",
+        "name": "Commit the Change",
+        "logo": "/assets/img/clubs/ctc.svg",
+        "website": "https://ctc-uci.com/",
+        "description": ""
+    },
+    {
+        "id": "cyber",
+        "name": "Cyber @ UCI",
+        "logo": "/assets/img/clubs/cyber.png",
+        "website": "https://cyberclub.ics.uci.edu/",
+        "description": ""
+    },
+    {
+        "id": "hack",
+        "name": "Hack at UCI",
+        "logo": "/assets/img/clubs/hack.png",
+        "website": "https://hack.ics.uci.edu/",
+        "description": ""
+    },
+    {
+        "id": "ieee",
+        "name": "Institute of Electrical and Electronics Engineers",
+        "logo": "/assets/img/clubs/ieee.png",
+        "website": "https://ieee.ics.uci.edu/",
+        "description": ""
+    },
+    {
+        "id": "maiss",
+        "name": "Management Information Student Society",
+        "logo": "/assets/img/clubs/maiss.png",
+        "website": "https://www.maissuci.com/",
+        "description": ""
+    },
+    {
+        "id": "vgdc",
+        "name": "Video Game Development Club",
+        "logo": "/assets/img/clubs/vgdc.png",
+        "website": "https://sites.google.com/uci.edu/vgdcuci/",
+        "description": ""
+    },
+    {
+        "id": "vrdc",
+        "name": "Virtual Reality Development Club",
+        "logo": "/assets/img/clubs/vrdc.png"
+    },
+    {
+        "id": "wics",
+        "name": "Women in Information and Computer Science",
+        "logo": "/assets/img/clubs/wics.png",
+        "website": "https://wics.ics.uci.edu/",
+        "description": ""
+    }
+]

src/components/footer.js

@@ -6,58 +6,89 @@ import {
   FaEnvelope,
 } from "react-icons/fa";
 import Link from "next/link";
+import Clubs from "../assets/data/clubs.json";
+import Image from "next/image";
 
 const MEDIA_LINKS = [
   {
-    key: 1,
+    id: 1,
     link: "https://www.facebook.com/ICSStudentCouncil/",
     icon: <FaFacebook />,
   },
   {
-    key: 2,
+    id: 2,
     link: "https://www.facebook.com/ICSStudentCouncil/",
     icon: <FaInstagram />,
   },
   {
-    key: 3,
+    id: 3,
     link: "https://www.facebook.com/ICSStudentCouncil/",
     icon: <FaDiscord />,
   },
   {
-    key: 4,
+    id: 4,
     link: "https://www.facebook.com/ICSStudentCouncil/",
     icon: <FaGithub />,
   },
   {
-    key: 5,
+    id: 5,
     link: "mailto: [email protected]",
     icon: <FaEnvelope />,
   },
 ];
 
+const ClubElement = (props) => {
+  const { name, logo, website } = props;
+  return (
+    <div className="flex items-center text-center">
+      <div className="w-[100px]">
+        <Link href={website ? website : ""} target="_blank" rel="noreferrer">
+          <Image
+            src={logo}
+            alt={name}
+            width={160}
+            height={160}
+            className="rounded-lg"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
 export default function Footer() {
   return (
-    <footer className="w-[100%] flex flex-col gap-5 p-6 sm:p-10">
-      <div className="flex justify-center gap-5 sm:gap-12 text-3xl sm:text-4xl">
-        {MEDIA_LINKS.map((link) => (
-          <Link
-            href={link.link}
-            target="_blank"
-            referrerPolicy="noreferrer"
-            key={link.key}
-          >
-            {link.icon}
-          </Link>
-        ))}
+    <div className="flex flex-col gap-4 sm:gap-10 mt-10">
+      <div className="flex flex-col gap-4">
+        <span className="flex justify-center text-3xl">Our Member Clubs</span>
+        <div className="flex flex-row mx-auto overflow-x-scroll w-[50%] gap-6">
+          {Clubs.map((club) => (
+            <ClubElement {...club} key={club.id} />
+          ))}
+        </div>
       </div>
-      <div className="flex flex-col">
-        <div className="flex justify-center text-lg sm:text-2xl">
-          Made with 💖 by the ICSSC team
+      <footer className="w-[100%] flex flex-col gap-5 p-6">
+        <div className="flex justify-center gap-5 sm:gap-12 text-3xl sm:text-4xl">
+          {MEDIA_LINKS.map((link) => (
+            <Link
+              href={link.link}
+              target="_blank"
+              referrerPolicy="noreferrer"
+              key={link.key}
+            >
+              {link.icon}
+            </Link>
+          ))}
         </div>
-        <div className="flex justify-center text-sm sm:text-md">
-          Copyright © 2023 ICSSC
+        <div className="flex flex-col">
+          <div className="flex justify-center text-lg sm:text-2xl">
+            Made with 💖 by the ICSSC team
+          </div>
+          <div className="flex justify-center text-sm sm:text-md">
+            Copyright © 2023 ICSSC
+          </div>
         </div>
-      </div>
-    </footer>
+      </footer>
+    </div>
   );
 }