Replace previous events carousel with gallery, remove previous events…

… from home page and switch to multi-carousel

frontend/package.json

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

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-2xl">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">
+        <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,46 @@
+import React from 'react';
+import { previousEvents } from '../../../public/data/events';
+import { Gallery } from "react-grid-gallery";
+
+const EventGallery = () => {
+  const formattedEvents = previousEvents.map((event) => {
+    return {
+      src: event.image,
+      height: 256,
+      width: 500,
+      customOverlay: (
+        <div className="absolute inset-0 bg-black bg-opacity-60 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>
+      ),
+    };
+  });
+
+  return (
+    <Gallery
+      images={formattedEvents}
+      enableImageSelection={false}
+    />
+  );
+};
+
+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,12 +1,13 @@
 import React from 'react';
-import Carousel from './carousel';
-import { events, previousEvents } from '../../../public/data/events';
+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">
@@ -22,8 +23,13 @@ const Event = () => {
         </div>
         <div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
       </div>
+      <div className="flex items-center justify-start mt-10">
+        <p className="text-2xl font-bold pl-20">
+          Explore upcoming events
+        </p>
+      </div>
       {events.length !== 0 ?
-        <Carousel events={events}/> :
+        <EventsCarousel/> :
         <div className="flex items-center justify-center h-96">
           <p className="text-2xl">No upcoming events... check back here later!</p>
         </div>
@@ -33,7 +39,7 @@ const Event = () => {
           Previous events
         </p>
       </div>
-      <Carousel events={previousEvents} />
+      <EventGallery />
     </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>
   );