Apply latest UI changes on Homepage (#1065)

* Update Homepage - initial changes

* Update sections

* Fix spacing on homepage

* Update buttons and text spacings

* Import team image

* Center team image

* Fix console error

public/locales/bg/campaigns.json

@@ -54,7 +54,7 @@
     "support": "Дарете",
     "support-cause-today": "Подкрепете кауза днес!",
     "share": "Сподели",
-    "donate-now": "Дарете сега",
+    "support-now": "Подкрепете сега",
     "see-all": "Разгледайте всички",
     "see-less": "Вижте по-малко",
     "see-top-10": "Виж ТОП 10",

public/locales/bg/index.json

@@ -18,7 +18,7 @@
   "team-section": {
     "heading": "Кой стои зад Подкрепи.бг?",
     "content": "Подкрепи.бг представлява общност от специалисти в областта на програмирането, правото, маркетинга, дизайна, медицината, финансите, социалното предприемачество и др. Обединени сме от целта да създадем устойчива и прозрачна платформа за дарения, която подкрепя каузи и хора в нужда, като заедно с това популяризира и връща доверието към дарителството в България.",
-    "meet-our-team": "Запознайте се с нашия екип"
+    "meet-our-team": "Запознайте се с екипа ни"
   },
   "support-us-section": {
     "heading": "Подкрепете ни като:",

public/locales/en/campaigns.json

@@ -54,7 +54,7 @@
     "support": "Donate",
     "support-cause-today": "Support a campaign today!",
     "share": "Share",
-    "donate-now": "Donate now",
+    "support-now": "Support now",
     "see-all": "See all",
     "see-less": "See less",
     "see-top-10": "See TOP 10",

src/components/about-project/sections/TechStack.tsx

@@ -94,8 +94,7 @@ export default function TechStack() {
         variant="h3"
         component="h2"
         align="center"
-        className={classes.heading}
-        linkable>
+        className={classes.heading}>
         {t('about-project:tech-stack.title')}
       </Heading>
       <Grid container direction="column" component="section">

src/components/about-project/sections/Timeline.tsx

@@ -27,13 +27,7 @@ export default function Timeline() {
 
   return (
     <Grid container direction="column" component="section" sx={{ textAlign: 'center' }}>
-      <Heading
-        linkable
-        id="our-story"
-        variant="h3"
-        component="h2"
-        align="center"
-        sx={{ pt: 10, pb: 7 }}>
+      <Heading variant="h3" component="h2" align="center" sx={{ pt: 10, pb: 7 }}>
         {t('about-project:timeline')}
       </Heading>
       <Grid item>

src/components/about-project/sections/WhatIsDone.tsx

@@ -129,7 +129,7 @@ export default function WhatIsDone() {
 
   return (
     <StyledGrid container direction="column" className={classes.container}>
-      <Heading id="what-is-done" variant="h3" component="h2" className={classes.heading} linkable>
+      <Heading variant="h3" component="h2" className={classes.heading}>
         {t('about-project:whatIsDoneTitle')}
       </Heading>
       <Grid item container className={classes.icons}>

src/components/campaigns/CampaignCard.tsx

@@ -15,9 +15,9 @@ import {
   CardMedia,
   Typography,
   Box,
-  Link,
 } from '@mui/material'
 import { Favorite } from '@mui/icons-material'
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
 import Image from 'next/image'
 
@@ -31,9 +31,26 @@ const classes = {
   progressBar: `${PREFIX}-progressBar`,
   cardContent: `${PREFIX}-cardContent`,
   seeMoreButton: `${PREFIX}-seeMoreButton`,
+  supportNowButton: `${PREFIX}-supportNowButton`,
 }
 
 const StyledCard = styled(Card)(({ theme }) => ({
+  [`&.${classes.cardWrapper}`]: {
+    position: 'relative',
+    minHeight: theme.spacing(81),
+    backgroundColor: theme.palette.secondary.light,
+    border: 'none',
+    borderRadius: 0,
+
+    '@media(min-width: 325px)': {
+      minHeight: theme.spacing(79),
+    },
+
+    [theme.breakpoints.up('md')]: {
+      minHeight: theme.spacing(87),
+    },
+  },
+
   [`& .${classes.media}`]: {
     backgroundSize: 'contain',
     height: 200,
@@ -44,26 +61,6 @@ const StyledCard = styled(Card)(({ theme }) => ({
     padding: '0',
   },
 
-  [`&.${classes.cardWrapper}`]: {
-    position: 'relative',
-    minHeight: theme.spacing(87),
-    backgroundColor: theme.palette.secondary.light,
-    border: 'none',
-    borderRadius: 0,
-    [theme.breakpoints.down('lg')]: {
-      width: '70%',
-      display: 'inline-block',
-    },
-    [theme.breakpoints.down('md')]: {
-      maxWidth: '400px',
-      width: '100%',
-    },
-    [theme.breakpoints.down('sm')]: {
-      maxWidth: '300px',
-      width: '100%',
-    },
-  },
-
   [`& .${classes.campaignTitle}`]: {
     fontWeight: '500',
     textAlign: 'left',
@@ -87,10 +84,14 @@ const StyledCard = styled(Card)(({ theme }) => ({
     },
   },
 
+  [`& .${classes.supportNowButton}`]: {
+    fontWeight: 'bold',
+  },
+
   [`& .${classes.seeMoreButton}`]: {
     background: 'transparent',
-    color: theme.palette.primary.dark,
-    textDecoration: 'underline',
+    color: theme.palette.common.black,
+    fontWeight: 'bold',
 
     '&:hover': {
       color: theme.palette.primary.main,
@@ -132,9 +133,12 @@ export default function CampaignCard({ campaign }: Props) {
             <CampaignProgress raised={reached} target={target} />
           </Box>
           <Typography variant="body1" component="p" className={classes.progressBar}>
-            {t('campaigns:campaign.reached')} <b>{moneyPublic(reached, currency)}</b>{' '}
-            {t('campaigns:campaign.from')} {t('campaigns:campaign.target')}{' '}
-            <b>{moneyPublic(target, currency)}</b>
+            {t('campaigns:campaign.reached')}{' '}
+            <b>
+              {moneyPublic(reached, currency)}
+              {' / '}
+            </b>
+            {t('campaigns:campaign.target')} <b>{moneyPublic(target, currency)}</b>
           </Typography>
           <Grid item xs={12}>
             <Box mx={2} mb={2}>
@@ -143,16 +147,18 @@ export default function CampaignCard({ campaign }: Props) {
                 href={routes.campaigns.oneTimeDonation(campaign.slug)}
                 variant="contained"
                 color="secondary"
-                endIcon={<Favorite color="error" />}>
-                {t('campaigns:cta.support')}
+                endIcon={<Favorite color="error" />}
+                className={classes.supportNowButton}>
+                {t('campaigns:cta.support-now')}
               </LinkButton>
             </Box>
             <Box mt={3} textAlign="center">
-              <Link
+              <LinkButton
                 href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
+                endIcon={<KeyboardDoubleArrowRightIcon />}
                 className={classes.seeMoreButton}>
                 {t('campaigns:cta.see-more')}
-              </Link>
+              </LinkButton>
             </Box>
           </Grid>
         </Grid>

src/components/common/Heading.tsx

@@ -26,32 +26,14 @@ const Root = styled('div')(({ theme }) => ({
   },
 }))
 
-type Linkable = { id: string; linkable: true } | { linkable?: false }
-
-type HeadingParams = PropsWithChildren<TypographyProps & Linkable> & {
+type HeadingParams = PropsWithChildren<TypographyProps> & {
   component?: React.ElementType
 }
 
-export default function Heading({ children, id, linkable, ...props }: HeadingParams) {
-  const [linkIconIsShown, setlinkIconIsShown] = useState(false)
+export default function Heading({ children, id, ...props }: HeadingParams) {
   return (
-    <Root
-      id={id}
-      onMouseEnter={() => setlinkIconIsShown(true)}
-      onMouseLeave={() => setlinkIconIsShown(false)}>
-      <Typography {...props}>
-        {children}
-        {linkable && (
-          <LinkIconButton
-            href={`#${id}`}
-            sx={{
-              visibility: linkIconIsShown ? 'visible' : 'hidden',
-              md: { visibility: 'hidden' },
-            }}>
-            <LinkIcon className={classes.linkIcon} />
-          </LinkIconButton>
-        )}
-      </Typography>
+    <Root id={id}>
+      <Typography {...props}>{children}</Typography>
     </Root>
   )
 }

src/components/index/sections/CampaignsSection.tsx

@@ -1,4 +1,4 @@
-import { Grid, Box, Container } from '@mui/material'
+import { Grid, Box } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import { useTranslation } from 'next-i18next'
@@ -16,11 +16,18 @@ const classes = {
   heading: `${PREFIX}-heading`,
   container: `${PREFIX}-container`,
   graphic: `${PREFIX}-graphic`,
+  seeAll: `${PREFIX}-seeAll`,
 }
 
-const StyledContainer = styled(Container)(({ theme }) => ({
+const StyledContainer = styled('section')(({ theme }) => ({
+  margin: theme.spacing(7, 3, 0, 3),
+
+  [theme.breakpoints.up('sm')]: {
+    margin: theme.spacing(12, 4, 0, 4),
+  },
+
   [`& .${classes.heading}`]: {
-    paddingBottom: theme.spacing(7),
+    marginBottom: theme.spacing(6),
     color: theme.palette.common.black,
     textAlign: 'center',
     fontWeight: 500,
@@ -38,6 +45,16 @@ const StyledContainer = styled(Container)(({ theme }) => ({
   [`& .${classes.graphic}`]: {
     marginTop: theme.spacing(5),
   },
+
+  [`& .${classes.seeAll}`]: {
+    marginTop: theme.spacing(3),
+    fontWeight: 'bold',
+    color: theme.palette.common.black,
+
+    [theme.breakpoints.up('sm')]: {
+      minWidth: theme.spacing(35),
+    },
+  },
 }))
 
 const cardAlignment = (index: number, array: CampaignResponse[]) => {
@@ -59,11 +76,11 @@ export default function CampaignsSection() {
     return null
   } else {
     return (
-      <StyledContainer maxWidth="lg">
-        <Heading id="what-we-do" variant="h3" component="h2" className={classes.heading}>
+      <StyledContainer>
+        <Heading variant="h3" component="h2" className={classes.heading}>
           {t('index:campaign.urgent-campaigns')}
         </Heading>
-        <Grid container justifyContent="center" spacing={2}>
+        <Grid container justifyContent="center" spacing={4}>
           {data?.slice(0, 4).map((campaign, index, array) => (
             <Grid key={index} item xs={12} sm={6} lg={3}>
               <Box
@@ -80,9 +97,8 @@ export default function CampaignsSection() {
             <LinkButton
               href={routes.campaigns.index}
               variant="outlined"
-              color="primary"
               endIcon={<ChevronRightIcon />}
-              sx={{ marginTop: '2rem' }}>
+              className={classes.seeAll}>
               {t('index:campaign.see-all')}
             </LinkButton>
           </Grid>

src/components/index/sections/FaqSection.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next'
 import LinkButton from 'components/common/LinkButton'
 import { routes } from 'common/routes'
 import * as data from '../../faq/contents'
+import theme from 'common/theme'
 
 import Heading from 'components/common/Heading'
 import ExpandableListItem from 'components/faq/ExpandableListItem'
@@ -12,12 +13,17 @@ export default function FaqSection() {
   const { t } = useTranslation()
 
   return (
-    <Container maxWidth="lg">
+    <Container component="section" maxWidth="lg" style={{ padding: theme.spacing(0, 3) }}>
       <Heading
         id="what-we-do"
         variant="h4"
         component="h2"
-        sx={(theme) => ({ pb: 10, color: theme.palette.primary.dark, textAlign: 'center' })}>
+        sx={(theme) => ({
+          mb: 6,
+          color: theme.palette.primary.dark,
+          textAlign: 'center',
+          fontWeight: 500,
+        })}>
         {t('common:nav.campaigns.faq')}
       </Heading>
       <Grid container justifyContent="center" spacing={2} sx={{ mb: 12 }}>
@@ -30,13 +36,20 @@ export default function FaqSection() {
             []
           ),
         )}
-        <LinkButton
-          href={routes.faq}
-          variant="outlined"
-          endIcon={<ChevronRightIcon />}
-          sx={{ my: 4 }}>
-          {t('index:campaign.see-all')}
-        </LinkButton>
+        <Grid item xs={12} textAlign="center">
+          <LinkButton
+            href={routes.faq}
+            variant="outlined"
+            sx={{
+              marginTop: theme.spacing(3),
+              fontWeight: 'bold',
+              color: theme.palette.common.black,
+              minWidth: { sm: theme.spacing(35) },
+            }}
+            endIcon={<ChevronRightIcon />}>
+            {t('index:campaign.see-all')}
+          </LinkButton>
+        </Grid>
       </Grid>
     </Container>
   )

src/components/index/sections/HowWeWorkSection.tsx

@@ -9,21 +9,22 @@ export default function HowWeWorkSection() {
   const { t, i18n } = useTranslation()
 
   return (
-    <Grid container direction="column" component="section" sx={{ textAlign: 'center', mb: 5 }}>
+    <Grid
+      container
+      direction="column"
+      component="section"
+      sx={{ textAlign: 'center', mt: { xs: 8, sm: 12 }, px: 3 }}>
       <Heading
-        id="how-we-work"
         variant="h4"
         component="h2"
-        linkable
         sx={(theme) => ({
-          pt: 10,
-          pb: 7,
-          px: 2,
+          mb: 6,
           color: theme.palette.primary.dark,
+          fontWeight: 500,
         })}>
         {t('index:how-we-work.heading')}
       </Heading>
-      <Box sx={{ px: 3 }}>
+      <Box>
         <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

@@ -22,7 +22,7 @@ export default function Jumbotron() {
         backgroundImage: `url(${bannerSource})`,
         height: theme.spacing(49.375),
         padding: theme.spacing(6.25, 1),
-        margin: theme.spacing(4, 0, 10, 0),
+        margin: { xs: theme.spacing(4, 0, 8, 0), sx: theme.spacing(4, 0, 12, 0) },
         backgroundPosition: '75%',
         backgroundSize: 'cover',
         backgroundRepeat: 'no-repeat',