diff --git a/README.md b/README.md index bef9cb8e3..01c357982 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ - [.Net C#](https://docs.microsoft.com/en-us/dotnet/csharp/) - DevOps - [Docker Compose](https://docs.docker.com/compose/) / [Github Actions](https://docs.github.com/en/free-pro-team@latest/actions/reference) + ## Initial setup ```shell diff --git a/public/img/header-image-mobile.jpg b/public/img/header-image-mobile.jpg new file mode 100644 index 000000000..6ff1606bd Binary files /dev/null and b/public/img/header-image-mobile.jpg differ diff --git a/public/img/header-image.png b/public/img/header-image.png new file mode 100644 index 000000000..752c981b8 Binary files /dev/null and b/public/img/header-image.png differ diff --git a/public/img/jumbotron-background-image-desktop.jpg b/public/img/jumbotron-background-image-desktop.jpg index 2b7e99595..366794e15 100644 Binary files a/public/img/jumbotron-background-image-desktop.jpg and b/public/img/jumbotron-background-image-desktop.jpg differ diff --git a/public/img/jumbotron-background-image-mobile.jpg b/public/img/jumbotron-background-image-mobile.jpg deleted file mode 100644 index 65af8dd18..000000000 Binary files a/public/img/jumbotron-background-image-mobile.jpg and /dev/null differ diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json index 8214fcf86..996ec4f72 100644 --- a/public/locales/bg/index.json +++ b/public/locales/bg/index.json @@ -41,6 +41,6 @@ "labour-support": "- с труд", "media-support": "- медийно", "become-a-partner": "- стани партньор", - "click-here-button": "Натисни тук" + "click-here-button": "Включи се" } } diff --git a/public/locales/en/index.json b/public/locales/en/index.json index d183ac74c..cc8b5e326 100644 --- a/public/locales/en/index.json +++ b/public/locales/en/index.json @@ -41,6 +41,6 @@ "labour-support": "- with labour", "media-support": "- with media", "become-a-partner": "- become a partner", - "click-here-button": "Click here" + "click-here-button": "Join us" } } diff --git a/src/components/index/sections/Jumbotron.tsx b/src/components/index/sections/Jumbotron.tsx index ce50504ac..88ae10712 100644 --- a/src/components/index/sections/Jumbotron.tsx +++ b/src/components/index/sections/Jumbotron.tsx @@ -1,7 +1,7 @@ import React, { RefObject } from 'react' import { useTranslation } from 'next-i18next' import { Grid, Typography } from '@material-ui/core' -import { makeStyles, createStyles } from '@material-ui/core/styles' +import { makeStyles, createStyles, darken } from '@material-ui/core/styles' import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown' import { Favorite } from '@material-ui/icons' @@ -22,8 +22,9 @@ const useStyles = makeStyles((theme) => backgroundPosition: 'center', backgroundSize: 'cover', color: theme.palette.common.white, - [theme.breakpoints.down(380)]: { - backgroundImage: 'url(/img/jumbotron-background-image-mobile.jpg)', + [theme.breakpoints.down('sm')]: { + backgroundImage: 'url(/img/header-image-mobile.jpg)', + backgroundSize: 'cover', }, [theme.breakpoints.up(1600)]: { height: '950px', @@ -42,9 +43,9 @@ const useStyles = makeStyles((theme) => fontWeight: 400, }, aboutProjectButton: { - color: theme.palette.common.white, - border: `2px solid ${theme.palette.primary.main}`, - borderRadius: theme.spacing(3), + color: darken(theme.palette.secondary.main, 0.8), + border: `none`, + borderRadius: '500px', padding: theme.spacing(1.5, 4), fontWeight: 500, fontSize: theme.typography.pxToRem(15), @@ -56,10 +57,8 @@ const useStyles = makeStyles((theme) => }, }, podkrepiButton: { - color: theme.palette.common.white, - backgroundColor: theme.palette.primary.main, - border: `2px solid ${theme.palette.primary.main}`, - borderRadius: theme.spacing(3), + border: `none`, + borderRadius: '500px', fontWeight: 500, fontSize: theme.typography.pxToRem(15), minWidth: theme.spacing(27), @@ -82,7 +81,7 @@ const useStyles = makeStyles((theme) => height: theme.spacing(5), '&:hover': { cursor: 'pointer', - backgroundColor: theme.palette.primary.dark, + color: theme.palette.secondary.main, }, }, }), @@ -119,13 +118,15 @@ export default function Jumbotron({ scrollTo }: JumbotronProps) { {t('index:jumbotron.about-project-button')} }> {t('index:jumbotron.support-us-button')} diff --git a/src/components/index/sections/SupportUsSection.tsx b/src/components/index/sections/SupportUsSection.tsx index 579c6424e..244e209be 100644 --- a/src/components/index/sections/SupportUsSection.tsx +++ b/src/components/index/sections/SupportUsSection.tsx @@ -16,13 +16,12 @@ const useStyles = makeStyles((theme) => }, }, supportImageWrapper: { + minHeight: '20rem', textAlign: 'center', - }, - supportImage: { - maxWidth: '60%', - [theme.breakpoints.down('sm')]: { - marginBottom: theme.spacing(3), - }, + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'bottom center', + backgroundImage: 'url(/img/support-us-image.png)', }, supportOptionsWrapper: { [theme.breakpoints.down('sm')]: { @@ -66,13 +65,7 @@ export default function SupportUsSection() { return ( - - Support us image - + {t('index:support-us-section.heading')}