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

Commit 405e6b9

Browse files
KeenWarriorKeenWarrior
authored
Add course view and update events view (#69)
1 parent 16802d0 commit 405e6b9

File tree

14 files changed

+1417
-169
lines changed

14 files changed

+1417
-169
lines changed

‎public/static/events/apply.png‎

4.65 MB
Loading

‎public/static/events/hero.png‎

63 KB
Loading

‎src/Routes.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import AlgoPythonView from 'src/views/pages/Courses/AlgoPythonView'
1414
import WebFullStakView from 'src/views/pages/Courses/WebFullStakView'
1515
import CompetitiveJavaView from 'src/views/pages/Courses/CompetitiveJavaView'
1616
import PythonDevelopmentView from 'src/views/pages/Courses/PythonDevelopmentView'
17+
import CoursesView from 'src/views/pages/CoursesView';
1718

1819
const routesConfig = [
1920
{
@@ -93,6 +94,20 @@ const routesConfig = [
9394
}
9495
]
9596
},
97+
{
98+
path: '/courses',
99+
layout: MainLayout,
100+
routes: [
101+
{
102+
exact: true,
103+
path: '/courses',
104+
component: CoursesView
105+
},
106+
{
107+
component: () => <Redirect to="/404" />
108+
}
109+
]
110+
},
96111
{
97112
path: '/machine-learning-using-python',
98113
layout: MainLayout,

‎src/views/pages/CoursesView/Apply.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
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+
TextField,
11+
Button
12+
} from '@material-ui/core';
13+
14+
const useStyles = makeStyles(theme => ({
15+
root: {
16+
minHeight: '350px',
17+
color: '#FFF',
18+
padding: '100px 70px',
19+
[theme.breakpoints.down('md')]: {
20+
paddingLeft: 15,
21+
paddingRight: 15
22+
}
23+
},
24+
main: {
25+
display: 'flex',
26+
flexDirection: 'column',
27+
alignItems: 'center',
28+
justifyContent: 'center',
29+
padding: '0px',
30+
color: '#FFF'
31+
},
32+
btn: {
33+
backgroundColor: '#A60000',
34+
color: '#ffffff',
35+
textTransform: 'capitalize',
36+
[theme.breakpoints.down('sm')]: {
37+
width: '100%'
38+
},
39+
'&:hover': {
40+
backgroundColor: 'rgba(166, 0, 0, 0.8)'
41+
}
42+
},
43+
applyleft: {
44+
display: 'flex',
45+
alignItems: 'center',
46+
justifyContent: 'center'
47+
},
48+
textDetails: {
49+
'& .MuiOutlinedInput-root': {
50+
'& fieldset': {
51+
borderColor: 'rgba(255, 255, 255, 0.2)'
52+
},
53+
'&:hover fieldset': {
54+
borderColor: 'rgba(255, 255, 255, 0.4)'
55+
},
56+
'&.Mui-focused fieldset': {
57+
borderColor: 'rgba(255, 255, 255, 0.6)'
58+
}
59+
}
60+
}
61+
}));
62+
63+
function Apply({ className, ...rest }) {
64+
const classes = useStyles();
65+
66+
return (
67+
<div
68+
className={clsx(classes.root, className)}
69+
style={{
70+
backgroundImage: 'url("/static/events/apply.png")',
71+
backgroundSize: 'cover',
72+
backgroundRepeat: 'no-repeat'
73+
}}
74+
{...rest}
75+
>
76+
<Grid container maxWidth="lg">
77+
<Grid
78+
item
79+
lg={12}
80+
md={12}
81+
sm={12}
82+
xs={12}
83+
className={classes.applyleft}
84+
>
85+
<div className={classes.main}>
86+
<Typography
87+
variant="h3"
88+
style={{
89+
marginBottom: '24px'
90+
}}
91+
>
92+
Tell Us What You Want To Learn Next
93+
</Typography>
94+
<TextField
95+
className={classes.textDetails}
96+
multiline
97+
variant="outlined"
98+
rows={5}
99+
style={{
100+
minWidth: '500px',
101+
background: 'rgba(255, 255, 255, 0.8)',
102+
borderRadius: '5px',
103+
color: 'white'
104+
}}
105+
/>
106+
<Box mt={3}>
107+
<Button color="primary" size="large" variant="contained">
108+
Submit
109+
</Button>
110+
</Box>
111+
</div>
112+
</Grid>
113+
</Grid>
114+
</div>
115+
);
116+
}
117+
118+
Apply.propTypes = {
119+
className: PropTypes.string
120+
};
121+
122+
export default Apply;

‎src/views/pages/CoursesView/CTA.js‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
4+
5+
import {
6+
Box,
7+
Grid,
8+
Container,
9+
Typography,
10+
makeStyles,
11+
Button,
12+
Hidden
13+
} from '@material-ui/core';
14+
15+
const useStyles = makeStyles(theme => ({
16+
root: {
17+
backgroundColor: theme.palette.background.LIGHT,
18+
paddingLeft: 70,
19+
paddingRight: 70,
20+
//write css for small screen
21+
[theme.breakpoints.down('md')]: {
22+
paddingLeft: 15,
23+
paddingRight: 15
24+
}
25+
},
26+
cardGrid: {
27+
paddingTop: theme.spacing(4),
28+
paddingBottom: theme.spacing(8)
29+
},
30+
extraMargin: {
31+
marginTop: theme.spacing(6)
32+
},
33+
extraMarginTop: {
34+
marginTop: theme.spacing(2)
35+
},
36+
extraPadding: {
37+
padding: '32px !important'
38+
},
39+
flex: {
40+
paddingTop: theme.spacing(4),
41+
paddingBottom: theme.spacing(4)
42+
},
43+
Button: {
44+
textTransform: 'capitalize',
45+
fontSize: '16px',
46+
padding: '8px 32px',
47+
[theme.breakpoints.down('sm')]: {
48+
width: '100%'
49+
}
50+
},
51+
primeBtn: {
52+
backgroundColor: '#A60000',
53+
color: '#ffffff',
54+
'&:hover': {
55+
backgroundColor: '#A60000',
56+
opacity: '0.8'
57+
}
58+
},
59+
secondaryBtn: {
60+
borderColor: '#A60000',
61+
color: '#A60000'
62+
}
63+
}));
64+
65+
function CTA({ className, ...rest }) {
66+
const classes = useStyles();
67+
68+
return (
69+
<div className={clsx(classes.root, className)} {...rest}>
70+
<Container className={classes.cardGrid} maxWidth="lg">
71+
<Grid container spacing={2} className={classes.extraMargin}>
72+
<Grid item xs={12} sm={6} md={4}>
73+
<Box className={classes.flex} display="flex" flexDirection="column">
74+
<Hidden mdUp>
75+
<Typography
76+
color="textPrimary"
77+
variant="h4"
78+
style={{ lineHeight: '1.5' }}
79+
>
80+
Want Us to conduct a Workshop
81+
</Typography>
82+
</Hidden>
83+
84+
<Hidden smDown>
85+
<Typography
86+
color="textPrimary"
87+
variant="h4"
88+
style={{ lineHeight: '1.5' }}
89+
>
90+
Want Us to conduct a <br /> Workshop
91+
</Typography>
92+
</Hidden>
93+
94+
<Box className={classes.flex}>
95+
<Grid container xs={12} sm={12}>
96+
<Grid item xs={12} sm={12}>
97+
<Button
98+
className={classes.Button + ' ' + classes.primeBtn}
99+
component="a"
100+
href="https://codecau.se/ws"
101+
target="_blank"
102+
size="large"
103+
variant="contained"
104+
>
105+
Register
106+
</Button>
107+
</Grid>
108+
</Grid>
109+
</Box>
110+
</Box>
111+
</Grid>
112+
113+
<Grid item xs={12} sm={6} md={4}>
114+
<Box className={classes.flex} display="flex" flexDirection="column">
115+
<Hidden mdUp>
116+
<Typography
117+
color="textPrimary"
118+
variant="h4"
119+
style={{ lineHeight: '1.5' }}
120+
>
121+
Join Us or Submit a YouTube Video
122+
</Typography>
123+
</Hidden>
124+
125+
<Hidden smDown>
126+
<Typography
127+
color="textPrimary"
128+
variant="h4"
129+
style={{ lineHeight: '1.5' }}
130+
>
131+
Join Us or Submit a <br /> YouTube Video
132+
</Typography>
133+
</Hidden>
134+
135+
<Box className={classes.flex}>
136+
<Grid container xs={12} sm={12}>
137+
<Grid item xs={12} sm={12}>
138+
<Button
139+
className={classes.Button + ' ' + classes.secondaryBtn}
140+
component="a"
141+
href="https://codecau.se/sv"
142+
target="_blank"
143+
size="large"
144+
variant="outlined"
145+
>
146+
Know More
147+
</Button>
148+
</Grid>
149+
</Grid>
150+
</Box>
151+
</Box>
152+
</Grid>
153+
154+
<Grid item xs={12} sm={12} md={4}>
155+
<Box className={classes.flex} display="flex" flexDirection="column">
156+
<Hidden mdUp>
157+
<Typography
158+
color="textPrimary"
159+
variant="h4"
160+
style={{ lineHeight: '1.5' }}
161+
>
162+
Get Updates About Our Initiatives
163+
</Typography>
164+
</Hidden>
165+
166+
<Hidden smDown>
167+
<Typography
168+
color="textPrimary"
169+
variant="h4"
170+
style={{ lineHeight: '1.5' }}
171+
>
172+
Get Updates About Our <br /> Initiatives
173+
</Typography>
174+
</Hidden>
175+
176+
<Box className={classes.flex}>
177+
<Grid container xs={12} sm={12}>
178+
<Grid item xs={12} sm={12}>
179+
<Button
180+
className={classes.Button + ' ' + classes.secondaryBtn}
181+
component="a"
182+
href="https://cdn.forms-content.sg-form.com/34a5f5b6-c515-11ea-ae40-26ea0c9b1f0c"
183+
target="_blank"
184+
size="large"
185+
variant="outlined"
186+
>
187+
Enroll Now
188+
</Button>
189+
</Grid>
190+
</Grid>
191+
</Box>
192+
</Box>
193+
</Grid>
194+
</Grid>
195+
</Container>
196+
</div>
197+
);
198+
}
199+
200+
CTA.propTypes = {
201+
className: PropTypes.string
202+
};
203+
204+
export default CTA;

0 commit comments

Comments
 (0)