diff --git a/package-lock.json b/package-lock.json old mode 100755 new mode 100644 index a187f332..ec768c22 --- a/package-lock.json +++ b/package-lock.json @@ -2608,6 +2608,21 @@ "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.5.0.tgz", "integrity": "sha512-GifWlc0hyLdYwivltV8KVwE+OOVgYoHF4DvvKn6VOA73iVvqxbXXeL18PVFjMw8r0JUHmuhP6S+4TD8INBzXZA==" }, + "@date-io/date-fns": { + "version": "1.3.13", + "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz", + "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==", + "requires": { + "@date-io/core": "^1.3.13" + }, + "dependencies": { + "@date-io/core": { + "version": "1.3.13", + "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz", + "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==" + } + } + }, "@date-io/moment": { "version": "1.3.13", "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz", @@ -7503,6 +7518,11 @@ "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz", "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==" }, + "date-fns": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz", + "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==" + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", diff --git a/package.json b/package.json index a13dda67..081cb434 100755 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "@date-io/core": "^2.5.0", + "@date-io/date-fns": "^1.3.13", "@date-io/moment": "^1.3.13", "@emotion/core": "^10.0.28", "@emotion/styled": "^10.0.27", @@ -61,6 +62,7 @@ "change-case": "^4.1.1", "chart.js": "^2.9.3", "clsx": "^1.1.0", + "date-fns": "^2.16.1", "draft-js": "^0.11.7", "firebase": "^7.21.1", "formik": "^2.1.4", diff --git a/public/static/images/backs/course.png b/public/static/images/backs/course.png new file mode 100644 index 00000000..5a81d065 Binary files /dev/null and b/public/static/images/backs/course.png differ diff --git a/public/static/images/backs/ws.png b/public/static/images/backs/ws.png new file mode 100644 index 00000000..062c337c Binary files /dev/null and b/public/static/images/backs/ws.png differ diff --git a/src/Routes.js b/src/Routes.js index 50a17a58..bcea6441 100755 --- a/src/Routes.js +++ b/src/Routes.js @@ -16,6 +16,7 @@ import Error404View from 'src/views/pages/Error404View'; import StudentDashboardView from 'src/views/pages/StudentDashboardView'; import EditProfileView from 'src/views/pages/StudentDashboardView/EditProfile'; import CoursePage from 'src/views/pages/Course/CoursePage'; +import WorkshopView from 'src/views/pages/WorkshopView'; import TermsView from './views/pages/documents/termsView'; import DocsLayout from './layouts/DocsLayout'; import PrivacyView from './views/pages/documents/privacyView'; @@ -156,6 +157,16 @@ const renderRoutes = () => ( )} /> + ( + + + + )} + /> + ({ } })); -function Projects({ projects, flat }) { +function Projects({ title, projects, flat }) { const classes = useStyles(); return ( @@ -39,7 +39,7 @@ function Projects({ projects, flat }) { margin: '12px 0px 12px 8px' }} > - Projects you'll make in this course + {title} {projects.map((project, index) => { return ; diff --git a/src/constants/index.js b/src/constants/index.js index c5951164..eb88c513 100755 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -9,4 +9,4 @@ export const horizontalGradient = 'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)'; export const verticalGradient = - 'linear-gradient(180.72deg, #180255 0.25%, #000000 97.54%)'; + 'linear-gradient(180.72deg, #180255 0.25%, #000000 85.54%)'; diff --git a/src/views/pages/CLView/CTA.js b/src/views/pages/CLView/CTA.js index 3da9c578..63382a99 100755 --- a/src/views/pages/CLView/CTA.js +++ b/src/views/pages/CLView/CTA.js @@ -145,6 +145,7 @@ function CTA({ className, ...rest }) { target="_blank" size="large" variant="outlined" + focusRipple={false} > Submit Request @@ -203,10 +204,11 @@ function CTA({ className, ...rest }) { diff --git a/src/views/pages/Course/Major.js b/src/views/pages/Course/Major.js index 7bafd8cd..ed4a2278 100644 --- a/src/views/pages/Course/Major.js +++ b/src/views/pages/Course/Major.js @@ -4,7 +4,7 @@ import { Grid, Box, Hidden } from '@material-ui/core'; import Details from './partials/Details'; import Overview from './partials/Overview'; import Topics from './partials/Topics'; -import Projects from './partials/Projects'; +import Projects from '../../../components/SidePanel/Projects'; const useStyles = makeStyles(theme => ({ icon: { @@ -106,7 +106,10 @@ export default function Major({ course }) { - + diff --git a/src/views/pages/CoursesView/index.js b/src/views/pages/CoursesView/index.js index 143cdb99..459d79a5 100755 --- a/src/views/pages/CoursesView/index.js +++ b/src/views/pages/CoursesView/index.js @@ -3,7 +3,7 @@ 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 CTA from '../../../components/CTA/CTA'; import Courses from './Courses'; import Apply from '../common/Apply'; diff --git a/src/views/pages/EventsView/CTA.js b/src/views/pages/EventsView/CTA.js deleted file mode 100755 index 3ef99d12..00000000 --- a/src/views/pages/EventsView/CTA.js +++ /dev/null @@ -1,204 +0,0 @@ -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/EventsView/index.js b/src/views/pages/EventsView/index.js index 13bc7d79..41c40c9b 100755 --- a/src/views/pages/EventsView/index.js +++ b/src/views/pages/EventsView/index.js @@ -3,7 +3,7 @@ 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 CTA from '../../../components/CTA/CTA'; import Events from './Events'; import Apply from '../common/Apply'; diff --git a/src/views/pages/HomeView/CTA.js b/src/views/pages/HomeView/CTA.js deleted file mode 100755 index 3ef99d12..00000000 --- a/src/views/pages/HomeView/CTA.js +++ /dev/null @@ -1,204 +0,0 @@ -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/HomeView/index.js b/src/views/pages/HomeView/index.js index 6f6e2d18..fad2e313 100755 --- a/src/views/pages/HomeView/index.js +++ b/src/views/pages/HomeView/index.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'; import Page from 'src/components/Page'; import Hero from './Hero'; import Events from './Events'; -import CTA from './CTA'; +import CTA from '../../../components/CTA/CTA'; import Footer from '../common/Footer'; import StandForSection from './AboutUs/AboutUsView/StandForView'; import Team from './AboutUs/OurTeam/Team'; diff --git a/src/views/pages/WorkshopView/AboutWorkshops.js b/src/views/pages/WorkshopView/AboutWorkshops.js new file mode 100644 index 00000000..2c31257c --- /dev/null +++ b/src/views/pages/WorkshopView/AboutWorkshops.js @@ -0,0 +1,126 @@ +import { Divider, Grid, makeStyles, Typography } from '@material-ui/core'; +import React from 'react'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '80%', + margin: 'auto', + [theme.breakpoints.down('sm')]: { + width: '90%' + } + }, + mainHeading: { + padding: '150px 0px 80px' + }, + desc: { + fontStyle: 'italic', + fontWeight: 500, + paddingBottom: '20px' + }, + stats: {}, + divider: { + backgroundColor: '#D4D4D4', + padding: '0px 1px', + height: 'auto', + width: 'auto', + border: '0.5px #525252' + }, + aboutText: { + color: '#747474', + paddingBottom: '10px' + }, + extraPadding: { + padding: '0px 0px 20px', + [theme.breakpoints.down('sm')]: { + margin: 'auto', + padding: '40px 0px' + } + } +})); + +export default function AboutWorkshops() { + const classes = useStyles(); + + return ( +
+ + About Wokshops + + + + + 120+ + + + Workshops + + + 30+ + + + Topics + + + 25+ + + + Speakers + + + 15000+ + + + participants + + + + + + Workshops are About... + + + + + + + + + + + +
+ ); +} + +function ABoutText({ left, right }) { + const classes = useStyles(); + + return ( + + + {left} + + + {right} + + + ); +} diff --git a/src/views/pages/WorkshopView/Form.js b/src/views/pages/WorkshopView/Form.js new file mode 100644 index 00000000..342d5fd1 --- /dev/null +++ b/src/views/pages/WorkshopView/Form.js @@ -0,0 +1,333 @@ +import React, { useState } from 'react'; +import { + CircularProgress, + Container, + FormControlLabel, + Grid, + makeStyles, + MenuItem, + Paper, + Radio, + RadioGroup, + Typography +} from '@material-ui/core'; +import { + SelectValidator, + TextValidator, + ValidatorForm +} from 'react-material-ui-form-validator'; +import axios from 'axios'; +import { + KeyboardDatePicker, + MuiPickersUtilsProvider +} from '@material-ui/pickers'; +import DateFnsUtils from '@date-io/date-fns'; +import ButtonComponent from 'src/components/Button/ButtonComponent'; +import { useSnackbar } from 'notistack'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '65%', + margin: '0px auto 100px', + [theme.breakpoints.down('sm')]: { + width: '85%' + } + }, + mainHeading: { + fontWeight: 700, + color: '#000' + }, + container: { + padding: '10% 12%' + }, + subhead: { + padding: '10px 0' + }, + textField: { + marginBottom: '16px', + background: '#e2e2e2' + }, + btn: { + padding: '13px' + }, + submissions: { + padding: '10px 0', + width: '80px', + height: '50px' + }, + extraPadding: { + padding: '20px 0px' + }, + rightPadding: { + [theme.breakpoints.up('md')]: { + paddingRight: '10px' + } + }, + leftPadding: { + [theme.breakpoints.up('md')]: { + paddingLeft: '10px' + } + } +})); + +function Form({ ...rest }) { + const classes = useStyles(); + + const [formData, updateFormData] = useState({}); + const [submitting, setSubmitting] = useState(0); + const [selectedDate, setSelectedDate] = useState(new Date()); + + const { enqueueSnackbar } = useSnackbar(); + + const handleDateChange = date => { + setSelectedDate(date); + updateFormData({ + ...formData, + date: date + }); + }; + + const handleChange = event => { + updateFormData({ + ...formData, + [event.target.name]: event.target.value + }); + }; + + const handleSubmit = e => { + setSubmitting(1); + console.log('d : ' + formData.date); + e.preventDefault(); + axios({ + method: 'post', + url: + 'https://us-central1-codeforcauseorg.cloudfunctions.net/widgets/workshop', + data: formData + }) + .then(response => { + setSubmitting(0); + enqueueSnackbar('Application Submitted Successfully'); + }) + .catch(error => { + enqueueSnackbar('Application Failed. Try again later'); + }); + }; + + const workshopTopics = [ + 'Machine Learning', + 'Placements', + 'Google Cloud', + 'Social Wellbeing', + 'Open Source', + 'Fellowship' + ]; + + return ( + + + + Excited For Workshop!! Submit Request + + + We will Contact You Regarding Your Request as the request is reviewed + by Us + + + As of now, we are only taking virtual workshops till further Notice + + + Contact Information + + + Name + + + + + Contact Number + + + + Email + + + + + College + + + Are you a college society + + } label="Yes" /> + } label="No" /> + + + Link to social profile + + + + Workshop Information + + + Topic for Workshop + + {workshopTopics.map(topic => { + return ( + + {topic} + + ); + })} + + + Referred Date For Workshop + + + + + + Approximate Footfall Expected + + + +
+ + By continuing, you agree to the Code For Cause Terms of Use and + Privacy Policy + +
+ + {submitting === 0 ? ( + + ) : ( +
+ +
+ )} +
+
+
+ ); +} + +export default Form; diff --git a/src/views/pages/WorkshopView/Hero.js b/src/views/pages/WorkshopView/Hero.js new file mode 100644 index 00000000..f0c244e5 --- /dev/null +++ b/src/views/pages/WorkshopView/Hero.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import HeroWithOneButton from '../../../components/Hero/HeroWithOneButton'; +import { verticalGradient } from '../../../constants'; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles(() => ({ + root: { + background: verticalGradient + }, + subtitle: { + fontWeight: 600, + fontStyle: 'italic' + // fontSize: '18px' + } +})); + +function Hero({ className, ...rest }) { + const classes = useStyles(); + return ( + + ); +} + +Hero.propTypes = { + className: PropTypes.string +}; + +export default Hero; diff --git a/src/views/pages/WorkshopView/RegisterWorkshop.js b/src/views/pages/WorkshopView/RegisterWorkshop.js new file mode 100644 index 00000000..95cf10a3 --- /dev/null +++ b/src/views/pages/WorkshopView/RegisterWorkshop.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ButtonComponent from '../../../components/Button/ButtonComponent'; + +function RegisterWorkshopButton({ className }) { + return ( + + ); +} + +export default RegisterWorkshopButton; diff --git a/src/views/pages/WorkshopView/index.js b/src/views/pages/WorkshopView/index.js new file mode 100644 index 00000000..e4da0e39 --- /dev/null +++ b/src/views/pages/WorkshopView/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import Hero from './Hero'; +import Footer from '../common/Footer'; +import { makeStyles } from '@material-ui/core'; +import Page from 'src/components/Page'; +import AboutWorkShop from './AboutWorkshops'; +import Form from './Form'; +const useStyles = makeStyles(() => ({ + root: {} +})); + +function WorkshopView() { + const classes = useStyles(); + + return ( + + + +
+