feat(wallet): centered text blocks

src/components/Wallet/ImageGradient/index.tsx

@@ -0,0 +1,17 @@
+import { Container, Divider } from '@mui/material'
+import type { BaseBlock } from '@/components/Home/types'
+import css from './styles.module.css'
+
+const ImageGradient = ({ image }: Partial<BaseBlock>) => {
+  if (!image) return null
+
+  return (
+    <Container className={css.container}>
+      <img src={image.src} alt={image.alt} />
+
+      <Divider />
+    </Container>
+  )
+}
+
+export default ImageGradient

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

@@ -0,0 +1,20 @@
+.container {
+  display: none;
+}
+
+.container img {
+  width: 90%;
+}
+
+.container :global .MuiDivider-root {
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}

src/components/Wallet/LegalDisclaimer/index.tsx

@@ -1,14 +1,16 @@
-import { Container, Typography } from '@mui/material'
-import layoutCss from '@/components/common/styles.module.css'
+import { Container, Divider, Typography } from '@mui/material'
 import type { BaseBlock } from '@/components/Home/types'
 import css from './styles.module.css'
 
 const LegalDisclaimer = ({ caption, text }: BaseBlock) => (
-  <Container className={`${layoutCss.containerShort} ${css.container}`}>
+  <Container className={css.container}>
     <Typography variant="caption" component="div" className={css.caption}>
       {caption}
     </Typography>
+
     <div className={css.body}>{text}</div>
+
+    <Divider />
   </Container>
 )
 

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

@@ -1,3 +1,7 @@
+.container {
+  margin-top: 80px;
+}
+
 .container .caption {
   margin-bottom: 16px;
 }
@@ -12,3 +16,7 @@
   line-height: 24px;
   color: var(--mui-palette-primary-light);
 }
+
+.container :global .MuiDivider-root {
+  margin-top: 80px;
+}

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

@@ -13,7 +13,6 @@
 .text {
   margin: 24px auto 0;
   text-align: center;
-  max-width: 725px;
 }
 
 .buttons {

src/content/wallet.json

@@ -247,15 +247,48 @@
       }
     ]
   },
+  {
+    "title": "<b>Get the Latest</b> on Safe{Wallet}",
+    "text": "Sign up to our updates and be informed about new features, improvements, and special announcements.",
+    "buttons": [
+      {
+        "text": "Subscribe",
+        "href": "https://safe.global",
+        "variant": "button"
+      }
+    ],
+    "component": "common/CenteredTextBlock"
+  },
   {
     "component": "commonCMS/Faq"
   },
+  {
+    "title": "Create your <b>Smart Account</b> now",
+    "text": "Still have questions and want to know more about Safe{Wallet}? Watch our demo.",
+    "buttons": [
+      {
+        "text": "Launch Safe{Wallet}",
+        "href": "https://app.safe.global",
+        "variant": "button"
+      },
+      {
+        "text": "View demo",
+        "href": "https://safe.global",
+        "variant": "link"
+      }
+    ],
+    "component": "common/CenteredTextBlock"
+  },
+  {
+    "component": "Wallet/ImageGradient",
+    "image": {
+      "src": "/images/Wallet/laptop-half.png",
+      "alt": "Safe wallet on a laptop"
+    }
+  },
   {
     "component": "Wallet/LegalDisclaimer",
     "caption": "Legal Disclaimer",
     "text": "<p>Safe{Wallet} stands as the leading wallet for Safe Smart Accounts and technology, provided as free open-source software under the GNU General Public License, Version 3.</p><p>For a comprehensive list of attribution notices for third-party software that may be contained in portions of the Safe{Wallet}, please visit <a href=\"https://app.safe.global/licenses\">Licenses</a>. The <a href=\"https://app.safe.global/\">website</a> is operated by Core Contributors GmbH, Berlin, Germany. Safe{Wallet} is a registered trademark owned by the Safe Ecosystem Foundation. The Safe Ecosystem Foundation does not operate any implementations of Safe{Wallet}. Third parties may hold licenses for the Safe trademark and operate implementations of Safe{Wallet} under the foundation's trademark policy available at <a href=\"https://safe.global/trademark\">Trademark</a> and/or other license agreements. Please note that the use of and access to the Safe{Wallet} is subject to terms and conditions provided by Core Contributors GmbH. The Safe Ecosystem Foundation makes no representations, warranties and/or covenants with respect to the Safe Technology (or any implementations of the Safe{Wallet} and/or Safe Smart Accounts) or any third party DeFi protocols, as to their technical properties and/or characteristics or performance, or their actual or potential usefulness or suitability for any particular purpose.</p>"
-  },
-  {
-    "component": "common/TextBlockBanner"
   }
 ]