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",