Feature/home page

package.json

@@ -8,9 +8,12 @@
     "@testing-library/user-event": "^7.2.1",
     "eslint-config-airbnb-base": "^14.1.0",
     "node-sass": "4.14.1",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-spring": "^8.0.27",
+    "styled-components": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,26 +1,8 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.scss';
+import HomePage from './components/HomePage';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+const App = () => (
+  <HomePage />
+);
 
 export default App;

src/components/Footer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Brand from './navbar/Brand';
+
+const Footer = () => (
+  <>
+    <Footer>
+      <Brand />
+      <div>
+        <p> Hey some shit us here</p>
+      </div>
+    </Footer>
+  </>
+);
+export default Footer;

src/components/HomePage.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import Navbar from './navbar/Navbar';
+import Footer from './Footer';
+
+class HomePage extends Component {
+  constructor(props) {
+    super(props);
+    this.handleNavbar = this.handleNavbar.bind(this);
+    this.navState = this.navState.bind(this);
+    this.state = {
+      navbarOpen: false
+    };
+  }
+
+  handleNavbar() {
+    this.setState((prevState) => ({
+      navbarOpen: !prevState.navbarOpen
+    }));
+  }
+
+  navState() {
+    this.setState((prevState) => ({
+      navbarOpen: prevState.navbarOpen
+    }));
+  }
+
+  render() {
+    return (
+      <>
+        <Navbar
+          navbarOpen={this.navState}
+          handleNavbar={this.handleNavbar}
+        />
+        <Footer />
+      </>
+    );
+  }
+}
+
+export default HomePage;

src/components/navbar/Brand.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+import logo from '../../assets/colored 1.png';
+
+const Image = styled.img`
+  height: 45px;
+  width: 192.46px;
+  margin: auto 0;
+`;
+
+const Brand = () => <Image src={logo} alt="Farm Reach logo" />;
+
+export default Brand;

src/components/navbar/BurgerMenu.js

@@ -0,0 +1,47 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+const Burgermenu = ({ handleNavbar, navState }) => (
+  <Wrapper onClick={handleNavbar}>
+    <div className={navState ? 'open' : ''}>
+      <span>&nbsp;</span>
+      <span>&nbsp;</span>
+      <span>&nbsp;</span>
+    </div>
+  </Wrapper>
+);
+
+export default Burgermenu;
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-top: .7rem;
+  cursor: pointer;
+  display: block;
+
+  & span {
+    background: #fdcb6e;
+    display: block;
+    position: relative;
+    width: 1.9rem;
+    height: .2rem;
+    margin-bottom: .7rem;
+    transition: all ease-in-out 0.2s;
+  }
+
+  .open span:nth-child(2) {
+      opacity: 0;
+    }
+
+  .open span:nth-child(3) {
+    transform: rotate(45deg);
+    top: -11px;
+  }
+
+  .open span:nth-child(1) {
+    transform: rotate(-45deg);
+    top: 11px;
+  }
+
+`;

src/components/navbar/CollapseMenu.js

@@ -0,0 +1,63 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+import { useSpring, animated } from 'react-spring';
+
+
+const CollapseMenu = ({ handleNavbar, navState }) => {
+  const { open } = useSpring({ open: navState ? 0 : 1 });
+
+  if (navState === true) {
+    return (
+      <CollapseWrapper style={{
+        transform: open.interpolate({
+          range: [0, 0.2, 0.3, 1],
+          output: [0, -20, 0, -200]
+        }).interpolate((openValue) => `translate3d(0, ${openValue}px, 0`)
+      }}
+      >
+        <NavLinks>
+          <li><a href="/" onClick={handleNavbar}>link n1</a></li>
+          <li><a href="/" onClick={handleNavbar}>link n2</a></li>
+          <li><a href="/" onClick={handleNavbar}>link n3</a></li>
+          <li><a href="/" onClick={handleNavbar}>link n4</a></li>
+        </NavLinks>
+      </CollapseWrapper>
+    );
+  }
+  return null;
+};
+
+export default CollapseMenu;
+
+const CollapseWrapper = styled(animated.div)`
+  background: #2d3436;
+  position: fixed;
+  top: 4.5rem;
+  left: 0;
+  right: 0;
+`;
+
+const NavLinks = styled.ul`
+  list-style-type: none;
+  padding: 2rem 1rem 2rem 2rem;
+
+  & li {
+    transition: all 300ms linear 0s;
+  }
+
+  & a {
+    font-size: 1.4rem;
+    line-height: 2;
+    color: #dfe6e9;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: #fdcb6e;
+      border-bottom: 1px solid #fdcb6e;
+    }
+  }
+`;