diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
index d00f37bbc..da061c5b4 100644
--- a/zubhub_frontend/zubhub/public/locales/en/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -258,9 +258,9 @@
},
"projects": {
- "1":"Get inspired by our collection of ideas.",
- "2":"Tinker with materials and tools around you.",
- "shareProject": "Share your work!",
+ "1":"Explore, ",
+ "2": "Create, Share!",
+ "shareProject": "Share your work",
"exploreIdeas": "Explore Ideas",
"zubhubAmbassadors": "Become an Ambassador",
"newStuff": "New Stuff",
diff --git a/zubhub_frontend/zubhub/public/locales/hi/translation.json b/zubhub_frontend/zubhub/public/locales/hi/translation.json
index d31b3dd18..84c7826c5 100644
--- a/zubhub_frontend/zubhub/public/locales/hi/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/hi/translation.json
@@ -244,6 +244,8 @@
},
"projects": {
+ "1":"खोजें, ",
+ "2":"बनाएं, शेयर करें!",
"shareProject": "एक परियोजना साझा करें",
"exploreIdeas": "विचारों का अन्वेषण करें",
"zubhubAmbassadors": "हमारे राजदूत बनें",
diff --git a/zubhub_frontend/zubhub/src/assets/images/heroMainImage.svg b/zubhub_frontend/zubhub/src/assets/images/heroMainImage.svg
new file mode 100644
index 000000000..cf8d89133
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/assets/images/heroMainImage.svg
@@ -0,0 +1,728 @@
+
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js
index 95ebab254..e3300480d 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js
@@ -13,7 +13,7 @@ const styles = theme => ({
fontSize: '1.15rem',
},
mainContainerStyle: {
- // maxWidth: '100vw',
+ maxWidth: '100vw',
zIndex: 1,
// boxShadow:
// '0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)',
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/projects/projectsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/projects/projectsStyles.js
index 31a12f129..60cf55aba 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/projects/projectsStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/projects/projectsStyles.js
@@ -25,20 +25,35 @@ const styles = theme => ({
// '& .MuiGrid-root.MuiGrid-container': {
// width: '100%',
[theme.breakpoints.down('sm')]: {
- padding: '0 24px'
+ padding: '0 24px',
+ width: '100%',
},
},
- heroSectionStyle: {
+ heroMainSectionStyle: {
backgroundColor: 'var(--primary-color1)',
- boxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
- WebkitBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
- MozBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
display: 'flex',
paddingTop: '2.3em',
- paddingBottom: '2.85em',
+ paddingBottom: '2.8em',
justifyContent: 'center',
width: '100vw',
- marginBottom: '2em'
+ marginBottom: '2em',
+ height:'100vh',
+ [theme.breakpoints.down('sm')]: {
+ width: '100',
+ height:'fit-content',
+ },
+ },
+ heroSectionStyle: {
+ backgroundColor: 'var(--primary-color1)',
+ boxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
+ WebkitBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
+ MozBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
+ display: 'flex',
+ paddingTop: '2.3em',
+ paddingBottom: '2.85em',
+ justifyContent: 'center',
+ width: '100vw',
+ marginBottom: '2em'
},
imageLeft: {
flexDirection: 'row',
@@ -79,15 +94,28 @@ const styles = theme => ({
MozBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
display: 'flex',
paddingTop: '2.3em',
- paddingBottom: '2.85em',
+ paddingBottom: '2.8em',
justifyContent: 'center',
width: '100%',
},
+ heroMainContainerStyle: {
+ width: '100%',
+ padding: '7rem 4rem',
+ display: 'flex',
+ [theme.breakpoints.down('1000')]: {
+ padding: '2rem 1rem',
+ flexDirection: 'column-reverse',
+ width: '100',
+ height:'fit-content',
+ },
+ },
heroContainerStyle: {
width: '100%',
maxWidth: '1190px',
- padding: '1.15em 1.15em',
+ padding: '1.2em 1.2em',
display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
[theme.breakpoints.down('1000')]: {
flexDirection: 'column-reverse',
},
@@ -99,6 +127,7 @@ const styles = theme => ({
heroMessageContainerStyle: {
flexGrow: 1,
color: 'white',
+ maxWidth: '37.8rem',
},
heroMessageSecondaryStyle: {
fontSize: '2.2rem',
@@ -108,20 +137,44 @@ const styles = theme => ({
},
heroMessagePrimaryStyle: {
fontSize: '2.2rem',
- fontWeight: 1000,
+ fontWeight: '1000',
},
MessagePrimaryStyle: {
fontSize: '2.5rem',
fontWeight: 1000,
},
-
+ heroMainMessageSecondaryStyle: {
+ fontSize: '4.5rem',
+ fontWeight: '700',
+ [theme.breakpoints.down('sm')]: {
+ fontSize: '2.5rem'
+ },
+ },
+ heroMainMessagePrimaryStyle: {
+ fontSize: '2.2rem',
+ fontWeight: 500,
+ [theme.breakpoints.down('sm')]: {
+ fontSize: '1.2rem'
+ },
+ },
heroButtonStyle: {
textTransform: 'none',
- padding: '0 1em',
- fontSize: '1.2rem',
+ fontSize: '1.5rem',
fontWeight: 700,
marginRight: '1em',
marginTop: '1.2em',
+ width: 'fit-content',
+ height: '4rem',
+ padding: '1rem 2rem',
+ borderRadius: '2rem',
+ gap: '1rem',
+ [theme.breakpoints.down('sm')]: {
+ height:'fit-content',
+ padding: '0.1em 0.7em',
+ marginBottom: '3rem',
+ width: 'fit-content',
+ fontSize: "1.2rem"
+ },
},
heroBtnStyle: {
textTransform: 'none',
@@ -133,6 +186,7 @@ const styles = theme => ({
},
heroImageContainerStyle: {
display: 'flex',
+ justifyContent: 'space-between',
[theme.breakpoints.down('1000')]: {
},
[theme.breakpoints.down('500')]: {
@@ -160,10 +214,14 @@ const styles = theme => ({
},
},
heroImageStyle: {
- marginLeft: '2em',
+ marginLeft: '4em',
marginRight: '2em',
height: '100%',
width: '100%',
+ [theme.breakpoints.down('1480')]: {
+ marginLeft: '0',
+ marginRight: '0',
+ },
[theme.breakpoints.down('500')]: {
marginLeft: '0',
marginRight: '0',
@@ -260,8 +318,8 @@ const styles = theme => ({
fontWeight: 'bold',
fontSize: '1.5rem',
marginTop: '2em',
- marginLeft: '0.67em',
- marginRight: '0.67em',
+ marginLeft: '0.7em',
+ marginRight: '0.7em',
},
buttonGroupStyle: {
paddingLeft: '2em',
diff --git a/zubhub_frontend/zubhub/src/views/create_project/step3/Step3.jsx b/zubhub_frontend/zubhub/src/views/create_project/step3/Step3.jsx
index 7714d0d7d..93a19991a 100644
--- a/zubhub_frontend/zubhub/src/views/create_project/step3/Step3.jsx
+++ b/zubhub_frontend/zubhub/src/views/create_project/step3/Step3.jsx
@@ -26,6 +26,7 @@ export default function Step3({ formik, handleBlur, ...props }) {
const [mode, setMode] = useState('');
const [creatorValue, setCreatorValue] = useState({});
const [checked, setChecked] = useState(false);
+ const [disableCategorySelection, setDisableCategorySelection] = useState(false);
useEffect(() => {
getCategories(props).then(cats => setCategories(cats.categories));
@@ -70,22 +71,47 @@ export default function Step3({ formik, handleBlur, ...props }) {
{categories.map(cat => {
let selected =
formik.values.category.filter(selectedCategory => selectedCategory.name === cat.name).length > 0;
- const color = selected ? colors.primary : isLimit ? '#D9DEE2' : colors.light;
+ const color = selected ? colors.primary : (isLimit || disableCategorySelection) ? '#D9DEE2' : colors.light;
return (
(isLimit && !selected ? null : handleChange(cat, selected))}
+ onClick={() =>
+ (isLimit && !selected) || disableCategorySelection ? null : handleChange(cat, selected)
+ }
className={classes.pill}
style={{ border: `solid 1px ${color}` }}
>
-
+
{cat.name}
);
})}
+
+
+ setDisableCategorySelection(!disableCategorySelection)}
+ />
+
+ None
+
+
+
{mode === 'team' && (
diff --git a/zubhub_frontend/zubhub/src/views/home/Home.jsx b/zubhub_frontend/zubhub/src/views/home/Home.jsx
index 974cea336..5e90f1975 100644
--- a/zubhub_frontend/zubhub/src/views/home/Home.jsx
+++ b/zubhub_frontend/zubhub/src/views/home/Home.jsx
@@ -31,7 +31,7 @@ import new_stuff from '../../assets/images/new_stuff.svg';
import styles from '../../assets/js/styles/views/projects/projectsStyles';
import commonStyles from '../../assets/js/styles';
import hikingIcon from '../../assets/images/hiking.svg';
-
+import heroMainImage from '../../assets/images/heroMainImage.svg'
const useStyles = makeStyles(styles);
const useCommonStyles = makeStyles(commonStyles);
@@ -135,7 +135,6 @@ function Projects(props) {
});
}
};
-
const { loading, isMobileView } = state;
const {
results: projects,
@@ -156,8 +155,8 @@ function Projects(props) {
(
{hero && hero.id ? (
-
-
+
+
{state.isMobileView && hero && hero.id && (
![]()
-
+
{t('projects.1')}
-
-
+
{t('projects.2')}
-
- {hero.title}
+
+ {hero.description}
)}