feat(wallet): gradient stats

src/components/Wallet/GradientNumbers/index.tsx

@@ -0,0 +1,28 @@
+import { Container, Grid, Typography } from '@mui/material'
+import { type ReactElement } from 'react'
+import type { BaseBlock } from '@/components/Home/types'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+const Stats = ({ title, items }: BaseBlock): ReactElement => (
+  <Container className={layoutCss.containerShort}>
+    <Typography variant="h2" mb={3} textAlign="center">
+      {title}
+    </Typography>
+
+    <Grid container spacing={{ xs: '30px', xl: '50px' }} justifyContent="space-between">
+      {items?.map((item, index) => (
+        <Grid item xs={12} md={4} key={index}>
+          <a href={item.link?.href} target="_blank" rel="noreferrer" className={css.metric}>
+            {/* TODO: Fetch these values from a Dune query */}
+            <p className={css.value}>{item.title}</p>
+
+            <Typography variant="caption">{item.text}</Typography>
+          </a>
+        </Grid>
+      ))}
+    </Grid>
+  </Container>
+)
+
+export default Stats

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

@@ -0,0 +1,29 @@
+.metric {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.metric span {
+  transition: color var(--transition-duration) ease;
+}
+
+.metric:hover span {
+  color: var(--mui-palette-primary-main);
+}
+
+.value {
+  margin: 0;
+  font-size: 64px;
+  line-height: 64px;
+  background: linear-gradient(270deg, rgba(18, 255, 128, 1) 0%, rgba(95, 221, 255, 1) 100%);
+  background-clip: text;
+  color: transparent;
+}
+
+@media (min-width: 600px) {
+  .value {
+    font-size: 80px;
+    line-height: 100px;
+  }
+}

src/content/wallet.json

@@ -58,6 +58,7 @@
     }
   },
   {
+    "component": "common/TitleSlidingIcons",
     "title": "Available on 15+ networks",
     "text": "including testnets",
     "reverse": true,
@@ -75,8 +76,32 @@
       { "name": "Ethereum Mainnet", "src": "/images/chainsLogos/EthereumLogo.png" },
       { "name": "Polygon", "src": "/images/chainsLogos/PolygonLogo.png" },
       { "name": "Aurora", "src": "/images/chainsLogos/AuroraLogo.png" }
-    ],
-    "component": "common/TitleSlidingIcons"
+    ]
+  },
+  {
+    "component": "Wallet/BigCardsGrid",
+    "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/VerticalSlide",
@@ -109,29 +134,31 @@
     ]
   },
   {
+    "component": "Wallet/GradientNumbers",
+    "title": "<i>Safe</i> accounts",
     "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"
+        "title": "4M+",
+        "text": "Gas saved in batch transactions",
+        "link": {
+          "href": "https://dune.com/queries/2093960/3449499"
+        }
       },
       {
-        "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"
+        "title": "$120B+",
+        "text": "Total value locked (TVL)",
+        "link": {
+          "href": ""
+        }
+      },
+      {
+        "title": "1.5M+",
+        "text": "Monthly active users (MAU)",
+        "link": {
+          "href": "https://dune.com/queries/2459401/4044167"
+        }
       }
-    ],
-    "component": "Wallet/BigCardsGrid"
+    ]
   },
   {
     "title": "Introducing<br>Native Swaps",