Merge pull request #170 from daritelska-platforma/redesign-homepage

Redesign homepage

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

public/locales/bg/index.json

@@ -41,6 +41,6 @@
     "labour-support": "- с труд",
     "media-support": "- медийно",
     "become-a-partner": "- стани партньор",
-    "click-here-button": "Натисни тук"
+    "click-here-button": "Включи се"
   }
 }

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"
   }
 }

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) {
       <Grid item>
         <LinkButton
           href={routes.aboutProject}
-          variant="outlined"
+          variant="contained"
+          color="secondary"
           className={classes.aboutProjectButton}>
           {t('index:jumbotron.about-project-button')}
         </LinkButton>
         <LinkButton
           href={routes.support}
-          variant="outlined"
+          variant="contained"
+          color="primary"
           className={classes.podkrepiButton}
           endIcon={<Favorite />}>
           {t('index:jumbotron.support-us-button')}

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 (
     <Grid container component="section" className={classes.container}>
-      <Grid item xs={12} md={6} className={classes.supportImageWrapper}>
-        <img
-          src="/img/support-us-image.png"
-          className={classes.supportImage}
-          alt="Support us image"
-        />
-      </Grid>
+      <Grid item xs={12} md={6} className={classes.supportImageWrapper}></Grid>
       <Grid item xs={12} md={6} className={classes.supportOptionsWrapper}>
         <Typography variant="h5" component="h2" className={classes.heading}>
           {t('index:support-us-section.heading')}