feat: add Recovery banner in Wallet page

safe-global · Dec 7, 2023 · a5991f0 · a5991f0
1 parent aea87d0
commit a5991f0
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/public/images/Wallet/buoy.png b/public/images/Wallet/buoy.png
diff --git a/src/components/Core/BannerCta/index.tsx → src/components/common/BannerCta/index.tsx b/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">

diff --git a/...mponents/Core/BannerCta/styles.module.css → ...onents/common/BannerCta/styles.module.css b/...mponents/Core/BannerCta/styles.module.css → ...onents/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;

diff --git a/src/content/core.json b/src/content/core.json
@@ -210,6 +210,7 @@
         "variant": "link"
       }
     ],
-    "component": "Core/BannerCta"
+    "backgroundImage": "/images/robot.png",
+    "component": "common/BannerCta"
   }
 ]
diff --git a/src/content/wallet.json b/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 Docs",
+        "href": "",
+        "variant": "link"
+      }
+    ],
+    "backgroundImage": "/images/Wallet/buoy.png",
+    "component": "common/BannerCta"
+  },
   {
     "variant": "3-columns",
     "title": "Your keys. Your coins",