Merge pull request #83 from innogeeks/test

Test

src/components/About/index.jsx

@@ -5,16 +5,21 @@ 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 algos from "./img/algos.png";
+import abesec from "./img/abesec.png";
+import iosc from "./img/abesec.png";
 import loop from "./img/loop.png";
-import oscomm from "./img/oscomm.png";
+import oscomm from "./img/os.png";
 import befikra from "./img/befikra.png";
-import cafe from "./img/cafe.png";
+import bajaj from "./img/bajaj.png";
+import codess from "./img/codess.png"
+import delhi from "./img/delhi.png"
+import gcet from "./img/gcet.png"
+import piet from "./img/piet.png"
+
 
 import { MIDDLE_SECTION } from "../../Module/General";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 function LogoSectionAbout() {
   useEffect(() => {
@@ -60,9 +65,13 @@ function Logo() {
 }
 
 function CommunityPartner() {
+  const logosSlideRef = useRef(null);
   useEffect(() => {
     Aos.init({ duration: 400 });
+    const copy = logosSlideRef.current.cloneNode(true);
+    logosSlideRef.current.parentNode.appendChild(copy);
   }, []);
+
   return (
     <div className="community-partner">
       <h1
@@ -74,7 +83,7 @@ function CommunityPartner() {
         Community Partners
       </h1>
       <div className="community_logo_container">
-        <div
+        {/* <div
           className="logo-community"
           data-aos="fade-up"
           style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%",backgroundColor:"white",borderRadius:"20px",padding:"10px",boxShadow:"10px 10px 60px #49494960 ,inset -10px -10px 40px #ffffff5d" }}
@@ -169,6 +178,24 @@ function CommunityPartner() {
         >
           <img src={gdsc} className="iosc_logo" width="100%" alt="" />
           <p style={{fontFamily:"repo-bold", fontSize:"16px"}}>GDG-DELHI</p>
+        </div> */}
+      </div>
+      <div className="slider-container">
+        <div class="logos">
+          <div class="logos-slide" ref={logosSlideRef}>
+            <img src={abesec} />
+            <img src={algos} />
+            <img src={bajaj} />
+            <img src={befikra} />
+            <img src={codess} />
+            <img src={delhi} />
+            <img src={gcet} />
+            <img src={iosc} />
+            <img src={loop} />
+            <img src={oscomm} />
+            <img src={piet} />
+
+          </div>
         </div>
       </div>
     </div>

src/components/About/style.css

@@ -150,4 +150,70 @@
 .community_logo_container p{
   font-family: repo-extrabold;
   color: gray;
+}
+
+@keyframes slide {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+.slider-container{
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+
+}
+.logos {
+  overflow: hidden;
+  /* padding: 60px 0; */
+  background: white;
+  white-space: nowrap;
+  position: relative;
+  width: 100vw;
+  margin-left: 50%;
+  height: 200px;
+}
+
+.logos:before,
+.logos:after {
+  position: absolute;
+  top: 0;
+  width: 20vw;
+  height: 100%;
+  content: "";
+  z-index: 2;
+}
+
+.logos:before {
+  left: 0;
+  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
+}
+
+.logos:after {
+  right: 0;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
+}
+
+.logos:hover .logos-slide {
+  animation-play-state: paused;
+}
+
+.logos-slide {
+  display: inline-block;
+  animation: 35s slide infinite linear;
+}
+
+.logos-slide img {
+  height: 150px;
+  margin: 0 40px;
+}
+
+@media (max-width:500px) {
+  .logos{
+    /* margin-top: 100px; */
+    margin-bottom: 60px;
+  }
 }

src/containers/Home/HomePage.jsx

@@ -172,6 +172,7 @@ export default function HomePage() {
             data-aos-duration="800"
             id="prizes"
             className="worth"
+            style={{alignItems:"center"}}
           >
             Prize Pool Worth
           </p>
@@ -335,7 +336,7 @@ export default function HomePage() {
     <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/decoding+draupadi+(1).png" className="image3"></img>
   </div>
   <div class="bottom-section">
-    <span class="title" style={{ fontFamily: "repo-light" }}>Create a cutting-edge platform for discovering female professionals and speakers across the country, revolutionising event planning. Join Decoding Draupadi for a chance to win INR 5,000 amazon vouchers along with internship opportunity and interact with an active community of innovators and mentors. 
+    <span class="title" style={{ fontFamily: "repo-light" }}>Join Decoding Draupadi, where diversity thrives! Teams led by women receive preference, fostering inclusivity in our community. Stand a chance to win INR 5,000 Amazon vouchers, plus an internship opportunity, as you interact with a vibrant network of innovators and mentors.
 </span>
 <a href="https://docs.google.com/document/d/18zXwsdKy95_5kkTMF4YS7kaCPSW-w3Q7W-VPpfaekNY/edit?usp=sharing" style={{textDecoration: 'none'}} target="_blank"><button className="butt" >Problem Statement</button></a>
   </div>

src/containers/Home/about.css

@@ -1,6 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
 
+:root {
+  --shadow-color: #ffffff;
+  --shadow-color-light: #1d7585;
+}
 .Whole_div {
   background-repeat: repeat;
   background-size: auto 100vh;
@@ -109,6 +113,25 @@ h1 {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+
+}
+@keyframes neon {
+  0% {
+    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+    0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+  }
+  50% {
+    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+    0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+    0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+  }
+  100% {
+    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+    0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+  }
 }
 
 .worth {
@@ -121,6 +144,7 @@ h1 {
   background: linear-gradient(to right, #17e2d1, #06697b);
   -webkit-background-clip: text;
   background-clip: text;
+  text-align: center;
 }
 .worthHeading {
   margin: 5px 10px 10px 0;
@@ -132,6 +156,7 @@ h1 {
   background: linear-gradient(to right, #17e2d1, #06697b);
   -webkit-background-clip: text;
   background-clip: text;
+  text-align: center;
 }
 
 .prizee {
@@ -143,6 +168,7 @@ h1 {
   background: #06697b;
   -webkit-background-clip: text;
   background-clip: text;
+  animation: neon 3s infinite;
 }
 
 .money{