Samuel workflow

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+	parser: 'babel-eslint',
 	env: {
 		browser: true,
 		es6: true,
@@ -11,7 +12,7 @@ module.exports = {
 		SharedArrayBuffer: 'readonly'
 	},
 	parserOptions: {
-		ecmaVersion: 2018,
+		ecmaVersion: 2019,
 		sourceType: 'module',
 		ecmaFeatures: {
 			jsx: true

README.md

@@ -16,7 +16,6 @@
 
 ## COntribution
 
-
 ## Acknowlegdement
 
 ## LICENSE

app.properties

@@ -1,13 +1,12 @@
 project.name: Roadry
-project.repo: https://github.com/BuildForSDG/team-029-frontend
+project.repo: https://github.com/BuildForSDG/team-012-frontend
 project.sdgs:
 project.app.url:
 project.codacy.url:
 
 project.team.members:
- - Azorji Kelechi Oliver
+ - Samuel Adebayo
 project.team.slackname:
- - kelechi oliver
 
 project.fb.opensource:
 

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "team-029-frontend",
+	"name": "team-012-frontend",
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
@@ -43,6 +43,7 @@
 		]
 	},
 	"devDependencies": {
+		"babel-eslint": "^10.1.0",
 		"eslint": "^6.8.0",
 		"eslint-config-airbnb-base": "^14.1.0",
 		"eslint-config-prettier": "^6.11.0",

src/App.jsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import './App.scss';
+// import { Button } from 'reactstrap';
+import MenuBarComponent from './components/navbar/navbar.jsx';
+import LandingPage from './pages/landing/landing.jsx';
+import FooterComponent from './components/footer/footer.jsx';
 
 function App() {
   return (
     <div className="app">
-      <header className="app">
-      <p>What he Do??</p>
-      </header>
-
+      <MenuBarComponent />
+      <LandingPage />
       <a
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer">
-          Learn React
+          Eliminating Hunger
         </a>
+        <FooterComponent />
     </div>
   );
 }

src/App.scss

@@ -1,16 +1,20 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat');
 @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
-
 @import './variables';
 
-.app {
-	background-color: $background;
-	color: $primary-color;
-	min-width: 100vw;
-	min-height: 100vh;
-	padding: 4rem 2rem;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Montserrat, sans-serif;
 }
 
-* {
-	font-family: Montserrat;
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+.app {
+  background-color: $background-color;
+  color: $primary-text-color;
 }

src/App.test.js

@@ -4,6 +4,6 @@ import App from './App.jsx';
 
 test('renders learn react link', () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  const linkElement = getByText(/Eliminating Hunger/i);
   expect(linkElement).toBeInTheDocument();
 });

src/_variables.scss

@@ -1,6 +1,6 @@
-$background: #c4c4c4;
-$primary-color: #ff4133;
-$primary-text-color: #121317;
-$secondary-color: #95969f;
-$navbar-height: 70px;
-$navbar-height-mobile: 90px;
+$background-color: #fff;
+$primary-text-color: #000;
+$secondary-text-color: #fff;
+$primary-color: #ff5e6c;
+$secondary-color: #feb300;
+$tertiary-color: #95969f;

src/components/card/card.jsx

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Card, CardImg, CardText, CardBody,
+  CardTitle, Button
+} from 'reactstrap';
+import './card.scss';
+
+
+const CardDisplay = (props) => {
+  const {title, text, image, buttonText } = props.item;
+  // eslint-disable-next-line no-console
+  console.log(title, text, image, buttonText);
+  return (
+    <Fragment>
+      <Card>
+        <CardImg top width="100%" src={image} alt="Card cap" />
+        <CardBody>
+          <CardTitle>{title}</CardTitle>
+          {/* <CardSubtitle>Card subtitle</CardSubtitle> */}
+          <CardText>{text}</CardText>
+          <Button>{buttonText}</Button>
+        </CardBody>
+      </Card>
+    </Fragment>
+  );
+};
+
+export default CardDisplay;
+
+CardDisplay.propTypes = {
+  item: PropTypes.any
+}

src/components/card/card.scss

@@ -0,0 +1,13 @@
+@import '../../variables';
+
+.card {
+  width: 350px;
+  margin: 1rem auto 0;
+  box-shadow: -1px 4px 16px -3px rgba(0, 0, 0, 0.342);
+}
+
+.btn-secondary {
+  background-color: $primary-color !important;
+  border-color: $primary-color !important;
+}
+

src/components/footer/footer.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+// import React, { Fragment } from 'react';
+import './footer.scss';
+
+class FooterComponent extends React.Component {
+  // constructor(props) {
+  //   super(props);
+  // }
+
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return (
+      // <Fragment>
+      <footer className="footer">
+        <h2>Contact Us</h2>
+        <p>Twitter</p>
+        <p>Facebook</p>
+        <p>Gmail</p>
+        <h2>Join Our Cause</h2>
+      </footer>
+      // </Fragment>
+    )
+  }
+}
+
+export default FooterComponent;

src/components/footer/footer.scss

@@ -0,0 +1,11 @@
+@import '../../variables';
+
+.footer {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: fit-content;
+  background-color: $primary-color;
+  color: $secondary-text-color;
+  text-align: center;
+}

src/components/navbar/navbar.jsx

@@ -0,0 +1,49 @@
+import React, { Fragment } from 'react';
+import './navbar.scss';
+
+class NavBarComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {isNavOpen: true};
+  }
+
+  handleNav = () => {
+    this.setState({
+      isNavOpen: !this.state.isNavOpen
+    })
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    const MenuActive = this.state.isNavOpen? '': 'is-active';
+    const MenuOpen = this.state.isNavOpen? '': 'mobile-nav';
+    return (
+      <Fragment>
+        <div className="page-wrapper">
+        <div className="nav-wrapper">
+          <div className="grad-bar"></div>
+          <nav className="menubar">
+            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Bluestar_%28bus_company%29_logo.svg/1280px-Bluestar_%28bus_company%29_logo.svg.png" alt="Company Logo"/>
+            <div className={`menu-toggle ${MenuActive}`} id="mobile-menu" onClick={this.handleNav}>  {/** add class is-active */}
+              <span className="bar"></span>
+              <span className="bar"></span>
+              <span className="bar"></span>
+            </div>
+            <ul className={`no-search ${MenuOpen}`}>  {/** add class mobile-nav */}
+              <li className="menu-item"><a href="https://reactjs.org">Home</a></li>
+              <li className="menu-item"><a href="https://reactjs.org">About</a></li>
+              <li className="menu-item"><a href="https://reactjs.org">Work</a></li>
+              <li className="menu-item"><a href="https://reactjs.org">Careers</a></li>
+              <li className="menu-item"><a href="https://reactjs.org">Contact Us</a></li>
+              {/* <i className="fas fa-search" id="search-icon"></i>
+              <input className="search-input" type="text" placeholder="Search.."> */}
+            </ul>
+          </nav>
+        </div>
+      </div>
+      </Fragment>
+    )
+  }
+}
+
+export default NavBarComponent;