Merge branch 'Excel2024Web:main' into main

Excel2024Web · Nov 18, 2024 · a6c2f36 · a6c2f36
2 parents 23d5be9 + 5e0d095
commit a6c2f36
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 36 deletions.
diff --git a/src/components/About/About.css b/src/components/About/About.css
@@ -180,7 +180,7 @@
   height: 100vh;
   width: 100vw;
   position: relative;
-  overflow: hidden;
+  /* overflow: hidden; */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -210,38 +210,49 @@
 
 .circle1 {
   position: absolute;
-  bottom: -500px;
-  height: 1000px;
+  bottom: -450px;
+  height: 900px;
   width: auto;
-  left: -500px;
+  z-index: 2;
+  left: -450px;
   transform: rotate(-200deg);
   animation: rotate 15s linear infinite;
+  opacity: 0.5;
 }
 
 .circle2 {
   position: absolute;
-  bottom: -400px;
-  height: 800px;
+  bottom: -350px;
+  height: 700px;
   width: auto;
-  left: -400px;
+  left: -350px;
   transform: rotate(-180deg);
   animation: rotate 20s linear infinite;
+  z-index: 2;
+  opacity: 0.5;
+}
+
+.aboutsvg1{
+  display: none;
 }
 
 .circle3 {
   position: absolute;
-  bottom: -200px;
-  height: 400px;
+  bottom: -150px;
+  height: 300px;
   width: auto;
-  left: -200px;
+  left: -150px;
   width: auto;
   animation: rotate 25s linear infinite;
+  z-index: 2;
+  opacity: 0.5;
 }
 
-svg {
+.aboutsvg {
   backdrop-filter: blur(10px);
   width: 90%;
   height: 90%;
+  z-index: 3;
 }
 
 .details-container {
@@ -321,6 +332,14 @@ html{
     display: none;
   }
 
+  .aboutsvg1{
+    height: 90%;
+    display: flex;
+    width: 95%;
+    backdrop-filter: blur(10px);
+    z-index: 3;
+  }
+
   .circle1 {
     height: 600px;
     width: auto;

diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx
@@ -85,6 +85,30 @@ const About = () => {
               </filter>
             </defs>
           </svg>
+          <svg className="aboutsvg1" width="393" height="812" viewBox="0 0 393 812" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+          <g filter="url(#filter0_bd_36_11)">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M10 44C10 25.2223 25.2223 10 44 10H85.4028C96.9908 10 107.781 15.902 114.032 25.6595L114.468 26.3405C120.719 36.098 131.509 42 143.097 42H246.417C256.883 42 266.766 37.1796 273.209 28.9319L277.791 23.0681C284.234 14.8204 294.117 10 304.583 10H349C367.778 10 383 25.2223 383 44V750C383 768.778 367.778 784 349 784H298.967C291.836 784 284.887 786.242 279.1 790.408L271.9 795.592C266.113 799.758 259.164 802 252.033 802H137.308C129.053 802 121.079 798.996 114.875 793.549L113.625 792.451C107.421 787.004 99.4473 784 91.1915 784H44C25.2223 784 10 768.778 10 750V44Z" fill="url(#paint0_linear_36_11)" fill-opacity="0.25" shape-rendering="crispEdges"/>
+          </g>
+          <defs>
+          <filter id="filter0_bd_36_11" x="0" y="0" width="393" height="812" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="5"/>
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_36_11"/>
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+          <feOffset/>
+          <feGaussianBlur stdDeviation="5"/>
+          <feComposite in2="hardAlpha" operator="out"/>
+          <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+          <feBlend mode="normal" in2="effect1_backgroundBlur_36_11" result="effect2_dropShadow_36_11"/>
+          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_36_11" result="shape"/>
+          </filter>
+          <linearGradient id="paint0_linear_36_11" x1="50" y1="35.5" x2="285" y2="756" gradientUnits="userSpaceOnUse">
+          <stop offset="0.135809" stop-color="#534E4E"/>
+          <stop offset="0.578659" stop-color="#504C4C"/>
+          </linearGradient>
+          </defs>
+</svg>
+
           <p className="abtp 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

diff --git a/src/components/Contact/ContactPage.jsx b/src/components/Contact/ContactPage.jsx
@@ -64,7 +64,7 @@ export default function Contact() {
   ];
   return (
     <>
-      <div className="w-[100vw] flex justify-center items-center flex-col overflow-hidden h-full pb-10">
+      <div id = "contacts" className="w-[100vw] flex justify-center items-center flex-col overflow-hidden h-full pb-10">
         <h1 className="mt-10 text-4xl sm:text-6xl text-center font-base-neue-bold text-white tracking-wider">
           Contact Us
         </h1>

diff --git a/src/components/FAQ/FAQ.jsx b/src/components/FAQ/FAQ.jsx
@@ -32,7 +32,7 @@ const FAQ = () => {
     },
   ];
   return (
-    <div className="faq">
+    <div id = "faq" className="faq">
       <div className="faq-container container mx-auto px-10 py-10 flex flex-col items-start">
         <h1 className="font-base-neue-bold text-4xl sm:text-6xl text-start faq-heading">
           FREQUENTLY ASKED

diff --git a/src/components/Timeline/Timeline.jsx b/src/components/Timeline/Timeline.jsx
@@ -9,7 +9,7 @@ const TimelineSection = () => {
   return (
     <div
       id="timeline"
-      className="relative flex flex-col font-syne-medium items-center justify-center min-h-screen p-2 text-white"
+      className="relative flex flex-col font-syne-medium items-center justify-center min-h-screen p-2 text-white pb-12 "
     >
       <div className="m-auto container font-generalSans min-h-screen flex justify-center flex-col items-center text-our_white">
         <h2
@@ -19,7 +19,7 @@ const TimelineSection = () => {
           TIMELINE
         </h2>
         <div
-          className="font-syne-medium mt-[140px] w-[900px] max-lg:w-[800px] max-md:w-[500px] max-sm:w-[350px] md:scale-110 max-sm:mt-[54px]"
+          className="font-syne-medium mt-[120px] w-[900px] max-lg:w-[800px] max-md:w-[500px] max-sm:w-[350px] md:scale-110 max-sm:mt-[54px]"
           data-aos="zoom-in-up"
         >
           <Timeline className="font-syne-medium max-md:hidden">

diff --git a/src/components/WhyParticipate/InfoCard.jsx b/src/components/WhyParticipate/InfoCard.jsx
@@ -16,11 +16,11 @@ const InfoCard = ({
             width={150} 
             height={150} 
     /> */}
-      <h3 className="cardtitle font-syne-semibold font-[500] mt-[30px] tracking-wide text-white">
+      <h3 className="cardtitle font-syne-semibold font-[500] mt-[30px] lg:mt-[50px] tracking-wide text-white">
         {title}
       </h3>
-      <div className="flex rounded-b-[10px] font-xl font-syne-medium relative py-10 px-8 gap-10 min-h-[80%] rounded-[12px]">
-        <span className={`absolute w-[80%] h-[1px] mt-[10px] bg-white`} />
+      <div className="flex rounded-b-[10px] font-xl font-syne-medium relative py-10 lg:px-8 px-5 gap-10 min-h-[80%] rounded-[12px]">
+        <span className={`absolute w-[90%] h-[1px] mt-[10px] bg-white`} />
         <p className="mt-[50px] cardp font-[400] text-justify ">{text}</p>
       </div>
     </div>

diff --git a/src/components/WhyParticipate/WhyParticipate.css b/src/components/WhyParticipate/WhyParticipate.css
@@ -7,6 +7,22 @@
   font-family: "neue";
 }
 
+.bottom-right1{
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: scaleY(-1);
+    width: 100vw;
+}
+
+.top-left1{
+    position: absolute;
+    bottom: 0;
+    left: -100px;
+    transform: rotate(180deg);
+    transform: scaleY(-1);
+}
+
 /* .swiper-button-next{
     position: absolute;
     color: #fff;
@@ -130,10 +146,12 @@ html{
 } */
 
 .main-container {
-  background-image: url(../../assets/WhyParticipate/bgimg2.png);
-  background-size: cover;
-  background-repeat: no-repeat;
+  /* background-image: url(../../assets/WhyParticipate/bgimg2.png); */
+  /* background-size: cover; */
+  /* background-repeat: no-repeat; */
+  background-color: #000;
   min-height: 800px;
+  background-repeat: no-repeat;
   height: 100vh;
   width: 100vw;
   position: relative;
@@ -149,6 +167,45 @@ html{
   padding-top: 50px;
   padding-bottom: 30px;
   max-height: 700px;
+  padding-left: 50px;
+  padding-right: 50px;
+  z-index: 2;
+}
+
+.circle11 {
+    position: absolute;
+    bottom: -500px;
+    height: 1000px;
+    width: auto;
+    z-index: 2;
+    right: -500px;
+    transform: rotate(-200deg);
+    /* animation: rotate 15s linear infinite; */
+}
+
+  .circle21 {
+    position: absolute;
+    bottom: -400px;
+    height: 800px;
+    width: auto;
+    right: -400px;
+    transform: rotate(130deg);
+    /* animation: rotate 20s linear infinite; */
+    z-index: 2;
+    opacity: 0.5;
+}
+
+.circle31 {
+    position: absolute;
+    bottom: -200px;
+    height: 400px;
+    width: auto;
+    right: -200px;
+    width: auto;
+    /* animation: rotate 25s linear infinite; */
+    transform: rotate(130deg);
+    z-index: 2;
+    opacity: 0.5;
 }
 
 .swiper-wrapper {
@@ -178,17 +235,17 @@ html{
 }
 
 .swiper-button-next {
-  position: absolute;
-  color: #fff;
-  height: 50px;
-  width: 50px;
-  background-image: url(../../assets/WhyParticipate/arrow.png);
-  cursor: pointer;
-  z-index: 10;
-  display: flex;
-  top: 50%;
-  right: -10px;
-  transition: 0.4s ease-in-out;
+    position: absolute;
+    color: #fff;
+    height: 50px;
+    width: 50px;
+    background-image: url(../../assets/WhyParticipate/arrow.png);
+    cursor: pointer;
+    z-index: 10;
+    display: flex;
+    top: 50%;
+    right: -10px;
+    transition: 0.4s ease-in-out;
 }
 
 .cardtitle {
@@ -198,7 +255,7 @@ html{
 }
 
 .cardp {
-  font-size: 1.3rem;
+  font-size: 1.2rem;
   margin-bottom: 10px;
 }
 .cardcontainer1:hover {
@@ -236,15 +293,27 @@ html{
 
   .main-container {
     background-image: url(../../assets/WhyParticipate/bgimg3.png);
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 
   .swiper-button-next {
     right: 5px;
   }
 
+  .swiper{
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .swiper-button-prev {
     left: 5px;
   }
+
+  .circle21, .circle31 {
+    display: none;
+  }
+
 }
 
 .star {
@@ -362,10 +431,21 @@ html{
   }
 
   .cardp {
-    font-size: 1rem;
+    font-size: 1.2rem;
   }
 }
 
+@media(max-height:790px){
+    .cardp{
+        font-size: 1rem;
+    }
+}
+@media(min-height: 790px) and (max-height:850px){
+    .cardp{
+        font-size: 1.03rem;
+    }
+}
+
 @media (min-width: 200px) and (max-width: 450px) {
   .cardcontainer1 {
     scale: 0.8;

diff --git a/src/components/WhyParticipate/WhyParticipate.jsx b/src/components/WhyParticipate/WhyParticipate.jsx
@@ -1,10 +1,16 @@
 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 "swiper/css";
 import "swiper/css/effect-coverflow";
 import "swiper/css/pagination";
+import top_left from "../../assets/backgrounds/about/topleft.png";
+import bottom_right from "../../assets/backgrounds/about/bottomright.png";
+import circle1 from "../../assets/backgrounds/about/circle1.png";
+import circle2 from "../../assets/backgrounds/about/circle2.png";
+import circle3 from "../../assets/backgrounds/about/circle3.png";
 import {
   EffectCoverflow,
   Pagination,
@@ -128,6 +134,11 @@ const WhyParticipate = () => {
 
     <>
       <div id="why" className="main-container">
+        <Image className="top-left1" src={top_left} />
+        <Image className="bottom-right1" src={bottom_right} />
+        {/* <Image className="circle11" src={circle1} /> */}
+        <Image className="circle21" src={circle2} />
+        <Image className="circle31" src={circle3} />
         <div className="container h-[100%] block place-content-center  md:max-w-[80%] mx-auto  py-8">
           <h2 className=" titleh2 text-4xl sm:text-6xl font-base-neue-bold mb-[50px] text-center text-white py-5 tracking-wide ">
             WHY PARTICIPATE
@@ -148,8 +159,8 @@ const WhyParticipate = () => {
             }}
             breakpoints={{
               480: {slidesPerView: 1, spaceBetween: 10},
-              768: {slidesPerView: 1.7, spaceBetween: 20},
-              1024: {slidesPerView: 2, spaceBetween: 30},
+              768: {slidesPerView: 1.4, spaceBetween: 20},
+              1024: {slidesPerView: 2, spaceBetween: 20},
               1280: {slidesPerView: 2, spaceBetween: 40},
               1536: {slidesPerView: 3, spaceBetween: 60},
             }}