feat: move section content back to the .json file

src/components/Wallet/Hero/index.tsx

@@ -1,25 +1,24 @@
 import { useRef, useState } from 'react'
 import { ButtonBase, Container, Typography } from '@mui/material'
-import { type BaseBlockEntry } from '@/config/types'
-import RichText from '@/components/common/RichText'
-import ButtonsWrapper from '@/components/Token/ButtonsWrapper'
-import { isAsset, isEntryTypeBaseBlock, isEntryTypeButton } from '@/lib/typeGuards'
-import { useIsMediumScreen } from '@/hooks/useMaxWidth'
+import ButtonsWrapper from '@/components/common/ButtonsWrapper'
+import useResponsiveImages from '@/hooks/useResponsiveImages'
+import type { BaseBlock } from '@/components/Home/types'
+import type { ImageObj } from '@/hooks/useResponsiveImages'
 import css from './styles.module.css'
 
-const Hero = (props: BaseBlockEntry) => {
-  const isMediumScreen = useIsMediumScreen()
+const Hero = ({
+  caption,
+  title,
+  text,
+  buttons,
+  items,
+  image,
+  backgroundImage,
+}: BaseBlock & { backgroundImage: ImageObj }) => {
+  const [bgImage] = useResponsiveImages(backgroundImage)
   const [isPlaying, setIsPlaying] = useState(false)
   const videoRef = useRef<HTMLVideoElement>(null)
 
-  const { caption, title, text, buttons, items, image, bgImage } = props.fields
-
-  const buttonsList = buttons?.filter(isEntryTypeButton) ?? []
-  const itemsList = items?.filter(isEntryTypeBaseBlock) ?? []
-
-  const imageURL = isAsset(image) && image.fields.file?.url ? image.fields.file.url : ''
-  const bgImageURL = isAsset(bgImage) && bgImage.fields.file?.url ? bgImage.fields.file.url : ''
-
   const playVideo = () => {
     videoRef.current?.play()
     setIsPlaying(true)
@@ -36,23 +35,19 @@ const Hero = (props: BaseBlockEntry) => {
             {caption}
           </Typography>
 
-          <div className={css.title}>
-            <RichText {...title} />
-          </div>
+          <Typography variant="h1" className={css.title}>
+            {title}
+          </Typography>
 
-          {text && (
-            <div className={css.text}>
-              <RichText {...text} />
-            </div>
-          )}
+          <Typography className={css.text}>{text}</Typography>
 
-          {buttonsList.length > 0 && <ButtonsWrapper buttons={buttonsList} />}
+          <ButtonsWrapper buttons={buttons} />
         </div>
       </Container>
 
       <div className={css.watchDemo}>
         {/* Networks image does not show in smaller resolutions */}
-        <div className={css.bg} style={{ backgroundImage: `url(${!isMediumScreen ? bgImageURL : ''})` }}>
+        <div className={css.bg} style={{ backgroundImage: `url(${bgImage})` }}>
           <div className={css.videoContainer}>
             <div className={`${css.playButton} ${isPlaying ? css.hidden : ''}`}>
               <ButtonBase onClick={playVideo}>
@@ -62,7 +57,7 @@ const Hero = (props: BaseBlockEntry) => {
               <Typography>Watch demo</Typography>
             </div>
 
-            <video ref={videoRef} controls={isPlaying} poster={imageURL} className={css.video}>
+            <video ref={videoRef} controls={isPlaying} poster={image?.src} className={css.video}>
               <source src="/videos/Wallet/wallet-hero-video.mp4" type="video/mp4" />
             </video>
           </div>
@@ -74,15 +69,13 @@ const Hero = (props: BaseBlockEntry) => {
       <Container className={css.container}>
         <Typography variant="caption">They use Safe&#123;Wallet&#125;</Typography>
 
-        <div className={css.logosWrapper}>
-          {itemsList.map((item, index) => {
-            const { image } = item.fields
-
-            const imageURL = isAsset(image) && image.fields.file?.url ? image.fields.file.url : ''
-
-            return <img key={index} src={imageURL} alt="Logo" />
-          })}
-        </div>
+        {items ? (
+          <div className={css.logosWrapper}>
+            {items.map(({ image }, index) => (
+              <img key={index} src={image?.src} alt={image?.alt} />
+            ))}
+          </div>
+        ) : undefined}
       </Container>
     </>
   )

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

@@ -2,7 +2,7 @@
   background-position-x: center;
   background-repeat: no-repeat;
   overflow: visible;
-  background-size: cover;
+  background-size: contain;
   position: relative;
 }
 
@@ -32,11 +32,7 @@
 .text {
   max-width: 1170px;
   text-align: center;
-}
-
-.title p,
-.text p {
-  margin: 0;
+  color: var(--mui-palette-primary-text);
 }
 
 .logosWrapper {

src/components/Wallet/index.tsx

@@ -1,4 +1,11 @@
 import walletContent from '@/content/wallet.json'
+import type { getStaticProps } from '@/pages/wallet'
+import type { InferGetStaticPropsType } from 'next'
+import ChainsContext from '@/contexts/ChainsContext'
 import PageContent from '../common/PageContent'
 
-export const Wallet = () => <PageContent content={walletContent} path="wallet.json" />
+export const Wallet = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
+  <ChainsContext.Provider value={props.chainsData}>
+    <PageContent content={walletContent} path="wallet.json" />
+  </ChainsContext.Provider>
+)

src/config/routes.ts

@@ -1,6 +1,6 @@
 export const AppRoutes = {
   '404': '/404',
-  wallet: '/wallet-new',
+  wallet: '/wallet',
   trademark: '/trademark',
   token: '/token',
   terms: '/terms',

src/content/wallet.json

@@ -5,18 +5,57 @@
     "component": "common/MetaTags"
   },
   {
-    "image": {
-      "src": "/images/Wallet/clients.png",
-      "alt": "Web and mobile clients"
-    },
-    "title": "The most secure way to own assets",
+    "component": "Wallet/Hero",
+    "caption": "across 14+ networks",
+    "title": "Keep your assets <b>Safe</b>",
+    "text": "Use the multisig trusted by Vitalik Buterin and leading web3 projects to secure over $100 billion.",
     "buttons": [
       {
         "text": "Launch wallet",
-        "href": "https://app.safe.global"
+        "href": "https://app.safe.global",
+        "variant": "button"
+      }
+    ],
+    "image": {
+      "src": "/images/Wallet/laptop-safe-wallet.png",
+      "alt": "Safe wallet web view"
+    },
+    "items": [
+      {
+        "image": {
+          "src": "/images/1kx-logo.svg",
+          "alt": "1kx logo"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/chainlink.svg",
+          "alt": "Chainlink logo"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/aave-wordmark.png",
+          "alt": "1kx logo"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/starknet-logo.png",
+          "alt": "Starknet logo"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/ens.svg",
+          "alt": "ENS logo"
+        }
       }
     ],
-    "component": "Wallet/Intro"
+    "backgroundImage": {
+      "md": "/images/Wallet/hero-fg.png",
+      "alt": "Networks circled logos"
+    }
   },
   {
     "title": "Introducing<br>Native Swaps",

src/pages/wallet.tsx

@@ -0,0 +1,19 @@
+import type { InferGetStaticPropsType, NextPage } from 'next'
+import { Wallet } from '@/components/Wallet'
+import { loadChainsData } from '@/lib/loadChainsData'
+
+const WalletPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (props) => {
+  return <Wallet {...props} />
+}
+
+export async function getStaticProps() {
+  const chainsData = await loadChainsData()
+
+  return {
+    props: {
+      chainsData,
+    },
+  }
+}
+
+export default WalletPage