Merge branch 'non-logged-views-feature' into 'dev'

Login and Home pages are done. Login is ready to handle the authentication

See merge request sa4-2020/the-sanmarinoes/frontend!3

smart-hut/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# idea
+.idea

smart-hut/package-lock.json

@@ -1347,11 +1347,39 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@semantic-ui-react/event-stack": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.1.tgz",
+      "integrity": "sha512-SA7VOu/tY3OkooR++mm9voeQrJpYXjJaMHO1aFCcSouS2xhqMR9Gnz0LEGLOR0h9ueWPBKaQzKIrx3FTTJZmUQ==",
+      "requires": {
+        "exenv": "^1.2.2",
+        "prop-types": "^15.6.2"
+      }
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
       "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q=="
     },
+    "@stardust-ui/react-component-event-listener": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@stardust-ui/react-component-event-listener/-/react-component-event-listener-0.38.0.tgz",
+      "integrity": "sha512-sIP/e0dyOrrlb8K7KWumfMxj/gAifswTBC4o68Aa+C/GA73ccRp/6W1VlHvF/dlOR4KLsA+5SKnhjH36xzPsWg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@stardust-ui/react-component-ref": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/@stardust-ui/react-component-ref/-/react-component-ref-0.38.0.tgz",
+      "integrity": "sha512-xjs6WnvJVueSIXMWw0C3oWIgAPpcD03qw43oGOjUXqFktvpNkB73JoKIhS4sCrtQxBdct75qqr4ZL6JiyPcESw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.6.3"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -3124,6 +3152,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -3522,6 +3555,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
+      "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4948,6 +4990,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -7863,6 +7910,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keyboard-key": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
+      "integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8159,6 +8211,14 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-ui-image": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/material-ui-image/-/material-ui-image-3.2.3.tgz",
+      "integrity": "sha512-dXU9Hj7l0OvmG5s39gwmBuZdYvf5kn17tMMPYg5Hpu4vgnSdfoGkE8kt5J449BWmZZaLMTf5pExcz80Du9dwog==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10698,6 +10758,20 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-popper": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
+      "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "^0.3.0",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
     "react-router": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
@@ -11388,6 +11462,24 @@
         "node-forge": "0.9.0"
       }
     },
+    "semantic-ui-react": {
+      "version": "0.88.2",
+      "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz",
+      "integrity": "sha512-+02kN2z8PuA/cMdvDUsHhbJmBzxxgOXVHMFr9XK7zGb0wkW9A6OPQMFokWz7ozlVtKjN6r7zsb+Qvjk/qq1OWw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "@semantic-ui-react/event-stack": "^3.1.0",
+        "@stardust-ui/react-component-event-listener": "~0.38.0",
+        "@stardust-ui/react-component-ref": "~0.38.0",
+        "classnames": "^2.2.6",
+        "keyboard-key": "^1.0.4",
+        "lodash": "^4.17.15",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "react-popper": "^1.3.4",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -11577,6 +11669,11 @@
         }
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -12661,6 +12758,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -12962,6 +13064,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

smart-hut/package.json

@@ -8,11 +8,14 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "classnames": "^2.2.6",
+    "material-ui-image": "^3.2.3",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.4.0",
+    "semantic-ui-react": "^0.88.2"
   },
   "scripts": {
     "start": "react-scripts start",

smart-hut/public/index.html

@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <meta charset="utf-8" />
+<head>
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="theme-color" content="#000000" />
+  <link rel="stylesheet" href="style.css">
-    <meta
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
-      name="description"
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-      content="Web site created using create-react-app"
+  <meta name="theme-color" content="#000000" />
-    />
+  <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
-    <!--
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +25,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+  <title>React App</title>
-  </head>
+</head>
-  <body>
+
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+<body>
-    <div id="root"></div>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
-    <!--
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +41,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+</body>
-</html>
+
+</html>

smart-hut/public/style.css

@@ -0,0 +1,6 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+/*background: linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51));*/

smart-hut/src/App.js

@@ -5,12 +5,7 @@ import Routes from './Routes';
 
 function App() {
   return (
-    <div>
-      <div>
-        <a href="/home">Go Home</a>
-      </div>
       <Routes/>
-    </div>
   );
 }
 

smart-hut/src/Routes.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import {Route, Switch } from 'react-router-dom';
+import {Route, Switch} from 'react-router-dom';
 import Home from './views/Home';
+import Login from "./views/Login";
+import Signup from "./views/Signup";
 
 export default function Routes() {
-    return (
+  return (
-        <Switch>
+    <Switch>
-            <Route path="/home" exact component={Home}/>
+      <Route path="/" exact component={Home}/>
-        </Switch>
+      <Route path="/login" exact component={Login}/>
-    )
+      <Route path="/signup" exact component={Signup}/>
+    </Switch>
+  )
 }

smart-hut/src/components/Banner.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+
+const useStyles = makeStyles(theme => ({
+    mainFeaturedPost: {
+        position: 'relative',
+        backgroundColor: theme.palette.grey[800],
+        color: theme.palette.common.white,
+        marginBottom: theme.spacing(4),
+        backgroundImage: 'img/banner.jpg',
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        backgroundColor: 'rgba(0,0,0,.3)',
+    },
+    mainFeaturedPostContent: {
+        position: 'relative',
+        padding: theme.spacing(3),
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(6),
+            paddingRight: 0,
+        },
+    },
+}));
+
+
+export default function Banner(props) {
+    const classes = useStyles();
+    const { post } = props;
+
+    return (
+        <Paper className={classes.mainFeaturedPost} style={{ backgroundImage: `url(${post.image})` }}>
+            {/* Increase the priority of the hero background image */}
+            {<img style={{ display: 'none' }} src={post.image} alt={post.imageText} />}
+            <div className={classes.overlay} />
+            <Grid container>
+                <Grid item md={6}>
+                    <div className={classes.mainFeaturedPostContent}>
+                        <Typography component="h1" variant="h3" color="inherit" gutterBottom>
+                            {post.title}
+                        </Typography>
+                        <Typography variant="h5" color="inherit" paragraph>
+                            {post.description}
+                        </Typography>
+                        <Link variant="subtitle1" href="#">
+                            {post.linkText}
+                        </Link>
+                    </div>
+                </Grid>
+            </Grid>
+        </Paper>
+    );
+}
+
+Banner.propTypes = {
+    post: PropTypes.object,
+};

smart-hut/src/components/Footer.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Footer() {
+    return(
+        <div>
+            <p>This is the footer</p>
+        </div>
+    )
+}

smart-hut/src/components/Header.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Toolbar from '@material-ui/core/Toolbar';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import SearchIcon from '@material-ui/icons/Search';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+
+const useStyles = makeStyles(theme => ({
+    toolbar: {
+        borderBottom: `1px solid ${theme.palette.divider}`,
+    },
+    toolbarTitle: {
+        flex: 1,
+    },
+    toolbarSecondary: {
+        justifyContent: 'space-between',
+        overflowX: 'auto',
+    },
+    toolbarLink: {
+        padding: theme.spacing(1),
+        flexShrink: 0,
+    },
+}));
+
+export default function Header(props) {
+    const classes = useStyles();
+    const { sections, title } = props;
+
+    return (
+        <React.Fragment>
+            <Toolbar className={classes.toolbar}>
+                <Typography
+                    component="h2"
+                    variant="h5"
+                    color="inherit"
+                    align="center"
+                    noWrap
+                    className={classes.toolbarTitle}
+                >
+                    {title}
+                </Typography>
+                <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
+                    {sections.map(section => (
+                        <Link
+                            color="inherit"
+                            noWrap
+                            key={section.title}
+                            variant="body2"
+                            href={section.url}
+                            className={classes.toolbarLink}
+                        >
+                            {section.title}
+                        </Link>
+                    ))}
+                </Toolbar>
+                <Button size="small" variant="outlined" style={{margin: "0 1rem"}}>Login</Button>
+
+
+                <Button variant="outlined" size="small">
+                    Sign up
+                </Button>
+            </Toolbar>
+        </React.Fragment>
+    );
+}
+
+Header.propTypes = {
+    sections: PropTypes.array,
+    title: PropTypes.string,
+};

smart-hut/src/index.js

@@ -5,13 +5,10 @@ import * as serviceWorker from './serviceWorker';
 //React Router
 import { BrowserRouter as Router} from 'react-router-dom';
 
+
 ReactDOM.render(
     <Router>
         <App />
     </Router>
     , document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();

smart-hut/src/views/Home.js

@@ -1,10 +1,294 @@
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import {
+    Button,
+    Container,
+    Divider,
+    Grid,
+    Header,
+    Icon,
+    Image,
+    List,
+    Menu,
+    Responsive,
+    Segment,
+    Sidebar,
+    Visibility,
+} from 'semantic-ui-react';
 
-/**
+// Heads up!
- * @return {string}
+// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
- */
+// For more advanced usage please check Responsive docs under the "Usage" section.
-export default function Home(){
+const getWidth = () => {
-    return(
+    const isSSR = typeof window === 'undefined';
-        "Hello World"
+    return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
-    )
 }
+
+/* eslint-disable react/no-multi-comp */
+/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
+ * such things.
+ */
+const HomepageHeading = ({ mobile }) => (
+    <Container text>
+        <Header
+            as='h1'
+            content='SmartHut'
+            inverted
+            style={{
+                fontSize: mobile ? '2em' : '4em',
+                fontWeight: 'normal',
+                marginBottom: 0,
+                marginTop: mobile ? '1.5em' : '3em',
+            }}
+        />
+        <Header
+            as='h2'
+            content='Keep your Home fully Connected'
+            inverted
+            style={{
+                fontSize: mobile ? '1.5em' : '1.7em',
+                fontWeight: 'normal',
+                marginTop: mobile ? '0.5em' : '1.5em',
+            }}
+        />
+        <Button size='huge' color="orange" href="/signup">
+            Get Started
+            <Icon name='right arrow' />
+        </Button>
+    </Container>
+)
+
+HomepageHeading.propTypes = {
+    mobile: PropTypes.bool,
+}
+
+class DesktopContainer extends Component {
+    state = {};
+    hideFixedMenu = () => this.setState({ fixed: false })
+    showFixedMenu = () => this.setState({ fixed: true })
+
+    render() {
+        const { children } = this.props
+        const { fixed } = this.state
+
+        return (
+            <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
+                <Visibility
+                    once={false}
+                    onBottomPassed={this.showFixedMenu}
+                    onBottomPassedReverse={this.hideFixedMenu}
+                >
+                    <Segment
+                        basic
+                        textAlign='center'
+                        style={{
+                            minHeight: 700,
+                            padding: '1em 0em',
+                            background: ` linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51)), url("img/header.jpg")`,
+                            backgroundSize: "cover",
+                        }}
+                        vertical
+                    >
+                        <Menu
+                            fixed="top"
+                            inverted={!fixed}
+                            pointing={!fixed}
+                            primary
+                            size='large'
+                            borderless
+
+                        >
+                            <Container>
+                                <Menu.Item as='a' active>
+                                    Home
+                                </Menu.Item>
+
+                                <Menu.Item position='right'>
+                                    <Button as='a' href="/login"  inverted={!fixed}>
+                                        Log in
+                                    </Button>
+                                    <Button as='a' href="/signup" inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>
+                                        Sign Up
+                                    </Button>
+                                </Menu.Item>
+                            </Container>
+                        </Menu>
+                        <HomepageHeading />
+                    </Segment>
+                </Visibility>
+
+                {children}
+            </Responsive>
+        )
+    }
+}
+
+DesktopContainer.propTypes = {
+    children: PropTypes.node,
+}
+
+class MobileContainer extends Component {
+    state = {}
+
+    handleSidebarHide = () => this.setState({ sidebarOpened: false })
+
+    handleToggle = () => this.setState({ sidebarOpened: true })
+
+    render() {
+        const { children } = this.props;
+        const { sidebarOpened } = this.state;
+
+        return (
+            <Responsive
+                as={Sidebar.Pushable}
+                getWidth={getWidth}
+                maxWidth={Responsive.onlyMobile.maxWidth}
+            >
+                <Sidebar
+                    as={Menu}
+                    animation='push'
+                    inverted
+                    onHide={this.handleSidebarHide}
+                    vertical
+                    visible={sidebarOpened}
+                >
+                    <Menu.Item as='a' active>
+                        Home
+                    </Menu.Item>
+                    <Menu.Item as='a'>Log in</Menu.Item>
+                    <Menu.Item as='a'>Sign Up</Menu.Item>
+                </Sidebar>
+
+                <Sidebar.Pusher dimmed={sidebarOpened}>
+                    <Segment
+                        inverted
+                        textAlign='center'
+                        style={{ minHeight: 350, padding: '1em 0em' }}
+                        vertical
+                    >
+                        <Container>
+                            <Menu inverted pointing secondary size='large'>
+                                <Menu.Item onClick={this.handleToggle}>
+                                    <Icon name='sidebar' />
+                                </Menu.Item>
+                                <Menu.Item position='right'>
+                                    <Button as='a' inverted>
+                                        Log in
+                                    </Button>
+                                    <Button as='a' inverted style={{ marginLeft: '0.5em' }}>
+                                        Sign Up
+                                    </Button>
+                                </Menu.Item>
+                            </Menu>
+                        </Container>
+                        <HomepageHeading mobile />
+                    </Segment>
+
+                    {children}
+                </Sidebar.Pusher>
+            </Responsive>
+        )
+    }
+}
+
+MobileContainer.propTypes = {
+    children: PropTypes.node,
+}
+
+const ResponsiveContainer = ({ children }) => (
+    <div>
+        <DesktopContainer>{children}</DesktopContainer>
+        <MobileContainer>{children}</MobileContainer>
+    </div>
+)
+
+ResponsiveContainer.propTypes = {
+    children: PropTypes.node,
+}
+
+const Home = () => (
+    <ResponsiveContainer>
+        <Segment style={{ padding: '8em 0em' }} vertical>
+            <Grid container stackable verticalAlign='middle'>
+                <Grid.Row>
+                    <Grid.Column width={8}>
+                        <Header as='h3' style={{ fontSize: '2em' }}>
+                            We help you keep your home connected
+                        </Header>
+                        <p style={{ fontSize: '1.33em' }}>
+                            In a few steps your home will be fully connected with SmartHut.
+                        </p>
+                        <Header as='h3' style={{ fontSize: '2em' }}>
+                            We Make Bananas That Can Dance
+                        </Header>
+                        <p style={{ fontSize: '1.33em' }}>
+                            Yes that's right, you thought it was the stuff of dreams, but even bananas can be
+                            bioengineered.
+                        </p>
+                    </Grid.Column>
+                    <Grid.Column floated='right' width={6}>
+                        <Image bordered rounded size='large' src='/img/banner.jpg' />
+                    </Grid.Column>
+                </Grid.Row>
+                <Grid.Row>
+                    <Grid.Column textAlign='center'>
+                        <Button size='huge'>Check It Out</Button>
+                    </Grid.Column>
+                </Grid.Row>
+            </Grid>
+        </Segment>
+
+        <Segment style={{ padding: '8em 0em' }} vertical>
+            <Container text>
+                <Header as='h3' style={{ fontSize: '2em' }}>
+                    Breaking The Grid, Grabs Your Attention
+                </Header>
+                <p style={{ fontSize: '1.33em' }}>
+                    Instead of focusing on content creation and hard work, we have learned how to master the
+                    art of doing nothing by providing massive amounts of whitespace and generic content that
+                    can seem massive, monolithic and worth your attention.
+                </p>
+                <Button as='a' size='large'>
+                    Read More
+                </Button>
+            </Container>
+        </Segment>
+
+        <Segment inverted vertical style={{ padding: '5em 0em' }}>
+            <Container>
+                <Grid divided inverted stackable>
+                    <Grid.Row>
+                        <Grid.Column width={3}>
+                            <Header inverted as='h4' content='About' />
+                            <List link inverted>
+                                <List.Item as='a'>Sitemap</List.Item>
+                                <List.Item as='a'>Contact Us</List.Item>
+                                <List.Item as='a'>Religious Ceremonies</List.Item>
+                                <List.Item as='a'>Gazebo Plans</List.Item>
+                            </List>
+                        </Grid.Column>
+                        <Grid.Column width={3}>
+                            <Header inverted as='h4' content='Services' />
+                            <List link inverted>
+                                <List.Item as='a'>Banana Pre-Order</List.Item>
+                                <List.Item as='a'>DNA FAQ</List.Item>
+                                <List.Item as='a'>How To Access</List.Item>
+                                <List.Item as='a'>Favorite X-Men</List.Item>
+                            </List>
+                        </Grid.Column>
+                        <Grid.Column width={7}>
+                            <Header as='h4' inverted>
+                                SmartHut
+                            </Header>
+                            <p>
+                                Keep your Home connected.
+                            </p>
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
+            </Container>
+        </Segment>
+    </ResponsiveContainer>
+)
+
+export default Home;

smart-hut/src/views/Login.js

@@ -0,0 +1,80 @@
+import React, {Component} from 'react';
+import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react';
+
+export default class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      logged : false,
+      email: "",
+      password : ""
+    };
+  }
+
+  handleLogin = (e) => {
+    // TODO Login should be handled here
+    console.log(this.state);
+  };
+
+  onChangeHandler = (event) => {
+    let nam = event.target.name;
+    let val = event.target.value;
+    this.setState({[nam]: val});
+  };
+
+  toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme }));
+
+  render() {
+    return (
+      <React.Fragment>
+        <Button
+          circular
+          icon="right arrow"
+          style={{margin: "2em"}}
+          href="/"
+        >
+          <Icon name='arrow alternate circle left'/>
+          Go Home </Button>
+        <Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
+          <Grid.Column style={{maxWidth: 450}}>
+            <Header as='h2' color='blue' textAlign='center'>
+              <Image src='img/logo.png'/> Log-in to SmartHut
+            </Header>
+            <Form size='large' style={{marginTop : "2em"}}>
+                <Form.Input
+                  control={Input}
+                  type="email"
+                  icon='user'
+                  name="email"
+                  iconPosition='left'
+                  placeholder='E-mail'
+                  onChange={this.onChangeHandler}
+                  /*error={{
+                    content: 'Please enter a valid email address',
+                    pointing: 'below',
+                  }}*/
+                />
+                <Form.Input
+                  icon='lock'
+                  iconPosition='left'
+                  placeholder='Password'
+                  name="password"
+                  type='password'
+                  onChange={this.onChangeHandler}
+                />
+              <Checkbox type="checkbox" name="rememberme" onClick={this.toggle} label='Remember me' style={{margin: "1.5em 0", float : "left"}}/>
+
+              <Button  color='blue' fluid size='large' onClick={this.handleLogin}>
+                  Login
+              </Button>
+            </Form>
+            <Message>
+              <p><a href="/forgot-password">Forgot Password?</a></p>
+              <p>New to us? <a href='/signup'>  Sign Up</a></p>
+            </Message>
+          </Grid.Column>
+        </Grid>
+      </React.Fragment>
+    )
+  }
+}

smart-hut/src/views/Signup.js

@@ -0,0 +1,10 @@
+import React, {Component} from 'react';
+
+
+export default class Signup extends Component{
+  render() {
+    return(
+      "This is the register page"
+    )
+  }
+}