Merge pull request #58 from gamandeepsingh/test

update past edition component

src/components/About/index.jsx

@@ -1,65 +1,102 @@
-import './style.css';
+import "./style.css";
 import { BsHeadsetVr } from "react-icons/bs";
 import { FaGlobeAmericas } from "react-icons/fa";
-import 'aos/dist/aos.css'
+import Aos from "aos";
+import "aos/dist/aos.css";
 
 // images
-import algos from './img/algocs.png';
-import gdsc from './img/gdsc.png';
-import iosc from './img/iosc.png';
-
-import {MIDDLE_SECTION} from '../../Module/General';
+import algos from "./img/algocs.png";
+import gdsc from "./img/gdsc.png";
+import iosc from "./img/iosc.png";
 
+import { MIDDLE_SECTION } from "../../Module/General";
+import { useEffect } from "react";
 
 function LogoSectionAbout() {
+  useEffect(() => {
+    Aos.init({ duration: 400 });
+  }, []);
   return (
-    <div className="LogoSectionAbout"  >
+    <div className="LogoSectionAbout" data-aos="fade-right">
       {/* <BsHeadsetVr fontSize={200} className='arHeadset'/>
       <FaGlobeAmericas fontSize={200} className='globe'/> */}
       <h1>{MIDDLE_SECTION.TITLE}</h1>
       <div>
-      <p className='long desc'>
-
-      The largest code fest of Delhi-NCR is back! ⚡<br />
-        Join this 24-Hour Hackathon to hustle and shine through 5 amazing tracks, Embark on an Odyssey to learn new technologies, seek guidance from experienced mentors and engrave your name on the boards of our esteemed Judges.<br />
-        Witness prodigious Speakers of the Nation live! ✨<br />
-        Not just that, win huge prizes and hampers by brainstorming and creating the best hack!<br />
-        Be ready to sail through an amazing night of fun, code and much more on 28th & 29th April! 💫
-
-      </p>
+        <p className="long-desc">
+          The largest code fest of Delhi-NCR is back! ⚡<br />
+          Join this 24-Hour Hackathon to hustle and shine through 5 amazing
+          tracks, Embark on an Odyssey to learn new technologies, seek guidance
+          from experienced mentors and engrave your name on the boards of our
+          esteemed Judges.
+          <br />
+          Witness prodigious Speakers of the Nation live! ✨<br />
+          Not just that, win huge prizes and hampers by brainstorming and
+          creating the best hack!
+          <br />
+          Be ready to sail through an amazing night of fun, code and much more
+          on 28th & 29th April! 💫
+        </p>
       </div>
     </div>
   );
 }
 
 function Logo() {
+  useEffect(() => {
+    Aos.init({ duration: 400 });
+  }, []);
   return (
-      <img className="Logo-about" src={MIDDLE_SECTION.LOGO}  alt="Innohacks" />
+    <img
+      data-aos="fade-left"
+      className="Logo-about"
+      src={MIDDLE_SECTION.LOGO}
+      alt="Innohacks"
+    />
   );
 }
 
 function CommunityPartner() {
-
-  return(
-    <div className="community-partner" >
-    <h1 className="title_community" >Community Partners</h1>
-    <div className="community_logo_container" >
-      <div className='logo-community' style={{color: 'white', textAlign: 'center', margin: "0 5% 2% 5%"}}>
-        <img src={iosc} className="iosc_logo" width="100%" alt="" />
-        <p >IOSC</p>
-      </div>
-      <div className='logo-community' style={{color: 'white', textAlign: 'center', margin: '0 5% 2% 5%'}}>
-        <img src={gdsc} className="iosc_logo" width="100%" alt=""/>
-        <p >GDSC-ABESEC</p>
+  useEffect(() => {
+    Aos.init({ duration: 400 });
+  }, []);
+  return (
+    <div className="community-partner">
+      <h1
+        className="title_community"
+        data-aos="zoom-in"
+        data-aos-anchor-placement="top-bottom"
+        data-aos-duaration="800"
+      >
+        Community Partners
+      </h1>
+      <div className="community_logo_container">
+        <div
+          className="logo-community"
+          data-aos="fade-up"
+          style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
+        >
+          <img src={iosc} className="iosc_logo" width="100%" alt="" />
+          <p>IOSC</p>
+        </div>
+        <div
+          className="logo-community"
+          data-aos="fade-up"
+          style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
+        >
+          <img src={gdsc} className="iosc_logo" width="100%" alt="" />
+          <p>GDSC-ABESEC</p>
+        </div>
+        <div
+          className="logo-community"
+          data-aos="fade-up"
+          style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
+        >
+          <img src={algos} className="iosc_logo" width="100%" alt="" />
+          <p>ALGOCS</p>
+        </div>
       </div>
-      <div  className='logo-community' style={{color: 'white', textAlign: 'center', margin: '0 5% 2% 5%'}}>
-        <img src={algos} className="iosc_logo" width="100%" alt=""/>
-        <p >ALGOCS</p>
-       </div>
     </div>
-  </div>
-
   );
 }
 
-export {Logo, LogoSectionAbout, CommunityPartner};
+export { Logo, LogoSectionAbout, CommunityPartner };

src/components/About/style.css

@@ -7,9 +7,6 @@
   transform: translateX(-50%) translateY(10%);
 }
 
-.long desc{
-  text-align: justify;
-}
 
 .Logo-about {
   width: 40%;
@@ -116,6 +113,12 @@
   .LogoSectionAbout{
     margin-left: -20px;
   }
+  .LogoSectionAbout h1{
+    text-align: center;
+  }
+  .long-desc{
+    text-align: center;
+  }
 
 }
 .title_community {

src/components/Footer/index.jsx

@@ -19,7 +19,7 @@ const Footer = () => {
         <div className="Register_a">
           <button className="register-button">
 
-            <a smooth className='register-link' href='https://forms.gle/LabTKRJEHvyZuXd78' target='_blank'>
+            <a smooth="true" className='register-link' href='https://forms.gle/LabTKRJEHvyZuXd78' target='_blank'>
               <span>Register Now</span>
             </a>
           </button>
@@ -54,7 +54,7 @@ const Footer = () => {
       </div>
       <div className="footer-logo">
         <div className='hacks-footer-container'>
-          <HashLink className="footer-logo-link" to="#" smooth>
+          <HashLink className="footer-logo-link" to="#" smooth="true">
             <img src="https://template-mail-images.s3.ap-south-1.amazonaws.com/INNOHACKS_3.0_Logo-removebg-preview+(1).png" className='hacks' width={"100%"} alt="" />
           </HashLink>
         </div>

src/components/Footfall/footfall.css

@@ -32,4 +32,7 @@ justify-content:space-around;
         align-items: center;
         justify-content: center;
     }
+    .col1,.col2{
+        width: 100%;
+    }
 }

src/components/Landing/index.jsx

@@ -55,15 +55,15 @@ const Myinfo = () => {
       <div className="buttom-group" style={{display:"flex", flexDirection:"column"}}>
 
        <div
-            class="apply-button"
+            className="apply-button"
             data-hackathon-slug="innohacks-3"
             data-button-theme="light"
             style={{ height: "44px", width: "312px" }}
           ></div>
 <br />
           <div className="registerbtn">
             <a href="https://forms.gle/LabTKRJEHvyZuXd78" target="_blank">
-              <Btn class="register" type="Register" overlay="Now" />
+              <Btn className="register" type="Register" overlay="Now" />
             </a>
           </div>
 

src/components/PastEdition/index.jsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import Aos from "aos"
+import "aos/dist/aos.css"
+import "./style.scss";
+import one from "./assets/2.jpg";
+import two from "./assets/1.jpg";
+import three from "./assets/3.jpg";
+import four from "./assets/4.jpg";
+import five from "./assets/5.jpg";
+import six from "./assets/6.jpeg";
+
+function PastEdition() {
+  const [mainImage, setMainImage] = useState(one);
+
+  const thumbnails = [one, two, three, four, five, six];
+
+  const handleThumbnailClick = (imageSrc) => {
+    setMainImage(imageSrc);
+  };
+
+  useEffect(() => {
+    Aos.init({duration:400})
+    const intervalId = setInterval(() => {
+      setMainImage(thumbnails[Math.floor(Math.random() * 6)]);
+    }, 5000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div className="past-edition-container">
+      <h1
+        data-aos="zoom-in"
+        data-aos-anchor-placement="top-bottom"
+        data-aos-duaration="800"
+        className="past-heading"
+        style={{ fontWeight: 900, marginTop: "100px", marginBottom: "20px" }}
+      >
+        Past Edition
+      </h1>
+      <img src={mainImage} id="main" />
+      <div id="thumbnails">
+        {thumbnails.map((thumbnail, index) => (
+          <img
+            key={index}
+            src={thumbnail}
+            className={`${mainImage === thumbnail ? "scaling" : ""}`}
+            onClick={() => handleThumbnailClick(thumbnail)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PastEdition;

src/components/PastEdition/style.scss

@@ -0,0 +1,52 @@
+%shared {
+  box-shadow: 2px 2px 10px 5px #b8b8b8;
+  border-radius: 10px;
+}
+.past-edition{
+  font-size: 5rem;
+    font-weight: 900;
+    font-family: "repo-extrabold"; 
+}
+.scaling {
+  scale: 1.1;
+}
+#thumbnails {
+  text-align: center;
+  transition: all 0.5s ease;
+  img {
+    width: 100px;
+    height: 100px;
+    margin: 10px;
+    cursor: pointer;
+    @media (max-width:779.99px){
+      .past_edition{
+        margin-top: 80px;
+      }
+    }
+    @media only screen and (max-width: 480px) {
+      width: 50px;
+      height: 50px;
+      transition: all 0.5s ease;
+    }
+    @extend %shared;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+#main {
+  transition: all 0.5s ease;
+  width: 50%;
+  height: 400px;
+  object-fit: cover;
+  display: block;
+  margin: 20px auto;
+  @extend %shared;
+  @media only screen and (max-width: 480px) {
+    width: 95%;
+  }
+}
+.hidden {
+  transition: all 0.5s ease;
+  opacity: 0;
+}

src/components/Prizes/index.jsx

@@ -8,7 +8,7 @@ function PrizeHeading(props) {
     Aos.init({duration:400})
   },[])
   return (
-    <div data-aos="fade-up" data-aos-duaration="800"  className="PrizeHeading">
+    <div data-aos="fade-up" data-aos-duaration="800"  className="PrizeHeading" id="prize_">
       <h1>{props.type}</h1>
     </div>
   );

src/components/Schedule/schedule.jsx

@@ -1,31 +1,41 @@
-import './schedule.css'
-
-
+import "./schedule.css";
+import Aos from "aos"
+import "aos/dist/aos.css"
+import { useEffect } from "react";
 const Schedule = () => {
-return(  
-  <>
-
-  <div>
-  <h1
-              data-aos="zoom-in"
-              data-aos-duration="800"
-              id="prizes"
-              className="prize_heading"
-              style={{ fontFamily: "repo-bold", marginBottom: "10rem"  }}
-            >
-            Schedule
-          </h1>
-  </div>
-
-  <div class="image-container">
-
-
-            <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/mobileviewupdated.png" alt="" className="mobile-image"/>
-            <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png" alt="" className="laptop-image"/>
-          </div>
-</>
-)    
+  useEffect(()=>{
+    Aos.init({duration:400})
+  },[])
+  return (
+    <>
+      <div>
+        <h1
+          data-aos="zoom-in"
+          data-aos-duration="800"
+          id="prizes"
+          className="prize_heading"
+          style={{ fontFamily: "repo-bold", marginBottom: "10rem" }}
+        >
+          Schedule
+        </h1>
+      </div>
 
+      <div className="image-container">
+        <img
+          src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/mobileviewupdated.png"
+          alt=""
+          className="mobile-image"
+          data-aos="fade-right"
+        />
+        <img
+          src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png"
+          alt=""
+          className="laptop-image"
+          data-aos="fade-right"
+        />
+      </div>
+    </>
+  );
 };
 
-export default Schedule;
+export default Schedule;