feat(wallet): vertical stack

package.json

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

src/components/Wallet/VerticalStack/index.tsx

@@ -0,0 +1,51 @@
+import type { DetailedHTMLProps, ReactElement, SourceHTMLAttributes } from 'react'
+import { Container, Grid, Typography } from '@mui/material'
+import type { BaseBlock } from '@/components/Home/types'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+type VideoEmbed = {
+  sources: Array<DetailedHTMLProps<SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>>
+}
+
+export const GridItem = ({ image, title, text }: Partial<BaseBlock>): ReactElement => (
+  <Grid item xs={12} className={css.card}>
+    {image ? <img {...image} /> : null}
+
+    <Typography variant="h5">{title}</Typography>
+
+    {text && (
+      <Typography color="primary.light" component="div">
+        {text}
+      </Typography>
+    )}
+  </Grid>
+)
+
+const VerticalStack = ({ title, video, items = [] }: BaseBlock & { video: VideoEmbed }) => (
+  <Container className={layoutCss.containerShort}>
+    <Grid container spacing="40px" justifyContent="space-between">
+      <Grid item md={6} className={css.titleWrapper}>
+        {video && (
+          <video autoPlay muted playsInline loop className={css.video}>
+            {video.sources.map((s, i) => (
+              <source key={i} {...s} />
+            ))}
+          </video>
+        )}
+
+        <Typography variant="h2">{title}</Typography>
+      </Grid>
+
+      <Grid item xs={12} md={5}>
+        <div className={css.cardWrapper}>
+          {items.map((item, index) => (
+            <GridItem key={index} {...item} />
+          ))}
+        </div>
+      </Grid>
+    </Grid>
+  </Container>
+)
+
+export default VerticalStack

src/components/Wallet/VerticalStack/styles.module.css

@@ -0,0 +1,34 @@
+.cardWrapper {
+  border-radius: 6px;
+  border: 1px solid var(--mui-palette-border-light);
+  overflow: hidden;
+}
+
+.card {
+  border-bottom: 1px solid var(--mui-palette-border-light);
+  margin-bottom: -1px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 48px 40px;
+  text-align: left;
+}
+
+.video {
+  width: 144px;
+}
+
+@media (min-width: 900px) {
+  .titleWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 40px;
+  }
+
+  .showInMd {
+    display: block;
+  }
+}

src/content/wallet.json

@@ -211,6 +211,42 @@
       }
     ]
   },
+  {
+    "component": "Wallet/VerticalStack",
+    "title": "Security built on<br/><b>open-source</b> principles",
+    "video": {
+      "sources": [
+        { "src": "/videos/Home/safe-code-hevc.mov", "type": "video/quicktime; codecs=hvc1" },
+        { "src": "/videos/Home/safe-code-vp9.webm", "type": "video/webm" }
+      ]
+    },
+    "items": [
+      {
+        "title": "Trustless by design",
+        "text": "Your Accounts are secured directly by the blockchain and not by a centralized entity. They do not depend on the Safe{Wallet}'s interface to exist.",
+        "image": {
+          "src": "/images/Wallet/checkmark-gradient.svg",
+          "alt": "Gradient checkmark"
+        }
+      },
+      {
+        "title": "Safe command line interface",
+        "text": "You can interact with your Safe Smart Account directly with code.",
+        "image": {
+          "src": "/images/Wallet/checkmark-gradient.svg",
+          "alt": "Gradient checkmark"
+        }
+      },
+      {
+        "title": "Use with many interfaces",
+        "text": "Portable across different frontends. You can access your Safe Smart Account from other ecosystem apps like Coinshift, Den etc.",
+        "image": {
+          "src": "/images/Wallet/checkmark-gradient.svg",
+          "alt": "Gradient checkmark"
+        }
+      }
+    ]
+  },
   {
     "component": "commonCMS/Faq"
   },