feat: add background image in Shadow container

src/components/PageWrappers/PageWrapperGradient.tsx

@@ -1,16 +1,12 @@
 import { ReactNode } from 'react'
 import './layoutGradient.css'
 
-type PageWrapperShadowProps = {
+type PageWrapperGradientProps = {
   children: ReactNode
 }
 
-const PageWrapperGradient = ({ children }: PageWrapperShadowProps) => {
-  return (
-    <div className="layout" style={{ justifyContent: 'center' }}>
-      {children}
-    </div>
-  )
+const PageWrapperGradient = ({ children }: PageWrapperGradientProps) => {
+  return <div className="layout  gradient-wrapper">{children}</div>
 }
 
 export default PageWrapperGradient

src/components/PageWrappers/layoutGradient.css

@@ -1,19 +1,17 @@
-.layout {
-  background-color: #fff;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
-
-.layout::after {
+.gradient-wrapper .image-container::after {
   display: block;
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
+  left: -1%;
+  width: 50%;
   height: 100%;
-  background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
+  background: linear-gradient(to right, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0.0));
 }
+.gradient-wrapper .image-container .background-img {
+  position: absolute;
+  top: 50%;
+  left: 75%;
+  height: 230%;
+  width: auto;
+}

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -8,7 +8,7 @@ function ValidatorOnboarding() {
   return (
     <>
       <PageWrapperGradient>
-        <YStack>
+        <YStack style={{ maxWidth: '1052px', width: '100%', margin: '0 auto' }}>
           <YStack style={{ width: '100%', margin: '64px 0 1vh' }}>
             <Text size={19} weight={'semibold'}>
               Create Nimbus Validator
@@ -21,19 +21,30 @@ function ValidatorOnboarding() {
           <Shadow
             variant="$2"
             style={{
-              width: '1052px',
-              height: '523px',
+              width: '100%',
+              minHeight: '523px',
               borderRadius: '16px',
               border: 'none',
+              flexDirection: 'row',
               backgroundColor: '#fff',
             }}
+            className="content"
           >
-            <YStack>
+            <YStack className="layout-left">
               <Titles
                 title="Overview"
                 subtitle="Becoming a validator is a big responsibility with important preparation steps. Only start the deposit process when youre ready."
               ></Titles>
             </YStack>
+            <section className="layout-right">
+              <div className="image-container">
+                <img
+                  src="./background-images/sync-status-background.png"
+                  alt="background"
+                  className="background-img"
+                />
+              </div>
+            </section>
           </Shadow>
         </YStack>
       </PageWrapperGradient>