diff --git a/package.json b/package.json index a9346b731..e1ba4f1d1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "safe-homepage", "homepage": "https://github.com/safe-global/safe-homepage", - "version": "1.3.7", + "version": "1.3.8", "scripts": { "build": "next build && next export", "lint": "tsc && next lint", diff --git a/public/images/Wallet/Coincover-logo.png b/public/images/Wallet/Coincover-logo.png new file mode 100644 index 000000000..098ecf6b6 Binary files /dev/null and b/public/images/Wallet/Coincover-logo.png differ diff --git a/public/images/Wallet/Sygnum-logo.png b/public/images/Wallet/Sygnum-logo.png new file mode 100644 index 000000000..a7e9a28c1 Binary files /dev/null and b/public/images/Wallet/Sygnum-logo.png differ diff --git a/public/images/Wallet/buoy-logo.png b/public/images/Wallet/buoy-logo.png new file mode 100644 index 000000000..acccd8cb9 Binary files /dev/null and b/public/images/Wallet/buoy-logo.png differ diff --git a/public/images/Wallet/buoy.png b/public/images/Wallet/buoy.png deleted file mode 100644 index ccf1ee9e4..000000000 Binary files a/public/images/Wallet/buoy.png and /dev/null differ diff --git a/public/images/Wallet/web3auth-logo.svg b/public/images/Wallet/web3auth-logo.svg new file mode 100644 index 000000000..029ecc8d9 --- /dev/null +++ b/public/images/Wallet/web3auth-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Core/Masthead/styles.module.css b/src/components/Core/Masthead/styles.module.css deleted file mode 100644 index 513d252e1..000000000 --- a/src/components/Core/Masthead/styles.module.css +++ /dev/null @@ -1,51 +0,0 @@ -.container { - text-align: center; - background-color: var(--mui-palette-secondary-background); - border-radius: 32px; - padding: 24px; - justify-content: space-between; - margin-bottom: 40px; - background-position: right; - background-size: cover; -} - -.text { - margin-bottom: 16px; -} - -.button { - color: var(--mui-palette-secondary-main); -} - -.chip { - border-color: var(--mui-palette-text-primary); - width: fit-content; -} - -.linkButton { - display: none; -} - -@media (min-width: 900px) { - .container { - padding: 68px 104px; - border-bottom: 80px; - text-align: left; - } - - .linkButton { - display: block; - } - - .image { - display: flex; - align-items: center; - } -} - -@media (min-width: 1440px) { - .container { - margin-left: -104px; - margin-right: -104px; - } -} diff --git a/src/components/Core/Masthead/index.tsx b/src/components/common/Masthead/index.tsx similarity index 63% rename from src/components/Core/Masthead/index.tsx rename to src/components/common/Masthead/index.tsx index bc29cb209..96826fd0f 100644 --- a/src/components/Core/Masthead/index.tsx +++ b/src/components/common/Masthead/index.tsx @@ -6,30 +6,57 @@ import layoutCss from '@/components/common/styles.module.css' import css from './styles.module.css' import type { BaseBlock } from '@/components/Home/types' import ButtonsWrapper from '@/components/common/ButtonsWrapper' +import { getImageSource, type ImageObj } from '@/lib/getImageSource' + +type FooterProps = { + text: string + logos: [ + { + src: string + alt: string + }, + ] +} + +const Footer = ({ logos, text }: FooterProps) => { + if (!logos) return null + + return ( +
+ {text ? ( + + {text} + + ) : null} + {logos.map((logo, index) => { + return {logo.alt} + })} +
+ ) +} export const Masthead = ({ title, buttons, caption, image, + footer, backgroundImage, }: BaseBlock & { - image: { - sm: string - md: string - alt: string - } - backgroundImage: { sm: string; md: string } + image: ImageObj + backgroundImage: ImageObj + footer: FooterProps }): ReactElement => { const isSmallScreen = useMediaQuery('(max-width:900px)') - const bgImage = isSmallScreen ? backgroundImage.sm : backgroundImage.md - const imageSrc = image ? (isSmallScreen ? image.sm : image.md) : undefined + const bgImage = getImageSource(isSmallScreen, backgroundImage) + const imageSrc = getImageSource(isSmallScreen, image) return (
- + {!backgroundImage ?
: null} + ) : null} +
) diff --git a/src/components/common/Masthead/styles.module.css b/src/components/common/Masthead/styles.module.css new file mode 100644 index 000000000..d9dc83036 --- /dev/null +++ b/src/components/common/Masthead/styles.module.css @@ -0,0 +1,94 @@ +.container { + text-align: center; + background-color: var(--mui-palette-secondary-background); + border-radius: 32px; + padding: 24px 24px 80px; + justify-content: space-between; + margin-bottom: 40px; + background-position: right; + background-size: cover; + position: relative; +} + +.spot { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 50px; + width: 50%; + height: 300px; + background-image: radial-gradient(rgba(18, 255, 128, 0.8), rgba(18, 19, 18, 1) 100%); + filter: blur(50px); +} + +.text { + margin-bottom: 16px; +} + +.button { + color: var(--mui-palette-secondary-main); +} + +.chip { + border-color: var(--mui-palette-text-primary); + width: fit-content; +} + +.linkButton { + display: none; +} + +.footer { + position: absolute; + bottom: 24px; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + flex-direction: row; + gap: 24px; + width: max-content; +} + +.tagline { + color: var(--mui-palette-primary-light); + text-transform: uppercase; +} + +@media (min-width: 900px) { + .container { + padding: 90px 104px; + border-bottom: 80px; + text-align: left; + } + + .spot { + width: 300px; + right: 10%; + top: 50%; + left: unset; + transform: translateY(-50%); + } + + .linkButton { + display: block; + } + + .image { + display: flex; + align-items: center; + width: 300px; + } + + .footer { + left: unset; + transform: unset; + } +} + +@media (min-width: 1440px) { + .container { + margin-left: -104px; + margin-right: -104px; + } +} diff --git a/src/content/core.json b/src/content/core.json index c2f79caa5..5681d58af 100644 --- a/src/content/core.json +++ b/src/content/core.json @@ -37,7 +37,16 @@ "sm": "/images/Core/safeauth-bg-sm.png", "md": "/images/Core/safeauth-bg-md.png" }, - "component": "Core/Masthead" + "footer": { + "logos": [ + { + "src": "/images/Wallet/web3auth-logo.svg", + "alt": "web3auth logo" + } + ], + "text": "Powered by" + }, + "component": "common/Masthead" }, { "title": "Our Account Abstraction stack", diff --git a/src/content/wallet.json b/src/content/wallet.json index 508b90365..4956a410f 100644 --- a/src/content/wallet.json +++ b/src/content/wallet.json @@ -34,8 +34,24 @@ "variant": "link" } ], - "backgroundImage": "/images/Wallet/buoy.png", - "component": "common/BannerCta" + "image": { + "sm": "/images/Wallet/buoy-logo.png", + "md": "/images/Wallet/buoy-logo.png", + "alt": "Recovery buoy logo" + }, + "footer": { + "logos": [ + { + "src": "/images/Wallet/Sygnum-logo.png", + "alt": "Sygnum logo" + }, + { + "src": "/images/Wallet/Coincover-logo.png", + "alt": "Coincover logo" + } + ] + }, + "component": "common/Masthead" }, { "variant": "3-columns", diff --git a/src/lib/__test__/getImageSource.test.ts b/src/lib/__test__/getImageSource.test.ts new file mode 100644 index 000000000..b5981585e --- /dev/null +++ b/src/lib/__test__/getImageSource.test.ts @@ -0,0 +1,38 @@ +import { type ImageObj, getImageSource } from '@/lib/getImageSource' + +describe('getImageSource', () => { + it('should return small image URL when image object exists and isSmall is true', () => { + const imageObj: ImageObj = { + sm: 'small-image.jpg', + md: 'medium-image.jpg', + alt: 'Small Image', + } + const isSmall = true + + const result = getImageSource(isSmall, imageObj) + + expect(result).toBe('small-image.jpg') + }) + + it('should return medium image URL when image object exists and isSmall is false', () => { + const imageObj: ImageObj = { + sm: 'small-image.jpg', + md: 'medium-image.jpg', + alt: 'Medium Image', + } + const isSmall = false + + const result = getImageSource(isSmall, imageObj) + + expect(result).toBe('medium-image.jpg') + }) + + it('should return undefined when image object does not exist', () => { + const imageObj = undefined + const isSmall = true + + const result = getImageSource(isSmall, imageObj) + + expect(result).toBeUndefined() + }) +}) diff --git a/src/lib/getImageSource.ts b/src/lib/getImageSource.ts new file mode 100644 index 000000000..9c5bd7501 --- /dev/null +++ b/src/lib/getImageSource.ts @@ -0,0 +1,15 @@ +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 +}