feat: add sponsors to announcements banners (#259)

* feat: add sponsors to Masthead

* refactor: move Masthead to common folder

* feat: add sponsors to Web3Auth banner

* refactor: component for Masthead footer

* refactor: move dup code to getImageSource

* bump version

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",

src/components/Core/Masthead/index.tsx → 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 (
+    <div className={css.footer}>
+      {text ? (
+        <Typography variant="caption" mr="-14px">
+          {text}
+        </Typography>
+      ) : null}
+      {logos.map((logo, index) => {
+        return <img src={logo.src} alt={logo.alt} key={index} />
+      })}
+    </div>
+  )
+}
 
 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 (
     <Container className={layoutCss.containerShort} id="masthead">
       <div className={css.container} style={{ backgroundImage: `url(${bgImage})` }}>
-        <Grid container spacing={{ xs: '90px', sm: '30px' }} justifyContent="space-between">
+        {!backgroundImage ? <div className={css.spot} /> : null}
+        <Grid container spacing={{ xs: '90px', sm: '30px' }} justifyContent="space-between" position="relative">
           <Grid item xs={12} md={7}>
             <Chip
               label={
@@ -51,6 +78,7 @@ export const Masthead = ({
             </Grid>
           ) : null}
         </Grid>
+        <Footer {...footer} />
       </div>
     </Container>
   )

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;
+  }
+}

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",

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",

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()
+  })
+})

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
+}