Merge pull request #37 from csesoc/CW2-30-Design-events-cards

[CW2-30] Design event cards

frontend/public/data/events.ts

@@ -0,0 +1,88 @@
+
+export type eventInfo = {
+  title: string;
+  startTime: string;
+  endTime: string;
+  location: string;
+  description: string;
+  image: string;
+  link: string;
+};
+
+export const events: eventInfo[] = [
+  {
+    title: 'Rookie Code Rumble - Capture The Flag (CTF) Competition',
+    startTime: 'Wednesday, 19 June 2024 16:00:00',
+    endTime: '23:45 22 June 2024',
+    location: 'Columbo Theatre A, UNSW',
+    description: 'Want to learn how to hack the mainframe❓ Want to explore security❓ Join us for the Rookie Code Rumble Capture The Flag on June 19th‼️ 🚀\nWin prizes from a $450 Prize Pool🏆 Teams of up to 3 allowed. Beginners welcomed, no prior experience required and students who haven\'t done security courses are especially welcomed.',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/448249337_964318925477719_4689171588021736660_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=75d36f&_nc_ohc=ORdXB7beljwQ7kNvgGK3EgT&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AJPQZFI3KDjqlUXpEXj0g4n&oh=00_AYCqsRE9By_qBvBJ5bRLKnci9t6gSiHUGfmIkSQS4WG2LA&oe=67135575',
+    link: 'https://www.facebook.com/events/427443166914907',
+  },
+  {
+    title: 'Open Dev Workshop 1',
+    startTime: 'Thursday, 13 June 2024 14:00:00',
+    endTime: 'Thursday, 13 June 2024 16:00:00',
+    location: 'Civil Engineering Building 102, UNSW',
+    description: 'Feeling the FOMO to start your own side projects😖?? But don\'t know where or how to start??🧐 We have the solution for you: Open Dev Workshop!! 💻\nOpen Dev Workshop is an introductory workshop focusing on HTML/CSS and Javascript. With no prior knowledge required, bring your laptop and an eagerness to learn.❤️‍🔥\nDon\'t miss out on this exciting opportunity and let\'s turn your ideas into reality, one line at a time!! 🔥',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/446935726_959621305947481_1708375961476055751_n.jpg?stp=dst-jpg_s960x960&_nc_cat=102&ccb=1-7&_nc_sid=75d36f&_nc_ohc=Y8wgeRzW8DkQ7kNvgEllCg0&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AemXrjsPaAsS0Jo7t3wNPst&oh=00_AYCFB70t_M0h8epdZ7UKq8LVWL4vqtGIkSC9kGUes1ssvQ&oe=671377D6',
+    link: 'https://www.facebook.com/events/1020624239688532',
+  },
+  {
+    title: '2024 FMAA STEM Alternative Pathways Evening',
+    startTime: 'Wednesday, 9 Oct 2024 18:15:00',
+    endTime: 'Wednesday, 9 Oct 2024 20:30:00',
+    location: 'Roundhouse Room 3 & 4, UNSW',
+    description: 'Join us for an engaging panel discussion featuring representatives from Australia’s top firms across industries such as quantitative trading, management consulting, investment banking, asset management, and professional services. Gain valuable insights into how a STEM background can open doors to a variety of business and finance careers, and develop meaningful connections with industry professionals.',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/461261086_540208508398572_4261296480620587383_n.jpg?stp=dst-jpg_s960x960&_nc_cat=103&ccb=1-7&_nc_sid=75d36f&_nc_ohc=vf3IPe3_NPEQ7kNvgG_SxLX&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=ALtMsUxDU2QhcP8A5cS-tr7&oh=00_AYADt5ngFtSJsaT3YgKGjUHU8PHudDTb8eMHRu9JKuWuCw&oe=6713857F',
+    link: 'https://www.facebook.com/events/428430126479506',
+  },
+  {
+    title: 'Cultural Sweet Treats',
+    startTime: 'Wednesday, 9 Oct 2024 13:00:00',
+    endTime: 'Wednesday, 9 Oct 2024 15:00:00',
+    location: 'UNSW Quadrangle',
+    description: 'Looking for a creative way to celebrate diversity?🤔🌟 Come along for an afternoon of fun where you’ll get to design and decorate your own gift box 🎁 filled with cultural sweets from around the world!🌏 Try new flavours and treats as you craft your masterpiece for a friend, family member or yourself 😋',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/461677000_1040949901147954_3024711492723797720_n.jpg?stp=dst-jpg_s960x960&_nc_cat=100&ccb=1-7&_nc_sid=75d36f&_nc_ohc=zY_RqNGeg50Q7kNvgH4izQ8&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AEzNe6W68jyyD37bJY9us2s&oh=00_AYAwuI1WXfZjhpeWSbHT1clhl05xVZdo0E-3nMCXo-Ndkw&oe=67139F71',
+    link: 'https://www.facebook.com/events/9261495757199727',
+  }
+];
+
+export const previousEvents: eventInfo[] = [
+  {
+    title: 'COMP1521 Revision Session',
+    startTime: 'Wednesday, 31 July 2024 16:00:00',
+    endTime: 'Wednesday, 31 July 2024 18:00:00',
+    location: 'UNSW Colombo Theatre B',
+    description: 'PSST 🤫 Think a pipe is what Mario goes down? ⬇️ Still think threads are for clothes? 🪡 Whether you’re seven weeks behind (😣) on lectures 👩‍🏫, or super on top of it (🤯), get ready to BYTE 👾 into a world of MIPS and files and numbers 📣 at our COMP1521 Revision Session to learn and/or reinforce your knowledge from the beginning to the end 🏁💪🏻🧠 Make no MIPStake, with bits of free food for you to byte into 🤤 our 1521 Revision Session is just for you ‼️',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/452409402_989988656244079_1650487011875279290_n.jpg?stp=dst-jpg_s960x960&_nc_cat=111&ccb=1-7&_nc_sid=75d36f&_nc_ohc=ht74Cur7JP4Q7kNvgGspvAQ&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=APUh-KsjJ_dRpSnbr0TYkXd&oh=00_AYAu-LeWj1k53uhaQe6BMnCdQiDRUmguc0R4gt93VnxsRA&oe=6713A488',
+    link: 'https://www.facebook.com/events/1911189126010096',
+  },
+  {
+    title: 'IMC Coding Competition',
+    startTime: 'Wednesday, 13 March 2024 15:00:00',
+    endTime: 'Wednesday, 13 March 2024 18:00:00',
+    location: 'Mathews Theatre B, UNSW',
+    description: 'Get those fingers 👐moving, as you’ll need to team up in groups of 3️⃣to be able to face 🗣️some of the problems thrown your way.To reward your diligence, you’ll be able to grab a free BYTE as finger food is provided 😈 Gaining coding experience and free food, what else could someone even ask for??? 😣',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/429779953_899425045300441_8341318489109234227_n.jpg?stp=dst-jpg_s960x960&_nc_cat=108&ccb=1-7&_nc_sid=75d36f&_nc_ohc=GY9LwEPT93gQ7kNvgHltEQe&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=APnYFltr29MYoFJQyVlY7HF&oh=00_AYBAaye3BXFt34mnbEi4ERpy1XmUYCTEbpzSqL1xa_xLsA&oe=6713AF65',
+    link: 'https://www.facebook.com/events/1106870833796065',
+  },
+  {
+    title: 'Cultural BBQ',
+    startTime: 'Wednesday, 17 July 2024 12:00:00',
+    endTime: 'Wednesday, 17 July 2024 14:00:00',
+    location: 'Globe Lawn',
+    description: 'Tired of eating the same food every week? 😔 Looking to expand your horizons and try some cultural food? 🥘 BROKE AND NEED SOMETHING TO EAT ⁉️⁉️ Well CSESoc has you covered with an upgrade to our weekly bbq🍖🌟',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/450318124_983296013580010_564345365632281594_n.jpg?stp=dst-jpg_s960x960&_nc_cat=109&ccb=1-7&_nc_sid=75d36f&_nc_ohc=bpVcbawdlHUQ7kNvgFOoHVZ&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AHXSpjSIF8pprA1p1Ogqi34&oh=00_AYD1_PrwM7LTFVCvhXIQ3kubwhhYkBOmIO49Gpy4bvTdEg&oe=67139777',
+    link: 'https://www.facebook.com/events/871196261705246',
+  },
+  {
+    title: 'CSESOC Boardgames Night',
+    startTime: 'Thursday, 7 March 2024 17:00:00',
+    endTime: 'Thursday, 7 March 2024 19:00:00',
+    location: 'Design Next Studio, Level 5, J17, UNSW',
+    description: 'The whirlwind of uni got u overwhelmed 😣? Come down to the Design Studio, and chill out with us 🧘‍♀️ as we play board games and indulge in free pizza 🍕!',
+    image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/429667295_896623802247232_669736057716718914_n.jpg?stp=dst-jpg_s960x960&_nc_cat=102&ccb=1-7&_nc_sid=75d36f&_nc_ohc=Ayn7Skl-pFAQ7kNvgES7wuB&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AsnAjGmOe-G8q1L6qZb9G3U&oh=00_AYDpfvDY6DpKeydN99VCHujemmm0gZwL7_O1HjXHvwiPsw&oe=671383B1',
+    link: 'https://www.facebook.com/events/322704110303236',
+  },
+];

frontend/src/components/Event/EventsBrief.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { events } from '../../../public/data/events';
+import EventsCarousel from './EventsCarousel';
+
+const EventBrief = () => {
+  return (
+    <section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
+      <div className="text-center my-10">
+        <h1 className="font-bold text-6xl">UPCOMING EVENTS</h1>
+      </div>
+      {events.length !== 0 ?
+        <EventsCarousel/> :
+        <div className="flex items-center justify-center h-96">
+          <p className="text-4xl">No upcoming events... check back here later!</p>
+        </div>
+      }
+      <div className="flex justify-center items-center">
+        <a href="events">
+          <button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
+            See all events
+          </button>
+        </a>
+      </div>
+    </section>
+  );
+};
+
+export default EventBrief;

frontend/src/components/Event/EventsCarousel.tsx

@@ -0,0 +1,72 @@
+import { events } from '@/../public/data/events';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+
+export default function EventsCarousel() {
+  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,
+    },
+  };
+
+  return (
+    <Carousel
+      responsive={responsive}
+      infinite={true}
+      autoPlay={true}
+      arrows={true}
+      autoPlaySpeed={6000}
+      keyBoardControl={false}
+      transitionDuration={1000}
+      pauseOnHover={false}
+      containerClass="carousel-container my-8"
+    >
+      {events.map((event, index) => (
+        <div key={index} className="w-full text-center px-5">
+          <a href={event.link} target="_blank" rel="noopener noreferrer" className="relative block w-full h-64 group transition-opacity duration-3000">
+            <img
+              src={event.image}
+              alt={event.title}
+              className="w-full h-64 object-contain rounded-md"
+            />
+            <div className="w-full h-64 absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center rounded-md">
+              <div className="text-white text-center p-4">
+                <h2 className="font-extrabold text-xl mb-2">{event.title}</h2>
+                <h3 className="font-bold text-lg">{event.location}</h3>
+                <p className="mt-2">
+                  {formatEventDate(event.startTime, event.endTime)}
+                </p>
+              </div>
+            </div>
+          </a>
+        </div>
+      ))}
+    </Carousel>
+  );
+}
+
+const formatEventDate = (startTime: string, endTime: string): string => {
+  const startDate = new Date(startTime);
+  const endDate = new Date(endTime);
+
+  const sameDay = startDate.toDateString() === endDate.toDateString();
+
+  if (sameDay) {
+    return startDate.toLocaleDateString();
+  } else {
+    return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`;
+  }
+};

frontend/src/components/Event/EventsGallery.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { previousEvents } from '@/../public/data/events';
+
+const EventGallery = () => {
+  return (
+    <div className="flex flex-wrap mb-14 gap-8 justify-center my-10">
+      {previousEvents.map((event, index) => {
+        return (
+          <div key={index}>
+            <div className="w-full h-48 text-center">
+              <a href={event.link} target="_blank" rel="noopener noreferrer" className="relative block w-full h-48 group transition-opacity duration-3000">
+                <img
+                  src={event.image}
+                  alt={event.title}
+                  className="w-full h-48 object-contain"
+                />
+                <div className="w-full h-48 absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                  <div className="text-white text-center p-4">
+                    <h2 className="font-extrabold text-xl mb-2">{event.title}</h2>
+                    <h3 className="font-bold text-lg">{event.location}</h3>
+                    <p className="mt-2">
+                      {formatEventDate(event.startTime, event.endTime)}
+                    </p>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default EventGallery;
+
+const formatEventDate = (startTime: string, endTime: string): string => {
+  const startDate = new Date(startTime);
+  const endDate = new Date(endTime);
+
+  const sameDay = startDate.toDateString() === endDate.toDateString();
+
+  if (sameDay) {
+    return startDate.toLocaleDateString();
+  } else {
+    return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`;
+  }
+};

frontend/src/components/Event/index.tsx

@@ -1,23 +1,43 @@
+import React from 'react';
+import { events } from '../../../public/data/events';
+import EventsCarousel from './EventsCarousel';
+import EventGallery from './EventsGallery';
+
 const Event = () => {
   return (
     <section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
       <div className="text-center my-10">
-        <h1 className="font-bold text-6xl">UPCOMING EVENTS</h1>
+        <h1 className="font-bold text-6xl">EVENTS</h1>
       </div>
       <div className="flex items-center">
         <div className="flex flex-col text-center">
-        <p className="text-center text-3xl">
-          We run a wide-variety of events for fun, learning new skills and careers. For full
-          listings, check out the CSESoc Discord or our Facebook page!
+          <p className="text-center text-2xl">
+            We run a wide-variety of events for fun, learning new skills and careers. For full
+            listings, check out our {' '}
+            <a
+              href="https://www.facebook.com/csesoc"
+              className="text-[#3977F9] relative after:bg-current after:absolute after:h-1 after:w-0 after:bottom-0 after:left-0 hover:after:w-full after:duration-200"
+            >Facebook page</a>!
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center justify-start mt-20">
+        <p className="text-4xl font-bold">
+          Explore upcoming events
         </p>
-        <a href="events">
-          <button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10 hover-animate">
-            See all events
-          </button>
-        </a>
+      </div>
+      {events.length !== 0 ?
+        <EventsCarousel/> :
+        <div className="flex items-center justify-center h-96">
+          <p className="text-4xl">No upcoming events... check back here later!</p>
         </div>
-        <div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
+      }
+      <div className="flex items-center justify-start mt-20">
+        <p className="text-4xl font-bold">
+          Previous events
+        </p>
       </div>
+      <EventGallery />
     </section>
   );
 };

frontend/src/pages/events.tsx

@@ -1,21 +1,14 @@
-import Layout from '@/components/Layout';
-import PageTitle from '@/components/PageTitle';
-import axios from 'axios';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+// import axios from 'axios';
+import Events from '@/components/Event';
 
 export default function EventsPage() {
-  const pingBackend = async () => {
-    axios
-      .get(
-        `http://${process.env.NEXT_PUBLIC_BACKEND_HOST}:${process.env.NEXT_PUBLIC_BACKEND_PORT}/ping`
-      )
-      .then((resp) => console.log(resp.data))
-      .catch((error) => console.log(error.message));
-  };
-
   return (
-    <Layout>
-      <PageTitle title="EVENTS" />
-      <button onClick={() => pingBackend()}>Ping backend</button>
-    </Layout>
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+      <Navbar />
+      <Events/>
+      <Footer />
+    </section>
   );
-}
+}

frontend/src/pages/index.tsx

@@ -1,14 +1,14 @@
 import Landing from '@/components/Landing';
 import Sponsors from '@/components/Sponsors/index';
-import Event from '@/components/Event';
 import AboutHomePage from '@/components/About/AboutHomepage';
+import EventsBrief from '@/components/Event/EventsBrief';
 
 export default function HomePage() {
   return (
     <section>
       <Landing />
       <AboutHomePage />
-      <Event />
+      <EventsBrief />
       <Sponsors />
     </section>
   );