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

package.json

@@ -105,6 +105,7 @@
     "redux-form": "^8.3.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
+    "swiper": "^6.3.5",
     "uuid": "^7.0.3",
     "yup": "^0.28.3"
   },

src/Routes.js

@@ -5,6 +5,7 @@ import MainLayout from 'src/layouts/MainLayout';
 import HomeView from 'src/views/pages/HomeView';
 import CAView from 'src/views/pages/CLView';
 import EventsView from 'src/views/pages/EventsView';
+import Training from 'src/views/pages/Training';
 import LoadingScreen from 'src/components/LoadingScreen';
 import CoursesView from 'src/views/pages/CoursesView';
 import Bootcamps from 'src/views/pages/BootCampsView/Bootcamps';
@@ -59,7 +60,15 @@ const renderRoutes = () => (
           </MainLayout>
         )}
       />
-
+      <Route
+        path="/six-months"
+        exact
+        render={props => (
+          <MainLayout>
+            <Training {...props} />
+          </MainLayout>
+        )}
+      />
       <Route
         path="/profile"
         exact

src/components/Hero/TrainingHero.js

@@ -0,0 +1,118 @@
+import {
+  Box,
+  Container,
+  Grid,
+  makeStyles,
+  Typography
+} from '@material-ui/core';
+import clsx from 'clsx';
+import React from 'react';
+
+const useStyles = makeStyles(theme => ({
+  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 (
+    <div
+      className={clsx(classes.root, className)}
+      {...rest}
+      style={{
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPositionY: 'center',
+        backgroundPositionX: 'center'
+      }}
+    >
+      <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)}
+            >
+              <Typography align="left" variant="h3" gutterBottom>
+                {title}
+              </Typography>
+              <Typography
+                variant="h2"
+                style={{
+                  fontWeight: 800,
+                  margin: '8px 0px 16px'
+                }}
+              >
+                {' '}
+                {title2}
+              </Typography>
+              <Typography variant="h4">
+                Training that gives you Industrial Exposure
+              </Typography>
+              <Box mt={5}>{firstComponent}</Box>
+              <Box mt={2} mb={3}>
+                <Grid container xs={12} md={12}>
+                  <Grid item xs={12} md={12}>
+                    {secondComponent}
+                  </Grid>
+                </Grid>
+              </Box>
+            </Box>
+          </Grid>
+        </Grid>
+      </Container>
+    </div>
+  );
+}
+
+export default Hero;

src/theme/typography.js

@@ -13,7 +13,7 @@ export default {
   },
   h3: {
     fontWeight: 600,
-    fontSize: 24,
+    fontSize: 26,
     letterSpacing: '-0.06px'
   },
   h4: {

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)

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

@@ -10,7 +10,7 @@ import Schedule from '../Schedule';
 import Major from '../Major';
 import Features from '../Features';
 import Process from '../Process';
-// import CourseFeatures from '../partials/CourseFeatures';
+import CourseFeatures from '../partials/CourseFeatures';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -26,7 +26,7 @@ function CoursePage({ course }) {
   return (
     <Page className={classes.root} title={course.title}>
       <Major course={course} />
-      {/* <CourseFeatures /> */}
+      <CourseFeatures />
       <Process />
       <Schedule course={course} />
       <Features />

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() {
       </Typography>
       <div style={{ display: 'block', textAlign: 'center', width: '100%' }}>
         {features.map((feature, index) => {
-          return <Card feature={feature} index={index} />;
+          return <FeatureCard feature={feature} index={index} />;
         })}
       </div>
     </div>
   );
 }
 
-function Card({ feature, index }) {
+export function FeatureCard({ feature, index }) {
   const classes = useStyles();
   return (
-    <Paper elevation={0} className={classes.card}>
+    <Card elevation={0} className={classes.card}>
       <Box className={classes.box}>
         <img
           src={`/static/images/courses/trainingLogos/${index}.svg`}
@@ -71,11 +78,11 @@ function Card({ feature, index }) {
       <Typography variant="body2" style={{ fontWeight: 500 }}>
         {feature.subTopic}
       </Typography>
-    </Paper>
+    </Card>
   );
 }
 
-const features = [
+export const features = [
   {
     topic: 'Structured Industry vetted Curiculumn',
     subTopic: 'Who have been In Out Throughout the Industry'

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 (
+    <TrainingHero
+      title="Introducing CodeForCause"
+      title2="6 Months Training"
+      subtitle="Training that gives you Industrial Exposure"
+      imageUrl="/static/images/backs/training.svg"
+      firstComponent={<BoxTab text="Duration 6 Months" />}
+      secondComponent={
+        <>
+          <BoxTab text="20 Projects" />
+          <BoxTab text="Certificates" />
+        </>
+      }
+    />
+  );
+}
+
+export function BoxTab({ text, className = '' }) {
+  const classes = useStyles();
+  return (
+    <Box className={clsx(classes.box, className)}>
+      <Typography noWrap>{text}</Typography>
+    </Box>
+  );
+}

src/views/pages/Training/HexagonSvg.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function HexagonSvg({ fill, ...rest }) {
+  return (
+    <svg
+      width="52"
+      height="59"
+      viewBox="0 0 52 59"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M26 0L51.9808 14.75V44.25L26 59L0.0192375 44.25V14.75L26 0Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}