diff --git a/src/components/Wallet/GradientNumbers/index.tsx b/src/components/Wallet/GradientNumbers/index.tsx
new file mode 100644
index 00000000..9d4bcc25
--- /dev/null
+++ b/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 => (
+
+
+ {title}
+
+
+
+ {items?.map((item, index) => (
+
+
+ {/* TODO: Fetch these values from a Dune query */}
+ {item.title}
+
+ {item.text}
+
+
+ ))}
+
+
+)
+
+export default Stats
diff --git a/src/components/Wallet/GradientNumbers/styles.module.css b/src/components/Wallet/GradientNumbers/styles.module.css
new file mode 100644
index 00000000..693a029b
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/content/wallet.json b/src/content/wallet.json
index 1db149bb..658e7f7b 100644
--- a/src/content/wallet.json
+++ b/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": "Safe 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
Native Swaps",