Merge branch 'main' of https://github.com/Excel2024Web/HFT-24

Excel2024Web · Nov 17, 2024 · a0ee247 · a0ee247
2 parents ccd4d04 + 0c5e2fb
commit a0ee247
Show file tree

Hide file tree

Showing 11 changed files with 334 additions and 136 deletions.
diff --git a/src/assets/Gallery/hftbn.jpeg b/src/assets/Gallery/hftbn.jpeg
diff --git a/src/assets/Gallery/hftbrb.png b/src/assets/Gallery/hftbrb.png
diff --git a/src/assets/Gallery/hftgn.jpg b/src/assets/Gallery/hftgn.jpg
diff --git a/src/assets/Gallery/hftgrb.png b/src/assets/Gallery/hftgrb.png
diff --git a/src/assets/Gallery/hftsn.jpg b/src/assets/Gallery/hftsn.jpg
diff --git a/src/assets/Gallery/hftsrb.png b/src/assets/Gallery/hftsrb.png
diff --git a/src/components/WhyParticipate/InfoCard.jsx b/src/components/WhyParticipate/InfoCard.jsx
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+
 const InfoCard = ({
   title,
   text,
@@ -8,19 +8,19 @@ const InfoCard = ({
   return (
     // <div className=" cardbgdiv flex justify-center items-center flex-shrink-0 ">
       // <div className="flex flex-col gap-2 w-[83%] ">
-        <div className={` cardcontainer1 rounded-[20px] flex flex-col h-[550px] items-center justify-center py-10 px-8 border-[0.2px] border-solid border-[#9291918f] backdrop-blur-[10px] bg-opacity-50 backdrop-saturate-[80%] bg-[rgba(255,255,255,0.1)]  `} >
+        <div className={` cardcontainer1 rounded-[20px] flex flex-col h-[100%] items-center justify-center  px-8 border-[0.2px] border-solid border-[#9291918f] backdrop-blur-[10px] bg-opacity-50 backdrop-saturate-[80%] bg-[rgba(255,255,255,0.1)]  `} >
           {/* <Image className='elementimg'
             src="/element.png" 
             alt="Description of the element" 
             width={150} 
             height={150} 
     /> */}
-          <h3 className={`text-4xl font-[500] mt-[20px] tracking-wide ${color}`}>
+          <h3 className={` cardtitle  font-[500] mt-[30px] tracking-wide ${color}`}>
             {title} 
           </h3>
         <div className="flex rounded-b-[10px]   relative py-10 px-8 gap-10 min-h-[80%] rounded-[12px] ">
           <span className={`absolute w-[80%] h-[1px] mt-[10px] bg-white`} />
-          <p className="mt-[50px] text-xl font-[400] text-justify ">{text}</p>
+          <p className="mt-[50px] cardp font-[400] text-justify ">{text}</p>
         </div>
         </div>
       // </div>

diff --git a/src/components/WhyParticipate/WhyParticipate.css b/src/components/WhyParticipate/WhyParticipate.css
@@ -7,7 +7,7 @@
     font-family: 'neue';
 }
 
-.swiper-button-next{
+/* .swiper-button-next{
     position: absolute;
     color: #fff;
     height: 50px;
@@ -30,9 +30,6 @@
     border: 5px solid #fff;
 }
 
-/* .cardcontainer1:hover{
-    scale: 1.02
-    } */
     
 .swiper-button-prev{
         position: absolute;
@@ -49,6 +46,10 @@
         transition: 0.4s ease-in-out;
 }
 
+html{
+    scroll-behavior: smooth;
+}
+
 .cardbgdiv{
     width: fit-content;
     padding: 0;
@@ -63,42 +64,40 @@
 
 
 
-
-/* .cardcontainer1{
-    box-shadow: 0px 0px 20px #ffffff4d;
-} */
-
 .main-container{
-    /* background-image: url(../../assets/WhyParticipate/bg2.jpg); */
-    /* background-image: linear-gradient(130deg, #1515924d, #1109254d); */
     background-image: url(../../assets/WhyParticipate/bgimg2.png);
     background-size: cover;
     background-repeat: no-repeat;
     height: 100vh;
     width: 100vw;
 }
 
+.swiper{
+    height: 60%;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    width: 90%;
+    
+}
+
+
+.swiper-wrapper{
+    width: 100%;
+}
+
+
 .cardcontainer1{
     box-shadow: 20px 0px 50px #0000002a,
                 -20px 0 50px #0000002a;
-    /* animation: bright-dim-border 5s infinite; */
     backdrop-filter: blur(10px);
 }
 
-/* @keyframes bright-dim-border {
-    0% {
-      border: 0.1px solid rgba(255, 255, 255, 0.5);
-      box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
-    }
-    50% {
-      border: 0.2px solid rgba(255, 255, 255, 1);
-      box-shadow: 0 0 3px rgba(255, 255, 255, 1);
-    }
-    100% {
-      border: 0.1px solid rgba(255, 255, 255, 0.5);
-      box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
-    }
-} */
+.swiper-slide-active{
+    height: 90%;
+}
+
+
 
 
 @media (max-width: 768px) {
@@ -123,4 +122,155 @@
     .cardcontainer1{
         scale: 0.9;
     }
-}
+
+    .cardtitle{
+        font-size: 2rem;
+        margin-top: 20px;
+    }
+} */
+
+.main-container{
+    background-image: url(../../assets/WhyParticipate/bgimg2.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 100vh;
+    width: 100vw;
+}
+
+.swiper {
+    height: 80%;
+    display: flex;
+    align-items: center;
+    width: 90%;
+    margin: auto;
+    padding-top: 50px;
+    padding-bottom: 30px;
+}
+
+.swiper-wrapper {
+    width: 100%;
+
+}
+
+.cardcontainer1 {
+    box-shadow: 20px 0px 50px #0000002a,
+                -20px 0 50px #0000002a;
+    backdrop-filter: blur(10px);
+    transition: transform 0.3s ease-in-out;
+}
+
+.swiper-button-prev{
+    position: absolute;
+    color: #fff;
+    height: 50px;
+    width: 50px;
+    background-image: url(../../assets/WhyParticipate/arrow.png);
+    transform: rotate(180deg);
+    cursor: pointer;
+    z-index: 10;
+    display: flex;
+    top: 50%;
+    left: -10px;
+    transition: 0.4s ease-in-out;
+}
+
+.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;
+}
+
+.cardtitle {
+    font-size: 2.3rem;
+    margin-top: 20px;
+    text-align: center;
+}   
+
+.cardp{
+    font-size: 1.3rem;
+    margin-bottom: 10px;
+}
+.cardcontainer1:hover {
+    transform: scale(1.02);
+}
+
+.swiper-slide-active {
+    height: 90%;
+}
+
+.cardcontainer1{
+    height: 100%;
+
+}
+
+
+
+
+
+
+/* For small devices */
+@media (max-width: 768px) {
+    .swiper {
+        height: 80%;
+    }
+
+    .swiper-button-next, .swiper-button-prev {
+        height: 30px;
+        width: 30px;
+        background-size: contain;
+    }
+
+    .cardcontainer1 {
+        scale: 0.9;
+
+    }
+
+    .cardtitle {
+        font-size: 3rem;
+        margin-top: 15px;
+    }
+
+    .main-container{
+        background-image: url(../../assets/WhyParticipate/bgimg3.png);
+    }
+}
+
+/* For very small devices */
+@media (max-width: 480px) {
+    .swiper {
+        height: 85%;
+    }
+
+    .swiper-button-next, .swiper-button-prev {
+        height: 25px;
+        width: 25px;
+    }
+
+    .cardcontainer1 {
+        scale: 0.8;
+        padding: 0;
+    }
+
+    .cardtitle {
+        font-size: 2rem;
+    }
+}
+
+/* For larger screens */
+/* @media (min-width: 1280px) {
+    .swiper {
+        height: 60%;
+    }
+
+    .cardcontainer1 {
+        scale: 1.1;
+    }
+} */
diff --git a/src/components/WhyParticipate/WhyParticipate.jsx b/src/components/WhyParticipate/WhyParticipate.jsx
@@ -124,80 +124,48 @@ const WhyParticipate = () => {
     // </div>
 
     <>
-    <div className="main-container">
+    <div id = "why" className="main-container">
 
 
-      <div className="container h-[100vh] block place-content-center max-w-[95%] md:max-w-[70%] mx-auto  py-8">
+      <div className="container h-[100%] block place-content-center  md:max-w-[80%] mx-auto  py-8">
         <h2 className=" titleh2 text-5xl mb-[50px] text-center text-white py-5 tracking-wide ">
-          WHY PARTICIPATE ?
+          WHY PARTICIPATE
         </h2>
 
         <Swiper
-          effect={'coverflow'}
-          grabCursor={true}
-          navigation={true}
-          centeredSlides={true}
-          // slidesPerView={3}
-          loop={true}
-          coverflowEffect={{
-            rotate: 0,
-            stretch: 0,
-            depth: 150,
-            modifier: 2.5,
-            slideShadows: false,
-          }}
-          // autoplay={{
-          //   delay: 5000,
-          //   disableOnInteraction: false,
-          // }}
-
-          modules={[EffectCoverflow, Pagination, Navigation, Autoplay]}
-          className="mySwiper"
-          slidesPerView={1} 
+    effect={'coverflow'}
+    grabCursor={true}
+    navigation={true}
+    centeredSlides={true}
+    loop={true}
+    coverflowEffect={{
+        rotate: 0,
+        stretch: 0,
+        depth: 150,
+        modifier: 2.5,
+        slideShadows: false,
+    }}
     breakpoints={{
-      640: {
-        slidesPerView: 1,
-        spaceBetween: 10,
-      },
-      768: {
-        slidesPerView: 1,
-        // spaceBetween: 40,
-      },
-      800: {
-        slidesPerView: 2,
-        spaceBetween: 20,
-      },
-      1024: { 
-        slidesPerView: 2,
-        spaceBetween: 30,
-      },
-      1280: { 
-        slidesPerView: 3,
-        spaceBetween: 30,
-      },
+        480: { slidesPerView: 1, spaceBetween: 10 },
+        768: { slidesPerView: 1.3, spaceBetween: 20 },
+        1024: { slidesPerView: 2, spaceBetween: 30 },
+        1280: { slidesPerView: 2, spaceBetween: 40 },
+        1536: { slidesPerView: 3, spaceBetween: 50 },
     }}
+    modules={[EffectCoverflow, Pagination, Navigation, Autoplay]}
+    className="mySwiper"
 >
-
-        {cards.map((card, index) => (
-            <div
-              key={index}
-              className="flex-shrink-0 h-full "
-              style={{ width: `${cardWidth}px` }}
-            >
-              <div className="px-2">
-              <SwiperSlide>
-
-                <InfoCard
-                  title={card.title}
-                  text={card.text}
-                  gradient={card.gradient}
-                  color={card.color}
-                  />
-              </SwiperSlide>
-              </div>
-            </div>
-          ))}
-      </Swiper>
+    {cards.map((card, index) => (
+        <SwiperSlide key={index}>
+            <InfoCard
+                title={card.title}
+                text={card.text}
+                gradient={card.gradient}
+                color={card.color}
+            />
+        </SwiperSlide>
+    ))}
+</Swiper>
 
       </div>
       </div>