project-apollo/src/components/HomePage/Contact.js at 301e11d7257618b8e5d73abe516293dba59913f2 · opencodenitr/project-apollo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React from 'react';
import ReactDOM from 'react-dom';
import { makeStyles } from '@material-ui/core/styles';

import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
//import GitHubIcon from '@material-ui/icons/GitHub';
//import FacebookIcon from '@material-ui/icons/Facebook';
//import InstagramIcon from '@material-ui/icons/Instagram';
import Instagram from './Social_media/insta.png';
import GitHub from './Social_media/git.png';
import Facebook from './Social_media/fb.png';
import Slack from './Social_media/slack.png';


import SectionLayout from './SectionLayout';

function Contact() {
  const classes = useStyle();

  return (
    <SectionLayout alternate lastSection>
      <Grid container className={classes.background}>

  {/*   <Grid item xs={12}>


        </Grid> */}

        <Grid item xs={12} md={6} className={classes.item}>

          <h1>Stay in touch.</h1>

          <Grid
            container
            direction="row"
            justify="center"
            spacing={10}
          >

          <Grid item>
            <a href="https://m.facebook.com/OpenCodeCommunity/">
              <img src={Facebook} alt='icon' />
            </a>
          </Grid>

          <Grid item>
            <a href="https://github.com/opencodenitr" >
              <img src={GitHub} alt='icon'/>
            </a>
          </Grid>

          <Grid item>
            <a href="https://www.instagram.com/opencode.nitr/" >
              <img src={Instagram} alt='icon'/>
            </a>
          </Grid>

          <Grid item>
            <a href="http://bit.ly/NITRDevs">
              <img src={Slack} alt='icon'/>
            </a>
          </Grid>

          </Grid>

        </Grid>

        <Grid item xs={12} md={6} className={classes.item}>

          <h2>A feedback would be appreciated.</h2>

          <div>
          <TextField
            id="outlined-textarea"
            placeholder="Email: "
            multiline
            fullWidth
            margin="normal"
            variant="outlined"
          />

          <TextField
            id="outlined-textarea"
            placeholder="Comments: "
            multiline
            fullWidth
            margin="normal"
            variant="outlined"
          />

          <Button onClick={()=>alert('Thanks for the feedback')} variant="contained" color="secondary">
            Submit
          </Button>
          </div>

        </Grid>

      </Grid>
    </SectionLayout>
  );
}

export default Contact;

const useStyle = makeStyles((theme) => ({
  background: {
    backgroundColor: "#0E1647",
    height: "100%",
    width: "100%",
    paddingTop: "10%",
  },
  item: {
    paddingLeft: "5%",
    paddingRight: "5%",
  },
}));