archive.codeforcause.org/src/views/pages/CLView/Apply.js at 657c00dfb999fccbf39104115b9185e5dcde56a3 · codeforcauseorg/archive.codeforcause.org · 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
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';

import { Box, Grid, Typography, makeStyles, Hidden } from '@material-ui/core';
import ApplyNowModal from './ApplyNowModal';

const useStyles = makeStyles(theme => ({
  root: {
    minHeight: '350px',
    color: '#FFF',
    padding: '100px 70px',
    [theme.breakpoints.down('md')]: {
      paddingLeft: 15,
      paddingRight: 15
    }
  },
  main: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '0px',
    color: '#FFF'
  },
  btn: {
    backgroundColor: '#A60000',
    color: '#ffffff',
    textTransform: 'capitalize',
    [theme.breakpoints.down('sm')]: {
      width: '100%'
    },
    '&:hover': {
      backgroundColor: 'rgba(166, 0, 0, 0.8)'
    }
  },
  applyleft: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }
}));

function Apply({ className, ...rest }) {
  const classes = useStyles();

  return (
    <div
      className={clsx(classes.root, className)}
      style={{
        backgroundImage: 'url("/static/campusLeaders/apply.png")',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat'
      }}
      {...rest}
    >
      <Grid container maxwidth="lg">
        <Grid item lg={9} md={12} sm={12} xs={12} className={classes.applyleft}>
          <div className={classes.main}>
            <Typography
              variant="h3"
              style={{
                marginBottom: '10px'
              }}
            >
              Lead a community at your campus
            </Typography>
            <Typography
              variant="h3"
              style={{
                marginBottom: '10px'
              }}
            >
              powered by Code for Cause
            </Typography>
            <Box mt={2}>
              <ApplyNowModal />
            </Box>
          </div>
        </Grid>

        <Hidden mdDown>
          <Grid item lg={3} md={3}>
            <Box>
              <div className={classes.image}>
                <img
                  alt="codeforcauseimg"
                  src="/static/images/cl/cl_apply.png"
                  style={{
                    marginBottom: '-105px'
                  }}
                />
              </div>
            </Box>
          </Grid>
        </Hidden>
      </Grid>
    </div>
  );
}

Apply.propTypes = {
  className: PropTypes.string
};

export default Apply;