Pressroom about

src/components/Blog/styles.module.css

@@ -43,6 +43,7 @@
 
 .tagsWrapper {
   display: flex;
+  flex-wrap: wrap;
   gap: 16px;
 }
 

src/components/Pressroom/AboutUs/index.tsx

@@ -0,0 +1,27 @@
+import { PressroomIds } from '@/components/Pressroom/ContentsNavigation'
+import { formatValue } from '@/lib/formatValue'
+import { Box, Typography } from '@mui/material'
+
+const TOTAL_ASSETS_STORED = 'https://dune.com/queries/2893829/4821383'
+// TODO: Remove this temporary fallback value when the Dune query is fixed
+const TOTAL_ASSETS_FALLBACK = '120B'
+
+const AboutUs = ({ totalAssets }: { totalAssets: number }) => {
+  const totalAssetsStr = `~$${totalAssets ? formatValue(totalAssets) : TOTAL_ASSETS_FALLBACK}`
+  const totalAssetsLink = (
+    <a href={TOTAL_ASSETS_STORED} target="_blank" rel="noreferrer">
+      <b>{totalAssetsStr}</b>
+    </a>
+  )
+
+  return (
+    <Box mt="140px" id={PressroomIds.ABOUT_US} width={{ xs: '100%', md: 9 / 12 }}>
+      <Typography variant="caption">About us</Typography>
+      <Typography variant="h2">
+        <i>Safe</i> is an onchain asset custody protocol, securing <>{totalAssetsLink}</> in assets today.
+      </Typography>
+    </Box>
+  )
+}
+
+export default AboutUs

src/components/Pressroom/ContentsNavigation/index.tsx

@@ -0,0 +1,51 @@
+import { Box, ButtonBase, Grid, Typography } from '@mui/material'
+import css from './styles.module.css'
+import { AppRoutes } from '@/config/routes'
+import NextLink from 'next/link'
+import { PRESS_LINK } from '@/config/constants'
+
+type NavItemType = {
+  label: string
+  href: string
+}
+
+export const enum PressroomIds {
+  ABOUT_US = 'about',
+  SAFE_IN_THE_NEWS = 'news',
+  PRESS_RELEASES = 'press',
+}
+
+const sections: NavItemType[] = [
+  { label: 'About us', href: `#${PressroomIds.ABOUT_US}` },
+  { label: 'Safe in the news', href: `#${PressroomIds.SAFE_IN_THE_NEWS}` },
+  { label: 'Press releases', href: `#${PressroomIds.PRESS_RELEASES}` },
+  { label: 'Blog', href: AppRoutes.blog.index },
+  { label: 'Media kit', href: PRESS_LINK },
+]
+
+const ContentsNavigation = () => (
+  <Box mt="140px">
+    <Typography variant="h3">What are you looking for?</Typography>
+    <Grid container columnSpacing="32px" rowGap="36px" mt="36px">
+      {sections.map((item) => {
+        const isAnchor = item.href.startsWith('#')
+
+        return (
+          <Grid item xs={12} md={4} key={item.href}>
+            <NextLink
+              href={item.href}
+              target={!isAnchor ? '_blank' : undefined}
+              rel={!isAnchor ? 'noopener noreferrer' : undefined}
+            >
+              <ButtonBase className={css.navButton}>
+                <Typography>{item.label}</Typography>
+              </ButtonBase>
+            </NextLink>
+          </Grid>
+        )
+      })}
+    </Grid>
+  </Box>
+)
+
+export default ContentsNavigation

src/components/Pressroom/ContentsNavigation/styles.module.css

@@ -0,0 +1,11 @@
+.navButton {
+  padding: 24px 64px;
+  width: 100%;
+  border: 1px solid var(--mui-palette-border-light);
+  transition-duration: var(--transition-duration);
+  border-radius: 6px;
+}
+
+.navButton:hover {
+  border: 1px solid var(--mui-palette-primary-main);
+}

src/components/Pressroom/FeaturedVideos/index.tsx

@@ -1,40 +1,36 @@
-import { Grid, Typography } from '@mui/material'
+import { Box, Grid, Typography } from '@mui/material'
 import css from './styles.module.css'
 import LinkButton from '@/components/common/LinkButton'
 import { type Entry } from 'contentful'
 import { type TypeExternalUrlSkeleton } from '@/contentful/types'
 import MediaPlayer from '@/components/common/MediaPlayer'
 import SafeLink from '@/components/common/SafeLink'
 
-const VideoCard = ({ title, url }: { title?: string; url: string }) => {
-  return (
-    <div className={css.card}>
-      <MediaPlayer url={url} />
-      <div className={css.cardBody}>
-        {title ? <Typography variant="h3">{title}</Typography> : null}
-        <SafeLink href={url}>
-          <LinkButton>Watch now</LinkButton>
-        </SafeLink>
-      </div>
+const VideoCard = ({ title, url }: { title?: string; url: string }) => (
+  <div className={css.card}>
+    <MediaPlayer url={url} />
+    <div className={css.cardBody}>
+      {title ? <Typography variant="h3">{title}</Typography> : null}
+      <SafeLink href={url}>
+        <LinkButton>Watch now</LinkButton>
+      </SafeLink>
     </div>
-  )
-}
+  </div>
+)
 
-const FeaturedVideos = ({ videos }: { videos: Entry<TypeExternalUrlSkeleton, undefined, string>[] }) => {
-  return (
-    <>
-      <Typography variant="h2" textAlign="center" mt={{ xs: '80px', md: '200px' }}>
-        Featured videos
-      </Typography>
-      <Grid container columnSpacing={2} rowGap="30px" mt="80px">
-        {videos.map((video, index) => (
-          <Grid key={index} item xs={12} md={4}>
-            <VideoCard {...video.fields} />
-          </Grid>
-        ))}
-      </Grid>
-    </>
-  )
-}
+const FeaturedVideos = ({ videos }: { videos: Entry<TypeExternalUrlSkeleton, undefined, string>[] }) => (
+  <Box mt={{ xs: '80px', md: '250px' }}>
+    <Typography variant="h2" textAlign="center">
+      Featured videos
+    </Typography>
+    <Grid container columnSpacing={2} rowGap="30px" mt="80px">
+      {videos.map((video, index) => (
+        <Grid key={index} item xs={12} md={4}>
+          <VideoCard {...video.fields} />
+        </Grid>
+      ))}
+    </Grid>
+  </Box>
+)
 
 export default FeaturedVideos

src/components/Pressroom/Founders/index.tsx

@@ -11,31 +11,31 @@ const Founders = () => {
         <Typography variant="h2">Founding team</Typography>
         <Grid container spacing={4} mt={3}>
           <Grid item xs={12} md={6}>
-            <Typography variant="h4">Lukas Schor</Typography>
+            <Typography variant="h4">Christoph Simmchen</Typography>
             <Typography color="primary.light">
               Co-Founder <br />
-              Ecosystem &amp; Marketing
+              Governance &amp; Operations
             </Typography>
           </Grid>
           <Grid item xs={12} md={6}>
-            <Typography variant="h4">Tobias Schubotz</Typography>
+            <Typography variant="h4">Richard Meissner</Typography>
             <Typography color="primary.light">
               Co-Founder <br />
-              Safe{'{Wallet}'}
+              Safe{'{Core}'}
             </Typography>
           </Grid>
           <Grid item xs={12} md={6}>
-            <Typography variant="h4">Richard Meissner</Typography>
+            <Typography variant="h4">Lukas Schor</Typography>
             <Typography color="primary.light">
               Co-Founder <br />
-              Safe{'{Core}'}
+              Ecosystem &amp; Marketing
             </Typography>
           </Grid>
           <Grid item xs={12} md={6}>
-            <Typography variant="h4">Christoph Simmchen</Typography>
+            <Typography variant="h4">Tobias Schubotz</Typography>
             <Typography color="primary.light">
               Co-Founder <br />
-              Governance &amp; Operations
+              Safe{'{Wallet}'}
             </Typography>
           </Grid>
         </Grid>

src/components/Pressroom/Marquee/index.tsx

@@ -0,0 +1,40 @@
+import { Typography } from '@mui/material'
+import clsx from 'clsx'
+import css from './styles.module.css'
+import { type Entry } from 'contentful'
+import { type TypeSimpleBaseBlockSkeleton } from '@/contentful/types'
+
+type RowType = { title: string; text: string }
+
+const Row = ({ items }: { items: RowType[] }) => (
+  <div className={css.rowWrapper}>
+    {items.map(({ title, text }, i) => (
+      <div key={`${title}_${i}`}>
+        <p className={css.value}>{text}</p>
+        <Typography variant="caption">{title}</Typography>
+      </div>
+    ))}
+  </div>
+)
+
+type MarqueeProps = { items: Entry<TypeSimpleBaseBlockSkeleton, undefined, string>[] }
+
+const Marquee = ({ items }: MarqueeProps) => {
+  const rowItems = items.map(({ fields }) => fields)
+
+  return (
+    <div className={css.wrapper}>
+      <div className={css.gradientBase} />
+      <div className={css.animation}>
+        <div className={css.slider}>
+          <Row items={rowItems} />
+          <Row items={rowItems} />
+          <Row items={rowItems} />
+        </div>
+      </div>
+      <div className={clsx(css.gradientBase, css.gradientFlipped)} />
+    </div>
+  )
+}
+
+export default Marquee

src/components/Pressroom/Marquee/styles.module.css

@@ -0,0 +1,83 @@
+.wrapper {
+  --items-gap: 100px;
+  margin-top: 120px;
+  overflow: hidden;
+  position: relative;
+}
+
+.animation {
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  display: flex;
+  width: max-content;
+  min-width: 200%;
+  animation-duration: 100s;
+  animation-delay: 0s;
+  animation-play-state: running;
+  animation-name: slide;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.slider {
+  display: flex;
+  gap: var(--items-gap);
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  font-size: 0;
+}
+
+.rowWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: var(--items-gap);
+}
+
+.value {
+  margin: 0;
+  font-size: 64px;
+  line-height: 64px;
+  background: linear-gradient(90deg, rgba(15, 255, 128, 1) 0%, rgba(94, 221, 255, 1) 60%);
+  background-clip: text;
+  color: transparent;
+}
+
+.gradientBase {
+  position: absolute;
+  width: var(--items-gap);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(270deg, rgba(18, 19, 18, 0) 0%, var(--mui-palette-background-default) 100%);
+  z-index: 1;
+}
+
+.gradientFlipped {
+  left: auto;
+  right: 0;
+  width: var(--items-gap);
+  transform: scaleX(-1);
+}
+
+@keyframes slide {
+  to {
+    transform: translate(-50%);
+  }
+}
+
+@media (min-width: 600px) {
+  .value {
+    font-size: 80px;
+    line-height: 100px;
+  }
+
+  .gradientBase {
+    width: 120px;
+  }
+
+  .gradientFlipped {
+    width: 120px;
+  }
+}

src/components/Pressroom/MediaKit/index.tsx

@@ -13,7 +13,7 @@ const MediaKit = () => {
       {/* Media Kit */}
       <Grid container mt="120px" rowGap={4}>
         <Grid item md={6} className={css.alignCenter}>
-          <Typography variant="h1">Media kit</Typography>
+          <Typography variant="h2">Media kit</Typography>
         </Grid>
         <Grid item md={1} />
         <Grid item xs={12} md={5}>
@@ -32,7 +32,7 @@ const MediaKit = () => {
       {/* Contact Us */}
       <Grid container mt={{ xs: '120px', md: '140px' }} rowGap={4}>
         <Grid item md={6} className={css.alignCenter}>
-          <Typography variant="h1">Contact us</Typography>
+          <Typography variant="h2">Contact us</Typography>
         </Grid>
         <Grid item md={1} />
         <Grid item xs={12} md={5}>

src/components/Pressroom/News/index.tsx

@@ -1,14 +1,15 @@
-import { Grid, Typography } from '@mui/material'
+import { Box, Grid, Typography } from '@mui/material'
 import { type Entry } from 'contentful'
 import { type TypeExternalUrlSkeleton } from '@/contentful/types'
 import LinkCard from '@/components/common/LinkCard'
 import { extractContentfulImageProps } from '@/lib/contentful/extractContentfulImageProps'
+import { PressroomIds } from '@/components/Pressroom/ContentsNavigation'
 
 type NewsProps = { news: Entry<TypeExternalUrlSkeleton, undefined, string>[] }
 
 export const News = ({ news }: NewsProps) => (
-  <>
-    <Typography variant="h2" textAlign="center" mt={{ xs: '80px', md: '200px' }}>
+  <Box id={PressroomIds.SAFE_IN_THE_NEWS} mt={{ xs: '80px', md: '140px' }}>
+    <Typography variant="h2" textAlign="center">
       <em>Safe</em> in the news
     </Typography>
     <Grid container columnSpacing={2} rowGap="30px" mt="80px">
@@ -26,7 +27,7 @@ export const News = ({ news }: NewsProps) => (
         )
       })}
     </Grid>
-  </>
+  </Box>
 )
 
 export default News