feat: Update Homepage copy and Footer content (#244)

* feat: update navbar with the governance link

* feat: update footer content and links

* feat: update homepage Hero headline

* feat: update footer buttons

* feat: update supported projects mentions and typos

* refactor: use ButtonsWrapper component in Home/Intro

* refactor: use ButtonsWrapper

* feat: rewrite Homepage meta title

* fix: use break-word in title

* fix: Home Intro buttons orientation

* fix: correct the audit and bounty numbers

* refactor: use theme H1 for page Hero section

* fix: move text block to respect the spacings

* chore: bump version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "safe-homepage",
   "homepage": "https://github.com/safe-global/safe-homepage",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

src/components/Careers/Cards/index.tsx

@@ -61,7 +61,7 @@ export const Cards = ({
     <Container id={id} sx={{ marginBottom: '80px' }} className={layoutCss.containerMedium}>
       <Grid container spacing={{ xs: 2, md: '30px', xl: '50px' }}>
         <Grid item xs={12}>
-          <Typography variant="h1" className={css.title} mb={{ xs: 3, md: '50px' }}>
+          <Typography variant="h1" textAlign="center" mb={{ xs: 3, md: '50px' }}>
             {title}
           </Typography>
         </Grid>

src/components/Careers/Cards/styles.module.css

@@ -21,10 +21,6 @@
   transform: rotate(45deg);
 }
 
-.title {
-  text-align: center;
-}
-
 .cardTitle {
   margin-bottom: 16px;
 }

src/components/Careers/Intro/index.tsx

@@ -32,7 +32,7 @@ export const Intro = ({
         </Grid>
 
         <Grid item xs={12} md={10} xl={5}>
-          <Typography variant="h1" className={css.title}>
+          <Typography variant="h1" textAlign="center">
             {title}
           </Typography>
         </Grid>

src/components/Careers/Intro/styles.module.css

@@ -28,15 +28,6 @@
   margin-top: 0px;
 }
 
-/* TODO: Use h1 from theme when implemented
-https://github.com/safe-global/safe-homepage/issues/11 */
-.title {
-  font-size: 64px;
-  line-height: 64px;
-  text-align: center;
-  padding: 0;
-}
-
 .text {
   text-align: center;
 }
@@ -46,11 +37,6 @@ https://github.com/safe-global/safe-homepage/issues/11 */
     gap: 24px;
   }
 
-  .title {
-    font-size: 80px;
-    line-height: 88px;
-  }
-
   .bg {
     width: 900px;
     height: 900px;

src/components/Core/BannerCta/index.tsx

@@ -1,13 +1,12 @@
-import { Box, Button, Chip, Typography } from '@mui/material'
+import { Chip, Typography } from '@mui/material'
 import { Container } from '@mui/system'
 import type { ReactElement } from 'react'
 
 import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 import clsx from 'clsx'
-import LinkButton from '@/components/common/LinkButton'
-import Link from 'next/link'
+import ButtonsWrapper from '@/components/common/ButtonsWrapper'
 
 export const BannerCta = ({ title, buttons, caption }: BaseBlock): ReactElement => {
   return (
@@ -26,28 +25,7 @@ export const BannerCta = ({ title, buttons, caption }: BaseBlock): ReactElement
           <Typography variant="h2" color="text.primary" mt={3} mb={5}>
             {title}
           </Typography>
-          {buttons ? (
-            <Box display="flex" gap={3} color="white" flexDirection={{ xs: 'column', md: 'row' }} alignItems="center">
-              {buttons.map((button, index) => {
-                const { text, variant, href } = button
-                const isButton = variant === 'button'
-
-                return (
-                  <Link key={index} href={href} target="_blank" rel="noreferrer" passHref>
-                    {isButton ? (
-                      <Button variant="contained" size="large" color="secondary">
-                        {text}
-                      </Button>
-                    ) : (
-                      <LinkButton color="secondary" sx={{ width: 'fit-content' }}>
-                        {text}
-                      </LinkButton>
-                    )}
-                  </Link>
-                )
-              })}
-            </Box>
-          ) : null}
+          <ButtonsWrapper buttons={buttons} />
         </Container>
       </div>
     </Container>

src/components/Core/BannerCta/styles.module.css

@@ -6,7 +6,6 @@
   text-align: center;
   background-color: var(--mui-palette-border-light);
   border-radius: 24px;
-  color: var(--mui-palette-text-dark);
   padding: 24px 24px 300px;
   justify-content: space-between;
   margin-bottom: 40px;

src/components/Core/Intro/index.tsx

@@ -29,7 +29,7 @@ const CoreIntro = ({ title, text, link }: BaseBlock) => {
           </video>
         </Grid>
         <Grid item md={6}>
-          <Typography className={css.title} variant="h1" mb={4}>
+          <Typography variant="h1" mb={4}>
             {title}
           </Typography>
           <Typography variant="h4" component="div" mb={5}>

src/components/Core/Intro/styles.module.css

@@ -32,12 +32,6 @@
   margin: auto;
 }
 
-.title {
-  font-size: 64px;
-  line-height: 64px;
-  letter-spacing: -0.01em;
-}
-
 .video {
   max-width: 90%;
   height: auto;
@@ -53,11 +47,6 @@
     padding-top: 30px;
     margin-bottom: 120px;
   }
-
-  .title {
-    font-size: 80px;
-    line-height: 82px;
-  }
 }
 
 @keyframes bounce {