Fixed Custom button, Navbar, Loader, events

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

@@ -6,7 +6,6 @@
   font-style: normal;
 }
 .nitsParent {
-  margin: 1rem;
   .NitsHacks {
     .headWrapper {
       width: 100%;
@@ -26,7 +25,7 @@
           font-size: 2rem;
         }
         @media screen and (min-width: 900px) {
-          font-size: 4rem;
+          font-size: 3rem;
         }
       }
     }
@@ -165,7 +164,9 @@
     margin: 4rem;
   }
   @media screen and (min-width: 1000px) {
-    margin: 15rem;
+    margin-left: 15rem;
+    margin-right: 15rem;
+    margin-top: 10rem;
   }
 
   @media screen and (max-width: 600px) {

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/Event/Event.jsx

@@ -1,8 +1,38 @@
+import { useNavigate } from "react-router-dom";
 import styles from "./Event.module.scss";
-// import data from "../../assets/events.json";
+import data from "../../assets/events.json";
+
 // import card here
 const Event = () => {
-  return <div className={styles.event} id="events"></div>;
+  const navigate = useNavigate();
+
+  return (
+    <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>
+  );
 };
 
 export default Event;

src/Components/Event/Event.module.scss

@@ -1,3 +1,82 @@
-.event {
-  //write your styles
+.heading {
+  font-family: "StarJedi", sans-serif;
+  color: #f2c300;
+  font-size: 3rem;
+  margin-bottom: 2rem;
+}
+
+.contain {
+  margin-top: 10rem;
+  margin-bottom: 8rem;
+  text-align: center;
+}
+
+.events {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  .event {
+    width: 24rem;
+    height: 24rem;
+    aspect-ratio: 1;
+    background-size: cover;
+    background-position: center;
+    margin: 2rem;
+    display: flex;
+    align-items: end;
+    overflow: hidden;
+
+    &:hover {
+      .detailshadow {
+        top: 0%;
+        transition: all 0.5s ease;
+      }
+    }
+  }
+}
+
+.detailshadow {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  top: 100%;
+  background-image: linear-gradient(to top, #000, #000000aa, transparent);
+  transition: all 0.5s ease;
+  display: flex;
+  align-items: end;
+}
+
+.details {
+  height: 55%;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  font-family: "Outfit", sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: start;
+  h1 {
+    font-weight: 600;
+    font-size: 1.1rem;
+    width: 100%;
+  }
+  p {
+    font-size: 0.7rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    letter-spacing: 1px;
+    text-align: justify;
+    margin-top: 0.2rem;
+  }
+  button {
+    color: #000;
+    margin-top: 1rem;
+    cursor: pointer;
+    font-family: "Death Star", sans-serif;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    padding: 0.3rem 0.7rem;
+  }
 }

src/Components/Loader/Loader.jsx

@@ -46,9 +46,9 @@ const Loader = ({ setLoaded }) => {
             <Lottie
               className={styles.sword}
               lottieRef={lottieRef}
-              onEnterFrame={() => lottieRef.current.setSpeed(0.27)}
+              onEnterFrame={() => lottieRef.current.setSpeed(0.3)}
               animationData={swordAnimation}
-              initialSegment={[0, 23]}
+              initialSegment={[0, 22]}
               onComplete={() => {
                 setLoaded(true);
                 audio.pause();

src/Components/Navbar/Navbar.jsx

@@ -5,7 +5,7 @@ import styles from "./Navbar.module.scss";
 const Navbar = () => {
   const [hamOpen, setHamOpen] = useState(false);
   const navigate = useNavigate();
-  const currPage = window.location.pathname;
+  const currPage = window.location.pathname.split("/")[1];
   const location = useLocation();
 
   useEffect(() => {
@@ -28,9 +28,10 @@ const Navbar = () => {
 
   useEffect(() => {
     const navMap = new Map([
-      ["/", 0],
-      ["/faq", 2],
-      ["/team", 4],
+      ["", 0],
+      ["event", 1],
+      ["faq", 2],
+      ["team", 4],
     ]);
     const curr = navMap.get(currPage);
     const links = document.querySelectorAll(`.${styles.deskNav}`);

src/Components/Sponsor/Sponsor.jsx

@@ -5,7 +5,7 @@ import sponsors from "../../assets/sponsors.json";
 const Sponsor = () => {
   return (
     <div className={styles.sponsor} id="sponsors">
-      <h1 className={styles.heading}>Sponsor</h1>
+      <h1 className={styles.heading}>Sponsors</h1>
       <div className={styles.innerCont}>
         {sponsors.map((sponsor) => (
           <Card key={sponsor.id} photo={sponsor.img} link={sponsor.uri} />

src/Components/Sponsor/Sponsor.module.scss

@@ -19,7 +19,7 @@
   font-family: "Starjedi", sans-serif;
   font-size: 2.5rem;
   text-align: center;
-  color: yellow;
+  color: #f2c300;
   @media screen and (max-width: 450px) {
     font-size: 2rem;
   }

src/Pages/Error/CustomButton.jsx

@@ -1,37 +1,41 @@
 import styles from "./CustomButton.module.scss";
-const Button = () => {
+
+const Button = ({ name, ohref }) => {
   return (
     <div className={styles.button}>
-      <a href="/" className={styles.backtohome}>
-        <div className={styles.visited}>Back to Home</div>
-        <div className={styles.div}></div>
-        <div className={styles.firstchange}></div>
+      <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}>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
-          <p className={styles.slashes}>|</p>
+          {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>
-
-        <div className={styles.fourthchange}></div>
-
-        <hr className={styles.aboveline} />
-        <hr className={styles.abovelinetwo} />
-        <hr className={styles.abovelinethree} />
-        <hr className={styles.abovelinefour} />
-        <hr className={styles.abovelinefive} />
       </a>
-      <div className={styles.vector}></div>
-      <div className={styles.vectortwo}></div>
     </div>
   );
 };
+
 export default Button;