Update Homepage UI - initial changes (#1039)

e2e/local/homepage.spec.ts

@@ -5,8 +5,8 @@ test.beforeEach(async ({ page }) => {
 })
 
 test('test homepage', async ({ page }) => {
-  // Click text=Текущи кампании
-  await page.locator('text=Текущи кампании').click()
+  // Click text=Спешни кампании
+  await page.locator('text=Спешни кампании').click()
 
   // Click text=Как работи Подкрепи.бг?
   await page.locator('text=Как работи Подкрепи.бг?').click()

e2e/staging/homepage.spec.ts

@@ -7,8 +7,8 @@ test.beforeEach(async ({ page }) => {
 test('test homepage on staging', async ({ page }) => {
   // Go to http://dev.podkrepi.bg/
 
-  // Click text=Текущи кампании
-  await page.locator('text=Текущи кампании').click()
+  // Click text=Спешни кампании
+  await page.locator('text=Спешни кампании').click()
 
   // Click text=Как работи Подкрепи.бг?
   await page.locator('text=Как работи Подкрепи.бг?').click()

public/locales/bg/index.json

@@ -1,16 +1,15 @@
 {
   "podkrepi": "Подкрепи.бг",
-  "title": "прозрачна дарителска онлайн платформа",
-  "title2": "Подкрепи.бг - прозрачна дарителска онлайн платформа",
+  "title": "прозрачна онлайн дарителска платформа",
+  "title2": "Подкрепи.бг - прозрачна онлайн дарителска платформа",
   "metaDescription": "Подкрепи.бг е прозрачна и безплатна онлайн дарителска платформа, създадена от доброволния труд на членовете на сдружение Подкрепи БГ.",
   "jumbotron": {
     "maximum-transparency": "с максимална степен на прозрачност",
     "zero-commission": "с 0% комисиона",
     "eliminate-misuse": "целяща да елиминира злоупотребите с дарителски кампании",
     "improve-donation-culture": "работеща за по-добра дарителска среда в България",
     "open-source": "с отворен за ползване код",
-    "about-project-button": "За проекта",
-    "donate": "Дарете ❤️"
+    "about-project-button": "За проекта"
   },
   "activity-section": {
     "heading": "Какво правим?",
@@ -40,7 +39,7 @@
   },
   "campaign": {
     "see-all": "Вижте всички",
-    "emergency-causes": "Текущи кампании"
+    "emergency-causes": "Спешни кампании"
   },
   "how-we-work": {
     "heading": "Как работи Подкрепи.бг?",

public/locales/en/index.json

@@ -9,8 +9,7 @@
     "eliminate-misuse": "aimed at eliminating misuses of donation campaigns",
     "improve-donation-culture": "aimed at improving the donation culture in Bulgaria",
     "open-source": "open source",
-    "about-project-button": "About the project",
-    "donate": "Donate ❤️"
+    "about-project-button": "About the project"
   },
   "activity-section": {
     "heading": "What do we do?",
@@ -40,7 +39,7 @@
   },
   "campaign": {
     "see-all": "See all",
-    "emergency-causes": "Current campaigns"
+    "emergency-causes": "Urgent campaigns"
   },
   "how-we-work": {
     "heading": "How does Pordkprepi.bg work?",

src/components/index/sections/CampaignsSection.tsx

@@ -21,8 +21,13 @@ const classes = {
 const StyledContainer = styled(Container)(({ theme }) => ({
   [`& .${classes.heading}`]: {
     paddingBottom: theme.spacing(7),
-    color: theme.palette.primary.dark,
+    color: theme.palette.common.black,
     textAlign: 'center',
+    fontWeight: 500,
+
+    [theme.breakpoints.up('lg')]: {
+      fontSize: theme.spacing(6),
+    },
   },
 
   [`& .${classes.container}`]: {
@@ -55,7 +60,7 @@ export default function CampaignsSection() {
   } else {
     return (
       <StyledContainer maxWidth="lg">
-        <Heading id="what-we-do" variant="h4" component="h2" className={classes.heading}>
+        <Heading id="what-we-do" variant="h3" component="h2" className={classes.heading}>
           {t('index:campaign.emergency-causes')}
         </Heading>
         <Grid container justifyContent="center" spacing={2}>

src/components/index/sections/HowWeWorkSection.tsx

@@ -23,7 +23,7 @@ export default function HowWeWorkSection() {
         })}>
         {t('index:how-we-work.heading')}
       </Heading>
-      <Box sx={{ backgroundColor: '#F4F4F4', py: 6, px: 3 }}>
+      <Box sx={{ px: 3 }}>
         <Grid maxWidth="lg" margin="0 auto" item rowSpacing={10}>
           <Typography variant="subtitle1">{t('index:how-we-work.text')}</Typography>
         </Grid>

src/components/index/sections/Jumbotron.tsx

@@ -4,14 +4,14 @@ import { Container, Grid, Theme, Typography } from '@mui/material'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Image from 'next/image'
 import LinkButton from 'components/common/LinkButton'
-import theme from 'common/theme'
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 export default function Jumbotron() {
   const { t } = useTranslation()
   //Check if the media query is match and breakpoint is up sm device
   const matches = useMediaQuery<Theme>((theme) => theme.breakpoints.up('sm'))
-  const imgSource = matches ? '/img/family.jpg' : '/img/family.jpg'
+  const imgSource = matches ? '/img/family.jpg' : '/img/family-mobile.png'
 
   return (
     <Grid
@@ -20,21 +20,16 @@ export default function Jumbotron() {
       component="section"
       sx={(theme) => ({
         height: {
-          xl: '623px',
-          lg: '632px',
+          lg: '554px',
           md: '535px',
         },
-        background:
-          'linear-gradient(99deg, rgba(0,0,0,0.7707457983193278) 0%, rgba(27,54,75,0) 100%)',
         padding: {
           xs: theme.spacing(5, 1, 0, 1),
-          lg: theme.spacing(7, 1, 0, 1),
-          xl: theme.spacing(8, 1, 0, 1),
+          lg: theme.spacing(11, 1, 0, 1),
         },
         mb: {
           xs: 5,
-          lg: 7,
-          xl: 5,
+          lg: 10,
         },
         mt: {
           xs: 3,
@@ -51,23 +46,23 @@ export default function Jumbotron() {
       <Image
         priority
         src={imgSource}
-        alt="Podkrepi.bg heading"
+        alt="Podkrepi.bg banner"
         layout="fill"
         objectFit="cover"
-        objectPosition="70% 12%"
+        objectPosition="75%"
         style={{ zIndex: -1 }}
       />
-      <Container maxWidth="lg">
+      <Container maxWidth="xl">
         <Grid item textAlign="left" sx={{ xs: { mb: 4 }, mb: 8 }}>
           <Typography
             component={'h1'}
             sx={(theme) => ({
               color: theme.palette.common.white,
               fontWeight: 500,
-              mb: 3,
+              mb: 4,
               fontSize: theme.typography.pxToRem(30),
               [theme.breakpoints.up('sm')]: {
-                fontSize: theme.typography.pxToRem(50),
+                fontSize: theme.typography.pxToRem(48),
               },
               [theme.breakpoints.up('lg')]: {
                 fontSize: theme.typography.pxToRem(60),
@@ -93,15 +88,24 @@ export default function Jumbotron() {
             <LinkButton
               sx={{
                 minWidth: {
-                  xs: 270,
-                  md: 320,
+                  xs: 200,
+                  sm: 320,
+                },
+                fontWeight: 600,
+                fontSize: {
+                  xs: 14,
+                  sm: 22,
+                },
+                borderRadius: theme.borders.round,
+                backgroundColor: '#4AC3FF',
+                '&:hover': {
+                  backgroundColor: '#32A9FE',
                 },
               }}
               size="large"
               variant="contained"
-              color="secondary"
               href={routes.campaigns.index}>
-              {t('index:jumbotron.donate')}
+              {t('common:nav.donatе')}
             </LinkButton>
           </Grid>
         </Grid>