refactor: use the new Grid component in the Roadmap component; refs #116

2026-08-05 13:46:35 -07:00 · 2023-10-10 16:48:20 +03:30
parent cdbe63620c
commit 306749e98c
18 changed files with 446 additions and 612 deletions
@@ -2,47 +2,48 @@
 title: Join the community
 ---

-import { Community } from '../../logos-docusaurus-theme/src/client/components/mdx'
-import { SocialCard, Grid } from '@site/src/components/mdx'
+import { SocialCard, Grid, Box } from '@site/src/components/mdx'

 # Join the community

 Welcome to the Waku community! Whether you are interested in building with Waku, contributing to the network, expanding your knowledge, or staying abreast of our progress, we have something for everyone.

-<Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
-  <Grid.Item xs={1}>
-    <SocialCard
-      logoSrcDark="/icons/x.svg"
-      href="https://discord.gg/2NXGrsqmDq"
-      description="Follow us on X"
-    />
-  </Grid.Item>
-  <Grid.Item xs={1}>
-    <SocialCard
-      logoSrcDark="/icons/discord-white.svg"
-      href="https://discord.gg/2NXGrsqmDq"
-      description="Join the community on Discord"
-    />
-  </Grid.Item>
-  <Grid.Item xs={1}>
-    <SocialCard
-      logoSrcDark="/icons/telegram-white.svg"
-      href="https://discord.gg/2NXGrsqmDq"
-      description="Jump in the conversation on Telegram"
-    />
-  </Grid.Item>
-  <Grid.Item xs={1}>
-    <SocialCard
-      logoSrcDark="/icons/discord.svg"
-      href="https://discord.gg/2NXGrsqmDq"
-      description="Share your thoughts on the latest research on the Vac research forum"
-    />
-  </Grid.Item>
-  <Grid.Item xs={1}>
-    <SocialCard
-      logoSrcDark="/icons/github.svg"
-      href="https://discord.gg/2NXGrsqmDq"
-      description="Contribute to Github"
-    />
-  </Grid.Item>
-</Grid>
+<Box top={56} bottom={56}>
+  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
+    <Grid.Item xs={1}>
+      <SocialCard
+        logoSrcDark="/icons/x.svg"
+        href="https://discord.gg/2NXGrsqmDq"
+        description="Follow us on X"
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <SocialCard
+        logoSrcDark="/icons/discord-white.svg"
+        href="https://discord.gg/2NXGrsqmDq"
+        description="Join the community on Discord"
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <SocialCard
+        logoSrcDark="/icons/telegram-white.svg"
+        href="https://discord.gg/2NXGrsqmDq"
+        description="Jump in the conversation on Telegram"
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <SocialCard
+        logoSrcDark="/icons/discord.svg"
+        href="https://discord.gg/2NXGrsqmDq"
+        description="Share your thoughts on the latest research on the Vac research forum"
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <SocialCard
+        logoSrcDark="/icons/github.svg"
+        href="https://discord.gg/2NXGrsqmDq"
+        description="Contribute to Github"
+      />
+    </Grid.Item>
+  </Grid>
+</Box>
@@ -14,6 +14,9 @@ import {
  Grid,
  ProfileCard,
  ProfileCards,
+  Roadmap,
+  SectionHeader,
+  TimelineItem,
 } from '../components/mdx'

 <Hero size="large">
@@ -96,7 +99,7 @@ import {
      xs={{ cols: 3, gap: '1rem', wrap: false }}
      md={{ cols: 4, gap: '1rem', wrap: true }}
    >
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Jeremy"
          githubUsername="jeremyjeremyjeremy"
@@ -105,7 +108,7 @@ import {
          discordLink="https://discord.gg/2NXGrsqmDq"
        />
      </Grid.Item>
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Dimitriy"
          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=297aeedfad6fed82ed60a93a9d850762"
@@ -115,7 +118,7 @@ import {
          discordLink="https://discord.gg/2NXGrsqmDq"
        />
      </Grid.Item>
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Slava"
          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=c9028ddcd6da2b7b0aaaf6fabbad7b31"
@@ -123,7 +126,7 @@ import {
          githubLink="https://discord.gg/2NXGrsqmDq"
        />
      </Grid.Item>
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Eric"
          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=a620c567ee3da938757bb0a43eda4ec9"
@@ -131,13 +134,13 @@ import {
          discordLink="https://discord.gg/2NXGrsqmDq"
        />
      </Grid.Item>
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Tomas"
          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=8f6066f7e4b7517702c86d85f3ad828d"
        />
      </Grid.Item>
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Adam"
          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=5edf032c2d62576d36090cf09b5939e5"
@@ -147,7 +150,7 @@ import {
          discordLink="https://discord.gg/2NXGrsqmDq"
        />
      </Grid.Item>
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Ben"
          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=406fd339da77e69aeef5f357ece3ff3d"
@@ -157,7 +160,7 @@ import {
          discordLink="https://discord.gg/2NXGrsqmDq"
        />
      </Grid.Item>
-      <Grid.Item sm={1}>
+      <Grid.Item>
        <ProfileCard
          name="Leo"
          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=4d6fcc7c245ca327414ab4d282b509f2"
@@ -172,11 +175,81 @@ import {
 </Box>

 <Box top={{ xs: 144, lg: 216 }}>
-  <CallToActionSection
-    title="Development roadmap"
-    description="Codex currently exists as a proof-of-concept network and aims to release its beta version, codenamed Katana, by the end of Q4, 2023. To get there, the team will deliver a second and third PoC client, each of which will introduce progressively more advanced features."
-    label="Read more"
-    href="/about/roadmap"
-    target="_self"
+  <SectionHeader
+    title="Development Roadmap"
+    description="Codex is currently in its first proof-of-concept iteration and aims to release its beta version, Katana, before the end of Q4 2023."
+    bottom={{ xs: '4rem', lg: '7.25rem' }}
  />
+  <Grid xs={{ cols: 6, wrap: false, gap: '0 1rem' }}>
+    <Grid.Item>
+      <TimelineItem
+        period="2021"
+        borderStyle="dashed"
+        description="Codex project begins"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2022"
+        borderStyle="solid"
+        description=" PoC-1 “Dagger” demos"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2022"
+        borderStyle="dashed"
+        description="Marketplace redesign, zk-proofs research"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2023"
+        borderStyle="solid"
+        description="PoC-2 “Scimitar” demos"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2023 Q3"
+        borderStyle="solid"
+        description="PoC-3 demo scheduled"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2023 Q4"
+        borderStyle="dashed"
+        description="V1 “Katana” release scheduled"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2024"
+        borderStyle="solid"
+        description="L2 aggregator node development"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2024"
+        borderStyle="dashed"
+        description="Payment channels/bandwidth incentives"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2025"
+        borderStyle="solid"
+        description="V2 with improved incentives and repair"
+      />
+    </Grid.Item>
+    <Grid.Item>
+      <TimelineItem
+        period="2025"
+        description="Public mainnet release"
+        borderStyle="none"
+      />
+    </Grid.Item>
+  </Grid>
 </Box>
@@ -1,57 +0,0 @@
-@use '../../../css/utils';
-@use '../../../css/lsd';
-
-.mdx-community {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-  margin-block: 56px;
-}
-
-.mdx-community__link {
-  text-decoration: none !important;
-  height: fit-content;
-}
-
-.mdx-community__link:hover {
-  text-decoration: underline !important;
-}
-
-.mdx-community__card {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 1rem;
-  border: 1px solid rgb(var(--lsd-border-primary));
-  min-height: 144px;
-}
-
-.mdx-community__row {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.mdx-community__logo {
-  width: 40px !important;
-  height: 40px !important;
-
-  svg {
-    width: 40px !important;
-    height: 40px !important;
-  }
-}
-
-.mdx-community__external-link {
-}
-
-.mdx-community__label {
-  text-align: center;
-}
-
-@include utils.responsive('lg', 'down') {
-  .mdx-community {
-    grid-template-columns: 1fr;
-  }
-}
@@ -1,93 +0,0 @@
-import { Typography } from '@acid-info/lsd-react'
-import { useColorMode } from '@docusaurus/theme-common'
-import React from 'react'
-import './Community.scss'
-import {
-  IconX,
-  IconDiscordWhite,
-  IconTelegramWhite,
-  IconExternalLink,
-  IconGithub,
-} from '../../Icon' // '@logos-theme/components/Icon' doesn't work
-
-export enum CommunityType {
-  X = 'x',
-  Discord = 'discord',
-  Github = 'github',
-  Telegram = 'telegram',
-  CUSTOM = 'custom',
-}
-
-export type CommunityItem = {
-  logoSrc?: string
-  logoSrcDark?: string
-  link: string
-  linkLabel: string
-  type?: CommunityType
-}
-
-export type CommunityProps = React.HTMLProps<HTMLDivElement> & {
-  items?: CommunityItem[]
-}
-
-export const Community: React.FC<CommunityProps> = ({
-  items = [],
-  ...props
-}) => {
-  const { colorMode } = useColorMode()
-
-  const renderSocialIcon = (type: CommunityType) => {
-    switch (type) {
-      case CommunityType.X:
-        return <IconX className="mdx-community__logo" />
-      case CommunityType.Discord:
-        return <IconDiscordWhite className="mdx-community__logo" />
-      case CommunityType.Telegram:
-        return <IconTelegramWhite className="mdx-community__logo" />
-      case CommunityType.Github:
-        return <IconGithub className="mdx-community__logo" />
-      default:
-        return null
-    }
-  }
-
-  return (
-    <div className="mdx-community" {...props}>
-      {items.map((item, index) => {
-        const logoSrc = item.logoSrc ?? item.logoSrcDark
-        return (
-          <a href={item.link} className="mdx-community__link" target="_blank">
-            <div key={index} className="mdx-community__card">
-              <div className="mdx-community__row">
-                {typeof item.type !== 'undefined' &&
-                item.type !== CommunityType.CUSTOM ? (
-                  renderSocialIcon(item.type as CommunityType)
-                ) : (
-                  <img
-                    alt={
-                      typeof item.linkLabel === 'string' ? item.linkLabel : ''
-                    }
-                    className="mdx-community__logo"
-                    src={
-                      (colorMode === 'dark'
-                        ? item.logoSrcDark
-                        : item.logoSrc) ?? logoSrc
-                    }
-                  />
-                )}
-                <IconExternalLink className="mdx-community__external-link" />
-              </div>
-              <Typography
-                variant="body1"
-                component="span"
-                className="mdx-community__body1"
-              >
-                {item.linkLabel}
-              </Typography>
-            </div>
-          </a>
-        )
-      })}
-    </div>
-  )
-}
@@ -1 +0,0 @@
-export * from './Community'
@@ -1,8 +1,14 @@
-import { THEME_BREAKPOINTS } from '@acid-info/lsd-react'
+import {
+  IconButton,
+  IconButtonGroup,
+  NavigateBeforeIcon,
+  NavigateNextIcon,
+  THEME_BREAKPOINTS,
+} from '@acid-info/lsd-react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import clsx from 'clsx'
-import React from 'react'
+import React, { useRef } from 'react'
 import { lsdUtils } from '../../../lib/lsd.utils'
 import { GridItem } from './GridItem'

@@ -12,9 +18,36 @@ export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
  children,
  ...props
 }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const scroll = (direction: -1 | 1) => {
+    const el = ref.current
+    if (!el) return
+
+    const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236
+    el.scrollTo({
+      behavior: 'smooth',
+      left:
+        el.scrollLeft +
+        (el.getBoundingClientRect()?.width - itemWidth) * direction,
+    })
+  }
+
  return (
-    <GridRoot {...props} className={clsx(props.className, 'hidden-scrollbar')}>
-      {children}
+    <GridRoot {...props} className={clsx(props.className, 'mdx-grid')}>
+      <div className="mdx-grid__scroll">
+        <IconButtonGroup size="small" color="primary">
+          <IconButton size="small" onClick={scroll.bind(null, -1)}>
+            <NavigateBeforeIcon />
+          </IconButton>
+          <IconButton size="small" onClick={scroll.bind(null, 1)}>
+            <NavigateNextIcon />
+          </IconButton>
+        </IconButtonGroup>
+      </div>
+      <div ref={ref} className={clsx('mdx-grid__content', 'hidden-scrollbar')}>
+        {children}
+      </div>
    </GridRoot>
  )
 }
@@ -35,11 +68,20 @@ const GridRoot = styled.div<{
  xl?: GridBreakpointProps
 }>`
  width: 100%;
-  overflow: hidden;
-  display: grid;

-  gap: var(--grid-gap);
-  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
+  .mdx-grid__scroll {
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0 1rem;
+  }
+
+  .mdx-grid__content {
+    display: grid;
+    gap: var(--grid-gap);
+    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
+    overflow: hidden;
+  }

  ${(props) =>
    THEME_BREAKPOINTS.map((key) => {
@@ -63,23 +105,44 @@ const GridRoot = styled.div<{
        `}

        ${(typeof bp.wrap === 'undefined' || bp.wrap === true) &&
-        `
-          display: grid;
-          flex-wrap: unset;
-          overflow-x: unset;
-          overflow-y: unset;
-          scroll-snap-type: unset;
+        css`
+          .mdx-grid__scroll {
+            display: none;
+          }
+          .mdx-grid__content {
+            display: grid;
+            flex-wrap: unset;
+            overflow-x: unset;
+            overflow-y: unset;
+            scroll-snap-type: unset;
+          }
        `}

        ${typeof bp.wrap !== 'undefined' &&
        bp.wrap === false &&
-        `
-          display: flex;
-          flex-wrap: nowrap;
-          overflow-x: scroll;
-          overflow-y: hidden;
-          scroll-snap-type: x mandatory;
+        css`
+          .mdx-grid__scroll {
+            display: flex;
+          }
+          .mdx-grid__content {
+            display: flex;
+            flex-wrap: nowrap;
+            overflow-x: scroll;
+            overflow-y: hidden;
+            scroll-snap-type: x mandatory;
+          }
        `}
      `)
    })}
+
+  ${(props) =>
+    lsdUtils.responsive(
+      props.theme as any,
+      'sm',
+      'down',
+    )(css`
+      .mdx-grid__scroll {
+        display: none !important;
+      }
+    `)}
 `
@@ -1,125 +0,0 @@
-@use '../../../css/utils';
-@use '../../../css/lsd';
-
-:root {
-  --card-height: 188px;
-  --mobile-width: 253px;
-  --mobile-height: 176px;
-}
-
-.mdx-profile-cards {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1rem;
-  margin-block: 80px;
-}
-
-.mdx-profile-card__card {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 1rem;
-  border: 1px solid rgb(var(--lsd-border-primary));
-  height: var(--card-height);
-}
-
-.mdx-profile-card__profile {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.mdx-profile-card__avatar {
-  width: 40px !important;
-  height: 40px !important;
-  border-radius: 50%;
-
-  svg {
-    width: 40px !important;
-    height: 40px !important;
-
-    rect {
-      fill: unset !important;
-    }
-  }
-}
-
-.mdx-profile-card__name {
-  @include lsd.typography('h4');
-}
-
-.mdx-profile-card__buttons {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  width: 100%;
-}
-
-.mdx-profile-card__link {
-  text-decoration: none;
-  height: fit-content;
-  position: relative;
-  max-width: calc(50% - 4px);
-}
-
-.mdx-profile-card__button {
-  padding: 4px 12px 4px 10px !important;
-  height: 28px !important;
-  max-width: 100% !important;
-
-  > span {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
-
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-}
-
-.mdx-profile-card__link__label {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.mdx-profile-card__label {
-  text-align: center;
-}
-
-@include utils.responsive('lg', 'down') {
-  .mdx-profile-card {
-    grid-template-columns: 1fr;
-  }
-}
-
-@include utils.responsive('md', 'down') {
-  .mdx-profile-cards {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    gap: 1rem;
-    scroll-snap-type: x mandatory;
-    margin-block: 40px;
-  }
-
-  .mdx-profile-card__card {
-    flex: 0 0 var(--mobile-width);
-    width: var(--mobile-width);
-    height: var(--mobile-height);
-    scroll-snap-align: start !important;
-  }
-
-  .mdx-profile-card__profile {
-    gap: 16px;
-  }
-
-  .mdx-profile-card__name {
-    @include lsd.typography('h6');
-  }
-}
@@ -1,98 +0,0 @@
-import { Button, Typography } from '@acid-info/lsd-react'
-import React from 'react'
-import './ProfileCards.scss'
-import { IconAvatar, IconDiscordWhite, IconGithub } from '../../Icon' // '@logos-theme/components/Icon' doesn't work
-import Link from '@docusaurus/Link'
-
-export type ProfileCardItem = {
-  imgSrc?: string
-  name?: string
-  githubUsername?: string
-  githubLink?: string
-  discordUsername?: string
-  discordLink?: string
-}
-
-export type ProfileCardsProps = React.HTMLProps<HTMLDivElement> & {
-  items?: ProfileCardItem[]
-}
-
-export const ProfileCards: React.FC<ProfileCardsProps> = ({
-  items = [],
-  ...props
-}) => {
-  return (
-    <div className="mdx-profile-cards hidden-scrollbar" {...props}>
-      {items.map((item, index) => {
-        return (
-          <div key={index} className="mdx-profile-card__card">
-            <div className="mdx-profile-card__profile">
-              {typeof item.imgSrc === 'undefined' ? (
-                <IconAvatar className="mdx-profile-card__avatar" />
-              ) : (
-                <img
-                  alt={typeof item.name === 'string' ? item.name : ''}
-                  className="mdx-profile-card__avatar"
-                  src={item.imgSrc}
-                />
-              )}
-              <Typography
-                className="mdx-profile-card__name"
-                variant="h4"
-                component="h4"
-              >
-                {item.name}
-              </Typography>
-            </div>
-
-            <div className="mdx-profile-card__buttons">
-              {item?.githubUsername && item?.githubLink && (
-                <Link
-                  href={item.githubLink}
-                  target="_blank"
-                  className={'mdx-profile-card__link'}
-                >
-                  <Button
-                    size={'small'}
-                    variant={'outlined'}
-                    className={'mdx-profile-card__button'}
-                  >
-                    <IconGithub />
-                    <Typography
-                      variant="body2"
-                      className="mdx-profile-card__link__label"
-                    >
-                      {item?.githubUsername}
-                    </Typography>
-                  </Button>
-                </Link>
-              )}
-
-              {item?.discordUsername && item?.discordLink && (
-                <Link
-                  href={item.discordLink}
-                  target="_blank"
-                  className={'mdx-profile-card__link'}
-                >
-                  <Button
-                    size={'small'}
-                    variant={'outlined'}
-                    className={'mdx-profile-card__button'}
-                  >
-                    <IconDiscordWhite />
-                    <Typography
-                      variant="body2"
-                      className="mdx-profile-card__link__label"
-                    >
-                      {item?.discordUsername}
-                    </Typography>
-                  </Button>
-                </Link>
-              )}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
@@ -1 +0,0 @@
-export * from './ProfileCards'
@@ -18,83 +18,18 @@
  }
 }

-.mdx-roadmap__actions {
+.mdx-roadmap__timeline {
  margin-top: 7.25rem;

-  display: flex;
-  flex-direction: row;
-  gap: 0 1rem;
-}
-
-.mdx-roadmap__timeline {
-  margin-top: 2rem;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 0 1rem;
-  overflow-y: scroll;
-  scroll-snap-type: x mandatory;
+  .mdx-grid-item:last-child {
+    .mdx-timeline-item__border {
+      display: none;
+    }
+  }
 }

 .mdx-roadmap__timeline-item {
-  width: 236px;
-  gap: 1rem;
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 23px;
-  border-bottom: 1px solid rgb(var(--lsd-border-primary));
-  scroll-snap-align: start !important;
-}
-
-.mdx-roadmap__timeline-header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.mdx-roadmap__timeline-period-container {
-  width: 100%;
-  position: relative;
-}
-
-.mdx-roadmap__timeline-border {
-  top: 0;
-  left: 0;
-  width: calc(100% + 1rem);
-  height: 50%;
-  position: absolute;
-  border-bottom: 1px solid rgb(var(--lsd-border-primary));
-  z-index: -1;
-}
-
-.mdx-roadmap__timeline-border--dashed {
-  border-bottom-style: dashed;
-}
-
-.mdx-roadmap__timeline-period {
-  padding: 3px 12px;
-  display: inline-block;
-  border-radius: 10rem;
-  color: rgb(var(--lsd-text-secondary)) !important;
-  background-color: rgb(var(--lsd-surface-secondary));
-}
-
-.mdx-roadmap__timeline-item:last-child {
-  .mdx-roadmap__timeline-border {
-    display: none;
-  }
-}
-
-.mdx-roadmap--top-aligned {
-}
-
-.mdx-roadmap--bottom-aligned {
-  .mdx-roadmap__timeline-item {
-    min-height: 308px;
-    justify-content: space-between;
-  }
+  height: 100%;
 }

@include utils.responsive('lg', 'down') {
@@ -106,17 +41,7 @@
    }
  }

-  .mdx-roadmap__actions {
+  .mdx-roadmap__timeline {
    margin-top: 4rem;
  }
-
-  .mdx-roadmap__timeline-item {
-    width: 204px;
-  }
-}
-
-@include utils.responsive('sm', 'down') {
-  .mdx-roadmap__scroll {
-    display: none;
-  }
 }
@@ -1,28 +1,18 @@
-import {
-  IconButton,
-  IconButtonGroup,
-  NavigateBeforeIcon,
-  NavigateNextIcon,
-  Typography,
-} from '@acid-info/lsd-react'
+import { Typography } from '@acid-info/lsd-react'
 import clsx from 'clsx'
-import React, { useRef } from 'react'
+import React from 'react'
+import { Grid } from '..'
+import { TimelineItem, TimelineItemProps } from '../TimelineItem'
 import './Roadmap.scss'

-export type TimelineItem = {
-  period: string
-  description: string
-  borderStyle?: 'solid' | 'dashed'
-}
-
 export type RoadmapProps = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  'title'
 > & {
  title: React.ReactNode
  description?: React.ReactNode
-  timeline?: TimelineItem[]
  alignment?: 'top' | 'bottom'
+  timeline?: Partial<TimelineItemProps>[]
 }

 export const Roadmap: React.FC<RoadmapProps> = ({
@@ -34,21 +24,6 @@ export const Roadmap: React.FC<RoadmapProps> = ({
  children,
  ...props
 }) => {
-  const timelineRef = useRef<HTMLDivElement>(null)
-
-  const scroll = (direction: -1 | 1) => {
-    const el = timelineRef.current
-    if (!el) return
-
-    const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236
-    el.scrollTo({
-      behavior: 'smooth',
-      left:
-        el.scrollLeft +
-        (el.getBoundingClientRect()?.width - itemWidth) * direction,
-    })
-  }
-
  return (
    <div
      className={clsx(
@@ -69,60 +44,25 @@ export const Roadmap: React.FC<RoadmapProps> = ({
          </Typography>
        )}
      </div>
-      <div className="mdx-roadmap__actions">
-        {children && <div className="mdx-roadmap__cta">{children}</div>}
-        <div className="mdx-roadmap__scroll">
-          <IconButtonGroup size="small" color="primary">
-            <IconButton size="small" onClick={scroll.bind(null, -1)}>
-              <NavigateBeforeIcon />
-            </IconButton>
-            <IconButton size="small" onClick={scroll.bind(null, 1)}>
-              <NavigateNextIcon />
-            </IconButton>
-          </IconButtonGroup>
-        </div>
-      </div>
      {timeline.length > 0 && (
-        <div
-          ref={timelineRef}
-          className="mdx-roadmap__timeline hidden-scrollbar"
+        <Grid
+          className="mdx-roadmap__timeline"
+          xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
        >
          {timeline.map((item, index) => (
-            <div key={index} className="mdx-roadmap__timeline-item">
-              <div className="mdx-roadmap__timeline-header">
-                <div className="mdx-roadmap__timeline-period-container">
-                  <div
-                    className={clsx(
-                      'mdx-roadmap__timeline-border',
-                      item.borderStyle === 'dashed' &&
-                        'mdx-roadmap__timeline-border--dashed',
-                    )}
-                  />
-                  <Typography
-                    variant="subtitle1"
-                    component="span"
-                    className="mdx-roadmap__timeline-period"
-                  >
-                    {item.period}
-                  </Typography>
-                </div>
-                <Typography
-                  variant="h3"
-                  component="span"
-                  className="mdx-roadmap__timeline-index"
-                >
-                  {`${index < 9 ? '0' : ''}${index + 1}`}
-                </Typography>
-              </div>
-              <Typography
-                variant="h6"
-                component="p"
-                className="mdx-roadmap__timeline-description"
-                dangerouslySetInnerHTML={{ __html: item.description }}
+            <Grid.Item key={index} xs={1}>
+              <TimelineItem
+                {...item}
+                index={item.index ?? index + 1}
+                period={item.period}
+                description={item.description}
+                alignment={alignment}
+                borderStyle={item.borderStyle}
+                className={clsx('mdx-roadmap__timeline-item', item.className)}
              />
-            </div>
+            </Grid.Item>
          ))}
-        </div>
+        </Grid>
      )}
    </div>
  )
@@ -0,0 +1,26 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-section-header {
+  width: 100%;
+  padding-top: 24px;
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+
+  > * {
+    flex-basis: 50%;
+  }
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-section-header {
+    flex-direction: column;
+
+    &__title {
+      @include lsd.typography('body1');
+    }
+  }
+}
@@ -0,0 +1,40 @@
+import { Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import { Box, BoxProps } from '..'
+import './SectionHeader.scss'
+
+export type SectionHeaderProps = Omit<BoxProps, 'title'> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = ({
+  title,
+  description,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <Box className={clsx(className, 'mdx-section-header')} {...props}>
+      <Typography
+        className="mdx-section-header__title"
+        component="h2"
+        variant="h6"
+      >
+        {title}
+      </Typography>
+
+      {description && (
+        <Typography
+          className="mdx-section-header_description"
+          component="p"
+          variant="h4"
+        >
+          {description}
+        </Typography>
+      )}
+    </Box>
+  )
+}
@@ -0,0 +1 @@
+export * from './SectionHeader'
@@ -0,0 +1,70 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-timeline-item {
+  width: 236px;
+  height: 100%;
+  gap: 1rem;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 23px;
+  border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  scroll-snap-align: start !important;
+}
+
+.mdx-timeline-item__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.mdx-timeline-item__period-container {
+  width: 100%;
+  position: relative;
+}
+
+.mdx-timeline-item__border {
+  top: 0;
+  left: 0;
+  width: calc(100% + 1rem);
+  height: 50%;
+  position: absolute;
+  border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  z-index: -1;
+}
+
+.mdx-timeline-item--border-dashed {
+  .mdx-timeline-item__border {
+    border-bottom-style: dashed;
+  }
+}
+
+.mdx-timeline-item__period {
+  padding: 3px 12px;
+  display: inline-block;
+  border-radius: 10rem;
+  color: rgb(var(--lsd-text-secondary)) !important;
+  background-color: rgb(var(--lsd-surface-secondary));
+}
+
+.mdx-timeline-item__item:last-child {
+  .mdx-timeline-item__border {
+    display: none;
+  }
+}
+
+.mdx-timeline-item--top-aligned {
+}
+
+.mdx-timeline-item--bottom-aligned {
+  min-height: 308px;
+  justify-content: space-between;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-timeline-item {
+    width: 204px;
+  }
+}
@@ -0,0 +1,69 @@
+import { Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import './TimelineItem.scss'
+
+export type TimelineItemProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title'
+> & {
+  index: React.ReactNode
+  alignment?: 'top' | 'bottom'
+  period: React.ReactNode
+  description: React.ReactNode
+  borderStyle?: 'solid' | 'dashed' | 'none'
+}
+
+export const TimelineItem: React.FC<TimelineItemProps> = ({
+  index,
+  period,
+  description,
+  alignment = 'top',
+  borderStyle,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={clsx(
+        className,
+        'mdx-timeline-item',
+        `mdx-timeline-item--${alignment}-aligned`,
+        borderStyle === 'dashed' && 'mdx-timeline-item--border-dashed',
+      )}
+      {...props}
+    >
+      <div className="mdx-timeline-item__header">
+        <div className="mdx-timeline-item__period-container">
+          {borderStyle !== 'none' && (
+            <div className={clsx('mdx-timeline-item__border')} />
+          )}
+          <Typography
+            variant="subtitle1"
+            component="span"
+            className="mdx-timeline-item__period"
+          >
+            {period}
+          </Typography>
+        </div>
+        <Typography
+          variant="h3"
+          component="span"
+          className="mdx-timeline-item__index"
+        >
+          {typeof index === 'number'
+            ? `${index < 9 ? '0' : ''}${index + 1}`
+            : index}
+        </Typography>
+      </div>
+      <Typography
+        variant="h6"
+        component="p"
+        className="mdx-timeline-item__description"
+      >
+        {description}
+      </Typography>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from './TimelineItem'
@@ -1,7 +1,6 @@
 export * from './Box'
 export * from './CallToActionButton'
 export * from './CallToActionSection'
-export * from './Community'
 export * from './DocMetadata'
 export * from './FeatureList'
 export * from './Grid'
@@ -15,8 +14,9 @@ export * from './HeroTitle'
 export * from './HeroVideo'
 export * from './PoweredBy'
 export * from './ProfileCard'
-export * from './ProfileCards'
 export * from './Roadmap'
 export * from './ScrollToBottom'
+export * from './SectionHeader'
 export * from './Showcase'
 export * from './SocialCard'
+export * from './TimelineItem'