Update homepage UI (#1052)

* Add Jumbotron UI fixes, delete unused images * Remove 'What unites us' section * Finalize Jumbotron section, improve Join Us section * Add new tests for Homepage * Update urgent-campaigns translation * Update translations * Update inlined values
podkrepi-bg · Oct 14, 2022 · fb1bf05 · fb1bf05
1 parent 537d115
commit fb1bf05
Show file tree

Hide file tree

Showing 19 changed files with 153 additions and 217 deletions.
diff --git a/e2e/local/homepage.spec.ts b/e2e/local/homepage.spec.ts
@@ -14,11 +14,8 @@ 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()
+  // Click text=Присъединете се към Подкрепи.бг
+  await page.locator('text=Присъединете се към Подкрепи.бг').click()
 
   // Click h2:has-text("Често задавани въпроси")
   await page.locator('h2:has-text("Често задавани въпроси")').click()
@@ -42,13 +39,33 @@ test('test homepage', async ({ page }) => {
   // Click text=Какви са технологичните ви предимства?
   await page.locator('text=Какви са технологичните ви предимства?').click()
 
-  // Click text=Софтуер с отворен код е установена практика, при която всеки, без ограничение, м
+  // Click text=Използваме модерни решения и технологии за подсигуряване на платформата – React, Next.js като frontend, PostgreSQL като база данни, а цялостната инфраструктура се управлява на принципа на Infrastructure-as-Codе.
   await page
     .locator(
       'text=Използваме модерни решения и технологии за подсигуряване на платформата – React, Next.js като frontend, PostgreSQL като база данни, а цялостната инфраструктура се управлява на принципа на Infrastructure-as-Codе.',
     )
     .click()
 
+  // Click text=Какво представляват „устойчивите решения”?
+  await page.locator('text=Какво представляват „устойчивите решения”?').click()
+
+  // Click text=Една африканска поговорка гласи „Ако искаш да стигнеш бързо, тръгни сам, ако искаш да стигнеш далеч, вървете заедно”.
+  await page
+    .locator(
+      'text=Една африканска поговорка гласи „Ако искаш да стигнеш бързо, тръгни сам, ако искаш да стигнеш далеч, вървете заедно”.',
+    )
+    .click()
+
+  // Click text=Какво представляват „устойчивите решения”?
+  await page.locator('text=Как се финансира Подкрепи.бг?').click()
+
+  // Click text=Подкрепи.бг НЕ удържа комисиони или такси за дейността си от събраните средства за кампаниите.
+  await page
+    .locator(
+      'text=Подкрепи.бг НЕ удържа комисиони или такси за дейността си от събраните средства за кампаниите.',
+    )
+    .click()
+
   // Click text=Вижте всички >> nth=1
   await page.locator('text=Вижте всички').nth(1).click()
   await expect(page).toHaveURL('http://localhost:3040/faq')

diff --git a/e2e/staging/homepage.spec.ts b/e2e/staging/homepage.spec.ts
@@ -16,11 +16,8 @@ test('test homepage on staging', async ({ page }) => {
   // Click text=Кой стои зад Подкрепи.бг?
   await page.locator('text=Кой стои зад Подкрепи.бг?').click()
 
-  // Click text=Какво ни обединява?
-  await page.locator('text=Какво ни обединява?').click()
-
-  // Click text=Искам да помогна на Подкрепи.бг
-  await page.locator('text=Искам да помогна на Подкрепи.бг').click()
+  // Click text=Присъединете се към Подкрепи.бг
+  await page.locator('text=Присъединете се към Подкрепи.бг').click()
 
   // Click h2:has-text("Често задавани въпроси")
   await page.locator('h2:has-text("Често задавани въпроси")').click()
@@ -50,6 +47,26 @@ test('test homepage on staging', async ({ page }) => {
     )
     .click()
 
+  // Click text=Какво представляват „устойчивите решения”?
+  await page.locator('text=Какво представляват „устойчивите решения”?').click()
+
+  // Click text=Една африканска поговорка гласи „Ако искаш да стигнеш бързо, тръгни сам, ако искаш да стигнеш далеч, вървете заедно”.
+  await page
+    .locator(
+      'text=Една африканска поговорка гласи „Ако искаш да стигнеш бързо, тръгни сам, ако искаш да стигнеш далеч, вървете заедно”.',
+    )
+    .click()
+
+  // Click text=Какво представляват „устойчивите решения”?
+  await page.locator('text=Как се финансира Подкрепи.бг?').click()
+
+  // Click text=Подкрепи.бг НЕ удържа комисиони или такси за дейността си от събраните средства за кампаниите.
+  await page
+    .locator(
+      'text=Подкрепи.бг НЕ удържа комисиони или такси за дейността си от събраните средства за кампаниите.',
+    )
+    .click()
+
   // Click text=Вижте всички >> nth=1
   await page.locator('text=Вижте всички').nth(1).click()
   await expect(page).toHaveURL('https://dev.podkrepi.bg/faq')

diff --git a/public/img/family-mobile.png b/public/img/family-mobile.png
diff --git a/public/img/family.jpg b/public/img/family.jpg
diff --git a/public/img/goals-background.jpg b/public/img/goals-background.jpg
diff --git a/public/img/happy-family.jpg b/public/img/happy-family.jpg
diff --git a/public/img/header-image-mobile.jpg b/public/img/header-image-mobile.jpg
diff --git a/public/img/jumbotron-background-image-desktop.jpg b/public/img/jumbotron-background-image-desktop.jpg
diff --git a/public/img/mission-background.jpg b/public/img/mission-background.jpg
diff --git a/public/img/support-us-image.png b/public/img/support-us-image.png
diff --git a/public/img/vision-background.jpg b/public/img/vision-background.jpg
diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json
@@ -39,7 +39,7 @@
   },
   "campaign": {
     "see-all": "Вижте всички",
-    "emergency-causes": "Спешни кампании"
+    "urgent-campaigns": "Спешни кампании"
   },
   "how-we-work": {
     "heading": "Как работи Подкрепи.бг?",
@@ -49,17 +49,8 @@
     "button": "Създайте кампания",
     "text": "Готови ли сте да започнете кампания?"
   },
-  "what-unites-us-section": {
-    "heading": "Какво ни обединява?",
-    "productivity-title": "Продуктивност",
-    "respect-title": "Уважение",
-    "volunteering-title": "Доброволчество",
-    "productivity-content": "Всички доброволци отделят от собственото си свободно време, за да бъдат част от Подкрепи.бг. Те сами са инициирали включването си в Проекта.",
-    "respect-content": "Отнасяме се с уважение един към друг, както и с хората, с които се срещаме в работата си. Изслушваме, съдействаме, а мнението на всеки се взема предвид, защото има значение.",
-    "volunteering-content": "Създадохме дарителска платформа в полза на нуждаещите се и организациите, които им помагат, без да търсим финансова или друга облага."
-  },
-  "help-podkrepi-bg-section": {
-    "want-to-help": "Искам да помогна на Подкрепи.бг",
+  "join-podkrepi-bg-section": {
+    "heading": "Присъединете се към Подкрепи.бг",
     "text": "За да се присъедините към екипа от доброволци, попълнете формата за кандидатстване с Вашите данни и ние ще се свържем с Вас.",
     "become-volunteer": "Станете доброволец"
   }

diff --git a/public/locales/en/index.json b/public/locales/en/index.json
@@ -39,7 +39,7 @@
   },
   "campaign": {
     "see-all": "See all",
-    "emergency-causes": "Urgent campaigns"
+    "urgent-campaigns": "Urgent campaigns"
   },
   "how-we-work": {
     "heading": "How does Pordkprepi.bg work?",
@@ -49,17 +49,8 @@
     "button": "Create a campaign",
     "text": "Are you ready to start a campaign?"
   },
-  "what-unites-us-section": {
-    "heading": "What unites us?",
-    "productivity-title": "Productivity",
-    "respect-title": "Respect",
-    "volunteering-title": "Volunteering",
-    "productivity-content": "All volunteers spend their free time to be part of Podkrepi.bg. They initiated their participation in the Project by themselves.",
-    "respect-content": "We treat each other with respect, as well as the people we meet in our work. We listen, we cooperate, and everyone's opinion is taken into account because it matters.",
-    "volunteering-content": "We have created a donation platform for the benefit of those in need and the organizations that help them, without seeking financial or other benefits."
-  },
-  "help-podkrepi-bg-section": {
-    "want-to-help": "I want to help Podkrepi.bg",
+  "join-podkrepi-bg-section": {
+    "heading": "Join Podkrepi.bg",
     "text": "To join the team of volunteers, fill in the application form with your details and we will contact you.",
     "become-volunteer": "Become a volunteer"
   }

diff --git a/src/components/index/IndexPage.tsx b/src/components/index/IndexPage.tsx
@@ -3,7 +3,6 @@ import Layout from 'components/layout/Layout'
 import Jumbotron from './sections/Jumbotron'
 import CampaignsSection from './sections/CampaignsSection'
 import HowWeWorkSection from './sections/HowWeWorkSection'
-import WhatUnitesUsSection from './sections/WhatUnitesUsSection'
 import WantToHelpPodkrepiBgSection from './sections/WantToHelpPodkrepiBg'
 import FaqSection from './sections/FaqSection'
 import TeamMembersSection from './sections/TeamMembersSection'
@@ -23,7 +22,6 @@ export default function IndexPage() {
       <HowWeWorkSection />
       {/* <ReadyToStartCampaignSection /> */}
       <TeamMembersSection />
-      <WhatUnitesUsSection />
       <WantToHelpPodkrepiBgSection />
       <FaqSection />
       {/* <ReadyToStartCampaignSection /> */}

diff --git a/src/components/index/sections/CampaignsSection.tsx b/src/components/index/sections/CampaignsSection.tsx
@@ -61,7 +61,7 @@ export default function CampaignsSection() {
     return (
       <StyledContainer maxWidth="lg">
         <Heading id="what-we-do" variant="h3" component="h2" className={classes.heading}>
-          {t('index:campaign.emergency-causes')}
+          {t('index:campaign.urgent-campaigns')}
         </Heading>
         <Grid container justifyContent="center" spacing={2}>
           {data?.slice(0, 3).map((campaign, index, array) => (

diff --git a/src/components/index/sections/FaqSection.tsx b/src/components/index/sections/FaqSection.tsx
@@ -21,7 +21,7 @@ export default function FaqSection() {
         {t('common:nav.campaigns.faq')}
       </Heading>
       <Grid container justifyContent="center" spacing={2} sx={{ mb: 12 }}>
-        {data.COMMON_QUESTIONS.slice(0, 3).flatMap(({ header, content, visible }) =>
+        {data.COMMON_QUESTIONS.slice(0, 5).flatMap(({ header, content, visible }) =>
           visible ? (
             <Grid item xs={12} key={header}>
               <ExpandableListItem header={header} content={content} />

diff --git a/src/components/index/sections/Jumbotron.tsx b/src/components/index/sections/Jumbotron.tsx
@@ -1,113 +1,106 @@
 import React from 'react'
+
 import { useTranslation } from 'next-i18next'
-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 { routes } from 'common/routes'
 import theme from 'common/theme'
 
+import { Container, Grid, Typography } from '@mui/material'
+import { createStyles, makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    jumbotronWrapper: {
+      height: theme.spacing(49.375),
+      padding: theme.spacing(6.25, 1),
+      margin: theme.spacing(4, 0, 10, 0),
+      backgroundPosition: '76%',
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+
+      [theme.breakpoints.up('sm')]: {
+        backgroundPosition: '75%',
+      },
+
+      [theme.breakpoints.up('md')]: {
+        marginTop: theme.spacing(7),
+      },
+    },
+
+    textWrapper: {
+      textAlign: 'left',
+
+      [theme.breakpoints.up('md')]: {
+        paddingLeft: theme.spacing(11),
+      },
+    },
+
+    heading: {
+      color: theme.palette.common.white,
+      fontWeight: 500,
+      marginBottom: theme.spacing(4),
+      fontSize: theme.typography.pxToRem(30),
+      maxWidth: theme.spacing(56),
+
+      [theme.breakpoints.up('md')]: {
+        fontSize: theme.typography.pxToRem(32),
+      },
+
+      [theme.breakpoints.up('lg')]: {
+        fontSize: theme.typography.pxToRem(42),
+        maxWidth: theme.spacing(73),
+      },
+    },
+
+    donateButton: {
+      minWidth: theme.spacing(25),
+      fontWeight: 600,
+      borderRadius: theme.borders.round,
+      backgroundColor: '#4AC3FF',
+
+      '&:hover': {
+        backgroundColor: '#32A9FE',
+      },
+
+      [theme.breakpoints.up('md')]: {
+        minWidth: theme.spacing(40),
+      },
+
+      [theme.breakpoints.up('sm')]: {
+        fontSize: theme.typography.pxToRem(22),
+      },
+    },
+  }),
+)
+
 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-mobile.png'
+  const classes = useStyles()
+
+  const bannerSource = '/img/family.jpg'
 
   return (
     <Grid
       container
       direction="column"
       component="section"
-      sx={(theme) => ({
-        height: {
-          lg: '554px',
-          md: '535px',
-        },
-        padding: {
-          xs: theme.spacing(5, 1, 0, 1),
-          lg: theme.spacing(11, 1, 0, 1),
-        },
-        mb: {
-          xs: 5,
-          lg: 10,
-        },
-        mt: {
-          xs: 3,
-          md: 5,
-          lg: 7,
-        },
-        textAlign: 'center',
-        color: theme.palette.common.white,
-        position: 'relative',
-        lg: {
-          height: '950px',
-        },
-      })}>
-      <Image
-        priority
-        src={imgSource}
-        alt="Podkrepi.bg banner"
-        layout="fill"
-        objectFit="cover"
-        objectPosition="75%"
-        style={{ zIndex: -1 }}
-      />
+      className={classes.jumbotronWrapper}
+      style={{ backgroundImage: `url(${bannerSource})` }}>
       <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: 4,
-              fontSize: theme.typography.pxToRem(30),
-              [theme.breakpoints.up('sm')]: {
-                fontSize: theme.typography.pxToRem(48),
-              },
-              [theme.breakpoints.up('lg')]: {
-                fontSize: theme.typography.pxToRem(60),
-                maxWidth: 'md',
-              },
-            })}>
+        <Grid item className={classes.textWrapper}>
+          <Typography component={'h1'} className={classes.heading}>
             {t('index:podkrepi')} -
             <br />
             {t('index:title')}
           </Typography>
-          <Grid
-            item
-            xs={12}
-            sx={{
-              display: 'flex',
-              justifyContent: 'start',
-              flexWrap: 'wrap',
-              gap: {
-                xs: '12px',
-                md: '50px',
-              },
-            }}>
-            <LinkButton
-              sx={{
-                minWidth: {
-                  xs: 200,
-                  sm: 320,
-                },
-                fontWeight: 600,
-                fontSize: {
-                  xs: 14,
-                  sm: 22,
-                },
-                borderRadius: theme.borders.round,
-                backgroundColor: '#4AC3FF',
-                '&:hover': {
-                  backgroundColor: '#32A9FE',
-                },
-              }}
-              size="large"
-              variant="contained"
-              href={routes.campaigns.index}>
-              {t('common:nav.donatе')}
-            </LinkButton>
-          </Grid>
+          <LinkButton
+            className={classes.donateButton}
+            size="large"
+            variant="contained"
+            href={routes.campaigns.index}>
+            {t('common:nav.donatе')}
+          </LinkButton>
         </Grid>
       </Container>
     </Grid>