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

Commit 3c72866

Browse files
KeenWarriorAbhishek-kumar09
KeenWarrior
authored and
Abhishek-kumar09
committed
Six months course page alterations
Change Topics styles and add course Features (#157) * Change Topics styles and add course Features * make features a step down Change Topics styles and add course Features make features a step down Implement new Six-months Course Page Design new
1 parent 69299ba commit 3c72866

File tree

16 files changed

+1320
-11
lines changed

16 files changed

+1320
-11
lines changed

‎public/static/images/backs/training.jpg

228 KB
Loading

‎public/static/images/backs/training.svg

Lines changed: 53 additions & 0 deletions
Loading

‎src/Routes.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import MainLayout from 'src/layouts/MainLayout';
55
import HomeView from 'src/views/pages/HomeView';
66
import CAView from 'src/views/pages/CLView';
77
import EventsView from 'src/views/pages/EventsView';
8+
import Training from 'src/views/pages/Training';
89
import LoadingScreen from 'src/components/LoadingScreen';
910
import CoursesView from 'src/views/pages/CoursesView';
1011
import Bootcamps from 'src/views/pages/BootCampsView/Bootcamps';
@@ -90,7 +91,15 @@ const renderRoutes = () => (
9091
</MainLayout>
9192
)}
9293
/>
93-
94+
<Route
95+
path="/six-months"
96+
exact
97+
render={props => (
98+
<MainLayout>
99+
<Training {...props} />
100+
</MainLayout>
101+
)}
102+
/>
94103
<Route
95104
path="/profile"
96105
exact

‎src/components/Hero/TrainingHero.js

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import {
2+
Box,
3+
Container,
4+
Grid,
5+
makeStyles,
6+
Typography
7+
} from '@material-ui/core';
8+
import clsx from 'clsx';
9+
import React from 'react';
10+
11+
const useStyles = makeStyles(theme => ({
12+
root: {
13+
color: '#FFF',
14+
paddingTop: 80,
15+
paddingBottom: 60,
16+
paddingLeft: 70,
17+
paddingRight: 70,
18+
[theme.breakpoints.down('md')]: {
19+
paddingLeft: 15,
20+
paddingRight: 15
21+
}
22+
},
23+
extraPadding: {
24+
padding: '0 70px 0px 0px',
25+
textAlign: 'justify',
26+
[theme.breakpoints.down('sm')]: {
27+
padding: '0'
28+
}
29+
},
30+
image: {
31+
perspectiveOrigin: 'left center',
32+
transformStyle: 'preserve-3d',
33+
perspective: 1500,
34+
'& > img': {
35+
maxWidth: '100%',
36+
height: 'auto',
37+
backfaceVisibility: 'hidden'
38+
},
39+
[theme.breakpoints.down('md')]: {
40+
alignItems: 'center',
41+
display: 'flex',
42+
flexDirection: 'column',
43+
height: '100%',
44+
justifyContent: 'center'
45+
}
46+
},
47+
hide: {
48+
display: 'none'
49+
}
50+
}));
51+
52+
function Hero({
53+
title,
54+
title2,
55+
subtitle,
56+
firstComponent,
57+
secondComponent,
58+
imageUrl,
59+
className,
60+
...rest
61+
}) {
62+
const classes = useStyles();
63+
64+
return (
65+
<div
66+
className={clsx(classes.root, className)}
67+
{...rest}
68+
style={{
69+
backgroundImage: `url(${imageUrl})`,
70+
backgroundSize: 'cover',
71+
backgroundRepeat: 'no-repeat',
72+
backgroundPositionY: 'center',
73+
backgroundPositionX: 'center'
74+
}}
75+
>
76+
<Container maxWidth="lg">
77+
<Grid container spacing={3}>
78+
<Grid item xs={12} md={6}>
79+
<Box
80+
display="flex"
81+
flexDirection="column"
82+
justifyContent="center"
83+
height="100%"
84+
className={clsx(classes.extraPadding)}
85+
>
86+
<Typography align="left" variant="h3" gutterBottom>
87+
{title}
88+
</Typography>
89+
<Typography
90+
variant="h2"
91+
style={{
92+
fontWeight: 800,
93+
margin: '8px 0px 16px'
94+
}}
95+
>
96+
{' '}
97+
{title2}
98+
</Typography>
99+
<Typography variant="h4">
100+
Training that gives you Industrial Exposure
101+
</Typography>
102+
<Box mt={5}>{firstComponent}</Box>
103+
<Box mt={2} mb={3}>
104+
<Grid container xs={12} md={12}>
105+
<Grid item xs={12} md={12}>
106+
{secondComponent}
107+
</Grid>
108+
</Grid>
109+
</Box>
110+
</Box>
111+
</Grid>
112+
</Grid>
113+
</Container>
114+
</div>
115+
);
116+
}
117+
118+
export default Hero;

‎src/theme/typography.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default {
1313
},
1414
h3: {
1515
fontWeight: 600,
16-
fontSize: 24,
16+
fontSize: 26,
1717
letterSpacing: '-0.06px'
1818
},
1919
h4: {

‎src/views/pages/CLView/ProcessSteppers.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,9 @@ ColorlibStepIcon.propTypes = {
153153
const useStyles = makeStyles(theme => ({
154154
root: {
155155
width: '100%',
156-
overflowX: 'scroll'
156+
[theme.breakpoints.down('xs')]: {
157+
overflowX: 'scroll'
158+
}
157159
},
158160
button: {
159161
marginRight: theme.spacing(1)

‎src/views/pages/Course/CoursePage/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Schedule from '../Schedule';
1010
import Major from '../Major';
1111
import Features from '../Features';
1212
import Process from '../Process';
13-
// import CourseFeatures from '../partials/CourseFeatures';
13+
import CourseFeatures from '../partials/CourseFeatures';
1414

1515
const useStyles = makeStyles(() => ({
1616
root: {

‎src/views/pages/Course/partials/CourseFeatures.js

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, makeStyles, Paper, Typography } from '@material-ui/core';
1+
import { Box, Card, makeStyles, Typography } from '@material-ui/core';
22
import React from 'react';
33

44
const useStyles = makeStyles(theme => ({
@@ -11,15 +11,22 @@ const useStyles = makeStyles(theme => ({
1111
card: {
1212
display: 'inline-block',
1313
verticalAlign: 'top',
14+
textAlign: 'left',
1415
width: 308,
1516
height: 245,
1617
color: '#fff',
1718
padding: '24px',
18-
margin: '24px',
19+
margin: '24px 48px 24px 0px',
1920
background: '#5D517E',
2021
boxShadow: '0px 0px 15px rgba(0, 0, 0, 0.15)',
2122
[theme.breakpoints.down('sm')]: {
2223
margin: '16px'
24+
},
25+
'&, .makeStyles-card-210': {
26+
[theme.breakpoints.down('xs')]: {
27+
marginLeft: 0,
28+
marginRight: 0
29+
}
2330
}
2431
},
2532
box: {
@@ -45,17 +52,17 @@ function CourseFeatures() {
4552
</Typography>
4653
<div style={{ display: 'block', textAlign: 'center', width: '100%' }}>
4754
{features.map((feature, index) => {
48-
return <Card feature={feature} index={index} />;
55+
return <FeatureCard feature={feature} index={index} />;
4956
})}
5057
</div>
5158
</div>
5259
);
5360
}
5461

55-
function Card({ feature, index }) {
62+
export function FeatureCard({ feature, index }) {
5663
const classes = useStyles();
5764
return (
58-
<Paper elevation={0} className={classes.card}>
65+
<Card elevation={0} className={classes.card}>
5966
<Box className={classes.box}>
6067
<img
6168
src={`/static/images/courses/trainingLogos/${index}.svg`}
@@ -71,11 +78,11 @@ function Card({ feature, index }) {
7178
<Typography variant="body2" style={{ fontWeight: 500 }}>
7279
{feature.subTopic}
7380
</Typography>
74-
</Paper>
81+
</Card>
7582
);
7683
}
7784

78-
const features = [
85+
export const features = [
7986
{
8087
topic: 'Structured Industry vetted Curiculumn',
8188
subTopic: 'Who have been In Out Throughout the Industry'

‎src/views/pages/Training/Hero.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Box, makeStyles, Typography } from '@material-ui/core';
2+
import clsx from 'clsx';
3+
import React from 'react';
4+
import TrainingHero from '../../../components/Hero/TrainingHero';
5+
6+
const useStyles = makeStyles(theme => ({
7+
root: {},
8+
box: {
9+
backgroundColor: '#fff',
10+
marginRight: '8px',
11+
color: '#000',
12+
padding: '4px 12px',
13+
width: 'min-content',
14+
borderRadius: '8px',
15+
display: 'inline-block'
16+
}
17+
}));
18+
19+
export default function Hero() {
20+
return (
21+
<TrainingHero
22+
title="Introducing CodeForCause"
23+
title2="6 Months Training"
24+
subtitle="Training that gives you Industrial Exposure"
25+
imageUrl="/static/images/backs/training.svg"
26+
firstComponent={<BoxTab text="Duration 6 Months" />}
27+
secondComponent={
28+
<>
29+
<BoxTab text="20 Projects" />
30+
<BoxTab text="Certificates" />
31+
</>
32+
}
33+
/>
34+
);
35+
}
36+
37+
export function BoxTab({ text, className = '' }) {
38+
const classes = useStyles();
39+
return (
40+
<Box className={clsx(classes.box, className)}>
41+
<Typography noWrap>{text}</Typography>
42+
</Box>
43+
);
44+
}

‎src/views/pages/Training/HexagonSvg.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
3+
export default function HexagonSvg({ fill, ...rest }) {
4+
return (
5+
<svg
6+
width="52"
7+
height="59"
8+
viewBox="0 0 52 59"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...rest}
12+
>
13+
<path
14+
d="M26 0L51.9808 14.75V44.25L26 59L0.0192375 44.25V14.75L26 0Z"
15+
fill={fill}
16+
/>
17+
</svg>
18+
);
19+
}

0 commit comments

Comments
 (0)