Added Loader to the Homepage, used Lottie

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@vitejs/plugin-react": "^4.2.1",
-    "pnpm": "^9.12.0",
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.3.0",

src/Components/About/NitsHacks/NitsHacks.module.scss

@@ -6,16 +6,6 @@
   font-style: normal;
 }
 .nitsParent {
-  margin: 1rem;
-  @media screen and (min-width: 640px) {
-    margin: 2rem;
-  }
-  @media screen and (min-width: 900px) {
-    margin: 4rem;
-  }
-  @media screen and (min-width: 1000px) {
-    margin: 15rem;
-  }
   .NitsHacks {
     .headWrapper {
       width: 100%;
@@ -25,18 +15,18 @@
       }
       .heading {
         font-size: 1.5rem;
-        @media screen and (min-width: 640px) {
-          font-size: 2rem;
-        }
-        @media screen and (min-width: 900px) {
-          font-size: 4rem;
-        }
         text-align: left;
         // background-color: black;
         color: var(--gdsc-yellow-1-100);
         // line-height: 89.13px;
         font-family: "StarJedi", sans-serif;
         font-weight: 400;
+        @media screen and (min-width: 640px) {
+          font-size: 2rem;
+        }
+        @media screen and (min-width: 900px) {
+          font-size: 3rem;
+        }
       }
     }
     .line {
@@ -75,16 +65,16 @@
       background-color: black;
       color: #c0c0c0;
       font-size: 14px;
-      @media screen and (min-width: 800px) {
-        font-size: 18px;
-      }
       align-items: center;
       justify-content: center;
       font-weight: 400;
       line-height: 1.8;
       font-family: "Outfit", sans-serif;
       padding: 1rem;
       overflow: hidden;
+      @media screen and (min-width: 800px) {
+        font-size: 18px;
+      }
     }
     .icon {
       height: 30px;
@@ -167,6 +157,17 @@
     background-color: #4a4a4a; /* Adjust the background color */
     clip-path: polygon(0% 0%, 100% 0%, 100% 185%, 80% 70%, 45% 70%, 40% 100%, 0% 100%);
   }
+  @media screen and (min-width: 640px) {
+    margin: 2rem;
+  }
+  @media screen and (min-width: 900px) {
+    margin: 4rem;
+  }
+  @media screen and (min-width: 1000px) {
+    margin-left: 15rem;
+    margin-right: 15rem;
+    margin-top: 10rem;
+  }
 
   @media screen and (max-width: 600px) {
     hr.line1 {

src/Components/About/Tecno/Tecno.module.scss

@@ -14,7 +14,9 @@
     margin: 4rem;
   }
   @media screen and (min-width: 1000px) {
-    margin: 15rem;
+    margin-left: 15rem;
+    margin-right: 15rem;
+    margin-top: 10rem;
   }
   .NitsHacks {
     .headWrapper {
@@ -29,7 +31,7 @@
           font-size: 2rem;
         }
         @media screen and (min-width: 900px) {
-          font-size: 4rem;
+          font-size: 3rem;
         }
         text-align: right;
         // background-color: black;

src/Components/CustomButton/CustomButton.jsx

@@ -0,0 +1,41 @@
+import styles from "./CustomButton.module.scss";
+
+const Button = ({ name, ohref }) => {
+  return (
+    <div className={styles.button}>
+      <a href={ohref} className={styles.backtohome}>
+        <div className={styles.top}></div>
+        <div className={styles.visited}>{name}</div>
+        <div className={styles.last}>
+          <div className={styles.ring}>
+            <div className={styles.bottblak}></div>
+          </div>
+          <div className={styles.bott}></div>
+        </div>
+        <div className={styles.slashcombine}>
+          {Array.from({ length: 12 }).map(() => (
+            <p className={styles.slashes} key={Math.random().toString()}>
+              |
+            </p>
+          ))}
+        </div>
+        <div className={styles.popat}>
+          <svg
+            width="182"
+            height="12"
+            viewBox="0 0 182 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M175.691 1.86697L180.908 10.7285L1.69163 10.7285L8.32851 1.8702L10.0921 4.34184L10.2744 4.59727H10.5882L172.983 4.59727H173.256L173.438 4.39351L175.691 1.86697Z"
+              className={styles.toprect}
+            />
+          </svg>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+export default Button;

src/Components/CustomButton/CustomButton.module.scss

@@ -0,0 +1,107 @@
+.button {
+  position: relative;
+  width: 14rem;
+  height: 1.9rem;
+  aspect-ratio: 7/2;
+  cursor: pointer;
+}
+
+.top {
+  width: 14rem;
+  border-bottom: 0.5rem solid #fff;
+  border-left: 1rem solid transparent;
+}
+
+.backtohome {
+  text-decoration: none;
+  color: black;
+}
+.visited {
+  font-family: "Death Star";
+  background-color: white;
+  color: black;
+  padding: 5px 0;
+}
+
+.last {
+  display: flex;
+}
+
+.toprect {
+  stroke: #faff00;
+  stroke-width: 1px;
+}
+
+.popat {
+  svg {
+    width: 8.8rem;
+  }
+  position: absolute;
+  top: -1.1rem;
+  right: 0;
+}
+
+.bottblak {
+  width: 3.8rem;
+  height: 0.4rem;
+  background-color: #000;
+  border-left: 1px solid #faff00;
+  border-top: 1px solid #faff00;
+  border-bottom: 1px solid #faff00;
+}
+
+.bott {
+  width: 10.8rem;
+  position: absolute;
+  bottom: -1rem;
+  right: 0;
+  border-top: 0.4rem solid #fff;
+  border-left: 0.4rem solid transparent;
+  border-right: 0.4rem solid transparent;
+  @media screen and (max-width: 768px) {
+    bottom: -1.5rem;
+  }
+  @media screen and (max-width: 1080px) {
+    bottom: -1.4rem;
+  }
+}
+
+.slashcombine {
+  display: flex;
+  gap: 2px;
+  position: absolute;
+  top: -0.7rem;
+  left: 20px;
+  .slashes {
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    font-size: 7px;
+    transform: rotate(-149deg);
+    transition: all 0.3s ease;
+  }
+}
+
+.button:hover {
+  filter: drop-shadow(0 0 8px #ee9d00);
+  .slashes {
+    color: black;
+    transition: all 0.3s ease;
+  }
+  .toprect {
+    stroke: #ee9d00;
+    transition: all 0.3s ease;
+  }
+  .bottblak {
+    border-left: 1px solid #ee9d00;
+    border-top: 1px solid #ee9d00;
+    border-bottom: 1px solid #ee9d00;
+    transition: all 0.3s ease;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .slashcombine {
+    left: 10px;
+    gap: 0.5px;
+  }
+}

src/Components/Event/Event.jsx

@@ -1,14 +1,36 @@
+import { useNavigate } from "react-router-dom";
 import styles from "./Event.module.scss";
-// import data from "../../assets/events.json";
-// import card here
+import data from "../../assets/events.json";
+
 const Event = () => {
+  const navigate = useNavigate();
+
   return (
-    <div className={styles.event}>
-      Event Section
-      {/*
-                Map the event cards here using .map
-            */}
-    </div>
+    <main className={styles.contain}>
+      <h1 className={styles.heading}>events</h1>
+      <div className={styles.events} id="events">
+        {data.map((marvel) => (
+          <div
+            className={styles.event}
+            style={{ backgroundImage: `url(${marvel.photo})` }}
+            onClick={() => {
+              navigate(`/event/${marvel.id}`);
+            }}
+          >
+            <div className={styles.detailshadow}>
+              <div className={styles.details}>
+                <h1>{marvel.name}</h1>
+                <p>{marvel.desc}</p>
+                <button>
+                  <img src="/images/smearth.svg" alt="small earth" />
+                  VIEW MORE
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </main>
   );
 };