created the events section in homepage

.eslintrc.js

@@ -24,5 +24,6 @@ module.exports = {
         "no-console": "warn",
         "react/display-name": "off",
         "react/react-in-jsx-scope": "off",
+        "react/prop-types": 0,
     },
 };

package.json

@@ -12,6 +12,8 @@
         "react-i18next": "^11.18.1",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
+        "react-slick": "^0.29.0",
+        "slick-carousel": "^1.8.1",
         "web-vitals": "^2.1.4"
     },
     "scripts": {
@@ -76,4 +78,4 @@
             "path": "./node_modules/cz-conventional-changelog"
         }
     }
-}
+}

src/components/SliderArrow/SliderArrow.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import leftArrowSvg from "../../images/chevron-left.svg";
+import rightArrowSvg from "../../images/chevron-right.svg";
+
+const SliderArrow = ({ leftOrRight, onClick }) => {
+  return (
+    <div className="arrow">
+      <img
+        src={leftOrRight === "left" ? rightArrowSvg : leftArrowSvg}
+        onClick={onClick}
+        style={
+          leftOrRight === "left"
+            ? { marginLeft: "1rem" }
+            : { marginRight: "1rem" }
+        }
+        alt="Carousel Arrow"
+      />
+    </div>
+  );
+};
+
+export default SliderArrow;

src/components/event-card/EventCard.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const EventCard = ({ eventPost }) => {
+    return (
+        <div className='relative mb-6 mt-16 w-full min-w-0 max-w-md break-words rounded-xl px-5 xl:max-w-2xl'>
+            <div className='card-header mx-4 -mt-6'>
+                <Link to={`/event/${eventPost.id}`}>
+                    <img
+                        className='w-auto rounded-lg'
+                        src={eventPost.image}
+                        alt={eventPost.name}
+                    />
+                </Link>
+            </div>
+            <div className='flex flex-col'>
+                <a href='#'>
+                    <h2 className='font-bold text-center mt-2 text-white text-lg'>{eventPost.name}</h2>
+                </a>
+                <p className='mb-4 opacity-60 text-center text-white'>{eventPost.location}</p>
+                <a href='#'>
+                    <h4 className='font-semibold text-center mb-3 text-white'>{eventPost.topic}</h4>
+                </a>
+                <div className='flex rounded-md bg-white'>
+                    <p className='ml-2 grow pt-1.5 opacity-60'>
+                        {eventPost.date}
+                    </p>
+                    <button
+                        className='button flex w-30 grow-0 flex-row justify-center justify-self-end rounded-md bg-blue-dark p-2'
+                        data-ripple-light='true'
+                    >
+                        <p className='ml-3 text-white'>Read More</p>
+                        <svg
+                            xmlns='http://www.w3.org/2000/svg'
+                            className='ml-2 mt-1 h-5 w-5 -translate-x-2 stroke-white transition duration-300 group-hover:translate-x-0'
+                            fill='none'
+                            viewBox='0 0 24 24'
+                            stroke='currentColor'
+                            stroke-2
+                        >
+                            <path d='M9 5l7 7-7 7' />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EventCard;

src/components/events/Events.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.diagonal-box {
+	/* background-image: linear-gradient(45deg, #6303B1, #ff0099); */
+  transform: skewY(-2deg);
+} 
+.content { 	
+	max-width: 80%;
+    margin: 0 auto; 
+    transform: skewY(2deg);
+}
+
+.slick-slider {
+  display: flex;
+  flex-direction: row !important;
+  align-items: center;
+
+  .arrow {
+    margin-bottom: 3rem;
+  }
+
+  .slick-list {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    .col-md-4 {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+
+  .slick-track {
+    display: flex;
+  }
+}