Event section

.github/workflows/eslint.yml

@@ -42,4 +42,4 @@ jobs:
         run: npm install
 
       - name: Run ESLint
-        run: npm run lint
+        run: npm run lint

src/App.jsx

@@ -1,6 +1,7 @@
 import { Routes, Route } from "react-router-dom";
 
 import { Home, Error, Event, Faq, Team } from "./Pages";
+import EventSection from "./Components/Event/Event";
 
 const App = () => {
   return (
@@ -10,6 +11,7 @@ const App = () => {
       <Route path="/faq" element={<Faq />} />
       <Route path="/team" element={<Team />} />
       <Route path="*" element={<Error />} />
+      <Route path="/eventSection" element={<EventSection />} />
     </Routes>
   );
 };

src/Components/Event/Event.jsx

@@ -1,13 +1,41 @@
 import styles from "./Event.module.scss";
-// import data from "../../assets/events.json";
-// import card here
+import events from "../../assets/events.json";
+
 const Event = () => {
+  const handleClick = (id) => {
+    window.location.href = `/event/${id}`;
+  };
+
   return (
-    <div className={styles.event}>
-      Event Section
-      {/*
-                Map the event cards here using .map
-            */}
+    <div className={styles.eventBox}>
+      <h1 className={styles.heading}>Events</h1>
+      <div className={styles.eventCont}>
+        <div className={styles.pagebody}>
+          {events.map((event) => {
+            return (
+              <div
+                key={event.id}
+                className={styles.card}
+                onClick={() => handleClick(event.id)}
+              >
+                <div className={styles.innerCont}>
+                  <img className={styles.img1} src={event.photo} alt={event.name} />
+                  <div className={styles.content}>
+                    <div className={styles.rectangle}>
+                      <div className={styles.box}>
+                        <p className={styles.title}>{event.name}</p>
+                      </div>
+                    </div>
+                    <p className={styles.description2}>{event.desc2}</p>
+
+                    <div className={styles.btn5}>View More!</div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
     </div>
   );
 };