prizes, about resp, image pointer-events

Excel2024Web · Nov 27, 2024 · dd5532b · dd5532b
1 parent bec93cd
commit dd5532b
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 97 deletions.
diff --git a/src/components/About/About.css b/src/components/About/About.css
@@ -304,7 +304,6 @@
   position: absolute;
   width: 60%;
   font-size: 1.5rem;
-  text-align: center;
   z-index: 10;
 }
 
@@ -317,12 +316,6 @@
   }
 }
 
-@media (max-width: 1390px) {
-  .abtp {
-    font-size: 1.2rem;
-  }
-}
-
 @media (max-width: 1300px) {
   .details-container {
     width: 100%;
@@ -361,6 +354,7 @@ html {
 
   .abouth1 {
     font-size: 2.5rem;
+    margin-bottom: -64px;
   }
 }
 
@@ -370,9 +364,9 @@ html {
   }
 
   .aboutsvg1 {
-    height: 90%;
+    height: 75%;
     display: flex;
-    width: 95%;
+    width: 92%;
     backdrop-filter: blur(10px);
     z-index: 3;
   }
@@ -415,19 +409,19 @@ html {
   }
 }
 
+@media (max-height: 550px) {
+  .abtp {
+    font-size: 1rem;
+  }
+}
+
 @media (max-width: 420px) {
   .circle1 {
     display: none;
   }
 
   .abtp {
-    font-size: 0.9rem;
+    font-size: 0.97rem;
     width: 80%;
   }
 }
-
-@media (max-height: 550px) {
-  .abtp {
-    font-size: 1rem;
-  }
-}
diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx
@@ -13,12 +13,15 @@ const About = () => {
     <div className="relative overflow-hidden">
       <div className="absolute bg-gradient-to-b from-[#0a0a0a] from-10% to-transparent z-50 bg-no-repeat right-0 left-0 top-0 min-h-32" />
       <div id="about" className="about-container pt-[80px]">
-        <Image className="top-left" src={top_left} />
-        <Image className="bottom-right z-0" src={bottom_right} />
-        <Image className="circle1" src={circle1} />
-        <Image className="circle2" src={circle2} />
-        <Image className="circle3" src={circle3} />
-        <h1 className="text-5xl abouth1 font-base-neue-bold max-md:text-4xl pb-[18px] text-center">
+        <Image className="pointer-events-none top-left" src={top_left} />
+        <Image
+          className="pointer-events-none bottom-right z-0"
+          src={bottom_right}
+        />
+        <Image className="pointer-events-none circle1" src={circle1} />
+        <Image className="pointer-events-none circle2" src={circle2} />
+        <Image className="pointer-events-none circle3" src={circle3} />
+        <h1 className="text-5xl abouth1 font-base-neue-bold max-md:text-4xl pb-0 md:pb-[18px] text-center">
           ABOUT
         </h1>
         <div className="details-container">
@@ -160,12 +163,13 @@ const About = () => {
             </defs>
           </svg>
 
-          <p className="abtp font-syne-medium">
+          <p className="px-2 md:p-0 abtp text-left sm:text-center font-syne-medium">
             Level up your coding skills and slay real-world challenges! Whether
             you're a seasoned developer or a coding newbie, HFT is the place to
             collaborate with like-minded tech enthusiasts to build
             groundbreaking solutions.
             <br />
+            <br />
             Join us for a 24-hour coding marathon filled with caffeine, food,
             and endless possibilities. So, gather your squad and let's code a
             better tomorrow at Hack For Tomorrow!

diff --git a/src/components/BlobAnimation.jsx b/src/components/BlobAnimation.jsx
@@ -32,7 +32,7 @@ const BlobAnimation = () => {
     <>
       <div className="relative h-screen w-screen overflow-hidden">
         <Image
-          className="absolute top-0 left-0 z-0"
+          className="pointer-events-none absolute top-0 left-0 z-0"
           src={topleft}
           alt="topleft"
         />
@@ -42,26 +42,26 @@ const BlobAnimation = () => {
           alt="constellation"
         /> */}
         <Image
-          className="hidden lg:block absolute bg-cover right-0 top-0 h-full z-0"
+          className="hidden pointer-events-none lg:block absolute bg-cover right-0 top-0 h-full z-0"
           src={right}
           alt="bot-right"
         />
-        <Image className="lcircle1" src={circle1} />
-        <Image className="lcircle2" src={circle2} />
-        <Image className="lcircle3" src={circle3} />
+        <Image className="pointer-events-none lcircle1" src={circle1} />
+        <Image className="pointer-events-none lcircle2" src={circle2} />
+        <Image className="pointer-events-none lcircle3" src={circle3} />
         <div className="absolute bg-gradient-to-b from-transparent from-95% to-[#0a0a0a] z-0 to-100% bg-no-repeat right-0 left-0 top-0 bottom-0" />
         <div
           className="container max-w-full sm:max-w-[70%] relative m-auto flex flex-col min-h-screen text-our_white justify-center gap-[20px] z-0"
           data-aos="fade-up"
           data-aos-duration="1100"
         >
           <Image
-            className="hidden sm:block absolute bottom-0 md:bottom-0 md:right-[-8rem] z-0"
+            className="pointer-events-none hidden sm:block absolute bottom-0 md:bottom-0 md:right-[-8rem] z-0"
             src={astro2}
             alt="astro"
           />
           <Image
-            className="sm:hidden absolute bottom-0 sm:bottom-0 right-0 max-sm: sm:right-[-4rem] z-0"
+            className="pointer-events-none sm:hidden absolute bottom-0 sm:bottom-0 right-0 max-sm: sm:right-[-4rem] z-0"
             src={astro3}
             alt="astro-mob"
           />

diff --git a/src/components/FAQ/FAQ.jsx b/src/components/FAQ/FAQ.jsx
@@ -43,12 +43,15 @@ const FAQ = () => {
   ];
   return (
     <div id="faq" className="faq mt-[80px] px-4 relative">
-      <Image className="bottom-right1 top-[-80px] z-[0]" src={bottom_right} />
+      <Image
+        className="pointer-events-none bottom-right1 top-[-80px] z-[0]"
+        src={bottom_right}
+      />
       <div className="relative container flex flex-col z-10 items-start px-10 py-10 mx-auto faq-container overflow-hidden ">
         <Image
           src={Bg}
           alt="bg"
-          className="absolute z-0 top-0 bottom-0 right-0 left-0 opacity-80"
+          className="pointer-events-none absolute z-0 top-0 bottom-0 right-0 left-0 opacity-80"
           fill
         />
         {/* <Image

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -6,11 +6,21 @@ import MECLogo from "@/assets/logos/[email protected]";
 import ExcelLogo from "@/assets/logos/[email protected]";
 
 import excel from "@/assets/Footer/excel.svg";
-import { FaInstagram, FaFacebookF, FaLinkedinIn } from "react-icons/fa";
-import { FaXTwitter } from "react-icons/fa6";
+import {
+  FaInstagram,
+  FaFacebookF,
+  FaLinkedinIn,
+  FaMapMarkerAlt,
+} from "react-icons/fa";
+import {FaXTwitter} from "react-icons/fa6";
 
 const Footer = () => {
   const FooterSocials = [
+    {
+      item: "Instagram",
+      link: "https://www.instagram.com/excelmec",
+      icon: FaInstagram,
+    },
     {
       item: "Twitter",
       link: "https://x.com/excelmec",
@@ -21,24 +31,24 @@ const Footer = () => {
       link: "https://www.facebook.com/excelmec",
       icon: FaFacebookF,
     },
-    {
-      item: "Instagram",
-      link: "https://www.instagram.com/excelmec",
-      icon: FaInstagram,
-    },
     {
       item: "LinkedIn",
       link: "https://www.linkedin.com/company/excelmec",
       icon: FaLinkedinIn,
     },
+    {
+      item: "GMap",
+      link: "https://maps.app.goo.gl/PycGaWgidy8eDQsx9",
+      icon: FaMapMarkerAlt,
+    },
   ];
   return (
     <footer className="max-md:min-h-dvh container relative z-10 flex flex-col items-center justify-between pt-32 px-6 pb-6 m-auto mt-[80px] sm:p-10">
       <div className="flex flex-col items-center gap-2rem mb-[72px]  md:mt-[150px] mt-[15vh] z-10">
         <Image
           src={excel}
           alt="excellogo"
-          className="skeleton"
+          className="skeleton pointer-events-none"
           data-aos="fade-up"
         ></Image>
         <div className="mt-3 text-center">
@@ -66,7 +76,7 @@ const Footer = () => {
         <Image
           src={ExcelLogo}
           alt="ExcelLogo"
-          className="h-[64px] w-fit cursor-pointer max-md:h-[50px]"
+          className="h-[64px] pointer-events-none w-fit cursor-pointer max-md:h-[50px]"
           onClick={() => {
             window.open("https://excelmec.org", "_blank");
           }}
@@ -86,7 +96,7 @@ const Footer = () => {
         <Image
           src={MECLogo}
           alt="mec"
-          className="h-[62px] max-md:scale-90 w-fit cursor-pointer max-md:h-[64px]"
+          className="h-[62px] pointer-events-none max-md:scale-90 w-fit cursor-pointer max-md:h-[64px]"
           onClick={() => {
             window.open("https://www.mec.ac.in", "_blank");
           }}

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -87,7 +87,7 @@ const Navbar = () => {
       </div> */}
       <div className=" tracking-[0.1rem] font-base-neue-black text-3xl">
         <a href="https://www.excelmec.org">
-          <Image src={ExcelLogoMob} className="w-8" />
+          <Image src={ExcelLogoMob} className="pointer-events-none w-8" />
         </a>
       </div>
 

diff --git a/src/components/Partners/partners.jsx b/src/components/Partners/partners.jsx
@@ -42,8 +42,12 @@ const Partners = () => {
 
   return (
     <section className="partners-section pt-[80px] " id="partners">
-      <Image className="top-left1" src={top_left} />
-      <Image className="bottom-right1" src={bottom_right} alt="bot-right" />
+      <Image className="pointer-events-none top-left1" src={top_left} />
+      <Image
+        className="pointer-events-none bottom-right1"
+        src={bottom_right}
+        alt="bot-right"
+      />
       {/* <div className="absolute bg-gradient-to-b from-[#2d0c14] to-5% to-transparent bg-no-repeat inset-0" /> */}
       {/* <div className="absolute bg-no-repeat inset-0" /> */}
       <h1 className="text-5xl partners-title max-md:text-4xl">
@@ -61,7 +65,7 @@ const Partners = () => {
               <Image
                 src={KeyValue}
                 alt="KEYVALUE LOGO"
-                className="partner-logo styled-partner"
+                className="pointer-events-none partner-logo styled-partner"
               />
             </a>
             <p className="partner-label font-syne-medium">Platinum Partner</p>
@@ -75,7 +79,7 @@ const Partners = () => {
               <Image
                 src={Geojit}
                 alt="GEOJIT LOGO"
-                className="partner-logo styled-partner"
+                className="pointer-events-none partner-logo styled-partner"
               />
             </a>
             <p className="partner-label font-syne-medium">Platinum Partner</p>
@@ -88,7 +92,7 @@ const Partners = () => {
             <Image
               src={Polygon}
               alt="POLYGON LOGO"
-              className="partner-logo"
+              className="pointer-events-none partner-logo"
               width={240}
               height={70}
             />
@@ -98,7 +102,7 @@ const Partners = () => {
             <Image
               src={Devfolio}
               alt="DEVFOLIO LOGO"
-              className="partner-logo"
+              className="pointer-events-none partner-logo"
               width={240}
               height={70}
             />
@@ -108,7 +112,7 @@ const Partners = () => {
             <Image
               src={EthIndia}
               alt="ETHINDIA LOGO"
-              className="partner-logo"
+              className="pointer-events-none partner-logo"
               width={240}
               height={70}
             />
@@ -125,7 +129,7 @@ const Partners = () => {
               <Image
                 src={KSUM}
                 alt="KERALA STARTUP MISSION LOGO"
-                className="partner-logo styled-partner"
+                className="pointer-events-none partner-logo styled-partner"
                 width={240}
                 height={70}
               />

diff --git a/src/components/Timeline/Timeline.jsx b/src/components/Timeline/Timeline.jsx
@@ -1,8 +1,8 @@
 "use client";
 
 import TimelineCard from "./TimelineCard";
-import { TimelineData } from "@/constants";
-import { timelineItemClasses } from "@mui/lab";
+import {TimelineData} from "@/constants";
+import {timelineItemClasses} from "@mui/lab";
 import Timeline from "@mui/lab/Timeline";
 import "../About/About.css";
 import circle1 from "../../assets/backgrounds/about/circle1.png";
@@ -21,11 +21,14 @@ const TimelineSection = () => {
     >
       {/* <div className="absolute " /> */}
 
-      <Image className="top-left12 top-[-80px]" src={top_left} />
-      <Image className="bottom-right" src={bottom_right} />
-      <Image className="circle1" src={circle1} />
-      <Image className="circle2" src={circle2} />
-      <Image className="circle3" src={circle3} />
+      <Image
+        className="pointer-events-none top-left12 top-[-80px]"
+        src={top_left}
+      />
+      <Image className="pointer-events-none bottom-right" src={bottom_right} />
+      <Image className="pointer-events-none circle1" src={circle1} />
+      <Image className="pointer-events-none circle2" src={circle2} />
+      <Image className="pointer-events-none circle3" src={circle3} />
       <div className="container flex flex-col items-center justify-center min-h-screen m-auto font-generalSans text-our_white">
         <h2
           className="font-base-neue-bold text-5xl tracking-widest mirror-vertical text-center text-white xl:scale-100 max-md:text-4xl text-[#FFFFFF]/[0.8] "

diff --git a/src/components/WhyParticipate/WhyParticipate.jsx b/src/components/WhyParticipate/WhyParticipate.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, {useState, useRef, useEffect} from "react";
 import InfoCard from "./InfoCard";
 import Image from "next/image";
-import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
-import { Swiper, SwiperSlide } from "swiper/react";
+import {FaChevronLeft, FaChevronRight} from "react-icons/fa";
+import {Swiper, SwiperSlide} from "swiper/react";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import "swiper/css/pagination";
@@ -133,8 +133,11 @@ const WhyParticipate = () => {
     <>
       <div id="why" className="main-container pt-[80px]">
         <div className="absolute  right-0 left-0 top-0 bottom-0" />
-        <Image className="top-left1" src={top_left} />
-        <Image className="bottom-right1" src={bottom_right} />
+        <Image className="pointer-events-none top-left1" src={top_left} />
+        <Image
+          className="pointer-events-none bottom-right1"
+          src={bottom_right}
+        />
         {/* <Image className="circle11" src={circle1} /> */}
         {/* <Image className="circle21" src={circle2} /> */}
         {/* <Image className="circle31" src={circle3} /> */}
@@ -157,11 +160,11 @@ const WhyParticipate = () => {
               slideShadows: false,
             }}
             breakpoints={{
-              480: { slidesPerView: 1, spaceBetween: 10 },
-              768: { slidesPerView: 1.4, spaceBetween: 20 },
-              1024: { slidesPerView: 2, spaceBetween: 20 },
-              1280: { slidesPerView: 2, spaceBetween: 40 },
-              1536: { slidesPerView: 3, spaceBetween: 30 },
+              480: {slidesPerView: 1, spaceBetween: 10},
+              768: {slidesPerView: 1.4, spaceBetween: 20},
+              1024: {slidesPerView: 2, spaceBetween: 20},
+              1280: {slidesPerView: 2, spaceBetween: 40},
+              1536: {slidesPerView: 3, spaceBetween: 30},
             }}
             // autoplay={{
             //   delay: 3000,