diff --git a/smart-hut/public/avatar3.png b/smart-hut/public/avatar3.png
new file mode 100644
index 0000000..ec160b5
Binary files /dev/null and b/smart-hut/public/avatar3.png differ
diff --git a/smart-hut/public/title2.png b/smart-hut/public/title2.png
new file mode 100644
index 0000000..b98cab7
Binary files /dev/null and b/smart-hut/public/title2.png differ
diff --git a/smart-hut/public/title5.png b/smart-hut/public/title5.png
new file mode 100644
index 0000000..c72b33b
Binary files /dev/null and b/smart-hut/public/title5.png differ
diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js
new file mode 100644
index 0000000..355d08a
--- /dev/null
+++ b/smart-hut/src/components/HeaderController.js
@@ -0,0 +1,191 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
+import { Segment, Image } from 'semantic-ui-react'
+
+const ImageExampleWrapped = () => (
+
+ )
+
+ const ImageExampleWrapped2 = () => (
+
+ )
+
+const ImageExampleWrapped3 = () => (
+
+ )
+
+const HeaderExampleIconProp = () => (
+
+)
+
+
+
+const GridExampleInverted = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Settings
+
+ Document
+ Image
+
+
+ See profile...
+
+ Logout
+
+
+
+
+
+ )
+
+export default class MyHeader extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+ }
+
+
+
+ // const navbar = {
+ // backgroundColor: "#20222b",
+ // color: "white",
+ // marginBottom: "4.6rem",
+ // padding: "3.2rem 0"
+ // };
+ // const navbar__buttons = {
+ // borderBottom: "1px solid lighten($light-blue, 10%)",
+ // display: "flex",
+ // justifyContent: "space-between",
+ // padding: "3.2rem 1.6rem"
+ // }
+ // const button = {
+ // background: "#8357c5",
+ // border: "none",
+ // borderBottom: "1px solid purple",
+ // color: "white",
+ // fontWeight: "500",
+ // padding: "1.2rem"
+ // }
+
+
+
+// const MenuExampleButtons = () => (
+//
+// )
+
+
+
+
+
+
+
+
+// class MenuExampleInvertedSegment extends Component {
+// state = { activeItem: 'home' }
+
+// handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+
+// render() {
+// const { activeItem } = this.state
+
+// return (
+//
+//
+//
+// )
+// }
+// }
\ No newline at end of file
diff --git a/smart-hut/src/components/HomeNavbar.js b/smart-hut/src/components/HomeNavbar.js
new file mode 100644
index 0000000..5bcafb5
--- /dev/null
+++ b/smart-hut/src/components/HomeNavbar.js
@@ -0,0 +1,130 @@
+import _ from "lodash";
+import React, { Component } from "react";
+import { render } from "react-dom";
+import {
+ Container,
+ Icon,
+ Image,
+ Menu,
+ Sidebar,
+ Responsive
+} from "semantic-ui-react";
+
+
+const NavBarMobile = ({
+ children,
+ leftItems,
+ onPusherClick,
+ onToggle,
+ rightItems,
+ visible
+ }) => (
+
+
+
+
+ {children}
+
+
+ );
+
+ const NavBarDesktop = ({ leftItems, rightItems }) => (
+
+ );
+
+ const NavBarChildren = ({ children }) => (
+ {children}
+ );
+
+
+class HomeNavabarApp extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ logged : true,
+ email: "",
+ password : ""
+ };
+ }
+ state = {
+ visible: false
+ };
+
+ handlePusher = () => {
+ const { visible } = this.state;
+
+ if (visible) this.setState({ visible: false });
+ };
+
+ handleToggle = () => this.setState({ visible: !this.state.visible });
+
+ render() {
+ const { children, leftItems, rightItems } = this.props;
+ const { visible } = this.state;
+
+ return (
+
+
+
+ {children}
+
+
+
+
+ {children}
+
+
+ );
+ }
+}
+
+const leftItems = [
+ { as: "a", content: "Home", key: "home", href:"/" },
+ ];
+ const rightItems = [
+ { as: "a", content: "Login", key: "login", href:"/login" },
+ { as: "a", content: "Sign up", key: "register", href:"/signup" }
+ ];
+
+const HomeNavbarApp = () => (
+
+
+ );
+
+export default HomeNavbarApp;
diff --git a/smart-hut/src/views/ConfirmForgotPassword.js b/smart-hut/src/views/ConfirmForgotPassword.js
new file mode 100644
index 0000000..e364f0d
--- /dev/null
+++ b/smart-hut/src/views/ConfirmForgotPassword.js
@@ -0,0 +1,107 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import HomeNavbar from "./../components/HomeNavbar";
+import {
+ Container,
+ Icon,
+ Image,
+ Menu,
+ Sidebar,
+ Responsive,
+ Header,
+ Divider,
+ Message,
+ Grid
+} from "semantic-ui-react";
+
+class Paragraph extends Component {
+ state = { visible: true }
+
+ handleDismiss = () => {
+ this.setState({ visible: false })
+
+ setTimeout(() => {
+ this.setState({ visible: true })
+ }, 2000)
+ }
+
+ render() {
+ if (this.state.visible) {
+ return (
+
+ )
+ }
+
+ return (
+
+
+ The message will return in 2s
+
+
+
+ )
+ }
+ }
+
+
+ const MessageReg = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+export default class ConfirmForgotPasswrod extends React.Component {
+ render () {
+ return (
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/smart-hut/src/views/ConfirmRegistration.js b/smart-hut/src/views/ConfirmRegistration.js
new file mode 100644
index 0000000..9bec496
--- /dev/null
+++ b/smart-hut/src/views/ConfirmRegistration.js
@@ -0,0 +1,107 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import HomeNavbar from "./../components/HomeNavbar";
+import {
+ Container,
+ Icon,
+ Image,
+ Menu,
+ Sidebar,
+ Responsive,
+ Header,
+ Divider,
+ Message,
+ Grid
+} from "semantic-ui-react";
+
+class Paragraph extends Component {
+ state = { visible: true }
+
+ handleDismiss = () => {
+ this.setState({ visible: false })
+
+ setTimeout(() => {
+ this.setState({ visible: true })
+ }, 2000)
+ }
+
+ render() {
+ if (this.state.visible) {
+ return (
+
+ )
+ }
+
+ return (
+
+
+ The message will return in 2s
+
+
+
+ )
+ }
+ }
+
+
+ const MessageReg = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+export default class ConfirmRegistration extends React.Component {
+ render () {
+ return (
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js
index 3746ed0..4937938 100644
--- a/smart-hut/src/views/Home.js
+++ b/smart-hut/src/views/Home.js
@@ -1,8 +1,10 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
+import HomeNavbar from './../components/HomeNavbar';
import {
Button,
Container,
+ Divider,
Grid,
Header,
Icon,
@@ -88,30 +90,7 @@ class DesktopContainer extends Component {
}}
vertical
>
-
+