archive.codeforcause.org/src/views/pages/EventsView/Hero.js at 61d0380adbd5844bf6a72f79c24d86dc1285f0c2 · 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';

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

import { login } from 'src/actions/accountActions';
import { useDispatch, useSelector } from 'react-redux';

const background = 'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';

const useStyles = makeStyles(theme => ({
  root: {
    color: '#FFF',
    background,
    paddingTop: 80,
    paddingBottom: 60,
    paddingLeft: 70,
    paddingRight: 70,
    [theme.breakpoints.down('md')]: {
      paddingLeft: 15,
      paddingRight: 15
    }
  },
  extraPadding: {
    padding: '0 70px 0px 0px',
    textAlign: 'justify',
    [theme.breakpoints.down('sm')]: {
      padding: '0'
    }
  },
  image: {
    perspectiveOrigin: 'left center',
    transformStyle: 'preserve-3d',
    perspective: 1500,
    '& > img': {
      maxWidth: '100%',
      height: 'auto',
      backfaceVisibility: 'hidden'
    },
    [theme.breakpoints.down('md')]: {
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
      justifyContent: 'center'
    }
  },
  hide: {
    display: 'none'
  },
  btn: {
    backgroundColor: '#A60000',
    color: '#ffffff',
    textTransform: 'capitalize',
    [theme.breakpoints.down('sm')]: {
      width: '100%'
    },
    '&:hover': {
      backgroundColor: 'rgba(166, 0, 0, 0.8)'
    }
  }
}));

function Hero({ className, ...rest }) {
  const classes = useStyles();
  const user = useSelector(state => state.account.user);
  const dispatch = useDispatch();
  const handleLoginOpen = () => {
    dispatch(login());
  };

  return (
    <div className={clsx(classes.root, className)} {...rest}>
      <Container maxWidth="lg">
        <Grid container spacing={3}>
          <Grid item xs={12} md={6}>
            <Box
              display="flex"
              flexDirection="column"
              justifyContent="center"
              height="100%"
              className={clsx(classes.extraPadding, className)}
            >
              <Typography variant="h1" gutterBottom>
                Workshops, Bootcamps
              </Typography>
              <Typography variant="h1"> &amp; Webinars</Typography>
              <Hidden mdUp>
                <Box mt={6} mb={2}>
                  <div className={classes.image}>
                    <img alt="codeforcauseimg" src="/static/events/hero.png" />
                  </div>
                </Box>
              </Hidden>
              <Box mt={5}>
                {!!user ? (
                  <Typography variant="h4">
                    It's the time to learn from Experts.
                  </Typography>
                ) : (
                  <Typography variant="h4">
                    Login To get regular Updates.
                  </Typography>
                )}
              </Box>
              <Box mt={2} mb={3}>
                <Grid item container xs={12} md={12}>
                  <Grid item xs={12} md={12}>
                    {!!user ? (
                      <Typography
                        variant="h4"
                        style={{
                          color: '#ffffff'
                        }}
                      >
                        Explore our live events below
                      </Typography>
                    ) : (
                      <Button
                        className={classes.btn}
                        onClick={handleLoginOpen}
                        size="large"
                        variant="contained"
                      >
                        Login / Signup
                      </Button>
                    )}
                  </Grid>
                </Grid>
              </Box>
            </Box>
          </Grid>
          <Hidden smDown>
            <Grid item xs={12} md={6}>
              <Box>
                <div className={classes.image}>
                  <img alt="codeforcauseimg" src="/static/events/hero.png" />
                </div>
              </Box>
            </Grid>
          </Hidden>
        </Grid>
      </Container>
    </div>
  );
}

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

export default Hero;