Register tour ui form layout

components/Layout.js

@@ -1,53 +1,56 @@
+import React from "react";
 import Header from "./Header";
 import NavBar from "./NavBar";
 import VirtualTourDialog from "./VirtualTourDialog";
 
 import navButtons from "../configs/navButtons";
 import tourButton from "../configs/tourButton";
 
-const Layout = (props) => (
-  <div className="Layout">
-    <VirtualTourDialog tourButton={tourButton} />
-    <Header />
-    <div className="Content">{props.children}</div>
-    <NavBar navButtons={navButtons} />
-    <style jsx global>{`
-      * {
-        box-sizing: border-box;
-      }
+function Layout(props) {
+  return (
+    <div className="Layout">
+      <VirtualTourDialog tourButton={tourButton} />
+      <Header />
+      <div className="Content">{props.children}</div>
+      <NavBar navButtons={navButtons} />
+      <style jsx global>{`
+        * {
+          box-sizing: border-box;
+        }
 
-      html,
-      body,
-      #__next {
-        height: 100%;
-        width: 100%;
-      }
+        html,
+        body,
+        #__next {
+          height: 100%;
+          width: 100%;
+        }
 
-      body {
-        margin: 0;
-        padding: 0;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-          "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-          "Helvetica Neue", sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
+        body {
+          margin: 0;
+          padding: 0;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+            "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+            "Helvetica Neue", sans-serif;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
 
-      .Layout {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-      }
+        .Layout {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+        }
 
-      .Content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        font-family: Arial;
-      }
-    `}</style>
-  </div>
-);
+        .Content {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          font-family: Arial;
+        }
+      `}</style>
+    </div>
+  );
+}
 
 export default Layout;

components/NavBar.js

@@ -6,7 +6,7 @@ const NavBar = (props) => (
       <NavButton key={button.path} path={button.path} label={button.label} />
     ))}
     <style jsx>{`
-      background-color: grey;
+      background-color: red;
       color: white;
       width: 100%;
       height: 90px;

components/VirtualTourDialog.js

@@ -21,39 +21,45 @@ const useStyles = makeStyles((theme) => ({
 
 export default function VirtualTourDialog() {
   const classes = useStyles();
+
+  const [open, setOpen] = React.useState(true);
   const [fullWidth] = React.useState(true);
   const [maxWidth] = React.useState("sm");
 
   const handleSkip = () => {
+    setOpen(false);
     console.log("Look at Me Hey. Skip is triggered");
   };
 
   return (
     <React.Fragment>
-      <Dialog
-        fullWidth={fullWidth}
-        maxWidth={maxWidth}
-        open={true}
-        aria-labelledby="virtual-tour-dialog-title"
-        onEnter={console.log("Look at Me Hey. Dialog opened")}
-      >
-        <DialogTitle id="virtual-tour-dialog-title">Take Tour?</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            -- later is display logo and mascot{" "}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions className={classes.setButtons}>
-          <Link href="/register-tour" passHref>
-            <Button variant="contained" color="secondary">
-              Yes!
+      {open && (
+        <Dialog
+          fullWidth={fullWidth}
+          maxWidth={maxWidth}
+          open={true}
+          aria-labelledby="virtual-tour-dialog-title"
+          onEnter={console.log("Look at Me Hey. Dialog opened")}
+        >
+          <DialogTitle id="virtual-tour-dialog-title">Take Tour?</DialogTitle>
+
+          <DialogContent>
+            <DialogContentText>
+              -- later is display logo and mascot{" "}
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions className={classes.setButtons}>
+            <Link href="/register-tour" passHref>
+              <Button variant="contained" color="secondary">
+                Yes!
+              </Button>
+            </Link>
+            <Button onClick={() => handleSkip()} color="primary">
+              Skip
             </Button>
-          </Link>
-          <Button onClick={handleSkip} color="primary">
-            Skip
-          </Button>
-        </DialogActions>
-      </Dialog>
+          </DialogActions>
+        </Dialog>
+      )}
     </React.Fragment>
   );
 }

package.json

@@ -9,11 +9,14 @@
   },
   "dependencies": {
     "@material-ui/core": "4.11.3",
+    "@material-ui/icons": "4.11.2",
     "@material-ui/styles": "4.11.3",
+    "@material-ui/utils": "4.11.2",
     "next": "latest",
     "prop-types": "15.7.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-iframe": "1.8.0"
   },
   "license": "MIT",
   "keywords": [],

pages/contact-us.js

@@ -1,3 +1,190 @@
+import React from "react";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+import FormLabel from "@material-ui/core/FormLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Checkbox from "@material-ui/core/Checkbox";
+import Link from "@material-ui/core/Link";
+import Paper from "@material-ui/core/Paper";
+import Box from "@material-ui/core/Box";
+import Grid from "@material-ui/core/Grid";
+import FlightTakeoffOutlinedIcon from "@material-ui/icons/FlightTakeoffOutlined";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+
+import Select from "@material-ui/core/Select";
+import InputBase from "@material-ui/core/InputBase";
+
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Copyright © "}
+      <Link color="inherit" href="~">
+        Your Website
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  );
+}
+
+const BootstrapInput = withStyles((theme) => ({
+  root: {
+    "label + &": {
+      marginTop: theme.spacing(2)
+    }
+  },
+  input: {
+    borderRadius: 4,
+    position: "relative",
+    backgroundColor: theme.palette.background.paper,
+    border: "1px solid #ced4da",
+    fontSize: 16,
+    padding: "10px 26px 10px 12px",
+    transition: theme.transitions.create(["border-color", "box-shadow"]),
+
+    "&:focus": {
+      borderRadius: 4,
+      borderColor: "#80bdff",
+      boxShadow: "0 0 0 0.2rem rgba(0,123,255,.25)"
+    }
+  }
+}))(InputBase);
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: "100vh"
+  },
+  paper: {
+    margin: theme.spacing(8, 4),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2)
+  },
+  form: {
+    width: "100%", // Fix IE 11 issue.
+    marginTop: theme.spacing(1)
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2)
+  }
+}));
+
 export default function ContactUs() {
-  return <div>Contact Us</div>;
+  const classes = useStyles();
+
+  return (
+    <Grid container component="main" className={classes.root}>
+      <CssBaseline />
+      <Grid item xs={false} sm={4} md={7} className={classes.image} />
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <FlightTakeoffOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Contact Us
+          </Typography>
+          <form className={classes.form} noValidate>
+            <TextField
+              variant="outlined"
+              required
+              fullWidth
+              name="full-name"
+              label="Full Name"
+              autoFocus
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+            />
+            <TextField
+              variant="outlined"
+              fullWidth
+              name="contact-number"
+              label="Contact Number"
+            />
+            <FormControl className={classes.formControl}>
+              <Select
+                value={"industryType"}
+                onChange={"handleChange"}
+                displayEmpty
+                className={classes.selectEmpty}
+                inputProps={{ "aria-label": "Without label" }}
+              >
+                <MenuItem value="" disabled>
+                  Industry
+                </MenuItem>
+                <MenuItem value="Healthcare and Services">
+                  Healthcare and Services
+                </MenuItem>
+                <MenuItem value="Banking and Financial Services">
+                  Banking and Financial Services
+                </MenuItem>
+                <MenuItem value="Hospitality and Travel">
+                  Hospitality and Travel
+                </MenuItem>
+                <MenuItem value="Consumer Goods">Consumer Goods</MenuItem>
+                <MenuItem value="Modern Retail">Modern Retail</MenuItem>
+                <MenuItem value="Others">Others</MenuItem>
+              </Select>
+              <FormHelperText>Industry</FormHelperText>
+            </FormControl>
+
+            <TextField
+              variant="outlined"
+              fullWidth
+              name="company"
+              label="Company"
+            />
+            <FormControlLabel
+              control={<Checkbox value="Selected A" color="primary" />}
+              label="Gamification Check A"
+            />
+            <TextField
+              id="outlined-multiline-static"
+              label="Message"
+              multiline
+              rows={4}
+              defaultValue="Say hello to our team"
+              variant="outlined"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Get in Touch
+            </Button>
+            <Box mt={5}>
+              <Copyright />
+            </Box>
+          </form>
+        </div>
+      </Grid>
+    </Grid>
+  );
 }