feat: Masthead component (#225)

* feat:  Masthead component

* update assets

* update link copy

* remove previous Safe Core protocol section

* update whitepaper svg asset

* adjust image size. show links in mobile

* adjust page layout

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

@@ -16,10 +16,6 @@
   background-position: bottom;
 }
 
-.text {
-  margin-bottom: 16px;
-}
-
 .button {
   color: var(--mui-palette-secondary-main);
 }

src/components/Core/LinkedCardGrid/index.tsx

@@ -6,6 +6,7 @@ import FourSquareAnimation from '@/components/common/FourSquareAnimation'
 import ThreeSquareAnimation from '@/components/common/ThreeSquareAnimation'
 import type { BaseBlock } from '@/components/Home/types'
 import FiveSquareAnimation from '@/components/common/FiveSquareAnimation'
+import layoutCss from '@/components/common/styles.module.css'
 
 const SquareAnimations = [FourSquareAnimation, FiveSquareAnimation, ThreeSquareAnimation]
 
@@ -41,7 +42,7 @@ export type LinkedCardGridProps = {
 }
 
 const LinkedCardGrid = ({ title, items }: LinkedCardGridProps) => (
-  <Container>
+  <Container className={layoutCss.containerShort}>
     <Grid container justifyContent="center" mt="100px">
       <Typography variant="caption" textAlign="center" component="div" mb={3}>
         {title}

src/components/Core/Masthead/index.tsx

@@ -0,0 +1,63 @@
+import { Box, Button, Chip, Grid, Typography } from '@mui/material'
+import { Container } from '@mui/system'
+import type { ReactElement } from 'react'
+
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+import type { BaseBlock } from '@/components/Home/types'
+import LinkButton from '@/components/common/LinkButton'
+import Link from 'next/link'
+
+export const Masthead = ({ title, buttons, caption, image }: BaseBlock): ReactElement => {
+  return (
+    <Container className={layoutCss.containerShort}>
+      <div className={css.container}>
+        <Grid container spacing={{ xs: '90px', sm: '30px' }} justifyContent="space-between">
+          <Grid item xs={12} md={7} lg={8}>
+            <Chip
+              label={
+                <Typography variant="caption" color="text.primary">
+                  {caption}
+                </Typography>
+              }
+              className={css.chip}
+              variant="outlined"
+            />
+            <Typography variant="h2" color="text.primary" mt={3} mb={5}>
+              {title}
+            </Typography>
+            {buttons ? (
+              <Box display="flex" gap={3} color="white" flexDirection={{ xs: 'column', md: 'row' }} alignItems="center">
+                {buttons.map((button, index) => {
+                  const { text, variant, href } = button
+                  const isButton = variant === 'button'
+
+                  return (
+                    <Link key={index} href={href} target="_blank" rel="noreferrer" passHref>
+                      {isButton ? (
+                        <Button variant="contained" size="large" color="secondary">
+                          {text}
+                        </Button>
+                      ) : (
+                        <LinkButton color="secondary" sx={{ width: 'fit-content' }}>
+                          {text}
+                        </LinkButton>
+                      )}
+                    </Link>
+                  )
+                })}
+              </Box>
+            ) : null}
+          </Grid>
+          {image ? (
+            <Grid item xs={12} md={4} lg={3} xl={2.5} className={css.image}>
+              <img src={image.src} alt={image.alt} />
+            </Grid>
+          ) : null}
+        </Grid>
+      </div>
+    </Container>
+  )
+}
+
+export default Masthead

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

@@ -0,0 +1,53 @@
+.container {
+  text-align: center;
+  background-color: var(--mui-palette-secondary-background);
+  border-radius: 24px;
+  color: var(--mui-palette-text-dark);
+  padding: 24px;
+  justify-content: space-between;
+  margin-bottom: 40px;
+}
+
+.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;
+    background-image: url('/images/Core/whitepaper-bg.svg');
+    background-repeat: no-repeat;
+    background-position: right top;
+  }
+
+  .linkButton {
+    display: block;
+  }
+
+  .image {
+    display: flex;
+    align-items: center;
+  }
+}
+
+@media (min-width: 1440px) {
+  .container {
+    margin-left: -104px;
+    margin-right: -104px;
+  }
+}

src/content/core.json

@@ -15,6 +15,27 @@
     },
     "component": "Core/Intro"
   },
+  {
+    "title": "Launching<br/>Safe <u>CORE</u> Protocol",
+    "caption": "Whitepaper",
+    "buttons": [
+      {
+        "text": "Read Whitepaper",
+        "href": "https://github.com/safe-global/safe-core-protocol-specs",
+        "variant": "button"
+      },
+      {
+        "text": "GitHub",
+        "href": "https://github.com/safe-global/safe-core-protocol-specs",
+        "variant": "link"
+      }
+    ],
+    "image": {
+      "src": "/images/Core/whitepaper-new.svg",
+      "alt": "new document"
+    },
+    "component": "Core/Masthead"
+  },
   {
     "title": "Our Account Abstraction stack",
     "items": [
@@ -170,37 +191,6 @@
     ],
     "component": "Core/Tweets"
   },
-  {
-    "caption": "Safe core protocol",
-    "title": "Build any use case with the battle-tested security of Safe <u>CORE</u> Protocol",
-    "text": "Tap into the ecosystem’s cutting-edge modules and guard extensions or write your own custom logic to plug into the Safe core contracts.",
-    "link": {
-      "title": "Get started",
-      "href": "https://docs.safe.global/safe-core-protocol/safe-core-protocol"
-    },
-    "image": {
-      "src": "/images/Core/safe-core-protocol.png",
-      "alt": "Safe core protocol"
-    },
-    "grid": {
-      "title": "Benefits",
-      "items": [
-        {
-          "title": "Extend account logic using Safe Modules"
-        },
-        {
-          "title": "Implement transaction checks using Safe Guards"
-        },
-        {
-          "title": "Batch transactions using Multisend"
-        },
-        {
-          "title": "Use new signature schemes using Fallback Handlers"
-        }
-      ]
-    },
-    "component": "Core/TextGrid"
-  },
   {
     "title": "Hacking on<br />Safe <u>CORE</u>?",
     "caption": "Hackathon",