Skip to content
This repository was archived by the owner on Mar 7, 2024. It is now read-only.

Commit 5067ccc

Browse files
GangaChatrvediGangaChatrvedi
authored
Adds courses page (#63)
* Adds courses page * Adds courses page
1 parent 04081d4 commit 5067ccc

File tree

23 files changed

+2476
-0
lines changed

23 files changed

+2476
-0
lines changed

‎src/Routes.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import HomeView from 'src/views/pages/HomeView';
88
import CAView from 'src/views/pages/CLView';
99
import EventsView from 'src/views/pages/EventsView';
1010
import LoadingScreen from 'src/components/LoadingScreen';
11+
import machineLearningView from 'src/views/pages/Courses/MachineLearningView'
1112

1213
const routesConfig = [
1314
{
@@ -87,6 +88,17 @@ const routesConfig = [
8788
}
8889
]
8990
},
91+
{
92+
path: '/machineLearning',
93+
layout: MainLayout,
94+
routes: [
95+
{
96+
exact: true,
97+
path: '/machineLearning',
98+
component: machineLearningView
99+
}
100+
]
101+
},
90102
{
91103
path: '*',
92104
layout: MainLayout,

‎src/views/Courses/MachineLearningView/Apply.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
4+
5+
import {
6+
Box,
7+
Grid,
8+
Typography,
9+
makeStyles,
10+
Hidden
11+
} from '@material-ui/core';
12+
import ApplyNowModal from './ApplyNowModal';
13+
14+
15+
const useStyles = makeStyles(theme => ({
16+
root: {
17+
minHeight: '350px',
18+
color: '#FFF',
19+
padding: '100px 70px',
20+
[theme.breakpoints.down('md')]: {
21+
paddingLeft: 15,
22+
paddingRight: 15
23+
}
24+
},
25+
main: {
26+
display: 'flex',
27+
flexDirection: 'column',
28+
alignItems: 'center',
29+
justifyContent: 'center',
30+
padding: '0px',
31+
color: '#FFF'
32+
},
33+
btn: {
34+
backgroundColor: '#A60000',
35+
color: '#ffffff',
36+
textTransform: 'capitalize',
37+
[theme.breakpoints.down('sm')]: {
38+
width: '100%'
39+
},
40+
'&:hover': {
41+
backgroundColor: 'rgba(166, 0, 0, 0.8)'
42+
}
43+
},
44+
applyleft: {
45+
display: 'flex',
46+
alignItems: 'center',
47+
justifyContent: 'center'
48+
}
49+
}));
50+
51+
function Apply({ className, ...rest }) {
52+
const classes = useStyles();
53+
54+
return (
55+
<div className={clsx(classes.root, className)} style={{ backgroundImage: 'url("/static/campusLeaders/apply.png")', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }} {...rest}>
56+
<Grid container maxWidth="lg">
57+
<Grid item lg={9} md={12} sm={12} xs={12} className={classes.applyleft}>
58+
<div className={classes.main}>
59+
<Typography
60+
variant="h3"
61+
style={{
62+
marginBottom: '10px'
63+
}}
64+
>
65+
Lead a community at your campus
66+
</Typography>
67+
<Typography
68+
variant="h3"
69+
style={{
70+
marginBottom: '10px'
71+
}}
72+
>
73+
powered by Code for Cause
74+
</Typography>
75+
<Box mt={2}>
76+
<ApplyNowModal />
77+
</Box>
78+
</div>
79+
</Grid>
80+
81+
<Hidden mdDown>
82+
<Grid item lg={3} md={3}>
83+
<Box>
84+
<div className={classes.image}>
85+
<img
86+
alt="codeforcauseimg"
87+
src="/static/images/cl/cl_apply.png"
88+
style={{
89+
marginBottom: '-105px'
90+
}}
91+
/>
92+
</div>
93+
</Box>
94+
</Grid>
95+
</Hidden>
96+
</Grid>
97+
</div>
98+
);
99+
}
100+
101+
Apply.propTypes = {
102+
className: PropTypes.string
103+
};
104+
105+
export default Apply;

‎src/views/Courses/MachineLearningView/ApplyNowModal.js‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import React, { useState } from 'react';
2+
import {
3+
TextField,
4+
Dialog,
5+
DialogActions,
6+
DialogContent,
7+
DialogContentText,
8+
DialogTitle,
9+
Button,
10+
Typography
11+
} from '@material-ui/core';
12+
import { makeStyles } from '@material-ui/core/styles';
13+
import CircularProgress from '@material-ui/core/CircularProgress';
14+
15+
import axios from 'axios';
16+
17+
const useStyles = makeStyles(theme => ({
18+
btn: {
19+
backgroundColor: '#A60000',
20+
color: '#ffffff',
21+
textTransform: 'capitalize',
22+
[theme.breakpoints.down('sm')]: {
23+
width: '100%'
24+
},
25+
'&:hover': {
26+
backgroundColor: 'rgba(166, 0, 0, 0.8)'
27+
}
28+
},
29+
textField: {
30+
marginBottom: '16px'
31+
},
32+
submissions: {
33+
width: "80px",
34+
height: "50px"
35+
}
36+
}));
37+
38+
export default function ApplyNowModal() {
39+
const classes = useStyles();
40+
const [open, setOpen] = useState(false);
41+
const [formData, updateFormData] = useState({});
42+
const [submitting, setSubmitting] = useState(0);
43+
44+
const handleClickOpen = () => {
45+
setOpen(true);
46+
};
47+
48+
const handleClose = () => {
49+
setOpen(false);
50+
};
51+
52+
const handleChange = event => {
53+
updateFormData({
54+
...formData,
55+
[event.target.name]: event.target.value
56+
});
57+
};
58+
59+
60+
const handleSubmit = e => {
61+
setSubmitting(1);
62+
e.preventDefault();
63+
axios({
64+
method: 'post',
65+
url:
66+
'https://us-central1-codeforcauseorg.cloudfunctions.net/widgets/leads',
67+
data: formData
68+
})
69+
.then(response => {
70+
setSubmitting(0);
71+
handleClose();
72+
})
73+
.catch(error => {});
74+
};
75+
76+
return (
77+
<div>
78+
<Button
79+
className={classes.btn}
80+
size="large"
81+
variant="contained"
82+
onClick={handleClickOpen}
83+
>
84+
Apply now
85+
</Button>
86+
<Dialog
87+
open={open}
88+
onClose={handleClose}
89+
aria-labelledby="form-dialog-title"
90+
>
91+
<DialogTitle id="form-dialog-title">
92+
Apply for Campus Leaders Program
93+
</DialogTitle>
94+
<DialogContent>
95+
<DialogContentText>
96+
<Typography>Please provide your details below.</Typography>
97+
</DialogContentText>
98+
<form noValidate autoComplete="off">
99+
<TextField
100+
key="name"
101+
className={classes.textField}
102+
label="Full Name"
103+
variant="outlined"
104+
value={formData.name}
105+
fullWidth
106+
name="name"
107+
onChange={handleChange}
108+
/>
109+
110+
<TextField
111+
key="email"
112+
className={classes.textField}
113+
label="Email"
114+
variant="outlined"
115+
value={formData.email}
116+
fullWidth
117+
name="email"
118+
onChange={handleChange}
119+
/>
120+
121+
<TextField
122+
key="contact"
123+
className={classes.textField}
124+
label="WhatsApp / Contact Number "
125+
variant="outlined"
126+
value={formData.phone}
127+
fullWidth
128+
name="phone"
129+
onChange={handleChange}
130+
/>
131+
132+
<TextField
133+
key="linkedIn"
134+
className={classes.textField}
135+
label="LinkedIn URL"
136+
variant="outlined"
137+
value={formData.linkedIn}
138+
fullWidth
139+
name="linkedIn"
140+
onChange={handleChange}
141+
/>
142+
143+
<TextField
144+
key="course"
145+
className={classes.textField}
146+
label="Course & Branch"
147+
variant="outlined"
148+
value={formData.course}
149+
fullWidth
150+
name="course"
151+
onChange={handleChange}
152+
/>
153+
154+
<TextField
155+
key="year"
156+
className={classes.textField}
157+
label="year"
158+
variant="outlined"
159+
value={formData.year}
160+
fullWidth
161+
name="year"
162+
onChange={handleChange}
163+
/>
164+
165+
<TextField
166+
key="college"
167+
className={classes.textField}
168+
label="College Name"
169+
variant="outlined"
170+
value={formData.college}
171+
fullWidth
172+
name="college"
173+
onChange={handleChange}
174+
/>
175+
</form>
176+
</DialogContent>
177+
<DialogActions>
178+
<Button className={classes.submissions} onClick={handleClose} color="primary">
179+
Cancel
180+
</Button>
181+
{submitting === 0 ? (
182+
<Button className={classes.submissions} onClick={handleSubmit} color="primary">
183+
Apply
184+
</Button>
185+
) : (
186+
<div className={classes.submissions}><CircularProgress /></div>
187+
)}
188+
</DialogActions>
189+
</Dialog>
190+
</div>
191+
);
192+
}

‎src/views/Courses/MachineLearningView/CLBenefits/BenefitCard.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import PropTypes from 'prop-types';
4+
import { Box, Card, Typography, makeStyles } from '@material-ui/core';
5+
6+
const useStyles = makeStyles(theme => ({
7+
root: {
8+
backgroundColor: '#5D517E',
9+
display: 'flex',
10+
alignItems: 'center',
11+
justifyContent: 'center',
12+
height: 230,
13+
width: 'auto',
14+
color: '#1D006E'
15+
}
16+
}));
17+
18+
function BenefitCard({ benefit, className, ...rest }) {
19+
const classes = useStyles();
20+
21+
return (
22+
<Card className={clsx(classes.root, className)} {...rest}>
23+
<Box style={{ margin: 'auto', padding: '40px 10px' }}>
24+
<Typography
25+
component="h3"
26+
gutterBottom
27+
variant="overline"
28+
color="textSecondary"
29+
align="center"
30+
>
31+
<img width="70px" alt="benefit" src={benefit.img} />
32+
</Typography>
33+
<Typography
34+
variant="h6"
35+
align="center"
36+
style={{ marginTop: 20, color: '#FFFFFF' }}
37+
>
38+
{benefit.detail}
39+
</Typography>
40+
</Box>
41+
</Card>
42+
);
43+
}
44+
45+
BenefitCard.propTypes = {
46+
className: PropTypes.string
47+
};
48+
49+
export default BenefitCard;

0 commit comments

Comments
 (0)