Added Contact component for the website.

src/views/App.js

@@ -1,26 +1,29 @@
-import React from 'react';
-import { Router, Route, Redirect, Switch } from 'react-router-dom';
+import React from "react";
+import { Router, Route, Redirect, Switch } from "react-router-dom";
+
+import { ThemeProvider } from "@material-ui/core/styles";
+import { CssBaseline } from "@material-ui/core";
 
-import { ThemeProvider } from '@material-ui/core/styles';
-import { CssBaseline } from '@material-ui/core';
 
 import createBrowserHistory from '../config/history';
 import Home from './Home';
 import Navbar from '../components/Navbar';
-
+import ImageAvatars from "./Contact/Contact";
 import theme from '../config/theme';
 
+
 const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
+      <ImageAvatars />
       <Router history={createBrowserHistory}>
         <Navbar />
         <Switch>
           <Route path='/' exact>
             <Home />
           </Route>
-          <Redirect to='/' />
+          <Redirect to="/" />
         </Switch>
       </Router>
     </ThemeProvider>

src/views/Contact/Contact.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Avatar from "@material-ui/core/Avatar";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import Facebook from "./images/Facebook.svg";
+import Github from "./images/Github.svg";
+import Instagram from "./images/Instagram.svg";
+import Slack from "./images/Slack.png";
+
+const useStyles = makeStyles((theme) => ({
+  background: {
+    backgroundColor: "#0f3057",
+  },
+  heading1: {
+    paddingLeft: "37%",
+    paddingTop: "10%",
+  },
+  heading2: {
+    paddingLeft: "30%",
+  },
+  root: {
+    display: "flex",
+    paddingLeft: "41%",
+    paddingRight: "41%",
+    "& > *": {
+      margin: theme.spacing(2),
+    },
+  },
+  input: {
+    paddingLeft: "30%",
+    paddingRight: "30%",
+  },
+}));
+
+export default function ImageAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.background}>
+      <h1 className={classes.heading1}>Stay Connected With OpenCode</h1>
+      <div className={classes.root}>
+        <Avatar alt="F">
+          <a href="https://www.facebook.com/OpenCodeCommunity/">
+            <img width="100%" height="100%" src={Facebook} alt="F" />
+          </a>
+        </Avatar>
+        <Avatar alt="G">
+          <a href=" https://github.com/opencodenitr">
+            <img width="100%" height="100%" src={Github} alt="G" />
+          </a>
+        </Avatar>
+        <Avatar alt="I">
+          <a href="https://www.instagram.com/opencode.nitr/">
+            <img width="100%" height="100%" src={Instagram} alt="I" />
+          </a>
+        </Avatar>
+        <Avatar alt="S">
+          <a href="http://bit.ly/NITRDevs">
+            <img width="100%" height="100%" src={Slack} alt="M" />
+          </a>
+        </Avatar>
+      </div>
+      <h1 className={classes.heading2}>
+        Please provide any comments or suggestions below!
+      </h1>
+      <div className={classes.input}>
+        <TextField
+          id="outlined-textarea"
+          label="Email:"
+          placeholder="Enter you email here!"
+          multiline
+          fullWidth
+          margin="normal"
+          variant="outlined"
+        />
+        ​
+        <TextField
+          id="outlined-textarea"
+          label="Comments:"
+          placeholder="Please enter your comments here!"
+          multiline
+          fullWidth
+          margin="normal"
+          variant="outlined"
+        />
+        ​
+        <Button
+          onClick={() => alert("Thanks for the feedback")}
+          variant="contained"
+          color="secondary"
+        >
+          Submit
+        </Button>
+      </div>
+    </div>
+  );
+}