Merge pull request #9 from rulfo71/develop

Website fixes #1

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "cz": "^1.8.2",
     "react": "^18.2.0",
+    "react-burger-menu": "^3.0.8",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

src/App.css

@@ -17,4 +17,12 @@
 a {
   color: #fff;
   text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+#page-wrap {
+  padding-bottom: 10px;
 }

src/App.js

@@ -3,19 +3,21 @@ import { HashRouter, Routes, Route } from "react-router-dom";
 import Genesis from './pages/Genesis';
 import Home from './pages/Home';
 import './App.css';
+import Sidebar from "./components/Sidebar";
 
 function App() {
-  console.log('process.env.PUBLIC_URL: ', process.env.PUBLIC_URL)
-  console.log('process.env.NODE_ENV: ', process.env.NODE_ENV)
   return (
-    <div className="App">
-      <HashRouter>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/genesis" element={<Genesis />} />
-        </Routes>
-      </HashRouter>
-    </div>
+    <HashRouter>
+      <div className="App" id='outer-container' >
+        <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
+        <div id='page-wrap' className="page-wrap">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/genesis" element={<Genesis />} />
+          </Routes>
+        </div>
+      </div>
+    </HashRouter>
   );
 }
 

src/common.js

@@ -30,24 +30,28 @@ export const organizers = [
     logo: 'dxdao.png',
     name: 'DXDAO',
     rol: 'INFINIT INITIATOR',
-    description:'DECENTRALIZATION SUPER SOLDIER'
+    description:'DECENTRALIZATION SUPER SOLDIER',
+    url: 'https://dxdao.eth.limo/'
   },
   {
     logo: 'hopr.png',
     name: 'HOPR',
     rol: 'GENESIS CO-ORGANIZER',
-    description:'PRIVACY PIONEERS'
+    description:'PRIVACY PIONEERS',
+    url: 'https://hoprnet.org/'
   },
   {
     logo: 'brink.png',
     name: 'BRINK',
     rol: 'GENESIS CO-ORGANIZER',
-    description:'AUTOMATION AFICIANDOS'
+    description:'AUTOMATION AFICIANDOS',
+    url: 'https://brink.trade/'
   },
   {
     logo: 'join.png',
     name: 'JOIN US',
     rol: 'BECOME AN ORGANIZER',
+    url: 'https://twitter.com/messages/compose?recipient_id=1544019424382009345'
   },
 
 ]

src/components/Button.js

@@ -16,7 +16,7 @@ export default function Button(props) {
         </Link>
       )
         :
-        <a className={classButton} href={link}>
+        <a className={classButton} href={link} target="_blank" rel='noreferrer'>
           <img src={`${img}`} alt={img} className={classImg} />
           <strong className={classText}>{text}</strong>
         </a>

src/components/Header.js

@@ -19,7 +19,7 @@ export default function Header(props) {
     <>
       <section className="header">
         <Link to='/'>
-          <img src={infinite} alt="" className="title-image" />
+          <img src={infinite} alt="infinite" className="title-image" />
         </Link>
         <section className="buttons-right">
           <Link to='/'>

src/components/Organizer.js

@@ -1,22 +1,24 @@
 import '../styles/Organizers.css';
 
 export default function Organizer(props) {
-  const { logo, name, rol, description } = props
+  const { logo, name, rol, description, url } = props
   return (
-    <div className='row'>
+    <>
       <hr className='solid divider' />
-      <div className='column brand'>
-        <img src={`${logo}`} alt={name} className="logo" />
-        {name}
+      <div className='row'>
+        <a className='column brand' href={url} target="_blank" rel='noreferrer'>
+          <img src={`${logo}`} alt={name} className="logo" />
+          {name}
+        </a>
+        <div className='column extras'>
+          <strong> {rol} </strong>
+        </div>
+        <div className='column extras'>
+          <span>
+            {description}
+          </span>
+        </div>
       </div>
-      <div className='column extras'>
-        <strong> {rol} </strong>
-      </div>
-      <div className='column extras'>
-        <span>
-          {description}
-        </span>
-      </div>
-    </div>
+    </>
   )
 }

src/components/Organizers.js

@@ -14,7 +14,7 @@ export default function Organizers() {
       </div>
       <div className='gridContainer'>
 
-        {organizers.map(o => <Organizer key={o.name} logo={o.logo} name={o.name} rol={o.rol} description={o.description} />)}
+        {organizers.map(o => <Organizer key={o.name} logo={o.logo} name={o.name} rol={o.rol} description={o.description} url={o.url} />)}
         <hr className='divider' class="solid" />
       </div>
     </section>

src/components/Sidebar.js

@@ -0,0 +1,62 @@
+//external imports
+import { Link } from "react-router-dom";
+import { slide as Menu } from 'react-burger-menu';
+import { useState } from "react";
+
+//styles
+import '../styles/Sidebar.css';
+
+//internal imports
+import Button from './Button';
+import infinite from '../static/infinite-white-background.png'
+import cross from '../static/cross.png'
+import burger from '../static/burger-button.png'
+
+
+
+export default function Sidebar(props) {
+
+  const [isOpen, setOpen] = useState(false)
+
+  const handleIsOpen = () => {
+    setOpen(!isOpen)
+  }
+
+  const closeSideBar = () => {
+    setOpen(false)
+  }
+
+  return (
+    <Menu isOpen={isOpen} onOpen={handleIsOpen} onClose={handleIsOpen} width={'100%'} right customBurgerIcon={<img src={burger} className='imgBurgerButton' alt='burger' />} customCrossIcon={<img src={cross} alt='cross' />}>
+      <div className='headerBurger'>
+        <img src={infinite} alt="infinite" className="infinite-image-sidebar" />
+      </div>
+      <div className='bodyBurger' >
+        <Link className="menu-item" to='/'  onClick={closeSideBar}>
+          <span class="dotburger" /> <strong>HOME</strong>
+        </Link>
+        <Link className="menu-item" to='/genesis'  onClick={closeSideBar}>
+          <span className="dotburger" /> <strong>GENESIS</strong>
+        </Link>
+      </div>
+      <div className='footerBurger' >
+        <Button
+          text='APPLY TO HACK'
+          img='enter-icon.png'
+          classImg='dot'
+          classText='apply-btn-text'
+          classButton='button buttons-footer-sidebar'
+          link='https://forms.gle/gKy5XM2YLNP3gNXU9'
+        />
+        <Button
+          text='BECOME AN ORGANIZER'
+          img='enter-icon.png'
+          classImg='dot'
+          classText='apply-btn-text'
+          classButton='button buttons-footer-sidebar'
+          link='https://twitter.com/messages/compose?recipient_id=1544019424382009345'
+        />
+      </div>
+    </Menu>
+  );
+};

src/pages/Genesis/index.js

@@ -60,7 +60,7 @@ export default function Home() {
             footer='Learn More'
           />
           <Databox
-            title='EGER MENTORS'
+            title='EAGER MENTORS'
             body='Infinite features a collection of deeply experienced mentors from throughout the Ethereum ecosystem. Hackers can approach mentors for guidance at any time during the event.'
             footer='Apply as Mentor'
           />

src/pages/Home/index.js

@@ -27,11 +27,11 @@ export default function Home() {
           </section>
           <InfinitePhrases />
         </section>
+        <Organizers />
       </section>
-      <Organizers />
       <Quote />
       <Drop />
-      <Social/>
+      <Social />
       <Footer />
     </>
   )

src/styles/Button.css

@@ -1,13 +1,24 @@
 .button {
   border-radius: 10px;
-  display: inline-block;
+  border: solid 1px #fff;
   cursor: pointer;
+  display: inline-block;
   font-family: 'Space Grotesk';
   margin: 10px;
+  margin-top: 0px;
   padding: 15px;
-  border: solid 1px #fff;
+  width: fit-content;
+  font-size: 1vw;
 }
 
 .button:hover {
   border: solid 1px palevioletred;
+}
+
+@media screen and (max-width: 900px) {
+  .button {
+    font-size: 1rem;
+    margin-top: 10px;
+    padding: 10px;
+  }
 }

src/styles/Databox.css

@@ -1,27 +1,27 @@
 .dataBox {
   background-color: #fff;
   color: #000;
-  width: 20%;
+  width: 33%;
   padding: 10px;
   border-radius: 10px;
   margin: 50px 25px;
 }
 
 .dataBoxTitle {
   font-weight: 900;
-  font-size: 1.5rem;
+  font-size: 1.5vw;
 }
 
 .dataBoxBody {
-  font-size: 0.7rem;
+  font-size: 1vw;
 }
 
 .dataBoxFooter {
-  font-size: 1rem;
+  font-size: 1.2vw;
   font-weight: 500;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 900px) {
   .dataBox {
     background-color: #fff;
     color: #000;
@@ -30,5 +30,16 @@
     border-radius: 10px;
     margin: 50px 25px;
   }
+  .dataBoxBody {
+    font-size: 1rem;
+  }
+
+  .dataBoxFooter {
+    font-size: 1rem;
+  }
 
+  .dataBoxTitle {
+    font-weight: 900;
+    font-size: 1.5rem;
+  }
 }

src/styles/Drop.css

@@ -10,20 +10,22 @@
   justify-content: center;
   margin-top: 100px;
   min-height: 100vh;
-  padding-top: 100px;
+  padding-top: 50px;
   width: 100%;
 }
 
 .dropText {
-  font-size: 2rem;
+  font-size: 3vw;
   max-width: 29%;
   text-align: -webkit-center;
+  margin-top: 0px;
 }
 
-.buttonsContainer{
+.buttonsContainer {
   align-self: center;
   padding-top: 10px;
   padding-bottom: 35px;
+  text-align: -webkit-center;
 }
 
 .imgBody {
@@ -35,22 +37,14 @@
   background-color: #fff;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 900px) {
 
   .dropContainer {
-    align-items: center;
-    background-image: url('../static/Drop.png');
-    background-position-x: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-top: 100px;
+    margin-top: 50px;
     min-height: 50vh;
-    padding-top: 0px;
     width: 100%;
+    background-size: contain;
+    background-position-x: center;
   }
 
   .dropText {
@@ -62,4 +56,11 @@
   .imgBody {
     width: 100px
   }
+}
+
+
+@media screen and (max-width: 450px) {
+  .dropContainer {
+    background-size: cover;
+  }
 }

src/styles/Faq.css

@@ -3,4 +3,10 @@
   color: #fff;
   margin-top: 50px;
   place-self: center;
+}
+
+@media screen and (max-width: 900px) {
+  .faq {
+    max-width: 70%;
+  }
 }