({
+ root: {
+ color: '#FFF',
+ 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'
+ }
+}));
+
+function Hero({
+ title,
+ title2,
+ subtitle,
+ firstComponent,
+ secondComponent,
+ imageUrl,
+ className,
+ ...rest
+}) {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+ {title}
+
+
+ {' '}
+ {title2}
+
+
+ Training that gives you Industrial Exposure
+
+ {firstComponent}
+
+
+
+ {secondComponent}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Hero;
diff --git a/src/theme/typography.js b/src/theme/typography.js
index e6c88326..2e4dd622 100755
--- a/src/theme/typography.js
+++ b/src/theme/typography.js
@@ -13,7 +13,7 @@ export default {
},
h3: {
fontWeight: 600,
- fontSize: 24,
+ fontSize: 26,
letterSpacing: '-0.06px'
},
h4: {
diff --git a/src/views/pages/CLView/ProcessSteppers.js b/src/views/pages/CLView/ProcessSteppers.js
index ddb715fb..cd4d8883 100644
--- a/src/views/pages/CLView/ProcessSteppers.js
+++ b/src/views/pages/CLView/ProcessSteppers.js
@@ -153,7 +153,9 @@ ColorlibStepIcon.propTypes = {
const useStyles = makeStyles(theme => ({
root: {
width: '100%',
- overflowX: 'scroll'
+ [theme.breakpoints.down('xs')]: {
+ overflowX: 'scroll'
+ }
},
button: {
marginRight: theme.spacing(1)
diff --git a/src/views/pages/Course/CoursePage/index.js b/src/views/pages/Course/CoursePage/index.js
index a37b313b..12fe5dc5 100755
--- a/src/views/pages/Course/CoursePage/index.js
+++ b/src/views/pages/Course/CoursePage/index.js
@@ -10,7 +10,6 @@ import Schedule from '../Schedule';
import Major from '../Major';
import Features from '../Features';
import Process from '../Process';
-// import CourseFeatures from '../partials/CourseFeatures';
const useStyles = makeStyles(() => ({
root: {
diff --git a/src/views/pages/Course/partials/CourseFeatures.js b/src/views/pages/Course/partials/CourseFeatures.js
index a7706932..d212dd54 100644
--- a/src/views/pages/Course/partials/CourseFeatures.js
+++ b/src/views/pages/Course/partials/CourseFeatures.js
@@ -1,4 +1,4 @@
-import { Box, makeStyles, Paper, Typography } from '@material-ui/core';
+import { Box, Card, makeStyles, Typography } from '@material-ui/core';
import React from 'react';
const useStyles = makeStyles(theme => ({
@@ -11,15 +11,22 @@ const useStyles = makeStyles(theme => ({
card: {
display: 'inline-block',
verticalAlign: 'top',
+ textAlign: 'left',
width: 308,
height: 245,
color: '#fff',
padding: '24px',
- margin: '24px',
+ margin: '24px 48px 24px 0px',
background: '#5D517E',
boxShadow: '0px 0px 15px rgba(0, 0, 0, 0.15)',
[theme.breakpoints.down('sm')]: {
margin: '16px'
+ },
+ '&, .makeStyles-card-210': {
+ [theme.breakpoints.down('xs')]: {
+ marginLeft: 0,
+ marginRight: 0
+ }
}
},
box: {
@@ -45,17 +52,17 @@ function CourseFeatures() {
{features.map((feature, index) => {
- return ;
+ return ;
})}
);
}
-function Card({ feature, index }) {
+export function FeatureCard({ feature, index }) {
const classes = useStyles();
return (
-
+
{feature.subTopic}
-
+
);
}
-const features = [
+export const features = [
{
topic: 'Structured Industry vetted Curiculumn',
subTopic: 'Who have been In Out Throughout the Industry'
diff --git a/src/views/pages/Training/Hero.js b/src/views/pages/Training/Hero.js
new file mode 100644
index 00000000..349d91d5
--- /dev/null
+++ b/src/views/pages/Training/Hero.js
@@ -0,0 +1,44 @@
+import { Box, makeStyles, Typography } from '@material-ui/core';
+import clsx from 'clsx';
+import React from 'react';
+import TrainingHero from '../../../components/Hero/TrainingHero';
+
+const useStyles = makeStyles(theme => ({
+ root: {},
+ box: {
+ backgroundColor: '#fff',
+ marginRight: '8px',
+ color: '#000',
+ padding: '4px 12px',
+ width: 'min-content',
+ borderRadius: '8px',
+ display: 'inline-block'
+ }
+}));
+
+export default function Hero() {
+ return (
+ }
+ secondComponent={
+ <>
+
+
+
+ }
+ />
+ );
+}
+
+export function BoxTab({ text, className = '' }) {
+ const classes = useStyles();
+ return (
+
+ {text}
+
+ );
+}
diff --git a/src/views/pages/Training/HexagonSvg.js b/src/views/pages/Training/HexagonSvg.js
new file mode 100644
index 00000000..68bb5299
--- /dev/null
+++ b/src/views/pages/Training/HexagonSvg.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function HexagonSvg({ fill, ...rest }) {
+ return (
+
+ );
+}
diff --git a/src/views/pages/Training/ProjectCard.js b/src/views/pages/Training/ProjectCard.js
new file mode 100644
index 00000000..e454872a
--- /dev/null
+++ b/src/views/pages/Training/ProjectCard.js
@@ -0,0 +1,123 @@
+import {
+ Box,
+ Card,
+ CardContent,
+ CardMedia,
+ Grid,
+ LinearProgress,
+ makeStyles,
+ Typography
+} from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
+import React from 'react';
+import { BoxTab } from './Hero';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ margin: theme.spacing(-3, 6, 0, 0),
+ paddingBottom: theme.spacing(3),
+ width: '348px',
+ textAlign: 'left',
+ boxShadow: '0px 0px 14px rgba(0, 0, 0, 0.15)'
+ },
+ media: {
+ height: '140px',
+ boxShadow: '0px 0px 14px rgba(0, 0, 0, 0.15)',
+ borderRadius: '6px',
+ marginBottom: theme.spacing(2)
+ },
+ subtitle: {
+ color: '#6F6F6F',
+ margin: '0px 0px 8px',
+ fontWeight: 600,
+ fontSize: 14,
+ lineHeight: '21px'
+ },
+ tab: {
+ padding: '5px 14px',
+ marginBottom: '8px',
+ color: '#0092B2',
+ backgroundColor: '#e4e4e4',
+ borderRadius: '4px'
+ }
+}));
+
+export default function ProjectCard() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ Game Development Using JAVA
+
+ Week 1
+ {tags.map(tag => {
+ return ;
+ })}
+
+
+ About Project
+
+ The Sudoku game consists of graphical user interface, solver and
+ puzzle generator; implemented using java and java swings.
+
+
+
+
+
+
+ Difficulty Level
+
+
+
+
+
+
+
+
+ );
+}
+
+const BorderLinearProgress = withStyles(theme => ({
+ root: {
+ height: 5,
+ borderRadius: 5,
+ width: '100%'
+ },
+ colorPrimary: {
+ backgroundColor: '#cecece'
+ },
+ bar: {
+ borderRadius: 5,
+ background: 'linear-gradient(90deg, #4300FF 0%, #000000 100%)'
+ }
+}))(LinearProgress);
+
+function LinearProgressWithLabel(props) {
+ return (
+
+
+
+
+
+ {`${Math.round(
+ props.value
+ )}%`}
+
+
+ );
+}
+
+const tags = ['C++', 'Python', 'Javascript'];
diff --git a/src/views/pages/Training/ProjectSwipes.js b/src/views/pages/Training/ProjectSwipes.js
new file mode 100644
index 00000000..df8fbabf
--- /dev/null
+++ b/src/views/pages/Training/ProjectSwipes.js
@@ -0,0 +1,49 @@
+import { makeStyles, useMediaQuery } from '@material-ui/core';
+import React from 'react';
+import SwiperCore, { Controller, Navigation, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import ProjectCard from './ProjectCard';
+import './swiperStyle.css';
+
+SwiperCore.use([Navigation, Pagination, Controller]);
+
+const projectSlides = [];
+
+for (let i = 0; i < 6; i++) {
+ projectSlides.push(
+
+
+
+ );
+}
+
+const useStyles = makeStyles(theme => ({
+ swiper: {
+ padding: theme.spacing(10, 0, 8)
+ }
+}));
+
+export default function ProjectSwipes() {
+ const classes = useStyles();
+ const xxl = useMediaQuery('(min-width:1800px)');
+ const xlarge = useMediaQuery('(min-width:1600px)');
+ const large = useMediaQuery('(min-width:1200px)');
+ const medium = useMediaQuery('(min-width:900px)');
+ const small = useMediaQuery('(min-width:600px)');
+
+ return (
+
+ {projectSlides}
+
+ );
+}
diff --git a/src/views/pages/Training/Projects.js b/src/views/pages/Training/Projects.js
new file mode 100644
index 00000000..fc67ae38
--- /dev/null
+++ b/src/views/pages/Training/Projects.js
@@ -0,0 +1,117 @@
+import { Box, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import HexagonSvg from './HexagonSvg';
+import ProjectSwipes from './ProjectSwipes';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ overflow: 'hidden',
+ padding: theme.spacing(10),
+ textAlign: 'center',
+ zIndex: 0,
+ position: 'relative',
+ backgroundColor: '#F4F4F4',
+ [theme.breakpoints.down('xs')]: {
+ padding: theme.spacing(10, 3)
+ }
+ },
+ container: {
+ paddingTop: theme.spacing(10),
+ paddingBottom: theme.spacing(10),
+ paddingLeft: '8vw',
+ paddingRight: '8vw'
+ },
+ box: {
+ border: '2px solid #29005E',
+ boxShadow: 'inset 0px 0px 1px rgba(0, 133, 255, 0.6)',
+ filter: 'drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.14))',
+ marginRight: '18px',
+ marginTop: '60px',
+ color: '#000',
+ padding: '12px 24px',
+ borderRadius: '4px',
+ display: 'inline-block',
+ whiteSpace: 'no-wrap'
+ }
+}));
+
+export default function Projects() {
+ const classes = useStyles();
+ return (
+
+
+
+ {/* */}
+
+
+
+
+ Projects In Portfolio After this course
+
+
+
+
+
+ Amazing Projects
+
+
+
+
+
+
+
+
+
+
+
+ What Do we have in this training
+
+ {features.map((feature, index) => {
+ return ;
+ })}
+
+