diff --git a/.eslintrc.js b/.eslintrc.js index 57eb045..95e7690 100644 --- a/.eslintrc.js +++ b/.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 diff --git a/README.md b/README.md index 2605d1d..1dc787e 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,6 @@ ## COntribution - ## Acknowlegdement ## LICENSE diff --git a/app.properties b/app.properties index dcbe613..3646f8f 100644 --- a/app.properties +++ b/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: diff --git a/package.json b/package.json index 2d44ba6..90c3a05 100644 --- a/package.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index 262404d..66bc843 100644 --- a/src/App.jsx +++ b/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 (
-
-

What he Do??

-
- + + - Learn React + Eliminating Hunger +
); } diff --git a/src/App.scss b/src/App.scss index eb47851..7d17a71 100644 --- a/src/App.scss +++ b/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; } diff --git a/src/App.test.js b/src/App.test.js index 55781ed..d6e6dd8 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -4,6 +4,6 @@ import App from './App.jsx'; test('renders learn react link', () => { const { getByText } = render(); - const linkElement = getByText(/learn react/i); + const linkElement = getByText(/Eliminating Hunger/i); expect(linkElement).toBeInTheDocument(); }); \ No newline at end of file diff --git a/src/_variables.scss b/src/_variables.scss index 684f7e3..39a1270 100644 --- a/src/_variables.scss +++ b/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; \ No newline at end of file diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx new file mode 100644 index 0000000..19d3a59 --- /dev/null +++ b/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 ( + + + + + {title} + {/* Card subtitle */} + {text} + + + + + ); +}; + +export default CardDisplay; + +CardDisplay.propTypes = { + item: PropTypes.any +} \ No newline at end of file diff --git a/src/components/card/card.scss b/src/components/card/card.scss new file mode 100644 index 0000000..554c30f --- /dev/null +++ b/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; +} + diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx new file mode 100644 index 0000000..a7c3dda --- /dev/null +++ b/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 ( + // +
+

Contact Us

+

Twitter

+

Facebook

+

Gmail

+

Join Our Cause

+
+ // + ) + } +} + +export default FooterComponent; \ No newline at end of file diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss new file mode 100644 index 0000000..7802fc2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/navbar/navbar.jsx b/src/components/navbar/navbar.jsx new file mode 100644 index 0000000..d2bf153 --- /dev/null +++ b/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 ( + +
+
+
+ +
+
+ + ) + } +} + +export default NavBarComponent; \ No newline at end of file diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss new file mode 100644 index 0000000..05fae15 --- /dev/null +++ b/src/components/navbar/navbar.scss @@ -0,0 +1,278 @@ +@import '../../variables'; +/* BASIC SETUP */ + +.page-wrapper { + width: 100%; + height: auto; +} + +.nav-wrapper { + width: 100%; + position: -webkit-sticky; /* Safari */ + position: sticky; + top: 0; + background-color: $background-color; + z-index: 10; +} + +.grad-bar { + width: 100%; + height: 5px; + background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); + background-size: 400% 400%; + -webkit-animation: gradbar 15s ease infinite; + -moz-animation: gradbar 15s ease infinite; + animation: gradbar 15s ease infinite; +} + +/* NAVIGATION */ + +.menubar { + display: grid; + grid-template-columns: 1fr 3fr; + align-items: center; + height: 50px; + overflow: hidden; +} + +.menubar img { + height: 16px; + width: auto; + justify-self: start; + margin-left: 20px; +} + +.menubar ul { + list-style: none; + display: grid; + grid-template-columns: repeat(6,1fr); + justify-self: end; +} + +.menu-item a { + color: $primary-text-color; + font-size: 0.9rem; + font-weight: 400; + text-decoration: none; + transition: color 0.3s ease-out; +} + +.menu-item a:hover { + color: green; +} + +/* SECTIONS */ + +.headline { + width: 100%; + height: 50vh; + min-height: 350px; + background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.7)), url('https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/jPLiQ-9/mountains-background-for-titles-intro-projects-and-etc_ew22rur3l__F0000.png'); + background-size: cover; + display: flex; + flex-direction: column; + justify-content: center; +} + +.features { + width: 100%; + height: auto; + background-color: $background-color; + display: flex; + padding: 50px 20px; + justify-content: space-around; +} + +.feature-container { + flex-basis: 30%; + margin-top: 10px; +} + +.feature-container p { + color: $background-color; + text-align: center; + line-height: 1.4; + margin-bottom: 15px; +} + +.feature-container img { + width: 100%; + margin-bottom: 15px; +} + +/* SEARCH FUNCTION */ + +.no-search { + transform: translate(0); + transition: transform 0.7s ease-in-out; +} + +/* MOBILE MENU & ANIMATION */ + +.menu-toggle .bar{ + width: 25px; + height: 3px; + background-color: $primary-text-color; + margin: 5px auto; + -webkit-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.menu-toggle { + justify-self: end; + margin-right: 25px; + display: none; +} + +.menu-toggle:hover{ + cursor: pointer; +} + +#mobile-menu.is-active .bar:nth-child(2){ + opacity: 0; +} + +#mobile-menu.is-active .bar:nth-child(1){ + -webkit-transform: translateY(8px) rotate(45deg); + -ms-transform: translateY(8px) rotate(45deg); + -o-transform: translateY(8px) rotate(45deg); + transform: translateY(8px) rotate(45deg); +} + +#mobile-menu.is-active .bar:nth-child(3){ + -webkit-transform: translateY(-8px) rotate(-45deg); + -ms-transform: translateY(-8px) rotate(-45deg); + -o-transform: translateY(-8px) rotate(-45deg); + transform: translateY(-8px) rotate(-45deg); +} + +/* KEYFRAME ANIMATIONS */ + +@-webkit-keyframes gradbar { + 0% { + background-position: 0% 50% + } + 50% { + background-position: 100% 50% + } + 100% { + background-position: 0% 50% + } +} + +@-moz-keyframes gradbar { + 0% { + background-position: 0% 50% + } + 50% { + background-position: 100% 50% + } + 100% { + background-position: 0% 50% + } +} + +@keyframes gradbar { + 0% { + background-position: 0% 50% + } + 50% { + background-position: 100% 50% + } + 100% { + background-position: 0% 50% + } +} + +/* Media Queries */ + + /* Mobile Devices - Phones/Tablets */ + +@media only screen and (max-width: 720px) { + .features { + flex-direction: column; + padding: 50px; + } + + /* MOBILE HEADINGS */ + + h1 { + font-size: 1.9rem; + } + + h2 { + font-size: 1rem; + } + + p { + font-size: 0.8rem; + } + + /* MOBILE NAVIGATION */ + + .menubar ul { + display: flex; + flex-direction: column; + position: fixed; + justify-content: start; + top: 55px; + background-color: $background-color; + width: 100%; + /* height: calc(100vh - 55px); */ + height: fit-content; + transform: translate(-101%); + text-align: center; + overflow: hidden; + } + + .menubar li { + padding: 15px; + } + + .menubar li:first-child { + margin-top: 50px; + } + + .menubar li a { + font-size: 1rem; + } + + .menu-toggle, .bar { + display: block; + cursor: pointer; + } + + .mobile-nav { + transform: translate(0%)!important; +} + + /* SECTIONS */ + + .headline { + height: 20vh; + } + + .feature-container p { + margin-bottom: 25px; + } + + .feature-container { + margin-top: 20px; + } + + .feature-container:nth-child(2) { + order: -1; + } + + /* SEARCH DISABLED ON MOBILE */ + + #search-icon { + display: none; + } + + .search-input { + display: none; + } + +} \ No newline at end of file diff --git a/src/components/navbar/navbar.test.js b/src/components/navbar/navbar.test.js new file mode 100644 index 0000000..3176566 --- /dev/null +++ b/src/components/navbar/navbar.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import NavBarComponent from './navbar.jsx' + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/Home/gi); + expect(linkElement).toBeInTheDocument(); +}); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 1e26164..f0bbf19 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; // import { PersistGate } from 'redux-persist/integration/react'; // import { Provider } from 'react-redux'; import App from './App.jsx'; +import 'bootstrap/dist/css/bootstrap.min.css'; // import { store, persistor } from './redux/store'; import * as serviceWorker from './serviceWorker'; diff --git a/src/pages/landing/landing.jsx b/src/pages/landing/landing.jsx new file mode 100644 index 0000000..ebce68e --- /dev/null +++ b/src/pages/landing/landing.jsx @@ -0,0 +1,60 @@ +import React, { Fragment } from 'react'; +import './landing.scss'; +import CardDisplay from '../../components/card/card.jsx'; + +export default class LandingPage extends React.Component { + constructor(props) { + super(props); + this.state = { + cardJSON : [ + { + title: 'Online Farmer Market', + text: 'We bring the food directly form its source to you. Cheaper and Fresher', + image: 'https://images.unsplash.com/photo-1567306295427-94503f8300d7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=726&q=80', + buttonText: 'Go Food Shopping' + }, + { + title: 'Facilities For Farmers', + text: 'We provide farmers with access to credit facilites, investors, lands and education on good farmig practices', + image: 'https://images.unsplash.com/photo-1574594403367-44e726fa202d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60', + buttonText: 'Fund A farmer' + }, + { + title: 'Elite Men', + text: 'We bring the experienced heads to the farmers, educate them on technologies and climate effects', + image: 'https://images.unsplash.com/photo-1535090467336-9501f96eef89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60', + buttonText: 'Volunteer' + } + ] + } + } + + // eslint-disable-next-line class-methods-use-this + render() { + return ( + +
+
+
+

Eradicating Hunger, Providing Food

+

Join in saving lives, changing lives and feeding dreams.

+
+
+
+
+ +
+

Solutions We Provide

+
+ {this.state.cardJSON.map((item, index) => { + return + })} +
+ + +
+
+ + ) + } +} diff --git a/src/pages/landing/landing.scss b/src/pages/landing/landing.scss new file mode 100644 index 0000000..9169ce7 --- /dev/null +++ b/src/pages/landing/landing.scss @@ -0,0 +1,54 @@ +@import '../../variables'; + +.container { + background-image: url('https://images.unsplash.com/photo-1517243985121-d6ae97460078?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + width: 100%; + height: 400px; + color: white; + display: flex; + justify-content: center; + align-items: center; + position: relative; + text-align: center; + line-height: 1.5; + + .overlay { + width: 100%; + height: 100%; + background-color: $primary-color; + opacity: 0.25; + position: absolute; + } + +} + +section { + z-index: 4; + + h1 { + font-size: 30px; + } + + p { + font-size: 20px; + } +} + +.solutions { + text-align: center; +} + +.card-container { + display: flex; + flex-direction: column; +} + +@media only screen and (min-width: 1000px) { + .card-container { + flex-direction: row; + justify-content: space-around; + } +} \ No newline at end of file