Merge branch 'main' into sine-wave-animation

package.json

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

src/components/Foundry/Hero/index.tsx

@@ -0,0 +1,53 @@
+import { type BaseBlockEntry } from '@/config/types'
+import RichText from '@/components/common/RichText'
+import ButtonsWrapper from '@/components/Token/ButtonsWrapper'
+import { isAsset, isEntryTypeButton } from '@/lib/typeGuards'
+import { Container, Typography } from '@mui/material'
+import { useIsMediumScreen } from '@/hooks/useMaxWidth'
+import css from './styles.module.css'
+
+const Hero = (props: BaseBlockEntry) => {
+  const isMediumScreen = useIsMediumScreen()
+  const { title, text, buttons, image, bgImage } = props.fields
+
+  const buttonsList = buttons?.filter(isEntryTypeButton) || []
+
+  const imageURL = isAsset(image) && image.fields.file?.url ? image.fields.file.url : ''
+  const bgImageURL = isAsset(bgImage) && bgImage.fields.file?.url ? bgImage.fields.file.url : ''
+
+  return (
+    <div className={css.bg} style={{ backgroundImage: `url(${bgImageURL})` }}>
+      <div className={css.gradientHorizontal}>
+        <div className={css.spot1} />
+        <div className={css.spot2} />
+
+        {/* Networks image does not show in smaller resolutions */}
+        <div className={css.image} style={{ backgroundImage: `url(${!isMediumScreen ? imageURL : ''})` }}>
+          <Container className={css.container}>
+            <img src="/images/safe-foundry-logo.png" alt="Safe Foundry logo" className={css.logo} />
+
+            <div className={css.textBlock}>
+              <Typography variant="h1" className={css.title}>
+                <RichText {...title} />
+              </Typography>
+
+              {text && (
+                <div className={css.text}>
+                  <RichText {...text} />
+                </div>
+              )}
+
+              {buttonsList.length > 0 && (
+                <div className={css.buttons}>
+                  <ButtonsWrapper buttons={buttonsList} />
+                </div>
+              )}
+            </div>
+          </Container>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hero

src/components/Foundry/Hero/styles.module.css

@@ -0,0 +1,118 @@
+.bg {
+  background-position-x: center;
+  background-repeat: no-repeat;
+  overflow: visible;
+  background-size: cover;
+  position: relative;
+}
+
+.spot1 {
+  position: absolute;
+  left: -300px;
+  top: 200px;
+  width: 600px;
+  height: 600px;
+  background-image: radial-gradient(at top left, rgba(18, 255, 128, 0.4) 0%, rgba(246, 247, 248, 0) 80%);
+  filter: blur(70px);
+}
+
+.container {
+  margin-top: 70px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.textBlock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+
+.title {
+  max-width: 1170px;
+  text-align: center;
+}
+
+.title p,
+.text p {
+  margin: 0;
+}
+
+.logo {
+  height: 32px;
+  margin-bottom: 16px;
+}
+
+@media (min-width: 600px) {
+  .container {
+    margin-top: 150px;
+  }
+}
+
+@media (min-width: 900px) {
+  .spot1 {
+    left: -100px;
+    top: 100px;
+    width: 700px;
+    height: 700px;
+  }
+
+  .spot2 {
+    position: absolute;
+    right: 0px;
+    top: 50px;
+    width: 800px;
+    height: 800px;
+    background-image: radial-gradient(at right, rgba(41, 182, 246, 0.4) 0%, rgba(246, 247, 248, 0) 80%);
+    filter: blur(50px);
+  }
+
+  .image {
+    background-repeat: no-repeat;
+    overflow: hidden;
+    background-size: contain;
+    background-position: center top 140px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .gradientHorizontal:before,
+  .gradientHorizontal:after {
+    content: '';
+    top: 0;
+    display: block;
+    height: 100%;
+    position: absolute;
+    width: 30px;
+    pointer-events: none;
+  }
+
+  .gradientHorizontal:before {
+    background: linear-gradient(-90deg, rgba(18, 19, 18, 0) 0%, rgb(20, 20, 20) 100%);
+  }
+
+  .gradientHorizontal:after {
+    width: 1px;
+    background: linear-gradient(270deg, rgba(18, 19, 18, 0.1) 0%, rgba(18, 19, 18, 0) 100%);
+    right: 0px;
+  }
+
+  .text {
+    text-align: center;
+    max-width: 780px;
+  }
+
+  .logo {
+    height: 40px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .spot1,
+  .spot2 {
+    width: 1000px;
+    height: 1000px;
+  }
+}

src/components/Foundry/POCs/Card.tsx

@@ -0,0 +1,46 @@
+import { Typography } from '@mui/material'
+import RichText from '@/components/common/RichText'
+import ButtonsWrapper from '@/components/Token/ButtonsWrapper'
+import { isAsset, isEntryTypeButton } from '@/lib/typeGuards'
+import { type BaseBlockEntry } from '@/config/types'
+import GithubIcon from '@/public/images/github-icon.svg'
+import css from './styles.module.css'
+
+const Card = (props: BaseBlockEntry) => {
+  const { caption, title, text, link, image, buttons } = props.fields
+
+  const buttonsList = buttons?.filter(isEntryTypeButton) || []
+
+  return (
+    <div className={css.card}>
+      <div className={css.cardHeader}>
+        <Typography variant="h4">
+          <RichText {...title} />
+        </Typography>
+
+        <GithubIcon />
+      </div>
+
+      <div className={css.cardBody}>
+        {text ? <RichText {...text} /> : null}
+
+        <div className={css.extraText}>
+          <Typography color="primary.light">{caption}</Typography>
+
+          {isAsset(image) && image.fields.file?.url ? (
+            <div className={css.partner}>
+              <img src={image.fields.file.url} alt={image.fields.title ?? ''} />
+              <span>{image.fields.description}</span>
+            </div>
+          ) : null}
+        </div>
+
+        <div className={css.buttons}>
+          <ButtonsWrapper buttons={buttonsList} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Card

src/components/Foundry/POCs/index.tsx

@@ -0,0 +1,39 @@
+import { Container, Grid, Typography } from '@mui/material'
+import RichText from '@/components/common/RichText'
+import Card from '@/components/Foundry/POCs/Card'
+import { type BaseBlockEntry } from '@/config/types'
+import { isEntryTypeBaseBlock } from '@/lib/typeGuards'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+const POCs = (props: BaseBlockEntry) => {
+  const { caption, title, text, items } = props.fields
+
+  const itemsList = items?.filter(isEntryTypeBaseBlock) || []
+
+  return (
+    <Container className={`${layoutCss.containerShort} ${layoutCss.centeredContent}`}>
+      <div className={css.title}>
+        <RichText {...title} />
+      </div>
+
+      {text && (
+        <div className={css.text}>
+          <RichText {...text} />
+        </div>
+      )}
+
+      <Grid container columnSpacing={2} rowGap="30px" className={css.gridContainer}>
+        {itemsList.map((item, index) => (
+          <Grid key={index} item xs={12} md={5}>
+            <Card key={item.fields.caption} {...item} />
+          </Grid>
+        ))}
+      </Grid>
+
+      <Typography className={css.caption}>{caption}</Typography>
+    </Container>
+  )
+}
+
+export default POCs

src/components/Foundry/POCs/styles.module.css

@@ -0,0 +1,107 @@
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.text {
+  margin: 16px auto 0;
+  max-width: 725px;
+  text-align: center;
+}
+
+.title p,
+.text p {
+  margin: 0;
+}
+
+.caption {
+  margin-top: 80px;
+  text-align: center;
+}
+
+.gridContainer {
+  justify-content: center;
+  margin-top: 40px;
+}
+
+.cardHeader {
+  height: 100px;
+  padding: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--mui-palette-border-light);
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.cardHeader p,
+.cardBody p {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+
+.cardHeader svg {
+  width: 24px;
+  height: 24px;
+}
+
+.cardBody {
+  padding: 32px;
+  border: 1px solid var(--mui-palette-border-light);
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+
+.cardBody a {
+  text-decoration: underline;
+  color: var(--mui-palette-primary-main);
+}
+
+.extraText {
+  margin-top: 24px;
+}
+
+.partner {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.partner img {
+  width: 32px;
+  height: 32px;
+}
+
+.buttons {
+  margin-top: 32px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+@media (min-width: 900px) {
+  .buttons {
+    justify-content: center;
+  }
+
+  .gridContainer {
+    margin-top: 80px;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .cardBody {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+}