bug fixes

Abusayid693 · Nov 25, 2021 · a979abc · a979abc
1 parent 0b2cfc8
commit a979abc
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 78 deletions.
diff --git a/src/Module/General.js b/src/Module/General.js
@@ -31,6 +31,10 @@ import zoha from "./Assets/teami/zoha.png";
 
 import boy from "./Assets/boy.png";
 
+
+
+
+
 const TOP_SECTION = {
   TITLE: "Join Limbo Hacks",
   Typed_effect: ["24 hours of creation", "Win awesome prizes"],
@@ -156,6 +160,50 @@ const Prizeinfo = [
  */
 
 const TeamInfo = [
+  [
+    //Array 1
+    {
+      Name: "Rehan",
+      role: "Organizer",
+      github: "https://github.com/Limbo-Hacks/Hackathon-website-template",
+      linkedin: "",
+      img: me
+    },
+    {
+      Name: "Moon",
+      role: "Organizer",
+      github: "",
+      linkedin: "",
+      img: moon
+    },
+    {
+      Name: "Erika",
+      role: "Organizer",
+      github: "",
+      linkedin: "",
+      img: Ryah
+    }
+  ],
+  [
+    //Array 2
+    {
+      Name: "Lyanola",
+      role: "Organizer",
+      github: "",
+      linkedin: "",
+      img: lyin
+    },
+    {
+      Name: "Zoheb",
+      role: "Organizer",
+      github: "",
+      linkedin: "",
+      img: zoha
+    },    
+  ] 
+];
+
+const JudgesInfo = [
   [
     //Array 1
     {
@@ -199,6 +247,7 @@ const TeamInfo = [
   ] 
 ];
 
+
 /** Instructions
  * Only put 3 logos per array inside `sponsorLogos`, you can
  * create as many arrays you want all logos will be rendered
@@ -267,5 +316,6 @@ export {
   Prizeinfo,
   sponsorLogos,
   TeamInfo,
+  JudgesInfo,
   frequentlyAskedQuestions
 };
diff --git a/src/components/Footer/cross.svg b/src/components/Footer/cross.svg
diff --git a/src/components/Footer/footer.jsx b/src/components/Footer/footer.jsx
@@ -1,4 +1,4 @@
-import React,{useEffect,useState} from "react";
+import React, {useEffect, useState} from "react";
 import "./footer.scss";
 import Insta from "./icons8-instagram.svg";
 import Dis from "./icons8-discord.svg";
@@ -9,34 +9,40 @@ import PrivacyPolicy from "./Privacy policy.pdf";
 import TermsOfUse from "./Terms of use.pdf";
 import Twitter from "./icons8-twitter.svg";
 import {Btn} from "../Top-division-components/Top-division-components.jsx";
+import cross from "./cross.svg";
 import {SOCIALS, TOP_SECTION, FOOTER} from "../../Module/General";
 
-function GithubTemplate(){
-
+function GithubTemplate({hideTemplate}) {
   return (
-  <div class="template">
-        <a href="https://github.com/Limbo-Hacks/Hackathon-website-template">  <p> Get this template <i class="fab fa-github-alt"></i> in github <i class="fas fa-times"></i></p></a>
-  </div>
-  )
+    <div className="template">
+      <div className="template-left">
+        <p>
+          Join us to  <a href={TOP_SECTION.HACKERS_REGISTRATION_FORM_LINK}>Gear Up</a>, where we will be hosting PUBLIC workshops,
+          tech talks, panel discussions, and career sessions!
+        </p>
+      </div>
+      <img onClick={hideTemplate} src={cross} />
+    </div>
+  );
 }
 
-
-
-
 export default function Footer() {
+  const [template, setTemplate] = useState(false);
+  const [viewTemplate, setViewTemplate] = useState(true)
 
-  const [template,setTemplate]=useState(false)
 
   useEffect(() => {
     window.addEventListener("scroll", listenScrollEvent);
+
+    return ()=>{
+    window.removeEventListener("scroll", listenScrollEvent);
+    }
   }, []);
 
   const listenScrollEvent = e => {
-    if (window.scrollY > 2800)
-      setTemplate(true)
-  else if(window.scrollY < 2800)
-  setTemplate(false)
-  }
+    if (window.scrollY > 2800) setTemplate(true);
+    else if (window.scrollY < 2800) setTemplate(false);
+  };
 
   return (
     <div>
@@ -112,9 +118,8 @@ export default function Footer() {
             </a>
           )}
           <p>Made with ❤️</p>
-
         </div>
-      {template &&<GithubTemplate/>}
+        {template && viewTemplate&& <GithubTemplate hideTemplate={() => setViewTemplate(false)} />}
       </div>
     </div>
   );

diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
@@ -18,36 +18,36 @@
   align-items: center;
   text-align: center;
 }
-.footer p{
+.footer p {
   font-weight: 500;
   font-size: 1.5rem;
-  color:white;
+  color: white;
 }
-.footer a{
+.footer a {
   color: aliceblue;
 }
 .footer img {
   width: 70%;
 }
-.footer_info{
+.footer_info {
   padding: 20px 0;
   background-color: rgb(32, 32, 32);
 }
-.Register_a{
+.Register_a {
   padding: 70px 0;
   background-color: #121930;
 }
-.Register_a a{
+.Register_a a {
   margin-left: 10px;
   margin-right: 10px;
 }
 
 @media (max-width: 570px) {
-  .Register_a a{
+  .Register_a a {
     margin-left: 0;
-    margin-right:0;
+    margin-right: 0;
   }
-  .Volunteer{
+  .Volunteer {
     margin-top: 15px;
   }
   .social-icon {
@@ -64,20 +64,34 @@
   text-decoration: underline;
 }
 
-.template{
+.template {
   position: fixed;
-  top: 97.3vh;
-  background-color: rgb(196, 230, 227);
+  bottom: 0;
+  background-color: rgb(231, 231, 231);
   text-align: center;
   width: 100%;
-  padding-top: 2px;
-}
-.template p{
-  margin: 0 auto;
-  color: rgb(20, 6, 100);
-}
-.fa-times{
-position: absolute;
-right: 10px;
-top: 5px;
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  justify-content: center;
+  padding-top: 4px;
+  &-left{
+    width: 80%;
+  }
+  img {
+    width: 15px;
+    position: absolute;
+    right: 10px;
+    cursor: pointer;
+  }
+  p {
+    margin: 0 auto;
+    color: rgb(20, 6, 100);
+    @media (max-width: 570px) {
+      font-size: 14px;
+    }
+  }
+  a {
+    color: #43b7be;
+  }
 }
diff --git a/src/components/Main-page/HomePage.jsx b/src/components/Main-page/HomePage.jsx
@@ -19,10 +19,10 @@ import Media from "../media/media.jsx";
 import {
   TOP_SECTION,
   TeamInfo,
+  JudgesInfo,
   sponsorLogos,
   frequentlyAskedQuestions,
-  FOOTER,
-  panels
+  FOOTER
 } from "../../Module/General";
 
 // javascript Map for sponsors
@@ -62,7 +62,7 @@ function TeamMembers(props) {
     <Row className="members">
       {props.map(s => (
         <Col className="" sm={12} lg={4} md={4}>
-          <Member name={s.Name} role={s.role} img={s.img} />
+          <Member info={s} />
         </Col>
       ))}
     </Row>
@@ -149,9 +149,17 @@ export default function HomePage(props) {
 
         {/* ********Team here ***** */}
         <h1 id="team">Our Team</h1>
-        {FOOTER.JOIN_TEAM.required && <JoinTeam />}
+        {FOOTER.JOIN_TEAM.required && <JoinTeam placeholder="Join our team" formLink={FOOTER.JOIN_TEAM} content="Interested in joining our team" />}
         {TeamInfo.map(TeamMembers)}
         {/* ********Team ending here ***** */}
+
+        {/* ********Judges here ***** */}
+
+        <h1 id="team">Judges</h1>
+        {FOOTER.JOIN_TEAM.required && <JoinTeam placeholder="Join our team" formLink={TOP_SECTION.JUDGES_FORM_LINK} content="Interested in being judge" />}
+        {JudgesInfo.map(TeamMembers)}
+        {/* ********Team ending here ***** */}
+
       </Container>
       <Footer />
     </div>

diff --git a/src/components/navbar/styles.scss b/src/components/navbar/styles.scss
@@ -8,15 +8,16 @@ nav {
   z-index: 10;
   transition: 0.2s;
   box-shadow: 0px 5px 10px rgba(50, 13, 136, 0.25);
-  img{
+  img {
     z-index: 1000000;
-    &:hover{
+    &:hover {
       cursor: pointer;
     }
   }
 }
-.s-open,.s-close{
-  display:none;
+.s-open,
+.s-close {
+  display: none;
 }
 .nav-inner {
   width: 30%;
@@ -48,24 +49,24 @@ a:link {
 }
 
 @media (max-width: 470px) {
-.ease{
-  background: #484848;
-  height: 75%;
-  opacity: 0.2;
- pointer-events: none;
-}
+  .ease {
+    background: #484848;
+    height: 75%;
+    opacity: 0.2;
+    pointer-events: none;
+  }
   ul {
     flex-direction: column;
     padding: 30px 20;
   }
-  .s-open{
-    display:inline;
+  .s-open {
+    display: inline;
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: -1;
   }
-  .s-close{
+  .s-close {
     display: block;
     position: absolute;
     right: 10px;

diff --git a/src/components/team/team.jsx b/src/components/team/team.jsx
@@ -1,30 +1,30 @@
 import React from "react";
 import "./team.css";
 import {Btn} from "../Top-division-components/Top-division-components.jsx";
-import {FOOTER} from "../../Module/General";
 
-function JoinTeam() {
+function JoinTeam({placeholder, formLink, content}) {
   return (
     <div className="joinT">
-      <h3>Interested in joining our team </h3>
-      <a href={FOOTER.JOIN_TEAM.src}>
-        <Btn type="Join our team" overlay="Fill the form" />
+      <h3>{content} </h3>
+      <a href={formLink}>
+        <Btn type={placeholder} overlay="Fill the form" link={formLink} />
       </a>
     </div>
   );
 }
 
-function Member(props) {
+function Member({info}) {
+  const {github,role,name,img, linkedin} = info;
   return (
     <div className="member">
-      <img src={props.img} alt="Limbo hack"></img>
+      <img src={img} alt="Limbo hack"></img>
       <div className="members-link">
-        <h3>{props.name}</h3>
-        <p>{props.role}</p>
-        <a>
+        <h3>{name}</h3>
+        <p>{role}</p>
+        <a href={github}>
           <i class="fab fa-2x fa-github"></i>
         </a>
-        <a>
+        <a href={linkedin}>
           <i class="fab fa-2x fa-linkedin"></i>
         </a>
       </div>