Adds Campus Leaders page

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

src/Routes.js

@@ -4,6 +4,7 @@ import { Switch, Redirect, Route } from 'react-router-dom';
 import MainLayout from 'src/layouts/MainLayout';
 import DocsLayout from 'src/layouts/DocsLayout';
 import HomeView from 'src/views/pages/HomeView';
+import CAView from 'src/views/pages/CAView';
 import LoadingScreen from 'src/components/LoadingScreen';
 
 const routesConfig = [
@@ -42,6 +43,20 @@ const routesConfig = [
       }
     ]
   },
+  {
+    path: '/campusLeaders',
+    layout: MainLayout,
+    routes: [
+      {
+        exact: true,
+        path: '/campusLeaders',
+        component: CAView
+      },
+      {
+        component: () => <Redirect to="/404" />
+      }
+    ]
+  },
   {
     path: '*',
     layout: MainLayout,

src/components/AboutCard/SubCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid, Typography, makeStyles, Box, Hidden } from '@material-ui/core';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     padding: 0,
     paddingTop: '40px',
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.down('xs')]: {
       margin: '0 auto',
       float: 'none',
-      textAlign: 'center',
+      textAlign: 'center'
     }
   },
   contentTitle: {
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'inline-block',
     float: 'left',
     [theme.breakpoints.down('xs')]: {
-      float: 'none',
+      float: 'none'
     }
   }
 }));
@@ -41,18 +41,28 @@ const SubCard = ({ point }) => {
   return (
     <Grid container className={classes.root}>
       <Grid className={classes.image} item sm={2} xs={12}>
-        <img alt="title-img" style={{ marginTop: '6px' }} height="55px" src={point.img} />
+        <img
+          alt="title-img"
+          style={{ marginTop: '6px' }}
+          height="55px"
+          src={point.img}
+        />
       </Grid>
       <Grid item sm={10} xs={12}>
         <Typography
           className={classes.title}
           align="justify"
           variant="subtitle1"
         >
-          <Box component="span" className={classes.contentTitle} display="inline-block">{`${ point.contentTitle }`}</Box>
-
+          <Box
+            component="span"
+            className={classes.contentTitle}
+            display="inline-block"
+          >{`${point.contentTitle}`}</Box>
+
           <Hidden xsDown>
-            <strong> : </strong>{ point.content }
+            <strong> : </strong>
+            {point.content}
           </Hidden>
         </Typography>
       </Grid>

src/layouts/MainLayout/TopBar/index.js

@@ -68,6 +68,7 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
     >
       <List>
         {[
+          { title: 'Campus Leaders', link: '/campusLeaders' },
           { title: 'Events', link: '#events' },
           { title: 'About', link: '#about' },
           { title: 'Team', link: '#team' },
@@ -130,6 +131,7 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
         </RouterLink>
         <Hidden smDown>
           <Box ml={2} flexGrow={1} />
+          <Item title="Campus Leaders" link="/campusLeaders" />
           <Item title="Events" link="#events" />
           <Item title="About" link="#about" />
           <Item title="Team" link="#team" />

src/views/pages/CAView/Hero.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+import {
+  Box,
+  Button,
+  Container,
+  Grid,
+  Hidden,
+  Typography,
+  makeStyles
+} from '@material-ui/core';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+
+const background = 'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    color: '#FFF',
+    background,
+    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'
+  },
+  btn: {
+    backgroundColor: '#A60000',
+    color: '#ffffff',
+    textTransform: 'capitalize',
+    [theme.breakpoints.down('sm')]: {
+      width: '100%'
+    },
+    '&:hover': {
+      backgroundColor: 'rgba(166, 0, 0, 0.8)'
+    }
+  }
+}));
+
+function Hero({ className, ...rest }) {
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.root, className)} {...rest}>
+      <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, className)}
+            >
+              <Typography variant="h1" gutterBottom>
+                Learn for Cause
+              </Typography>
+              <Typography variant="h1">Code for Cause</Typography>
+              <Hidden mdUp>
+                <Box mt={6} mb={2}>
+                  <div className={classes.image}>
+                    <img
+                      alt="codeforcauseimg"
+                      src="/static/home/codeforcause.svg"
+                    />
+                  </div>
+                </Box>
+              </Hidden>
+              <Box mt={5}>
+                <Typography variant="body1">
+                  An initiative to help the community by providing training,
+                  guidance and awareness about the possibilities in the software
+                  field to students &amp; professionals.
+                </Typography>
+              </Box>
+              <Box mt={4}>
+                <Grid container xs={12} md={12}>
+                  <Grid item xs={12} md={12}>
+                    <Button
+                      className={classes.btn}
+                      component="a"
+                      href="https://youtube.com/codeforcause"
+                      target="_blank"
+                      size="large"
+                      variant="contained"
+                    >
+                      <PlayArrowIcon style={{ paddingRight: 5 }} />
+                      Watch Our Videos
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Box>
+          </Grid>
+          <Hidden smDown>
+            <Grid item xs={12} md={6}>
+              <Box>
+                <div className={classes.image}>
+                  <img
+                    alt="codeforcauseimg"
+                    src="/static/home/codeforcause.svg"
+                  />
+                </div>
+              </Box>
+            </Grid>
+          </Hidden>
+        </Grid>
+      </Container>
+    </div>
+  );
+}
+
+Hero.propTypes = {
+  className: PropTypes.string
+};
+
+export default Hero;

src/views/pages/CAView/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+import Page from 'src/components/Page';
+import Hero from './Hero';
+
+const useStyles = makeStyles(() => ({
+  root: {}
+}));
+
+function HomeView() {
+  const classes = useStyles();
+
+  return (
+    <Page className={classes.root} title="Campus Leaders">
+      <Hero />
+    </Page>
+  );
+}
+
+export default HomeView;

src/views/pages/HomeView/CTA.js

@@ -53,7 +53,7 @@ const useStyles = makeStyles(theme => ({
     color: '#ffffff',
     '&:hover': {
       backgroundColor: '#A60000',
-      opacity: '0.8',
+      opacity: '0.8'
     }
   },
   secondaryBtn: {

src/views/pages/HomeView/Events.js

@@ -15,7 +15,7 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import { events } from './HomeViewData';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: theme.palette.background.LIGHT,
     padding: '30px 0',
@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
     },
     '&:hover': {
       backgroundColor: '#000',
-      opacity: '0.8',
+      opacity: '0.8'
     }
   },
   btn: {
@@ -195,7 +195,7 @@ function Events({ className, ...rest }) {
               </Box>
               <Typography className={classes.secondaryText}>
                 Our Youtube Channel for Upcoming Webinars
-               </Typography>
+              </Typography>
             </div>
           </Grid>
         </Grid>

src/views/pages/HomeView/Hero.js

@@ -63,7 +63,7 @@ const useStyles = makeStyles(theme => ({
       width: '100%'
     },
     '&:hover': {
-      backgroundColor: 'rgba(166, 0, 0, 0.8)',
+      backgroundColor: 'rgba(166, 0, 0, 0.8)'
     }
   }
 }));
@@ -83,10 +83,7 @@ function Hero({ className, ...rest }) {
               height="100%"
               className={clsx(classes.extraPadding, className)}
             >
-              <Typography
-                variant="h1"
-                gutterBottom
-              >
+              <Typography variant="h1" gutterBottom>
                 Learn for Cause
               </Typography>
               <Typography variant="h1">Code for Cause</Typography>

src/views/pages/HomeView/HomeViewData.js

@@ -150,7 +150,6 @@ export const openSourceContent = {
       img: '/static/images/icons/os3.svg',
       contentTitle: 'Networking Events',
       content:
-
         'As we already know software development professionals flourish by networking. Get connected to people who matter by our online/offline events.'
     }
   ]