feat(Wallet): Big cards grid (#448)

* feat: Hero section

* fix: lint

* feat: add "Watch demo" play button

* fix: control video play

* feat: add a bottom gradient over the paused video

* styles: fix border-radius on video

* feat: temporarily use /wallet-new slug because page path  conflct with the current version

* feat: commonCMS/Marquee

* feat: generic Card grid

* feat: declare content in wallet.json

* fix: undo unrelated change

* fix: do not render the component without `items`

* fix: remove conditional operator

src/components/Wallet/BigCardsGrid/index.tsx

@@ -0,0 +1,28 @@
+import { Container, Grid } from '@mui/material'
+import type { BaseBlock } from '@/components/Home/types'
+import layoutCss from '@/components/common/styles.module.css'
+import getComponentByName from '@/lib/getComponentByName'
+
+const BigCardsGrid = ({ items }: { items: Array<BaseBlock['items'] & { component: string }> }) => {
+  if (!items || !items.length) return null
+
+  return (
+    <Container className={layoutCss.containerShort}>
+      <Grid container spacing={{ xs: '30px', xl: '50px' }}>
+        {items.map((item, index) => {
+          const { component } = item
+
+          const CardComponent = getComponentByName(component, () => <></>)
+
+          return (
+            <Grid key={index} item xs={12} md={6}>
+              <CardComponent {...item} />
+            </Grid>
+          )
+        })}
+      </Grid>
+    </Container>
+  )
+}
+
+export default BigCardsGrid

src/components/Wallet/BigImageCard/index.tsx

@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material'
+import type { BaseBlock } from '@/components/Home/types'
+import css from './styles.module.css'
+
+const BigImageCard = ({ caption, title, text, image }: BaseBlock) => (
+  <div className={css.card}>
+    <Typography variant="caption">{caption}</Typography>
+
+    <img {...image} className={css.image} />
+
+    <Typography variant="h4" className={css.title}>
+      {title}
+    </Typography>
+
+    {text ? <Typography color="primary.light">{text}</Typography> : null}
+  </div>
+)
+
+export default BigImageCard

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

@@ -0,0 +1,26 @@
+.card {
+  outline: 1px solid var(--mui-palette-border-light);
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  height: 100%;
+}
+
+.image {
+  width: 240px;
+}
+
+.title {
+  width: 80%;
+  margin-bottom: 24px;
+}
+
+@media (min-width: 600px) {
+  .card {
+    padding: 32px;
+  }
+}

src/components/Wallet/index.tsx

@@ -1,11 +1,4 @@
 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 = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
-  <ChainsContext.Provider value={props.chainsData}>
-    <PageContent content={walletContent} path="wallet.json" />
-  </ChainsContext.Provider>
-)
+export const Wallet = () => <PageContent content={walletContent} path="wallet.json" />

src/content/wallet.json

@@ -78,6 +78,31 @@
     ],
     "component": "common/TitleSlidingIcons"
   },
+  {
+    "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"
+  },
   {
     "title": "Introducing<br>Native Swaps",
     "caption": "New feature",

src/pages/wallet.tsx

@@ -1,19 +1,6 @@
-import type { InferGetStaticPropsType, NextPage } from 'next'
+import type { 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,
-    },
-  }
-}
+const WalletPage: NextPage = () => <Wallet />
 
 export default WalletPage