feat: FeatureCards component

src/components/Wallet/FeatureCards/index.tsx

@@ -0,0 +1,23 @@
+import type { BaseBlock } from '@/components/Home/types'
+import { Container, Grid, Typography } from '@mui/material'
+import layoutCss from '@/components/common/styles.module.css'
+
+const FeatureCards = ({ title, text, items = [] }: BaseBlock) => {
+  return (
+    <Container className={layoutCss.containerMedium}>
+      <Grid container justifyContent="space-between" columnSpacing="30px" rowGap="30px">
+        <Grid item xs={12} md={7}>
+          <Typography variant="h2">{title}</Typography>
+        </Grid>
+
+        {text && (
+          <Grid item xs={12} md={5} alignContent="flex-end">
+            <Typography variant="h5">{text}</Typography>
+          </Grid>
+        )}
+      </Grid>
+    </Container>
+  )
+}
+
+export default FeatureCards

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

@@ -1,7 +1,7 @@
 .title {
   text-align: center;
   max-width: 650px;
-  margin-bottom: 48px;
+  margin: 0 auto 48px;
 }
 
 .image {

src/content/wallet.json

@@ -103,6 +103,31 @@
       }
     ]
   },
+  {
+    "items": [
+      {
+        "caption": "Individual users",
+        "title": "Secure Your Savings Beyond a Seed Phrase",
+        "text": "Protect your assets with multi-signature security, giving you peace of mind without relying solely on a seed phrase.",
+        "image": {
+          "src": "/images/Home/safe-shield.png",
+          "alt": "Safe Smart Account shield"
+        },
+        "component": "Wallet/BigImageCard"
+      },
+      {
+        "caption": "Organizations",
+        "title": "Manage Assets Together, Securely",
+        "text": "Collaboratively manage your organization's assets with multi-signature approvals, ensuring security and transparency every step of the way.",
+        "image": {
+          "src": "/images/Home/safe-shield.png",
+          "alt": "Safe Smart Account shield"
+        },
+        "component": "Wallet/BigImageCard"
+      }
+    ],
+    "component": "Wallet/BigCardsGrid"
+  },
   {
     "component": "Wallet/VerticalSlide",
     "title": "Defend assets with <b>multi-signature</b> security",
@@ -160,6 +185,56 @@
       }
     ]
   },
+  {
+    "component": "Wallet/FeatureCards",
+    "title": "<b>More features beyond</b> multisigs",
+    "text": "Safe is more than just secure asset storage. It's your entry point to onchain activities.",
+    "items": [
+      {
+        "isNew": true,
+        "caption": "Trade seamlessly",
+        "title": "Swap like a pro",
+        "text": "with MEV protection and security, ensuring your intent-based transactions will not fail.",
+        "image": {
+          "src": "/images/Wallet/Feature/trade.png",
+          "alt": "Token swap modal"
+        }
+      },
+      {
+        "caption": "Optimise",
+        "title": "Batch transactions",
+        "text": "To save gas and to avoid losing time gathering signatures from everyone.",
+        "image": {
+          "src": "/images/Wallet/Feature/trade.png",
+          "alt": "Token swap modal"
+        }
+      },
+      {
+        "isNew": true,
+        "caption": "Earn",
+        "title": "Stake ETH Securely",
+        "text": "Stake directly from your Safe{Wallet} with robust multisig security and contribute to a stronger, safer Ethereum.",
+        "image": {
+          "src": "/images/Wallet/Feature/trade.png",
+          "alt": "Token swap modal"
+        }
+      },
+      {
+        "caption": "All-in-one",
+        "title": "Explore Safe Apps",
+        "text": "Swapping, staking, NFTs, identity and more. Interact with 200+ apps integrated with Safe.",
+        "link": {
+          "title": "View ecosystem projects",
+          "href": "https://safe.global/ecosystem",
+          "variant": "link"
+        },
+        "image": {
+          "src": "/images/Wallet/Feature/trade.png",
+          "alt": "Token swap modal"
+        }
+      }
+    ]
+  },
   {
     "title": "Introducing<br>Native Swaps",
     "caption": "New feature",