diff --git a/public/static/events/apply.png b/public/static/events/apply.png new file mode 100644 index 00000000..7cc62330 Binary files /dev/null and b/public/static/events/apply.png differ diff --git a/public/static/events/hero.png b/public/static/events/hero.png new file mode 100644 index 00000000..a9a4aade Binary files /dev/null and b/public/static/events/hero.png differ diff --git a/src/Routes.js b/src/Routes.js index cb5f7f6e..fec92e94 100755 --- a/src/Routes.js +++ b/src/Routes.js @@ -14,6 +14,7 @@ import AlgoPythonView from 'src/views/pages/Courses/AlgoPythonView' import WebFullStakView from 'src/views/pages/Courses/WebFullStakView' import CompetitiveJavaView from 'src/views/pages/Courses/CompetitiveJavaView' import PythonDevelopmentView from 'src/views/pages/Courses/PythonDevelopmentView' +import CoursesView from 'src/views/pages/CoursesView'; const routesConfig = [ { @@ -93,6 +94,20 @@ const routesConfig = [ } ] }, + { + path: '/courses', + layout: MainLayout, + routes: [ + { + exact: true, + path: '/courses', + component: CoursesView + }, + { + component: () => + } + ] + }, { path: '/machine-learning-using-python', layout: MainLayout, diff --git a/src/views/pages/CoursesView/Apply.js b/src/views/pages/CoursesView/Apply.js new file mode 100755 index 00000000..7450f2fb --- /dev/null +++ b/src/views/pages/CoursesView/Apply.js @@ -0,0 +1,122 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; + +import { + Box, + Grid, + Typography, + makeStyles, + TextField, + Button +} from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + root: { + minHeight: '350px', + color: '#FFF', + padding: '100px 70px', + [theme.breakpoints.down('md')]: { + paddingLeft: 15, + paddingRight: 15 + } + }, + main: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: '0px', + color: '#FFF' + }, + btn: { + backgroundColor: '#A60000', + color: '#ffffff', + textTransform: 'capitalize', + [theme.breakpoints.down('sm')]: { + width: '100%' + }, + '&:hover': { + backgroundColor: 'rgba(166, 0, 0, 0.8)' + } + }, + applyleft: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center' + }, + textDetails: { + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: 'rgba(255, 255, 255, 0.2)' + }, + '&:hover fieldset': { + borderColor: 'rgba(255, 255, 255, 0.4)' + }, + '&.Mui-focused fieldset': { + borderColor: 'rgba(255, 255, 255, 0.6)' + } + } + } +})); + +function Apply({ className, ...rest }) { + const classes = useStyles(); + + return ( +
+ + +
+ + Tell Us What You Want To Learn Next + + + + + +
+ + +
+ ); +} + +Apply.propTypes = { + className: PropTypes.string +}; + +export default Apply; diff --git a/src/views/pages/CoursesView/CTA.js b/src/views/pages/CoursesView/CTA.js new file mode 100755 index 00000000..3ef99d12 --- /dev/null +++ b/src/views/pages/CoursesView/CTA.js @@ -0,0 +1,204 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; + +import { + Box, + Grid, + Container, + Typography, + makeStyles, + Button, + Hidden +} from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + root: { + backgroundColor: theme.palette.background.LIGHT, + paddingLeft: 70, + paddingRight: 70, + //write css for small screen + [theme.breakpoints.down('md')]: { + paddingLeft: 15, + paddingRight: 15 + } + }, + cardGrid: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(8) + }, + extraMargin: { + marginTop: theme.spacing(6) + }, + extraMarginTop: { + marginTop: theme.spacing(2) + }, + extraPadding: { + padding: '32px !important' + }, + flex: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4) + }, + Button: { + textTransform: 'capitalize', + fontSize: '16px', + padding: '8px 32px', + [theme.breakpoints.down('sm')]: { + width: '100%' + } + }, + primeBtn: { + backgroundColor: '#A60000', + color: '#ffffff', + '&:hover': { + backgroundColor: '#A60000', + opacity: '0.8' + } + }, + secondaryBtn: { + borderColor: '#A60000', + color: '#A60000' + } +})); + +function CTA({ className, ...rest }) { + const classes = useStyles(); + + return ( +
+ + + + + + + Want Us to conduct a Workshop + + + + + + Want Us to conduct a
Workshop + + + + + + + + + + + + + + + + + + Join Us or Submit a YouTube Video + + + + + + Join Us or Submit a
YouTube Video + + + + + + + + + + + + + + + + + + Get Updates About Our Initiatives + + + + + + Get Updates About Our
Initiatives + + + + + + + + + + + + + + +
+ ); +} + +CTA.propTypes = { + className: PropTypes.string +}; + +export default CTA; diff --git a/src/views/pages/CoursesView/Courses.js b/src/views/pages/CoursesView/Courses.js new file mode 100644 index 00000000..7023cfb6 --- /dev/null +++ b/src/views/pages/CoursesView/Courses.js @@ -0,0 +1,404 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import ParallaxSlide from '@mui-treasury/components/slide/parallax'; +import PropTypes from 'prop-types'; + +import { + Grid, + Typography, + Box, + Card, + CardContent, +} from '@material-ui/core'; + +import coursesContent from 'src/data/courses'; +import { Link } from 'react-router-dom'; + +const useStyles = makeStyles(theme => ({ + icon: { + marginRight: theme.spacing(2) + }, + root: { + padding: theme.spacing(10, 10, 10), + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + [theme.breakpoints.down('md')]: { + padding: theme.spacing(10, 3, 10) + } + }, + cardGrid: { + paddingTop: theme.spacing(8), + paddingBottom: theme.spacing(8) + }, + card: { + height: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: '10px', + margin: '12px', + boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.13)' + }, + cardMedia: { + width: '100%', + height: 'auto' + // paddingTop: "56.25%", // 16:9 + }, + cardContent: {}, + chipActions: { + display: 'block' + }, + chip: { + margin: '8px 0 3px 8px' + }, + extraMargin: { + marginTop: '15px', + marginBottom: '0' + }, + btn: { + textTransform: 'none' + }, + paddingCls: { + paddingLeft: '10px', + paddingRight: '10px' + }, + paddingClsxs: { + padding: 0 + }, + iconSize: { + fontSize: '32px' + }, + text: { + color: '#FFFFFF' + }, + avatarLarge: { + width: theme.spacing(16), + height: theme.spacing(16), + margin: theme.spacing(4, 0, 2) + }, + + avatarGrid: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: '5px' + }, + + slide: { + perspective: 0, // create perspective + overflow: 'hidden', + // relative is a must if you want to create overlapping layers in children + position: 'relative' + }, + background: { + width: '100%', + height: 'auto', + backgroundPosition: 'bottom center', + backgroundSize: 'cover' + }, + gridList: { + flexWrap: 'wrap', + width: '100%', + // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS. + transform: 'translateZ(0)' + } +})); + +export default function Courses() { + const classes = useStyles(); + + const foundation = coursesContent.foundation; + const advanced = coursesContent.advanced; + + return ( + + + + Foundational Courses + + + + + + + + + + + + + Advanced Courses + + + + + + + + + + + + ); +} + +const CoursesGrid = ({ courses }) => { + const classes = useStyles(); + return ( + + {Object.entries(courses).map(([cname, course], index) => { + return ( + + + + ); + })} + + ); +}; + +const CourseCard = ({ course }) => { + const classes = useStyles(); + return ( + + + + + + + {course.difficulty} + + + {course.level} + + + + + {course.domain} + + + + {course.title} + + + + + + + + + + + Duration + + {course.duration} + + + + + Upcoming + + {course.upcoming} + + + + {course.tags.slice(0, 3).map((tag, index) => ( +
+ + {tag} + +
+ ))} + + + + + + + + Check Details + + + + + + ); +}; + +const ParallaxCarousel = ({ slides }) => { + const renderChildren = () => + slides.map((slide, index) => { + return ( + + + + {slide.heading} + + + {slide.subheading} + + + + ); + }); + return {renderChildren}; +}; + +function TabPanel(props) { + const { children, value, index } = props; + + return ( + + ); +} + +TabPanel.propTypes = { + children: PropTypes.node, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired +}; diff --git a/src/views/pages/CoursesView/Hero.js b/src/views/pages/CoursesView/Hero.js new file mode 100755 index 00000000..24862b82 --- /dev/null +++ b/src/views/pages/CoursesView/Hero.js @@ -0,0 +1,144 @@ +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'; + +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 ( +
+ + + + + + Workshops, Bootcamps + + & Webinars + + +
+ codeforcauseimg +
+ + + + + Login To get regular Updates. + + + + + + + + + + + + + + +
+ codeforcauseimg +
+ + + + + +
+ ); +} + +Hero.propTypes = { + className: PropTypes.string +}; + +export default Hero; diff --git a/src/views/pages/CoursesView/index.js b/src/views/pages/CoursesView/index.js new file mode 100755 index 00000000..082a1f45 --- /dev/null +++ b/src/views/pages/CoursesView/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core'; +import Page from 'src/components/Page'; +import Hero from './Hero'; +import Footer from '../common/Footer'; +import CTA from './CTA'; +import Courses from './Courses'; +import Apply from './Apply'; + +const useStyles = makeStyles(() => ({ + root: {} +})); + +function EventsView() { + const classes = useStyles(); + + return ( + + + + + +