feat: banner for SafeAuth (#254)

* feat: SafeAuth banner

* fix: receive different assets for sm and md viewports

* feat: make intro scroll optional

* update link to our docs

* update content

* content update

* bump version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "safe-homepage",
   "homepage": "https://github.com/safe-global/safe-homepage",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

src/components/Campaign/Faq/styles.module.css

@@ -45,8 +45,12 @@
   padding: 0 0 32px;
 }
 
-.details p {
-  margin: 0;
+.details p:first-of-type {
+  margin-top: 0;
+}
+
+.details p:last-of-type {
+  margin-bottom: 0;
 }
 
 .details a {

src/components/Core/Intro/index.tsx

@@ -3,11 +3,12 @@ import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 import { scrollToElement } from '@/lib/scrollSmooth'
 
-const CoreIntro = ({ title, text, link }: BaseBlock) => {
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+const CoreIntro = ({ title, text, link, scroll }: BaseBlock & { scroll?: { title: string; target: string } }) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, target: string) => {
     e.preventDefault()
 
-    scrollToElement('#masthead', 200)
+    // TODO: move offset to CSS
+    scrollToElement(target, 200)
   }
 
   return (
@@ -41,9 +42,11 @@ const CoreIntro = ({ title, text, link }: BaseBlock) => {
             </Button>
           )}
         </Grid>
-        <a onClick={handleClick} className={css.scroll}>
-          <Typography variant="caption">New Whitepaper</Typography>
-        </a>
+        {scroll && (
+          <a onClick={(e) => handleClick(e, scroll.target)} className={css.scroll}>
+            <Typography variant="caption">{scroll.title}</Typography>
+          </a>
+        )}
       </Grid>
       <Divider />
     </Container>

src/components/Core/Masthead/index.tsx

@@ -1,4 +1,4 @@
-import { Chip, Grid, Typography } from '@mui/material'
+import { Chip, Grid, Typography, useMediaQuery } from '@mui/material'
 import { Container } from '@mui/system'
 import type { ReactElement } from 'react'
 
@@ -7,12 +7,30 @@ import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 import ButtonsWrapper from '@/components/common/ButtonsWrapper'
 
-export const Masthead = ({ title, buttons, caption, image }: BaseBlock): ReactElement => {
+export const Masthead = ({
+  title,
+  buttons,
+  caption,
+  image,
+  backgroundImage,
+}: BaseBlock & {
+  image: {
+    sm: string
+    md: string
+    alt: string
+  }
+  backgroundImage: { sm: string; md: string }
+}): ReactElement => {
+  const isSmallScreen = useMediaQuery('(max-width:900px)')
+
+  const bgImage = isSmallScreen ? backgroundImage.sm : backgroundImage.md
+  const imageSrc = image ? (isSmallScreen ? image.sm : image.md) : undefined
+
   return (
     <Container className={layoutCss.containerShort} id="masthead">
-      <div className={css.container}>
+      <div className={css.container} style={{ backgroundImage: `url(${bgImage})` }}>
         <Grid container spacing={{ xs: '90px', sm: '30px' }} justifyContent="space-between">
-          <Grid item xs={12} md={7} lg={8}>
+          <Grid item xs={12} md={7}>
             <Chip
               label={
                 <Typography variant="caption" color="text.primary">
@@ -27,9 +45,9 @@ export const Masthead = ({ title, buttons, caption, image }: BaseBlock): ReactEl
             </Typography>
             <ButtonsWrapper buttons={buttons} />
           </Grid>
-          {image ? (
-            <Grid item xs={12} md={4} lg={3} xl={2.5} className={css.image}>
-              <img src={image.src} alt={image.alt} />
+          {imageSrc ? (
+            <Grid item xs={12} md={5} xl={4} className={css.image}>
+              <img src={imageSrc} alt={image.alt} />
             </Grid>
           ) : null}
         </Grid>

src/components/Core/Masthead/styles.module.css

@@ -1,10 +1,12 @@
 .container {
   text-align: center;
   background-color: var(--mui-palette-secondary-background);
-  border-radius: 24px;
+  border-radius: 32px;
   padding: 24px;
   justify-content: space-between;
   margin-bottom: 40px;
+  background-position: right;
+  background-size: cover;
 }
 
 .text {
@@ -29,9 +31,6 @@
     padding: 68px 104px;
     border-bottom: 80px;
     text-align: left;
-    background-image: url('/images/Core/whitepaper-bg.svg');
-    background-repeat: no-repeat;
-    background-position: right top;
   }
 
   .linkButton {

src/content/core.json

@@ -6,34 +6,36 @@
   {
     "title": "Safe <u>CORE</u><br/>Smart Wallet Infrastructure",
     "text": "Full-stack. Battle-tested. Open-source.",
-    "video": {
-      "src": "/videos/intro-chip.webm"
-    },
     "link": {
       "title": "View documentation",
       "href": "https://docs.safe.global"
     },
     "component": "Core/Intro"
   },
   {
-    "title": "Launching<br/>Safe <u>CORE</u> Protocol",
-    "caption": "Whitepaper",
+    "title": "Portable Safe Accounts<br/> with Social Login",
+    "caption": "Build with Web3Auth",
     "buttons": [
       {
-        "text": "Read Whitepaper",
-        "href": "https://github.com/safe-global/safe-core-protocol-specs/blob/main/whitepaper.pdf",
+        "text": "Try it now",
+        "href": "https://safe.web3auth.com/",
         "variant": "button",
         "color": "secondary"
       },
       {
-        "text": "GitHub",
-        "href": "https://github.com/safe-global/safe-core-protocol-specs",
+        "text": "SafeAuth Docs",
+        "href": "https://docs.safe.global/safe-core-aa-sdk/auth-kit/guides/safe-auth",
         "variant": "link"
       }
     ],
     "image": {
-      "src": "/images/Core/whitepaper-new.svg",
-      "alt": "new document"
+      "sm": "/images/Core/safeauth-logo-sm.png",
+      "md": "/images/Core/safeauth-logo-md.png",
+      "alt": "SafeAuth logo"
+    },
+    "backgroundImage": {
+      "sm": "/images/Core/safeauth-bg-sm.png",
+      "md": "/images/Core/safeauth-bg-md.png"
     },
     "component": "Core/Masthead"
   },