style(gas-station): design fixes

src/components/GasStation/Hero/index.tsx

@@ -1,11 +1,13 @@
 import type { BaseBlock } from '@/components/Home/types'
 import Slider from '@/components/GasStation/Slider'
-import css from './styles.module.css'
 import { Button, Typography } from '@mui/material'
+import clsx from 'clsx'
+import css from './styles.module.css'
 
 const Hero = ({ title, text, link }: BaseBlock) => {
   return (
     <div className={css.videoWrapper}>
+      <div className={css.gradientBase} />
       <video autoPlay muted playsInline loop poster="/images/GasStation/gas-station.png" className={css.video}>
         <source src="/videos/GasStation/gas-station.webm" type="video/webm" />
         <source src="/videos/GasStation/gas-station.mp4" type="video/mp4" />
@@ -27,6 +29,7 @@ const Hero = ({ title, text, link }: BaseBlock) => {
           </Button>
         )}
       </div>
+      <div className={clsx(css.gradientBase, css.gradientFlipped)} />
     </div>
   )
 }

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

@@ -1,14 +1,14 @@
 .videoWrapper {
   position: relative;
-  margin-top: calc(-1 * var(--header-height));
+  z-index: -1;
 }
 
 .video {
   width: 100%;
 }
 
 .sliderWrapper {
-  margin-top: -6px;
+  margin-top: -8px;
 }
 
 .textContainer {
@@ -17,9 +17,31 @@
 }
 
 @media (min-width: 900px) {
+  .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;
+    bottom: 0;
+    width: 138px;
+    transform: scaleX(-1);
+  }
+
+  .videoWrapper {
+    margin-top: calc(-1 * var(--header-height));
+  }
+
   .textContainer {
     position: absolute;
-    top: 35%;
+    top: 32%;
     left: calc(50% - 350px);
     max-width: 700px;
   }

src/components/GasStation/ImageTextTop/styles.module.css

@@ -6,13 +6,14 @@
   background-repeat: no-repeat;
   overflow: hidden;
   background-size: contain;
-  min-height: 650px;
+  min-height: 500px;
   max-height: 90vh;
-  background-position: center top 150px;
+  background-position: center top 190px;
 }
 
 @media (min-width: 900px) {
   .bg {
+    min-height: 650px;
     background-position: center top;
   }
 

src/components/GasStation/PartnersCardsImage/styles.module.css

@@ -34,7 +34,7 @@
 
   .spot1 {
     position: absolute;
-    right: -200px;
+    right: -50px;
     top: -650px;
     z-index: -1;
     width: 1600px;

src/components/GasStation/Slider/index.tsx

@@ -2,7 +2,7 @@ import type { BaseBlock } from '@/components/Home/types'
 import { Typography } from '@mui/material'
 import css from './styles.module.css'
 
-const SLIDER_ITEMS = 7
+const SLIDER_ITEMS = 10
 
 const Slider = ({ text }: Pick<BaseBlock, 'text'>) => (
   <div className={css.wrapper}>

src/components/GasStation/Slider/styles.module.css

@@ -23,7 +23,6 @@
 }
 
 .item {
-  margin-left: var(--items-gap);
   color: var(--mui-palette-primary-main);
 }
 

src/components/GasStation/TextBlockImagePartners/styles.module.css

@@ -72,7 +72,6 @@
     position: absolute;
     left: -300px;
     top: -200px;
-    z-index: -1;
     width: 1000px;
     height: 1000px;
     background-image: radial-gradient(at top left, rgba(18, 255, 128, 0.3) 0%, rgba(246, 247, 248, 0) 50%);
@@ -81,9 +80,8 @@
 
   .spot2 {
     position: absolute;
-    right: -200px;
+    right: -50px;
     top: -250px;
-    z-index: -1;
     width: 1000px;
     height: 1000px;
     background-image: radial-gradient(at top right, rgba(41, 182, 246, 0.3) 0%, rgba(246, 247, 248, 0) 50%);

src/components/GasStation/TwitterCTA/index.tsx

@@ -5,8 +5,9 @@ import SafeLink from '@/components/common/SafeLink'
 import { xSharingUrl } from '@/lib/xSharingUrl'
 import XIcon from '@/public/images/x-icon.svg'
 import useCurrentUrl from '@/hooks/useCurrentUrl'
-import css from './styles.module.css'
 import Slider from '@/components/GasStation/Slider'
+import clsx from 'clsx'
+import css from './styles.module.css'
 
 const socialMsg = 'Just applied to get gas credits from @safe Safe{Core} gas station ⛽️'
 
@@ -16,22 +17,28 @@ const TwitterCTA = ({ title, text }: BaseBlock) => {
   const xUrl = xSharingUrl(currentUrl, socialMsg)
 
   return (
-    <Container className={`${layoutCss.containerShort} ${css.container}`}>
-      <Typography variant="h2" className={css.title}>
-        {title}
-      </Typography>
-
-      <SafeLink href={xUrl}>
-        <Button variant="contained" size="large" className={css.button}>
-          Share on
-          <SvgIcon component={XIcon} fontSize="inherit" inheritViewBox />
-        </Button>
-      </SafeLink>
+    <>
+      <Container className={`${layoutCss.containerShort} ${css.container}`}>
+        <Typography variant="h2" className={css.title}>
+          {title}
+        </Typography>
+
+        <SafeLink href={xUrl}>
+          <Button variant="contained" size="large" className={css.button}>
+            Share on
+            <SvgIcon component={XIcon} fontSize="inherit" inheritViewBox />
+          </Button>
+        </SafeLink>
+      </Container>
 
       <div className={css.sliderWrapper}>
+        <div className={css.gradientBase} />
+
         <Slider text={text} />
+
+        <div className={clsx(css.gradientBase, css.gradientFlipped)} />
       </div>
-    </Container>
+    </>
   )
 }
 

src/components/GasStation/TwitterCTA/styles.module.css

@@ -16,13 +16,42 @@
   gap: 8px;
 }
 .sliderWrapper {
-  width: 100%;
   margin-top: 96px;
-  margin-bottom: -120px;
+  margin-bottom: -80px;
 }
 
 @media (min-width: 600px) {
+  .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;
+    bottom: 0;
+    width: 138px;
+    transform: scaleX(-1);
+  }
+
   .title {
     max-width: 800px;
   }
+
+  .sliderWrapper {
+    position: relative;
+    margin-bottom: -120px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .sliderWrapper {
+    margin-left: -104px;
+    margin-right: -104px;
+  }
 }

src/content/gas-station.json

@@ -47,7 +47,7 @@
   },
   {
     "component": "GasStation/ImageTextTop",
-    "title": "Supported network<br/>gas pumps.",
+    "title": "Supported network<br/>gas pumps",
     "backgroundImage": {
       "sm": "/images/GasStation/network-gas-pump-sm.png",
       "md": "/images/GasStation/network-gas-pump-md.png",