diff --git a/public/images/Safenet/Architecture/arc-sm.png b/public/images/Safenet/Architecture/arc-sm.png new file mode 100644 index 00000000..f6fa5c7c Binary files /dev/null and b/public/images/Safenet/Architecture/arc-sm.png differ diff --git a/public/images/Safenet/Architecture/arrow-back-gradient.svg b/public/images/Safenet/Architecture/arrow-back-gradient.svg new file mode 100644 index 00000000..cb6a153e --- /dev/null +++ b/public/images/Safenet/Architecture/arrow-back-gradient.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/Safenet/Architecture/arrow-next-gradient.svg b/public/images/Safenet/Architecture/arrow-next-gradient.svg new file mode 100644 index 00000000..dcbe31c0 --- /dev/null +++ b/public/images/Safenet/Architecture/arrow-next-gradient.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/Safenet/Architecture/check-gradient.svg b/public/images/Safenet/Architecture/check-gradient.svg new file mode 100644 index 00000000..1d959240 --- /dev/null +++ b/public/images/Safenet/Architecture/check-gradient.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/Safenet/Architecture/index.tsx b/src/components/Safenet/Architecture/index.tsx index 090f534f..8f7ba959 100644 --- a/src/components/Safenet/Architecture/index.tsx +++ b/src/components/Safenet/Architecture/index.tsx @@ -1,12 +1,12 @@ +import { type ComponentType, useState } from 'react' import { Button, Container, Grid, MobileStepper, Step, Stepper, Typography } from '@mui/material' -import css from './styles.module.css' import GradientChip from '@/components/Safenet/GradientChip' import LinkButton from '@/components/common/LinkButton' import BackButton from '@/public/images/Safenet/Architecture/back-button.svg' import NextButton from '@/public/images/Safenet/Architecture/next-button.svg' -import { useState } from 'react' +import css from './styles.module.css' -const userSteps: Array<{ step: number; text: string; endAdorment?: any }> = [ +const userSteps: Array<{ step: number; text: string; icon?: { src: string; alt: string } }> = [ { step: 1, text: 'Checks policies and issues resource-lock', @@ -14,10 +14,18 @@ const userSteps: Array<{ step: number; text: string; endAdorment?: any }> = [ { step: 2, text: 'Gets liquidity', + icon: { + src: '/images/Safenet/Architecture/arrow-next-gradient.svg', + alt: 'Arrow next gradient', + }, }, { step: 3, text: 'Executes transaction intent', + icon: { + src: '/images/Safenet/Architecture/check-gradient.svg', + alt: 'Checkmark gradient', + }, }, { step: 4, @@ -26,6 +34,10 @@ const userSteps: Array<{ step: number; text: string; endAdorment?: any }> = [ { step: 5, text: 'Returns liquidity', + icon: { + src: '/images/Safenet/Architecture/arrow-back-gradient.svg', + alt: 'Arrow back gradient', + }, }, ] @@ -65,7 +77,7 @@ const Architecture = () => { {/* Mobile Stepper */}
- + Safe processor Processors
    @@ -78,57 +90,27 @@ const Architecture = () => {
- - USER + +
+ USER + Initiates transaction intent +
- -
- - User signs transaction intent -
- - - -
- - Checks policies and issues resource-lock -
- - - -
- - Provides liquidity -
- - - -
- - Executes transaction intent -
- - - -
- - - Debits user by providing a validity proof of executed intent - -
- - - -
- - Returns liquidity -
- + {userSteps.map(({ step, text, icon }) => ( + +
+ + {text} +
+ + {icon ? {icon.alt} : null} + + ))} - + Safe net Liquid Network
    @@ -188,12 +170,14 @@ const Architecture = () => {
- {userSteps.map(({ step, text }) => ( - + {userSteps.map(({ step, text, icon }) => ( +
{text}
+ + {icon ? {icon.alt} : null} ))} diff --git a/src/components/Safenet/Architecture/styles.module.css b/src/components/Safenet/Architecture/styles.module.css index c4cded81..b6e39649 100644 --- a/src/components/Safenet/Architecture/styles.module.css +++ b/src/components/Safenet/Architecture/styles.module.css @@ -15,16 +15,16 @@ } .arc { - background-image: url('/images/Safenet/Architecture/arc.png'); + background-image: url('/images/Safenet/Architecture/arc-sm.png'); background-position: center; background-repeat: no-repeat; overflow: auto; position: absolute; width: 100%; - height: 980px; + height: 430px; - top: -276px; + top: -106px; } .contentWrapper { @@ -77,11 +77,18 @@ font-weight: 400; } +/* to remove after ahving the asset*/ +.stepperWrapper .midItemHeader { + border: 1px solid var(--mui-palette-primary-main); + padding: 24px 16px; + border-radius: 20px; +} + .midItemContainer { margin-top: 44px; align-items: center; justify-content: center; - gap: 18px; + gap: 27px; } .blockImage { @@ -105,6 +112,7 @@ display: flex; flex-direction: row; align-items: center; + justify-content: space-between; width: 100%; height: 78px; border-radius: 20px; @@ -112,6 +120,10 @@ margin: 0 8px; } +.stepperWrapper .step { + border: 1px solid var(--mui-palette-border-main); +} + .stepContent { display: flex; align-items: center; @@ -169,7 +181,7 @@ .stepperWrapper { --stepWidth: 400px; - margin-top: 500px; + margin-top: 386px; position: relative; display: flex; flex-direction: column; @@ -195,11 +207,31 @@ background-color: transparent; } +.midItemHeader { + display: flex; + flex-direction: column; + align-items: center; + gap: 54px; +} + +.borderedDescription { + border: 1px solid var(--mui-palette-border-main); + padding: 88px 16px 24px; + border-radius: 20px; + height: 500px; +} + @media (min-width: 1200px) { .stepperWrapper { display: none; } + .arc { + background-image: url('/images/Safenet/Architecture/arc.png'); + height: 980px; + top: -276px; + } + .gridContainer { display: flex; margin-top: 370px; @@ -212,12 +244,16 @@ width: 100%; } + .midItemContainer { + gap: 19px; + } + + .blockItem { + padding-top: 96px; + } + .midItemHeader { - margin-top: -156px; - display: flex; - flex-direction: column; - align-items: center; - gap: 54px; + margin-top: -157px; } .step:nth-of-type(2) { @@ -235,10 +271,6 @@ height: 490px; } - .midItemContainer { - gap: 19px; - } - .step { height: 81px; }