feat: Recovery banner (#256)

* feat: add Recovery banner in Wallet page

* change button copy

* update blog URL

* bump version

package.json

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

src/components/Core/BannerCta/index.tsx → src/components/common/BannerCta/index.tsx

@@ -6,10 +6,15 @@ import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 
-export const BannerCta = ({ title, buttons, caption }: BaseBlock): ReactElement => {
+export const BannerCta = ({
+  title,
+  buttons,
+  caption,
+  backgroundImage,
+}: BaseBlock & { backgroundImage: string }): ReactElement => {
   return (
     <Container className={layoutCss.containerMedium}>
-      <div className={css.container}>
+      <div className={css.container} style={{ backgroundImage: `url(${backgroundImage})` }}>
         <Chip
           label={
             <Typography variant="caption" color="text.primary">

src/components/Core/BannerCta/styles.module.css → src/components/common/BannerCta/styles.module.css

@@ -5,7 +5,6 @@
   padding: 24px 24px 300px;
   justify-content: space-between;
   margin-bottom: 40px;
-  background-image: url('/images/robot.png');
   background-repeat: no-repeat;
   background-size: contain;
   background-position: bottom;

src/content/core.json

@@ -210,6 +210,7 @@
         "variant": "link"
       }
     ],
-    "component": "Core/BannerCta"
+    "backgroundImage": "/images/robot.png",
+    "component": "common/BannerCta"
   }
 ]

src/content/wallet.json

@@ -18,6 +18,25 @@
     ],
     "component": "Wallet/Intro"
   },
+  {
+    "title": "Safe <u>RecoveryHub</u>",
+    "caption": "New",
+    "buttons": [
+      {
+        "text": "Try now",
+        "href": "https://app.safe.global",
+        "variant": "button",
+        "color": "secondary"
+      },
+      {
+        "text": "Read more",
+        "href": "https://safe.mirror.xyz/WxKSxD9J1bRI-SDOuDvAAIezwVrvWWkpuwuzcLDPSmk",
+        "variant": "link"
+      }
+    ],
+    "backgroundImage": "/images/Wallet/buoy.png",
+    "component": "common/BannerCta"
+  },
   {
     "variant": "3-columns",
     "title": "Your keys. Your coins",