Merge pull request #118 from acid-info/topic-universal-grid

Topic universal grid

packages/docusaurus-playground/docs/community.mdx

@@ -2,41 +2,48 @@
 title: Join the community
 ---
 
-import { Community } from '../../logos-docusaurus-theme/src/client/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.
 
-<Community
+<Box top={56} bottom={56}>
-  items={[
+  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
-    {
+    <Grid.Item xs={1}>
-      type: 'x',
+      <SocialCard
-      link: 'https://discord.gg/2NXGrsqmDq',
+        logoSrcDark="/icons/x.svg"
-      linkLabel: 'Follow us on X',
+        href="https://discord.gg/2NXGrsqmDq"
-    },
+        description="Follow us on X"
-    {
+      />
-      type: 'discord',
+    </Grid.Item>
-      logoSrcDark: '/icons/discord.svg',
+    <Grid.Item xs={1}>
-      link: 'https://discord.gg/2NXGrsqmDq',
+      <SocialCard
-      linkLabel: 'Join the community on Discord',
+        logoSrcDark="/icons/discord-white.svg"
-    },
+        href="https://discord.gg/2NXGrsqmDq"
-    {
+        description="Join the community on Discord"
-      type: 'telegram',
+      />
-      logoSrcDark: '/icons/discord.svg',
+    </Grid.Item>
-      link: 'https://discord.gg/2NXGrsqmDq',
+    <Grid.Item xs={1}>
-      linkLabel: 'Jump in the conversation on Telegram',
+      <SocialCard
-    },
+        logoSrcDark="/icons/telegram-white.svg"
-    {
+        href="https://discord.gg/2NXGrsqmDq"
-      logoSrcDark: '/icons/discord.svg',
+        description="Jump in the conversation on Telegram"
-      link: 'https://discord.gg/2NXGrsqmDq',
+      />
-      linkLabel:
+    </Grid.Item>
-        'Share your thoughts on the latest research on the Vac research forum',
+    <Grid.Item xs={1}>
-    },
+      <SocialCard
-    {
+        logoSrcDark="/icons/discord.svg"
-      type: 'github',
+        href="https://discord.gg/2NXGrsqmDq"
-      link: 'https://discord.gg/2NXGrsqmDq',
+        description="Share your thoughts on the latest research on the Vac research forum"
-      linkLabel: 'Contribute to Github',
+      />
-    },
+    </Grid.Item>
-  ]}
+    <Grid.Item xs={1}>
-/>
+      <SocialCard
+        logoSrcDark="/icons/github.svg"
+        href="https://discord.gg/2NXGrsqmDq"
+        description="Contribute to Github"
+      />
+    </Grid.Item>
+  </Grid>
+</Box>

packages/docusaurus-playground/src/pages/index.mdx

@@ -11,7 +11,13 @@ import {
   Showcase,
   HeroInfo,
   Box,
+  Grid,
+  ProfileCard,
   ProfileCards,
+  Roadmap,
+  SectionHeader,
+  TimelineItem,
+  ShowcaseCard,
 } from '../components/mdx'
 
 <Hero size="large">
@@ -89,80 +95,248 @@ import {
     href="/about/team"
     target="_self"
   />
-  <ProfileCards
+  <Box top={{ xs: 40, md: 80 }} bottom={{ xs: 40, md: 80 }}>
-    items={[
+    <Grid
-      {
+      xs={{ cols: 3, gap: '1rem', wrap: false }}
-        name: 'Jeremy',
+      md={{ cols: 4, gap: '1rem', wrap: true }}
-        githubUsername: 'jeremyjeremyjeremy',
+    >
-        githubLink: 'https://github.com/acid-info',
+      <Grid.Item>
-        discordUsername: 'jeremyjeremyjeremy#0001',
+        <ProfileCard
-        discordLink: 'https://discord.gg/2NXGrsqmDq',
+          name="Jeremy"
-      },
+          githubUsername="jeremyjeremyjeremy"
-      {
+          githubLink="https://github.com/acid-info"
-        name: 'Dimitriy',
+          discordUsername="jeremyjeremyjeremy#0001"
-        imgSrc:
+          discordLink="https://discord.gg/2NXGrsqmDq"
-          'https://statusim.bamboohr.com/employees/photos/?h=297aeedfad6fed82ed60a93a9d850762',
+        />
-        githubUsername: 'dimitriy',
+      </Grid.Item>
-        githubLink: 'https://github.com/acid-info',
+      <Grid.Item>
-        discordUsername: 'dimitriy#0001',
+        <ProfileCard
-        discordLink: 'https://discord.gg/2NXGrsqmDq',
+          name="Dimitriy"
-      },
+          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=297aeedfad6fed82ed60a93a9d850762"
-      {
+          githubUsername="dimitriy"
-        name: 'Slava',
+          githubLink="https://github.com/acid-info"
-        imgSrc:
+          discordUsername="dimitriy#0001"
-          'https://statusim.bamboohr.com/employees/photos/?h=c9028ddcd6da2b7b0aaaf6fabbad7b31',
+          discordLink="https://discord.gg/2NXGrsqmDq"
-        githubUsername: 'slava',
+        />
-        githubLink: 'https://discord.gg/2NXGrsqmDq',
+      </Grid.Item>
-      },
+      <Grid.Item>
-      {
+        <ProfileCard
-        name: 'Eric',
+          name="Slava"
-        imgSrc:
+          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=c9028ddcd6da2b7b0aaaf6fabbad7b31"
-          'https://statusim.bamboohr.com/employees/photos/?h=a620c567ee3da938757bb0a43eda4ec9',
+          githubUsername="slava"
-        discordUsername: 'eric#0001',
+          githubLink="https://discord.gg/2NXGrsqmDq"
-        discordLink: 'https://discord.gg/2NXGrsqmDq',
+        />
-      },
+      </Grid.Item>
-      {
+      <Grid.Item>
-        name: 'Tomas',
+        <ProfileCard
-        imgSrc:
+          name="Eric"
-          'https://statusim.bamboohr.com/employees/photos/?h=8f6066f7e4b7517702c86d85f3ad828d',
+          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=a620c567ee3da938757bb0a43eda4ec9"
-      },
+          discordUsername="eric#0001"
-      {
+          discordLink="https://discord.gg/2NXGrsqmDq"
-        name: 'Adam',
+        />
-        imgSrc:
+      </Grid.Item>
-          'https://statusim.bamboohr.com/employees/photos/?h=5edf032c2d62576d36090cf09b5939e5',
+      <Grid.Item>
-        githubUsername: 'adam',
+        <ProfileCard
-        githubLink: 'https://github.com/acid-info',
+          name="Tomas"
-        discordUsername: 'adam#0001',
+          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=8f6066f7e4b7517702c86d85f3ad828d"
-        discordLink: 'https://discord.gg/2NXGrsqmDq',
+        />
-      },
+      </Grid.Item>
-      {
+      <Grid.Item>
-        name: 'Ben',
+        <ProfileCard
-        imgSrc:
+          name="Adam"
-          'https://statusim.bamboohr.com/employees/photos/?h=406fd339da77e69aeef5f357ece3ff3d',
+          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=5edf032c2d62576d36090cf09b5939e5"
-        githubUsername: 'ben',
+          githubUsername="adam"
-        githubLink: 'https://github.com/acid-info',
+          githubLink="https://github.com/acid-info"
-        discordUsername: 'ben#0001',
+          discordUsername="adam#0001"
-        discordLink: 'https://discord.gg/2NXGrsqmDq',
+          discordLink="https://discord.gg/2NXGrsqmDq"
-      },
+        />
-      {
+      </Grid.Item>
-        name: 'Leo',
+      <Grid.Item>
-        imgSrc:
+        <ProfileCard
-          'https://statusim.bamboohr.com/employees/photos/?h=4d6fcc7c245ca327414ab4d282b509f2',
+          name="Ben"
-        githubUsername: 'leo',
+          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=406fd339da77e69aeef5f357ece3ff3d"
-        githubLink: 'https://github.com/acid-info',
+          githubUsername="ben"
-        discordUsername: 'leo#0001',
+          githubLink="https://github.com/acid-info"
-        discordLink: 'https://discord.gg/2NXGrsqmDq',
+          discordUsername="ben#0001"
-      },
+          discordLink="https://discord.gg/2NXGrsqmDq"
-    ]}
+        />
+      </Grid.Item>
+      <Grid.Item>
+        <ProfileCard
+          name="Leo"
+          imgSrc="https://statusim.bamboohr.com/employees/photos/?h=4d6fcc7c245ca327414ab4d282b509f2"
+          githubUsername="leo"
+          githubLink="https://github.com/acid-info"
+          discordUsername="leo#0001"
+          discordLink="https://discord.gg/2NXGrsqmDq"
+        />
+      </Grid.Item>
+    </Grid>
+  </Box>
+</Box>
+
+<Box top={{ xs: 144, lg: 216 }}>
+  <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>
 
 <Box top={{ xs: 144, lg: 216 }}>
   <CallToActionSection
-    title="Development roadmap"
+    title="User Endorsements"
-    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"
   />
 </Box>
+<Box top={{ xs: 64, lg: 100 }}>
+  <Showcase
+    id="showcase"
+    items={[
+      {
+        name: 'Status',
+        logo: '/showcase/status-mark-black.svg',
+        logoDark: '/showcase/status-mark-white.svg',
+        description:
+          `"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`,
+      },
+      {
+        name: 'Railgun',
+        logo: '/showcase/railgun-mark-black.svg',
+        logoDark: '/showcase/railgun-mark-white.svg',
+        description:
+          <>"RAILGUN contributors selected Waku to run its relayer network as an early-stage but promising product of the privacy-centric <a href="https://status.im" target="_blank">status.im</a> ecosystem. We have not been disappointed. The developers are extremely professional and responsive, and continue to strive to understand and meet our needs as a communication layer for relaying private transactions."</>,
+      },
+      {
+        name: 'The Graph',
+        logo: '/showcase/the-graph-mark-black.svg',
+        logoDark: '/showcase/the-graph-mark-white.svg',
+        description:
+          `"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`,
+      }
+    ]}
+  />
+
+  <CallToActionButton href="https://docs.waku.org/" variant="outlined">Build on Waku</CallToActionButton>
+</Box>
+
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection title="User Endorsements" />
+</Box>
+<Box top={{ xs: 64, lg: 100 }}>
+  <Grid
+    xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+    lg={{ cols: 3, gap: '1rem' }}
+  >
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="Status"
+        logoSrc="/showcase/status-mark-black.svg"
+        logoSrcDark="/showcase/status-mark-white.svg"
+        description={`"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`}
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="Railgun"
+        logoSrc="/showcase/railgun-mark-black.svg"
+        logoSrcDark="/showcase/railgun-mark-white.svg"
+        description={
+          <>
+            "RAILGUN contributors selected Waku to run its relayer network as an
+            early-stage but promising product of the privacy-centric{' '}
+            <a href="https://status.im" target="_blank">
+              status.im
+            </a>{' '}
+            ecosystem. We have not been disappointed. The developers are
+            extremely professional and responsive, and continue to strive to
+            understand and meet our needs as a communication layer for relaying
+            private transactions."
+          </>
+        }
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="The Graph"
+        logoSrc="/showcase/the-graph-mark-black.svg"
+        logoSrcDark="/showcase/the-graph-mark-white.svg"
+        description={`"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`}
+      />
+    </Grid.Item>
+  </Grid>
+  <CallToActionButton href="https://docs.waku.org/" variant="outlined">
+    Build on Waku
+  </CallToActionButton>
+</Box>

packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx

@@ -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>
-  )
-}

packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts

@@ -1 +0,0 @@
-export * from './Community'

packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx

@@ -0,0 +1,148 @@
+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, { useRef } from 'react'
+import { lsdUtils } from '../../../lib/lsd.utils'
+import { GridItem } from './GridItem'
+
+export type GridProps = React.ComponentProps<typeof GridRoot> & {}
+
+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, '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>
+  )
+}
+
+Grid.Item = GridItem
+
+type GridBreakpointProps = {
+  cols?: number
+  wrap?: boolean
+  gap?: string | number
+}
+
+const GridRoot = styled.div<{
+  xs?: GridBreakpointProps
+  sm?: GridBreakpointProps
+  md?: GridBreakpointProps
+  lg?: GridBreakpointProps
+  xl?: GridBreakpointProps
+}>`
+  width: 100%;
+
+  .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) => {
+      if (!props[key]) return null
+
+      const bp = props[key] as GridBreakpointProps
+
+      return lsdUtils.responsive(
+        props.theme as any,
+        key,
+        'up',
+      )(css`
+        ${typeof bp.cols !== 'undefined' &&
+        `
+          --grid-cols: ${bp.cols};
+        `}
+
+        ${typeof bp.gap !== 'undefined' &&
+        `
+          --grid-gap: ${bp.gap};
+        `}
+
+        ${(typeof bp.wrap === 'undefined' || bp.wrap === true) &&
+        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 &&
+        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;
+      }
+    `)}
+`

packages/logos-docusaurus-theme/src/client/components/mdx/Grid/GridItem.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx'
+import React from 'react'
+import styled from '@emotion/styled'
+import { THEME_BREAKPOINTS } from '@acid-info/lsd-react'
+import { lsdUtils } from '../../../lib/lsd.utils'
+import { css } from '@emotion/react'
+
+export type GridItemProps = React.ComponentProps<typeof Root> & {}
+
+export const GridItem: React.FC<GridItemProps> = ({ children, ...props }) => {
+  return (
+    <Root {...props} className={clsx(props.className)}>
+      {children}
+    </Root>
+  )
+}
+
+const Root = styled.div<{
+  xs?: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+}>`
+  ${(props) =>
+    THEME_BREAKPOINTS.map((key) => {
+      if (!props[key]) return null
+
+      const bp = props[key] as number
+
+      return lsdUtils.responsive(
+        props.theme as any,
+        key,
+        'up',
+      )(css`
+        grid-column: span ${bp};
+        flex-basis: calc(100% / var(--grid-cols) * ${bp});
+      `)
+    })}
+`

packages/logos-docusaurus-theme/src/client/components/mdx/Grid/index.ts

@@ -0,0 +1,2 @@
+export * from './Grid'
+export * from './GridItem'

packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss

@@ -7,14 +7,7 @@
   --mobile-height: 176px;
 }
 
-.mdx-profile-cards {
+.mdx-profile-card {
-  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;
@@ -98,17 +91,7 @@
 }
 
 @include utils.responsive('md', 'down') {
-  .mdx-profile-cards {
+  .mdx-profile-card {
-    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);

packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,94 @@
+import { Button, Typography } from '@acid-info/lsd-react'
+import Link from '@docusaurus/Link'
+import React from 'react'
+import { IconAvatar, IconDiscordWhite, IconGithub } from '../../Icon'
+import './ProfileCard.scss'
+import clsx from 'clsx'
+
+export type ProfileCardProps = React.HTMLProps<HTMLDivElement> & {
+  imgSrc?: string
+  name?: string
+  githubUsername?: string
+  githubLink?: string
+  discordUsername?: string
+  discordLink?: string
+}
+
+export const ProfileCard: React.FC<ProfileCardProps> = ({
+  imgSrc,
+  name,
+  githubUsername,
+  githubLink,
+  discordUsername,
+  discordLink,
+  ...props
+}) => {
+  return (
+    <div {...props} className={clsx('mdx-profile-card', props.className)}>
+      <div className="mdx-profile-card__profile">
+        {typeof imgSrc === 'undefined' ? (
+          <IconAvatar className="mdx-profile-card__avatar" />
+        ) : (
+          <img
+            alt={typeof name === 'string' ? name : ''}
+            className="mdx-profile-card__avatar"
+            src={imgSrc}
+          />
+        )}
+        <Typography
+          className="mdx-profile-card__name"
+          variant="h4"
+          component="h4"
+        >
+          {name}
+        </Typography>
+      </div>
+
+      <div className="mdx-profile-card__buttons">
+        {githubUsername && githubLink && (
+          <Link
+            href={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"
+              >
+                {githubUsername}
+              </Typography>
+            </Button>
+          </Link>
+        )}
+
+        {discordUsername && discordLink && (
+          <Link
+            href={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"
+              >
+                {discordUsername}
+              </Typography>
+            </Button>
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/index.ts

@@ -0,0 +1 @@
+export * from './ProfileCard'

packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx

@@ -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>
-  )
-}

packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts

@@ -1 +0,0 @@
-export * from './ProfileCards'

packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss

@@ -18,83 +18,18 @@
   }
 }
 
-.mdx-roadmap__actions {
+.mdx-roadmap__timeline {
   margin-top: 7.25rem;
 
-  display: flex;
+  .mdx-grid-item:last-child {
-  flex-direction: row;
+    .mdx-timeline-item__border {
-  gap: 0 1rem;
+      display: none;
-}
+    }
-
+  }
-.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-roadmap__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-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;
-  }
 }
 
 @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;
-  }
 }

packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx

@@ -1,28 +1,18 @@
-import {
+import { Typography } from '@acid-info/lsd-react'
-  IconButton,
-  IconButtonGroup,
-  NavigateBeforeIcon,
-  NavigateNextIcon,
-  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
+        <Grid
-          ref={timelineRef}
+          className="mdx-roadmap__timeline"
-          className="mdx-roadmap__timeline hidden-scrollbar"
+          xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
         >
           {timeline.map((item, index) => (
-            <div key={index} className="mdx-roadmap__timeline-item">
+            <Grid.Item key={index} xs={1}>
-              <div className="mdx-roadmap__timeline-header">
+              <TimelineItem
-                <div className="mdx-roadmap__timeline-period-container">
+                {...item}
-                  <div
+                index={item.index ?? index + 1}
-                    className={clsx(
+                period={item.period}
-                      'mdx-roadmap__timeline-border',
+                description={item.description}
-                      item.borderStyle === 'dashed' &&
+                alignment={alignment}
-                        'mdx-roadmap__timeline-border--dashed',
+                borderStyle={item.borderStyle}
-                    )}
+                className={clsx('mdx-roadmap__timeline-item', item.className)}
-                  />
-                  <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 }}
               />
-            </div>
+            </Grid.Item>
           ))}
-        </div>
+        </Grid>
       )}
     </div>
   )

packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss

@@ -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');
+    }
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx

@@ -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>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts

@@ -0,0 +1 @@
+export * from './SectionHeader'

packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss

@@ -1,51 +1,2 @@
-@use '../../../css/utils';
-@use '../../../css/lsd';
-
 .mdx-showcase {
-  width: 100%;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: repeat(var(--columns), 1fr);
-  gap: 1rem;
-}
-
-.mdx-showcase__item {
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-}
-
-.mdx-showcase__item-inner {
-  padding: 24px 8px;
-}
-
-.mdx-showcase__item-logo {
-}
-
-.mdx-showcase__item-name {
-  margin-top: 1rem;
-}
-
-.mdx-showcase__item-description {
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-  margin-top: 24px;
-  padding-top: 16px;
-}
-
-@include utils.responsive('lg', 'down') {
-  .mdx-showcase {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.5rem 1rem;
-  }
-
-  .mdx-showcase__item-name {
-    @include lsd.typography('h6');
-  }
-
-  .mdx-showcase__item-description {
-    margin-top: 1rem;
-  }
-
-  .mdx-showcase__item-logo {
-    width: 34px;
-    height: auto;
-  }
 }

packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx

@@ -1,71 +1,31 @@
-import { Typography } from '@acid-info/lsd-react'
-import ThemedImage from '@theme/ThemedImage'
 import clsx from 'clsx'
 import React from 'react'
-import { makeStyle } from '../../../lib/makeStyle'
+import { Grid, GridProps, ShowcaseCard, ShowcaseCardProps } from '..'
 import './Showcase.scss'
 
-export type ShowcaseItem = {
+export type ShowcaseProps = GridProps & {
-  name: React.ReactNode
+  items: ShowcaseCardProps[]
-  logo?: string
-  logoDark?: string
-  description: React.ReactNode
-}
-
-export type ShowcaseProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'title'
-> & {
-  items: ShowcaseItem[]
-  columns?: number
 }
 
 export const Showcase: React.FC<ShowcaseProps> = ({
   items = [],
-  columns = 4,
-  style = {},
   className,
-  children,
   ...props
 }) => {
   return (
-    <div
+    <Grid
       className={clsx(className, 'mdx-showcase')}
-      style={makeStyle({ ...style }, { columns })}
+      xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+      lg={{ cols: 3, gap: '1rem' }}
       {...props}
     >
       {items.map((item, index) => {
         return (
-          <div key={index} className="mdx-showcase__item">
+          <Grid.Item key={index} className="mdx-showcase__item" xs={1}>
-            <div key={index} className="mdx-showcase__item-inner">
+            <ShowcaseCard {...item} />
-              {item?.logo && item?.logoDark && (
+          </Grid.Item>
-                <ThemedImage
-                  sources={{
-                    dark: item.logoDark,
-                    light: item.logo,
-                  }}
-                  alt={typeof item.name === 'string' ? item.name : 'image'}
-                  className="mdx-showcase__item-logo"
-                />
-              )}
-              <Typography
-                variant="h3"
-                component="h2"
-                className="mdx-showcase__item-name"
-              >
-                {item.name}
-              </Typography>
-              <Typography
-                variant="subtitle1"
-                component="p"
-                className="mdx-showcase__item-description"
-              >
-                {item.description}
-              </Typography>
-            </div>
-          </div>
         )
       })}
-    </div>
+    </Grid>
   )
 }

packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss

@@ -0,0 +1,43 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-showcase-card {
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.mdx-showcase-card__inner {
+  padding: 24px 8px;
+}
+
+.mdx-showcase-card__logo {
+}
+
+.mdx-showcase-card__name {
+  margin-top: 1rem;
+}
+
+.mdx-showcase-card__description {
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+  margin-top: 24px;
+  padding-top: 16px;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-showcase {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem 1rem;
+  }
+
+  .mdx-showcase-card__name {
+    @include lsd.typography('h6');
+  }
+
+  .mdx-showcase-card__description {
+    margin-top: 1rem;
+  }
+
+  .mdx-showcase-card__logo {
+    width: 34px;
+    height: auto;
+  }
+}