feat: Resource hub section

src/components/Governance/ResourceHub/index.tsx

@@ -0,0 +1,23 @@
+import type { BaseBlock } from '@/components/Home/types'
+import HeaderCTA from '@/components/common/HeaderCTA'
+import { GridItem } from '@/components/common/UspBlock'
+import { Container, Grid } from '@mui/material'
+import css from './styles.module.css'
+import layoutCss from '@/components/common/styles.module.css'
+
+const ResourceHub = ({ items, ...props }: BaseBlock) => {
+  return (
+    <Container className={layoutCss.containerShort}>
+      <HeaderCTA {...props} />
+
+      {/* TODO: replace element after refactoring UspBlock/ItemGrid */}
+      <Grid container className={css.gridContainer}>
+        {items?.map((item, index) => (
+          <GridItem key={index} width={4} {...item} />
+        ))}
+      </Grid>
+    </Container>
+  )
+}
+
+export default ResourceHub

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

@@ -0,0 +1,12 @@
+.gridContainer {
+  border: 1px solid var(--mui-palette-border-light);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-top: 24px;
+}
+
+@media (min-width: 900px) {
+  .gridContainer {
+    margin-top: 56px;
+  }
+}

src/components/common/UspBlock/index.tsx

@@ -1,59 +1,47 @@
-import { Chip, Container, Grid, Typography } from '@mui/material'
+import { Container, Grid, Typography } from '@mui/material'
 import type { GridProps } from '@mui/material'
 import type { ReactElement } from 'react'
 import type { BaseBlock } from '@/components/Home/types'
 import css from './styles.module.css'
 import layoutCss from '@/components/common/styles.module.css'
+import Link from 'next/link'
+import LinkButton from '@/components/common/LinkButton'
 
-const GridItem = ({ image, title, text, caption, width = 4 }: BaseBlock & { width: GridProps['md'] }): ReactElement => {
+export const GridItem = ({
+  image,
+  title,
+  text,
+  link,
+  width = 4,
+}: Partial<BaseBlock> & { width: GridProps['md'] }): ReactElement => {
   return (
-    <Grid
-      item
-      xs={12}
-      md={width}
-      className={css.gridItems}
-      display="flex"
-      flexDirection="column"
-      justifyContent="space-between"
-    >
+    <Grid item xs={12} md={width} className={css.gridItems}>
       <div>
         {image ? <img {...image} /> : null}
         <Typography variant="h4" className={css.title}>
           {title}
         </Typography>
         <Typography color="primary.light">{text}</Typography>
       </div>
-      {caption ? (
-        <Chip
-          label={
-            <Typography variant="caption" color="primary.main">
-              {caption}
-            </Typography>
-          }
-          className={css.comingSoonChip}
-          variant="outlined"
-        />
-      ) : null}
+      {link && (
+        <Link href={link.href} target="_blank" rel="noreferrer" passHref>
+          <LinkButton>{link.title}</LinkButton>
+        </Link>
+      )}
     </Grid>
   )
 }
 
-export type UspBlockProps = {
-  variant: '3-columns' | '4-columns'
-  title: string
-  text?: string
-  items: BaseBlock[]
-}
-
-const UspBlock = ({ variant, title, text, items }: UspBlockProps): ReactElement => (
+// Refactor: unify the ItemGrid and accept a GridItem component
+const UspBlock = ({ variant, title, text, items }: BaseBlock & { variant: '3-columns' | '4-columns' }) => (
   <Container>
     <Grid container className={layoutCss.containerShort} flexDirection="column" alignItems="center">
       <Typography variant="h2" mb={3}>
         {title}
       </Typography>
       {text && <Typography>{text}</Typography>}
       <Grid container className={css.roundCorners} mt={{ xs: 3, md: 7 }}>
-        {items.map((item, index) => (
+        {items?.map((item, index) => (
           <GridItem key={index} width={variant === '3-columns' ? 4 : 3} {...item} />
         ))}
       </Grid>

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

@@ -11,6 +11,10 @@
   margin-left: -1px;
   margin-bottom: -1px;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
 .roundCorners {
@@ -20,13 +24,6 @@
 }
 
 .title {
-  margin-top: 24px;
+  margin-top: 16px;
   margin-bottom: 16px;
 }
-
-.comingSoonChip {
-  border-color: var(--mui-palette-primary-main);
-  width: fit-content;
-  height: 24px;
-  margin-top: 24px;
-}

src/content/governance.json

@@ -48,6 +48,94 @@
       "highlight": "2K delegates."
     }
   },
+  {
+    "component": "Governance/ResourceHub",
+    "title": "Resource hub",
+    "link": {
+      "title": "Go to governance hub",
+      "href": "gov.safe.global"
+    },
+    "items": [
+      {
+        "image": {
+          "src": "/images/shield-check-gradient.svg",
+          "alt": "checked shield",
+          "width": "50px"
+        },
+        "title": "What is Safe{DAO}",
+        "text": "SafeDAO is a decentralised collective, stewarding the thriving ecosystem around Safe smart accounts on Ethereum and other blockchains",
+        "link": {
+          "title": "Learn more",
+          "href": "#"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/tokens-gradient.svg",
+          "alt": "stacked tokens",
+          "width": "50px"
+        },
+        "title": "What is the Safe{Token}",
+        "text": "The Safe token represents the growing value of the Safe ecosystem",
+        "link": {
+          "title": "Learn more",
+          "href": "#"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/external-link-gradient.svg",
+          "alt": "external link",
+          "width": "50px"
+        },
+        "title": "Who are Safe{Guardians}",
+        "text": "Safe Guardians are active community members who have verifiable proof of commitment to the Safe vision",
+        "link": {
+          "title": "Learn more",
+          "href": "#"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/teach-gradient.svg",
+          "alt": "teacher pointing at board",
+          "width": "50px"
+        },
+        "title": "How to delegate",
+        "text": "Token holders can delegate their votes to any address of their choice or to Safe Guardians using the SafeDAO Governance app within Safe{Wallet} or Snapshot",
+        "link": {
+          "title": "Learn more",
+          "href": "#"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/building-gradient.svg",
+          "alt": "building",
+          "width": "50px"
+        },
+        "title": "What is the Safe Grants Program",
+        "text": "SGP fosters a thriving community of contributors within the Safe ecosystem by funding ideas, projects, and integrations that align with <i>Safe</i>",
+        "link": {
+          "title": "Learn more",
+          "href": "#"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/shield-check-gradient.svg",
+          "alt": "checked shield",
+          "width": "50px"
+        },
+        "title": "What is the Safe Ecosystem Foundation",
+        "text": "SEF is a steward of SafeDAO, responsible for facilitating and administering the decisions voted in by the members of SafeDAO",
+        "link": {
+          "title": "Learn more",
+          "href": "#"
+        }
+      }
+    ]
+  },
   {
     "component": "Governance/ParallaxGovernanceProcess",
     "variant": "image-text",