styles(wallet): adjust page styles (#494)

* styles: center play button

* style: fix logos

* style: address comments on sections margins

* style: center Watch Demo button

* fix: consistent CTA copy

* style: increase card padding

* fix: stretched images

* fix: update starknet logo

* feat: replace assets

src/components/Wallet/BigCardsGrid/index.tsx

@@ -7,7 +7,7 @@ const BigCardsGrid = ({ items }: { items: Array<BaseBlock['items'] & { component
   if (!items || !items.length) return null
 
   return (
-    <Container className={layoutCss.containerShort}>
+    <Container className={layoutCss.containerMedium}>
       <Grid container spacing={{ xs: '30px', xl: '50px' }}>
         {items.map((item, index) => {
           const { component } = item

src/components/Wallet/BigImageCard/styles.module.css

@@ -1,7 +1,7 @@
 .card {
   outline: 1px solid var(--mui-palette-border-light);
   border-radius: 16px;
-  padding: 16px;
+  padding: 32px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/Wallet/FeatureCards/index.tsx

@@ -35,7 +35,7 @@ const FeatureCards = ({ title, text, items = [] }: FeatureCardsProps) => {
   const restItems = items.slice(0, -1)
 
   return (
-    <Container className={layoutCss.containerMedium}>
+    <Container className={layoutCss.container}>
       <Grid container justifyContent="space-between" columnSpacing="30px" rowGap="30px">
         <Grid item xs={12} md={7}>
           <Typography variant="h2">{title}</Typography>

src/components/Wallet/FeatureCards/styles.module.css

@@ -29,17 +29,14 @@
 
 .lastCard {
   padding: 0;
+  gap: 0;
 }
 
 .lastCard .cardContent {
   padding: 40px;
   max-width: 516px;
 }
 
-.image {
-  height: 100%;
-}
-
 .cardContent {
   display: flex;
   flex-direction: column;
@@ -98,4 +95,8 @@
     display: flex;
     align-items: center;
   }
+
+  .image {
+    height: 100%;
+  }
 }

src/components/Wallet/GradientNumbers/index.tsx

@@ -5,7 +5,7 @@ import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
 
 const Stats = ({ title, items }: BaseBlock): ReactElement => (
-  <Container className={layoutCss.containerShort}>
+  <Container className={layoutCss.container}>
     <Typography variant="h2" mb={3} textAlign="center">
       {title}
     </Typography>

src/components/Wallet/Hero/styles.module.css

@@ -53,17 +53,13 @@
   flex-direction: column;
 }
 
-.logosWrapper img {
-  height: 42px;
-}
-
 .video {
   border-radius: 16px;
   width: 90%;
 }
 
 .watchDemo {
-  margin-top: 50px;
+  margin-top: 85px;
   position: relative;
 }
 
@@ -75,7 +71,7 @@
 .playButton {
   position: absolute;
   z-index: 10;
-  top: 200px;
+  top: 40%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -121,6 +117,11 @@
 
   .logosWrapper {
     flex-direction: row;
+    height: 42px;
+  }
+
+  .watchDemo {
+    margin-top: 100px;
   }
 
   .video {