feat(gas-station): add logos (#473)

* fix: margins causing overflow on Hero video

* fix: margins causing overflow on CenteredCTA

* fix: spots on the right edge of the page have are positioned to `right: 0px`

* fix: Hero video margins

* styles: fix spot1 width in TextBlockImagePartners

* styles: center title

* feat: add new logos

* chore: update logos

src/components/GasStation/TwitterCTA/index.tsx → src/components/GasStation/CenteredCTA/index.tsx

@@ -5,7 +5,7 @@ import Slider from '@/components/GasStation/Slider'
 import clsx from 'clsx'
 import css from './styles.module.css'
 
-const TwitterCTA = ({ title, text, link }: BaseBlock) => (
+const CenteredCTA = ({ title, text, link }: BaseBlock) => (
   <>
     <Container className={`${layoutCss.containerShort} ${css.container}`}>
       <Typography variant="h2" className={css.title}>
@@ -29,4 +29,4 @@ const TwitterCTA = ({ title, text, link }: BaseBlock) => (
   </>
 )
 
-export default TwitterCTA
+export default CenteredCTA

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

@@ -42,10 +42,3 @@
     margin-bottom: -120px;
   }
 }
-
-@media (min-width: 1440px) {
-  .sliderWrapper {
-    margin-left: -104px;
-    margin-right: -104px;
-  }
-}

src/components/GasStation/Hero/index.tsx

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

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

@@ -52,3 +52,10 @@
     margin-right: -104px;
   }
 }
+
+@media (min-width: 1630px) {
+  .videoWrapper {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}

src/components/GasStation/ImageTextTop/index.tsx

@@ -17,7 +17,9 @@ export const ImageTextTop = ({
     <Container className={`${layoutCss.containerShort} ${css.container}`}>
       <div className={css.spot1} />
       <div className={css.bg} style={{ backgroundImage: `url(${bgImage})` }}>
-        <Typography variant="h2">{title}</Typography>
+        <Typography variant="h2" className={css.title}>
+          {title}
+        </Typography>
       </div>
 
       {/* extra gas stations */}

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

@@ -6,17 +6,26 @@
   background-repeat: no-repeat;
   overflow: hidden;
   background-size: contain;
-  min-height: 500px;
+  min-height: 650px;
   max-height: 90vh;
   background-position: center top 190px;
 }
 
+.title {
+  text-align: center;
+  margin-top: 30px;
+}
+
 @media (min-width: 900px) {
   .bg {
-    min-height: 650px;
+    min-height: 50vh;
     background-position: center top;
   }
 
+  .title {
+    margin-top: 0px;
+  }
+
   .spot1 {
     position: absolute;
     left: -300px;

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

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

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

@@ -73,7 +73,7 @@
     z-index: 1;
     left: -300px;
     top: -200px;
-    width: 1000px;
+    width: 885px;
     height: 1000px;
     background-image: radial-gradient(at top left, rgba(18, 255, 128, 0.3) 0%, rgba(246, 247, 248, 0) 50%);
     filter: blur(70px);
@@ -82,7 +82,7 @@
   .spot2 {
     position: absolute;
     z-index: 1;
-    right: -50px;
+    right: 0px;
     top: -250px;
     width: 1000px;
     height: 1000px;

src/content/gas-station.json

@@ -37,6 +37,24 @@
           "src": "/images/polygon.svg",
           "alt": "Polygon"
         }
+      },
+      {
+        "image": {
+          "src": "/images/linea-logo.svg",
+          "alt": "Linea"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/bob-logo.svg",
+          "alt": "Bob"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/world-chain-logo.svg",
+          "alt": "World"
+        }
       }
     ],
     "image": {
@@ -47,7 +65,7 @@
   },
   {
     "component": "GasStation/ImageTextTop",
-    "title": "Network credits<br/>available",
+    "title": "Network credits available",
     "backgroundImage": {
       "sm": "/images/GasStation/network-gas-pump-sm.png",
       "md": "/images/GasStation/network-gas-pump-md.png",
@@ -116,7 +134,7 @@
     "mobileVariant": "text-image"
   },
   {
-    "component": "GasStation/TwitterCTA",
+    "component": "GasStation/CenteredCTA",
     "title": "Share and boost your chances to get gas",
     "text": "Users should not pay gas for using your app",
     "link": {