feat(ui): add events carousel

ui/src/components/EventsCarousel/index.tsx

@@ -0,0 +1,65 @@
+import styles from './styles.module.css';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+import {dummyNewsImg} from '../../assets';
+
+const data = [
+  {
+    name: 'Aperta Fons',
+    club: 'TPC',
+    imgUrl: dummyNewsImg,
+  },
+  {
+    name: 'Aperta Fons',
+    club: 'TPC',
+    imgUrl: dummyNewsImg,
+  },
+  {
+    name: 'Aperta Fons',
+    club: 'TPC',
+    imgUrl: dummyNewsImg,
+  },
+  {
+    name: 'Aperta Fons',
+    club: 'TPC',
+    imgUrl: dummyNewsImg,
+  },
+  {
+    name: 'Aperta Fons',
+    club: 'TPC',
+    imgUrl: dummyNewsImg,
+  },
+];
+
+export const EventsCarousel: React.FC = () => {
+  const responsive = {
+    desktop: {
+      breakpoint: {max: 5000, min: 1024},
+      items: 4,
+    },
+    tablet: {
+      breakpoint: {max: 1024, min: 800},
+      items: 2,
+    },
+    mobile: {
+      breakpoint: {max: 800, min: 0},
+      items: 1,
+    },
+  };
+  return (
+    <div className={styles.container}>
+      <div className={styles.heading}>Upcoming</div>
+      <Carousel responsive={responsive} className={styles.carousel}>
+        {data.map((event, i) => (
+          <div key={i} className={styles.card}>
+            <img src={event.imgUrl} alt="event" />
+            <div>
+              <div className={styles.name}>{event.name}</div>
+              <div className={styles.club}>{event.club}</div>
+            </div>
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  );
+};

ui/src/components/EventsCarousel/styles.module.css

@@ -0,0 +1,56 @@
+.container {
+  margin-top: 8vh;
+}
+
+.heading {
+  background-color: var(--primary-color);
+  width: fit-content;
+  padding: 1.5vh 3vh;
+  border-radius: 15px;
+  color: var(--secondary-color);
+  font-weight: 600;
+  margin-bottom: 2vh;
+  margin-left: 3vw;
+}
+
+.carousel {
+  padding: 4vh 3vw;
+  width: 97%;
+}
+
+.card {
+  background-color: var(--off-white);
+  width: 235px;
+  height: 200px;
+  transition: scale 1s;
+  box-shadow: 5.57653px 5.57653px 22.3061px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.card:hover {
+  transform: scale(1.1);
+  background-color: var(--secondary-color);
+}
+
+.card img {
+  width: 100%;
+  height: 70%;
+  border-radius: 20px 20px 0 0;
+}
+
+.name {
+  color: var(--primary-text);
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-top: 10%;
+}
+.club {
+  color: var(--secondary-text);
+  font-size: 0.9rem;
+  text-align: center;
+}

ui/src/pages/Home/index.tsx

@@ -1,4 +1,5 @@
 import {ClubsCarousel} from '../../components/ClubsCarousel';
+import {EventsCarousel} from '../../components/EventsCarousel';
 import {NewsCarousel} from '../../components/NewsCarousel';
 import {TopBar} from '../../components/TopBar';
 import styles from './styles.module.css';
@@ -11,6 +12,7 @@ export const Home: React.FC = () => {
         <TopBar />
         <NewsCarousel />
         <ClubsCarousel />
+        <EventsCarousel />
       </div>
     </div>
   );