feat(gas-station): update the gas stations information (#471)

* feat: update the gas stations information

* chore: update thumbnail

src/components/GasStation/ImageTextTop/index.tsx

@@ -6,6 +6,7 @@ import css from './styles.module.css'
 
 export const ImageTextTop = ({
   title,
+  items,
   backgroundImage,
 }: BaseBlock & {
   backgroundImage: ImageObj
@@ -18,6 +19,11 @@ export const ImageTextTop = ({
       <div className={css.bg} style={{ backgroundImage: `url(${bgImage})` }}>
         <Typography variant="h2">{title}</Typography>
       </div>
+
+      {/* extra gas stations */}
+      {items?.map(({ image }) => {
+        return image ? <img src={image.src} alt={image.alt} key={image.alt} className={css.showInXs} /> : null
+      })}
     </Container>
   )
 }

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

@@ -26,4 +26,8 @@
     background-image: radial-gradient(at left, rgba(18, 255, 128, 0.4) 0%, rgba(246, 247, 248, 0) 80%);
     filter: blur(50px);
   }
+
+  .showInXs {
+    display: none;
+  }
 }

src/components/GasStation/TwitterCTA/index.tsx

@@ -1,45 +1,32 @@
-import { Button, Container, SvgIcon, Typography } from '@mui/material'
+import { Button, Container, Typography } from '@mui/material'
 import type { BaseBlock } from '@/components/Home/types'
 import layoutCss from '@/components/common/styles.module.css'
-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 Slider from '@/components/GasStation/Slider'
 import clsx from 'clsx'
 import css from './styles.module.css'
 
-const socialMsg = 'Just checked out the @safe {Core} Gas Station ⛽️ with gas credits worth $250k'
-
-const TwitterCTA = ({ title, text }: BaseBlock) => {
-  const currentUrl = useCurrentUrl()
-
-  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>
-
-      <div className={css.sliderWrapper}>
-        <div className={css.gradientBase} />
-
-        <Slider text={text} />
-
-        <div className={clsx(css.gradientBase, css.gradientFlipped)} />
-      </div>
-    </>
-  )
-}
+const TwitterCTA = ({ title, text, link }: BaseBlock) => (
+  <>
+    <Container className={`${layoutCss.containerShort} ${css.container}`}>
+      <Typography variant="h2" className={css.title}>
+        {title}
+      </Typography>
+
+      {link && (
+        <Button key={link.href} href={link.href} target="_blank" rel="noreferrer" variant="contained" size="large">
+          {link.title}
+        </Button>
+      )}
+    </Container>
+
+    <div className={css.sliderWrapper}>
+      <div className={css.gradientBase} />
+
+      <Slider text={text} />
+
+      <div className={clsx(css.gradientBase, css.gradientFlipped)} />
+    </div>
+  </>
+)
 
 export default TwitterCTA

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

@@ -9,12 +9,6 @@
   gap: 40px;
 }
 
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
 .sliderWrapper {
   margin-top: 96px;
   margin-bottom: -80px;

src/content/gas-station.json

@@ -52,7 +52,21 @@
       "sm": "/images/GasStation/network-gas-pump-sm.png",
       "md": "/images/GasStation/network-gas-pump-md.png",
       "alt": "Gnosis and Polygon gas pumps"
-    }
+    },
+    "items": [
+      {
+        "image": {
+          "src": "/images/GasStation/network-gas-pump-sm-1.png",
+          "alt": "BoB and Linea gas pumps"
+        }
+      },
+      {
+        "image": {
+          "src": "/images/GasStation/network-gas-pump-sm-2.png",
+          "alt": "Worldcoin gas pump"
+        }
+      }
+    ]
   },
   {
     "component": "GasStation/TextBlockImageYourStation",
@@ -104,6 +118,10 @@
   {
     "component": "GasStation/TwitterCTA",
     "title": "Share and boost your chances to get gas",
-    "text": "Users should not pay gas for using your app"
+    "text": "Users should not pay gas for using your app",
+    "link": {
+      "title": "Apply Now",
+      "href": "https://wn2n6ocviur.typeform.com/gasstationapp"
+    }
   }
 ]