+
+
+
+
+ )
+}
+
+export default Hero
diff --git a/src/components/GasStation/Hero/styles.module.css b/src/components/GasStation/Hero/styles.module.css
new file mode 100644
index 000000000..b21eec4e8
--- /dev/null
+++ b/src/components/GasStation/Hero/styles.module.css
@@ -0,0 +1,55 @@
+.videoWrapper {
+ position: relative;
+ z-index: -1;
+}
+
+.video {
+ width: 100%;
+}
+
+.sliderWrapper {
+ margin-top: -8px;
+}
+
+.textContainer {
+ text-align: center;
+ padding: 0 16px;
+}
+
+@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: 32%;
+ left: calc(50% - 450px);
+ max-width: 900px;
+ }
+}
+
+@media (min-width: 1440px) {
+ .videoWrapper {
+ margin-left: -104px;
+ margin-right: -104px;
+ }
+}
diff --git a/src/components/GasStation/ImageTextTop/index.tsx b/src/components/GasStation/ImageTextTop/index.tsx
new file mode 100644
index 000000000..9a74fc95c
--- /dev/null
+++ b/src/components/GasStation/ImageTextTop/index.tsx
@@ -0,0 +1,25 @@
+import type { BaseBlock } from '@/components/Home/types'
+import useResponsiveImages, { type ImageObj } from '@/hooks/useResponsiveImages'
+import { Container, Typography } from '@mui/material'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+export const ImageTextTop = ({
+ title,
+ backgroundImage,
+}: BaseBlock & {
+ backgroundImage: ImageObj
+}) => {
+ const [bgImage] = useResponsiveImages(backgroundImage)
+
+ return (
+
+
+
+
+
+ {title}
+
+
+ {link && (
+
+ )}
+
+
+
+ {title}
+
+
+
+)
+
+export default LinkCard
diff --git a/src/components/GasStation/LinkCard/styles.module.css b/src/components/GasStation/LinkCard/styles.module.css
new file mode 100644
index 000000000..77df80eea
--- /dev/null
+++ b/src/components/GasStation/LinkCard/styles.module.css
@@ -0,0 +1,60 @@
+.card {
+ background: var(--mui-palette-border-background);
+ outline: 1px solid var(--mui-palette-border-light);
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ border-radius: 8px;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ transition-duration: var(--transition-duration);
+}
+
+.card::before {
+ content: '';
+ position: absolute;
+ border-radius: 8px;
+ top: -2px;
+ left: -2px;
+ right: -2px;
+ bottom: -2px;
+ z-index: -1;
+ background: linear-gradient(to bottom left, #12ff80, #5fddff);
+ opacity: 0;
+}
+
+.card:hover::before {
+ opacity: 1;
+}
+
+.cardBody {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+/* Outline */
+.outline:hover {
+ box-shadow: inset 0 0 0 2px var(--mui-palette-primary-main);
+}
+
+.outline:hover .arrow path {
+ fill: var(--mui-palette-primary-main);
+}
+
+.outline .link div::after {
+ background-color: var(--mui-palette-primary-main) !important;
+}
+
+.outline .link:hover path {
+ fill: var(--mui-palette-primary-main) !important;
+}
+
+@media (min-width: 600px) {
+ .card {
+ width: 410px;
+ height: min-content;
+ }
+}
diff --git a/src/components/GasStation/PartnersCardsImage/index.tsx b/src/components/GasStation/PartnersCardsImage/index.tsx
new file mode 100644
index 000000000..6dd5ed53b
--- /dev/null
+++ b/src/components/GasStation/PartnersCardsImage/index.tsx
@@ -0,0 +1,58 @@
+import { Container, Grid, Typography } from '@mui/material'
+import clsx from 'clsx'
+import type { BaseBlock, BlockWithVariant } from '@/components/Home/types'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+import LinkCard from '@/components/GasStation/LinkCard'
+
+export type PartnersCardsImageProps = BaseBlock &
+ BlockWithVariant & {
+ partnersImage: BaseBlock['image']
+ }
+
+const PartnersCardsImage = ({
+ caption,
+ partnersImage,
+ items,
+ variant,
+ mobileVariant,
+ image,
+}: PartnersCardsImageProps) => {
+ return (
+
+
+ {title}
+
+
+ {link ? (
+
+
+ {link.title}
+
+
+ ) : null}
+
+
+
+)
+
+export default Slider
diff --git a/src/components/GasStation/Slider/styles.module.css b/src/components/GasStation/Slider/styles.module.css
new file mode 100644
index 000000000..c963cb334
--- /dev/null
+++ b/src/components/GasStation/Slider/styles.module.css
@@ -0,0 +1,39 @@
+.wrapper {
+ --items-gap: 16px;
+ overflow: hidden;
+ background-color: var(--mui-palette-background-main);
+}
+
+.animation {
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ width: max-content;
+ min-width: 200%;
+ animation-duration: 100s;
+ animation-delay: 0s;
+ animation-play-state: running;
+ animation-name: slide;
+}
+
+.slider {
+ height: 40px;
+ display: flex;
+ gap: var(--items-gap);
+ align-items: center;
+}
+
+.item {
+ color: var(--mui-palette-primary-main);
+}
+
+.item::before {
+ content: '•';
+ color: var(--mui-palette-primary-main);
+ margin-right: var(--items-gap);
+}
+
+@keyframes slide {
+ to {
+ transform: translate(-50%);
+ }
+}
diff --git a/src/components/GasStation/TextBlockImagePartners/PartnersElement.tsx b/src/components/GasStation/TextBlockImagePartners/PartnersElement.tsx
new file mode 100644
index 000000000..4fd8e3533
--- /dev/null
+++ b/src/components/GasStation/TextBlockImagePartners/PartnersElement.tsx
@@ -0,0 +1,14 @@
+import { type BaseBlock } from '@/components/Home/types'
+import css from './styles.module.css'
+
+const PartnersElement = ({ image }: { image: BaseBlock['image'] }) => (
+ <>
+ {image ? (
+
+
+
+ {Array.from({ length: SLIDER_ITEMS }).map((_, idx) => (
+
+ {text}
+
+ ))}
+
+
+ 
+
+ ) : null}
+
+)
+
+export default PartnersElement
diff --git a/src/components/GasStation/TextBlockImagePartners/index.tsx b/src/components/GasStation/TextBlockImagePartners/index.tsx
new file mode 100644
index 000000000..1b43e3165
--- /dev/null
+++ b/src/components/GasStation/TextBlockImagePartners/index.tsx
@@ -0,0 +1,61 @@
+import { Container, Grid, Typography } from '@mui/material'
+import clsx from 'clsx'
+import type { BaseBlock, BlockWithVariant } from '@/components/Home/types'
+import PartnersElement from '@/components/GasStation/TextBlockImagePartners/PartnersElement'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+export type TextBlockImagePartnersProps = BaseBlock & BlockWithVariant
+
+const TextBlockImagePartners = ({ title, text, items, image, variant, mobileVariant }: TextBlockImagePartnersProps) => (
+
+ {title}
+ {text}
+
+
+
+
+ Our partners
+
+
+ {/* Logos */}
+ {items ? (
+
+
+ {items.map(({ image }, index) => (
+ 
+ ))}
+
+ ) : undefined}
+
+
+
+
+
+ )
+}
+
+export default TwitterCTA
diff --git a/src/components/GasStation/TwitterCTA/styles.module.css b/src/components/GasStation/TwitterCTA/styles.module.css
new file mode 100644
index 000000000..ae65991ca
--- /dev/null
+++ b/src/components/GasStation/TwitterCTA/styles.module.css
@@ -0,0 +1,57 @@
+.title {
+ text-align: center;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 40px;
+}
+
+.button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+}
+.sliderWrapper {
+ margin-top: 96px;
+ 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;
+ }
+}
diff --git a/src/components/GasStation/index.tsx b/src/components/GasStation/index.tsx
new file mode 100644
index 000000000..9c6f097ba
--- /dev/null
+++ b/src/components/GasStation/index.tsx
@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react'
+import PageContent from '@/components/common/PageContent'
+import gasStationContent from '@/content/gas-station.json'
+
+export const GasStation = (): ReactElement => {
+ return Available", + "backgroundImage": { + "sm": "/images/GasStation/network-gas-pump-sm.png", + "md": "/images/GasStation/network-gas-pump-md.png", + "alt": "Gnosis and Polygon gas pumps" + } + }, + { + "component": "GasStation/TextBlockImageYourStation", + "variant": "image-text", + "title": "Get your network
on the gas station", + "buttons": [ + { + "text": "Become a network partner", + "href": "https://wn2n6ocviur.typeform.com/to/fBPBSB8l", + "variant": "button" + } + ], + "image": { + "src": "/images/GasStation/your-tank.png", + "alt": "New network partner gas tank" + }, + "mobileVariant": "text-image" + }, + { + "component": "GasStation/PartnersCardsImage", + "variant": "text-image", + "caption": "Integrate to build gasless apps", + "partnersImage": { + "src": "/images/GasStation/safe-pimlico.png", + "alt": "Safe and Pimlico" + }, + "items": [ + { + "title": "Explore ERC 4337 + Safe", + "link": { + "title": "View docs", + "href": "https://docs.safe.global/home/4337-safe" + } + }, + { + "title": "How to integrate Safe{Core} Stack", + "link": { + "title": "View docs", + "href": "https://docs.safe.global/home/4337-guides/safe-sdk" + } + } + ], + "image": { + "src": "/images/GasStation/safe-refrigerator.png", + "alt": "Safe refrigerator" + }, + "mobileVariant": "text-image" + }, + { + "component": "GasStation/TwitterCTA", + "title": "Share and boost your chances to get gas", + "text": "User should not pay gas for using your app" + } +] diff --git a/src/content/home.json b/src/content/home.json index f2b06d9ad..dd9a780a8 100644 --- a/src/content/home.json +++ b/src/content/home.json @@ -225,7 +225,7 @@ ], "image": { "src": "/images/Home/ecosystem-partners.png", - "alt": "Hands holding code brackets" + "alt": "Ecosystem partners cards" }, "mobileVariant": "text-image", "component": "Home/TextBlockImageEcosystem" diff --git a/src/hooks/useCurrentUrl.ts b/src/hooks/useCurrentUrl.ts new file mode 100644 index 000000000..bbaf6e897 --- /dev/null +++ b/src/hooks/useCurrentUrl.ts @@ -0,0 +1,20 @@ +import { useState, useEffect } from 'react' + +/** + * A custom hook to get the current URL + * @returns {string} The current URL + */ +const useCurrentUrl = () => { + const [currentUrl, setCurrentUrl] = useState('') + + useEffect(() => { + // Check if running in the browser environment + if (typeof window !== 'undefined') { + setCurrentUrl(window.location.href) + } + }, []) + + return currentUrl +} + +export default useCurrentUrl diff --git a/src/hooks/useResponsiveImages.ts b/src/hooks/useResponsiveImages.ts new file mode 100644 index 000000000..9513edf29 --- /dev/null +++ b/src/hooks/useResponsiveImages.ts @@ -0,0 +1,34 @@ +import { useIsMediumScreen } from '@/hooks/useMaxWidth' + +export type ImageObj = { + sm: string + md: string + alt?: string +} + +/** + * Get the source URL for an image based on its size and screen condition. + * @param {ImageObj} imageObj - The object containing URLs for different image sizes. + * @param {boolean} isSmall - A flag indicating whether the small image shall be used. + * @returns {string|undefined} - The source URL for the image, or undefined. + */ +export function getImageSource(isSmall: boolean, imageObj?: ImageObj) { + return imageObj ? (isSmall ? imageObj.sm : imageObj.md) : undefined +} + +/** + * Get the source URLs for images based on their sizes and screen conditions. + * @param {ImageObj[]} images - The objects containing URLs for different image sizes. + * @returns {string[]} - The source URLs for the images. + */ +const useResponsiveImages = (...images: Array