diff --git a/src/components/Wallet/BigCardsGrid/index.tsx b/src/components/Wallet/BigCardsGrid/index.tsx new file mode 100644 index 000000000..aeb1c5e08 --- /dev/null +++ b/src/components/Wallet/BigCardsGrid/index.tsx @@ -0,0 +1,24 @@ +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 }) => ( + + + {items?.map((item, index) => { + const { component } = item + + const CardComponent = getComponentByName(`${component}`, () => <>) + + return ( + + + + ) + })} + + +) + +export default BigCardsGrid diff --git a/src/components/Wallet/BigImageCard/index.tsx b/src/components/Wallet/BigImageCard/index.tsx new file mode 100644 index 000000000..75f63d9b3 --- /dev/null +++ b/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) => ( +
+ {caption} + + + + + {title} + + + {text ? {text} : null} +
+) + +export default BigImageCard diff --git a/src/components/commonCMS/BigImageCard/styles.module.css b/src/components/Wallet/BigImageCard/styles.module.css similarity index 86% rename from src/components/commonCMS/BigImageCard/styles.module.css rename to src/components/Wallet/BigImageCard/styles.module.css index 5dc20760b..134b3fabd 100644 --- a/src/components/commonCMS/BigImageCard/styles.module.css +++ b/src/components/Wallet/BigImageCard/styles.module.css @@ -1,5 +1,4 @@ .card { - background: var(--mui-palette-border-background); outline: 1px solid var(--mui-palette-border-light); border-radius: 16px; padding: 16px; @@ -15,6 +14,11 @@ width: 240px; } +.title { + width: 80%; + margin-bottom: 24px; +} + @media (min-width: 600px) { .card { padding: 32px; diff --git a/src/components/commonCMS/BigCardsGrid/index.tsx b/src/components/commonCMS/BigCardsGrid/index.tsx deleted file mode 100644 index c21de4d26..000000000 --- a/src/components/commonCMS/BigCardsGrid/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Container, Grid } from '@mui/material' -import { isEntryTypeBaseBlock } from '@/lib/typeGuards' -import type { BaseBlockEntry } from '@/config/types' -import layoutCss from '@/components/common/styles.module.css' -import getComponentByName from '@/lib/getComponentByName' - -const BigCardsGrid = (props: BaseBlockEntry) => { - const { items } = props.fields - - const itemsList = items?.filter(isEntryTypeBaseBlock) ?? [] - - return ( - - - {itemsList.map((item, index) => { - const { component } = item.fields - - const CardComponent = getComponentByName(`${component}`, () => <>) - - return ( - - - - ) - })} - - - ) -} - -export default BigCardsGrid diff --git a/src/components/commonCMS/BigImageCard/index.tsx b/src/components/commonCMS/BigImageCard/index.tsx deleted file mode 100644 index a56f0eea0..000000000 --- a/src/components/commonCMS/BigImageCard/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Box, Typography } from '@mui/material' -import RichText from '@/components/common/RichText' -import { isAsset } from '@/lib/typeGuards' -import type { BaseBlockEntry } from '@/config/types' -import css from './styles.module.css' - -const BigImageCard = (props: BaseBlockEntry) => { - const { caption, title, text, image } = props.fields - - return ( -
- {caption} - - {isAsset(image) && image.fields.file?.url ? ( - {image.fields.title - ) : null} - - - - - - {text ? ( - - - - ) : null} -
- ) -} - -export default BigImageCard diff --git a/src/components/commonCMS/Marquee/index.tsx b/src/components/commonCMS/Marquee/index.tsx deleted file mode 100644 index 950e37ab7..000000000 --- a/src/components/commonCMS/Marquee/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import RichText from '@/components/common/RichText' -import IconRow from '@/components/Rewards/IconRow' -import { type BaseBlockEntry } from '@/config/types' -import { isEntryTypeBaseBlock } from '@/lib/typeGuards' -import layoutCss from '@/components/common/styles.module.css' -import css from './styles.module.css' - -const Marquee = (props: BaseBlockEntry) => { - const { title, text, items } = props.fields - - const logos = items?.filter(isEntryTypeBaseBlock) ?? [] - - return ( -
- - - {text && ( -
- -
- )} - - -
- ) -} - -export const MarqueeElement = ({ items }: { items: BaseBlockEntry[] }) => ( -
-
- -
-
- - - -
-
- -
-
-) - -export default Marquee diff --git a/src/components/commonCMS/Marquee/styles.module.css b/src/components/commonCMS/Marquee/styles.module.css deleted file mode 100644 index 9870b3c03..000000000 --- a/src/components/commonCMS/Marquee/styles.module.css +++ /dev/null @@ -1,74 +0,0 @@ -.container { - display: flex; - flex-direction: column; - align-items: center; -} - -.text { - color: var(--mui-palette-primary-light); - margin-top: 16px; -} - -.marquee { - position: relative; - display: flex; - flex-direction: column; - overflow: hidden; - padding: 8px 0; - margin: 48px auto; - width: 100%; -} - -.gradientBase { - position: absolute; - width: 94px; - top: 0; - bottom: 0; - left: 0; - background: linear-gradient(270deg, rgba(18, 19, 18, 0) 0%, var(--mui-palette-background-default) 100%); - z-index: 1; -} - -.gradientFlipped { - left: auto; - right: 0; - width: 138px; - transform: scaleX(-1.005); /* prevent 1px gap glitch */ -} - -.animation { - animation: slide 70s linear infinite; - display: flex; - width: max-content; -} - -.slider { - display: flex; - flex-direction: row; - justify-content: flex-start; - flex-wrap: wrap; - justify-content: space-around; - overflow: hidden; - user-select: none; - padding-bottom: 32px; -} - -@keyframes slide { - to { - transform: translate(-50%); - } -} - -@media (min-width: 600px) { - .marquee { - gap: 24px; - } - - .gradientBase { - width: 337px; - } - - .gradientFlipped { - width: 351px; - } -} diff --git a/src/config/routes.ts b/src/config/routes.ts index 96853ef71..0ac395db4 100644 --- a/src/config/routes.ts +++ b/src/config/routes.ts @@ -1,6 +1,6 @@ export const AppRoutes = { '404': '/404', - wallet: '/wallet-new', + wallet: '/wallet', trademark: '/trademark', token: '/token', terms: '/terms', diff --git a/src/content/wallet.json b/src/content/wallet.json index 45d69b823..41149777c 100644 --- a/src/content/wallet.json +++ b/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
Native Swaps", "caption": "New feature", diff --git a/src/pages/wallet.tsx b/src/pages/wallet.tsx new file mode 100644 index 000000000..b47d71c33 --- /dev/null +++ b/src/pages/wallet.tsx @@ -0,0 +1,6 @@ +import type { NextPage } from 'next' +import { Wallet } from '@/components/Wallet' + +const WalletPage: NextPage = () => + +export default WalletPage