feat: Our mission section

src/components/Governance/OurMission/index.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+import type { BaseBlock } from '@/components/Home/types'
+import HeaderCTA from '@/components/common/HeaderCTA'
+import { Container, Grid, Typography } from '@mui/material'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+
+const GridItemBigTitle = ({ title, text, children, link }: Partial<BaseBlock> & { children?: ReactNode }) => {
+  return (
+    <Grid item xs={12} md={4} className={css.card}>
+      <a href={link?.href} target="_blank" rel="noreferrer" className={css.cardLink}>
+        <div>
+          <Typography variant="h4" mb={1} color="text.primary">
+            {title}
+          </Typography>
+          <Typography color="primary.light">{text}</Typography>
+        </div>
+        <ArrowIcon className={css.icon} />
+        {children ? <div className={css.childrenWrapper}>{children}</div> : null}
+      </a>
+    </Grid>
+  )
+}
+
+const OurMission = (props: Omit<BaseBlock, 'items'> & { items?: Partial<BaseBlock & { tagline: string }>[] }) => {
+  return (
+    <Container className={`${layoutCss.containerShort} ${css.gradientEmphasis}`}>
+      <HeaderCTA {...props} bigTitle />
+
+      <Grid container className={css.gridContainer}>
+        {props.items?.map((item, index) => (
+          <GridItemBigTitle key={index} {...item}>
+            {item.image ? <img src={item.image.src} alt={item.image.alt} /> : null}
+            {item.tagline ? (
+              <Typography variant="caption" className={css.tagline}>
+                {item.tagline}
+              </Typography>
+            ) : null}
+          </GridItemBigTitle>
+        ))}
+      </Grid>
+    </Container>
+  )
+}
+
+export default OurMission

src/components/Governance/OurMission/styles.module.css

@@ -0,0 +1,78 @@
+.gradientEmphasis b {
+  background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.card {
+  border: 1px solid var(--mui-palette-border-light);
+  transition: 0.3s;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+
+.card:first-of-type {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.card:last-of-type {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+.card:hover {
+  border-color: var(--mui-palette-primary-main);
+  z-index: 2;
+  cursor: pointer;
+}
+
+.card:hover .icon {
+  transform: rotate(45deg);
+}
+
+.card:hover .icon path {
+  fill: var(--mui-palette-primary-main);
+}
+
+.icon {
+  position: absolute;
+  top: 32px;
+  right: 32px;
+  transition: transform 0.3s;
+}
+
+.icon path {
+  transition: fill 0.3s;
+}
+
+.childrenWrapper {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.tagline {
+  color: var(--mui-palette-text-primary);
+  text-decoration: underline;
+  text-underline-offset: 8px;
+}
+
+@media (min-width: 600px) {
+  .card:first-of-type {
+    border-top-right-radius: 0px;
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+    margin-right: -1px;
+  }
+
+  .card:last-of-type {
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+}

src/components/common/HeaderCTA/index.tsx

@@ -4,18 +4,18 @@ import { Grid, Typography } from '@mui/material'
 import Link from 'next/link'
 import css from './styles.module.css'
 
-const HeaderCTA = (props: BaseBlock) => {
+const HeaderCTA = (props: BaseBlock & { bigTitle?: boolean }) => {
   return (
     <Grid container mb={7}>
-      <Grid item xs={12} md={8}>
-        <Typography variant="h2" mb={3}>
+      <Grid item xs={12} md={!props.bigTitle ? 8 : undefined}>
+        <Typography variant="h2" mb={3} className={`${props.bigTitle ? css.bigTitle : null}`}>
           {props.title}
         </Typography>
         <Typography variant="body1" color="primary.light">
           {props.text}
         </Typography>
       </Grid>
-      <Grid item xs={12} md={4} className={css.linkButton}>
+      <Grid item xs={12} md={4} className={`${css.linkButton} ${!props.bigTitle && css.alignEnd}`}>
         {props.link && (
           <Link href={props.link.href} target="_blank" rel="noreferrer" passHref>
             <LinkButton className={css.shortPadding}>{props.link.title}</LinkButton>

src/components/common/HeaderCTA/styles.module.css

@@ -1,5 +1,9 @@
+.bigTitle {
+  font-size: 64px;
+  line-height: 64px;
+}
+
 .linkButton {
-  display: flex;
   margin-top: 24px;
 }
 
@@ -8,8 +12,14 @@
 }
 
 @media (min-width: 900px) {
-  .linkButton {
+  .alignEnd {
+    display: flex;
     align-items: end;
     justify-content: end;
   }
+
+  .bigTitle {
+    font-size: 80px;
+    line-height: 88px;
+  }
 }

src/content/governance.json

@@ -136,6 +136,33 @@
       }
     ]
   },
+  {
+    "component": "Governance/OurMission",
+    "title": "<b>Our mission</b> is to establish smart accounts as the default means for web3 interactions",
+    "link": {
+      "title": "Read the SafeDAO constitution",
+      "href": "#"
+    },
+    "items": [
+      {
+        "title": "Vibrant ecosystem",
+        "text": "To foster a vibrant Safe ecosystem built on shared components and standards",
+        "image": {
+          "src": "/images/Governance/ecosystem-avatars.png",
+          "alt": "Ecosystem avatars"
+        },
+        "tagline": "190+ ecosystem projects"
+      },
+      {
+        "title": "Resilience through decentralisation",
+        "text": "The <i>Safe</i> ecosystem including governance shall be independent from any single entity, decentralised, and permissionless"
+      },
+      {
+        "title": "Tokenise value",
+        "text": "Mechanisms should be created to link the growth of the Safe ecosystem to the utility of the Safe token"
+      }
+    ]
+  },
   {
     "component": "Governance/ParallaxGovernanceProcess",
     "variant": "image-text",