closes #5, closes #3,closes #1

docs/mdx-playground.mdx

@@ -1,13 +1,53 @@
-import FeatureList from '@site/src/components/mdx/FeatureList';
-import FeatureCard from '@site/src/components/mdx/FeatureCard';
+import {Hero} from '@site/src/components/mdx/Hero';
+import {FeatureList} from '@site/src/components/mdx/FeatureList';
+import {FeatureCard} from '@site/src/components/mdx/FeatureCard';
+import {Quote} from '@site/src/components/mdx/Quote';
+import {ExternalReferenceCard} from '@site/src/components/mdx/ExternalReferenceCard';
+import {TeamList} from '@site/src/components/mdx/TeamList';
 
-:::info
-
-Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
-
-:::
+<Hero title={"codex"}
+      subtitle={"Codex is building a Decentralized Durability Engine"}
+      linkText={"PoC0"}
+      linkUrl={"https://github.com/status-im/codex-research/blob/main/Readme.md"}/>
 
+## What is Codex?
+<Quote>
+    Codex is aiming to solve the fundamental issues of data durability in decentralized systems.
+    <br/>
+    Codex is a research group working in all areas of decentralized storage.
+    <br/>
+    Codex is a decentralized storage protocol for durable information.
+</Quote>
 
+## Features
 <FeatureList>
-    <FeatureCard title={"Feature title"} text={"Some text ..."}/>
+    <FeatureCard title={"Fast erasure coding"}
+                 text={"Codex uses high-performance Reed-Solomon encoding to guarantee the durabilitty of the datasets."}/>
+    <FeatureCard title={"SNARK-based proof of retrivability"}
+                 text={"To implement space-efficient data retrievability, Codex leverages state-of-the-art SNARK-based proofs."}/>
+    <FeatureCard title={"Low-overhead lazy repair"}
+                 text={"Data repairs in Codex are grouped through lazy repair to decrease network bandwith overhead."}/>
 </FeatureList>
+
+## Resources
+<ExternalReferenceCard linkUrl={"http://Linktowhitepaper"}
+                  linkText={"White-paper"}
+                  referenceType={"pdf"}
+>
+    Read our white-paper to know more about Codex.
+</ExternalReferenceCard>
+<ExternalReferenceCard linkUrl={"https://github.com/status-im/nim-codex"}
+                  linkText={"Nim Codex"}
+                  referenceType={"github"}
+>
+    Play with the first version of Codex.
+</ExternalReferenceCard>
+<ExternalReferenceCard linkUrl={"https://github.com/status-im/codex-research"}
+                  linkText={"Codex Research"}
+                  referenceType={"github"}
+>
+    Checkout our research models and track our progress.
+</ExternalReferenceCard>
+
+## The Codex Team
+<TeamList/>

src/components/Button/Button.tsx

@@ -0,0 +1,14 @@
+import clsx from 'clsx'
+import React, { HTMLProps } from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+}
+
+export const Button = (
+  props: TProps & HTMLProps<HTMLButtonElement>,
+): JSX.Element => {
+  const { children, className, ...rest } = props
+  return <button className={clsx('button', className)}>{children}</button>
+}

src/components/Button/ButtonWithIcon.tsx

@@ -0,0 +1,23 @@
+import React, { HTMLProps } from 'react'
+import { Button } from './Button'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+  icon: JSX.Element
+}
+
+export const ButtonWithIcon = ({
+  children,
+  icon,
+  ...rest
+}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
+  return (
+    <Button {...rest}>
+      <div className={styles.buttonWithIconContainer}>
+        <div>{children}</div>
+        {icon}
+      </div>
+    </Button>
+  )
+}

src/components/Button/LinkButtonWithIcon.tsx

@@ -0,0 +1,26 @@
+import Link from '@docusaurus/Link'
+import React, { HTMLProps } from 'react'
+import { Button } from './Button'
+import { ButtonWithIcon } from './ButtonWithIcon'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+  linkProps: HTMLProps<HTMLAnchorElement>
+  icon: JSX.Element
+}
+
+export const LinkButtonWithIcon = ({
+  children,
+  linkProps,
+  icon,
+  ...rest
+}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
+  return (
+    <Link {...linkProps}>
+      <ButtonWithIcon {...rest} icon={icon}>
+        {children}
+      </ButtonWithIcon>
+    </Link>
+  )
+}

src/components/Button/index.tsx

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

src/components/Button/style.module.scss

@@ -0,0 +1,8 @@
+.button {
+}
+
+.buttonWithIconContainer {
+  display: flex;
+  gap: 10px;
+  align-content: center;
+}

src/components/Icon/Icon.tsx

@@ -0,0 +1,221 @@
+import { useColorMode } from '@docusaurus/theme-common'
+import { clsx } from 'clsx'
+import React, { HTMLProps, SVGProps } from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: JSX.Element
+}
+
+type TSvgProps = {
+  fill?: string
+}
+
+export const Icon = (props: TProps): JSX.Element => {
+  const { children } = props
+  const { colorMode, setColorMode } = useColorMode()
+
+  return (
+    <div
+      className={clsx(
+        styles.icon,
+        colorMode === 'dark' ? styles.dark : styles.light,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const IconArrowRightCircle = ({
+  fill = 'black',
+}: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill={'black'} />
+      <path
+        d="M9 8L11 10L9 12"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconArrowLeftCircle = ({
+  fill = 'black',
+}: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconFolder = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconGithub = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconDiscord = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconStatus = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconTwitter = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconTelegram = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconDiscourse = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)

src/components/Icon/SocialmediaLink.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  IconDiscord,
+  IconDiscourse,
+  IconTwitter,
+  IconGithub,
+  IconStatus,
+  IconTelegram,
+} from './Icon'
+
+type TProps = {
+  handler: string
+  provider:
+    | 'discord'
+    | 'twitter'
+    | 'linkedin'
+    | 'status'
+    | 'github'
+    | 'discourse'
+    | 'telegram'
+}
+
+export const SocialMediaItem = (props: TProps): JSX.Element => {
+  switch (props.provider) {
+    case 'twitter':
+      return (
+        <a href={`https://twitter.com/${props.handler}`} target={'_blank'}>
+          <IconTwitter />
+        </a>
+      )
+    case 'discord':
+      return (
+        <a href={`https://discord.gg/${props.handler}`} target={'_blank'}>
+          <IconDiscord />
+        </a>
+      )
+    case 'github':
+      return (
+        <a href={`https://github.com/${props.handler}`} target={'_blank'}>
+          <IconGithub />
+        </a>
+      )
+    case 'telegram':
+      return (
+        <a href={`https://t.me/${props.handler}`} target={'_blank'}>
+          <IconTelegram />
+        </a>
+      )
+    case 'status':
+      return (
+        <a href={`https://join.status.im/u/${props.handler}`} target={'_blank'}>
+          <IconStatus />
+        </a>
+      )
+    case 'discourse':
+      return (
+        <a
+          href={
+            props.handler.indexOf('http') > -1
+              ? props.handler
+              : `https://${props.handler}`
+          }
+          target={'_blank'}
+        >
+          <IconDiscourse />
+        </a>
+      )
+    default:
+      return null
+  }
+}

src/components/Icon/index.tsx

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

src/components/Icon/style.module.scss

@@ -0,0 +1,12 @@
+.icon {
+  &.dark {
+    .fill {
+      fill: var(--ifm-color-black);
+    }
+    .stroke {
+      stroke: var(--ifm-color-white);
+    }
+  }
+  &.light {
+  }
+}

src/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx

@@ -0,0 +1,45 @@
+import { clsx } from 'clsx'
+import React from 'react'
+import { LinkButtonWithIcon } from '../../Button/LinkButtonWithIcon'
+import { IconArrowRightCircle, IconFolder } from '../../Icon'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+  referenceType: 'github' | 'pdf'
+  linkUrl: string
+  linkText: string
+}
+
+export const ExternalReferenceCard = (props: TProps): JSX.Element => {
+  const { children, referenceType, linkText, linkUrl } = props
+
+  const icon = (() => {
+    switch (referenceType) {
+      case 'github':
+        return <IconArrowRightCircle />
+      case 'pdf':
+        return <IconArrowRightCircle />
+      default:
+        return null
+    }
+  })()
+
+  return (
+    <div className={clsx('alert', styles.container)}>
+      <div>
+        <div>{icon}</div>
+        <div>{children}</div>
+        <div>
+          <LinkButtonWithIcon
+            icon={icon}
+            linkProps={{ href: linkUrl, target: '_black' }}
+            className={'button--secondary'}
+          >
+            {linkText}
+          </LinkButtonWithIcon>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/mdx/ExternalReferenceCard/index.tsx

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

src/components/mdx/ExternalReferenceCard/style.module.scss

@@ -0,0 +1,12 @@
+.container {
+  background: gray;
+  border-radius: var(--ifm-global-radius);
+
+  box-shadow: none;
+
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+
+  display: flex;
+  column-gap: 10px;
+}

src/components/mdx/FeatureCard/FeatureCard.tsx

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx'
 import React from 'react'
 import styles from './style.module.scss'
 
@@ -15,12 +16,12 @@ export const FeatureCard = (props: TProps): JSX.Element => {
   const { index, text, title, link } = props
 
   return (
-    <div className={styles.card}>
-      <div className={styles.cardHeader}>
+    <div className={clsx('card', styles.cardContainer)}>
+      <div className={clsx('card__header', styles.cardHeader)}>
         {index && <span className={styles.latinNumber}>{ln[index]}</span>}
-        <h3>{title}</h3>
+        <h3 className={styles.cardTitle}>{title}</h3>
       </div>
-      <p className={styles.cardText}>{text}</p>
+      <p className={styles.cardDescription}>{text}</p>
     </div>
   )
 }

src/components/mdx/FeatureCard/style.module.scss

@@ -1,8 +1,22 @@
-.card {
-  .cardHeader {
-    .latinNumber {
-    }
+.cardContainer {
+  background: var(--ifm-background-color);
+  border-radius: var(--ifm-global-radius);
+  padding: 0.6rem 1.5rem 0.9rem;
+
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+
+  &:hover {
+    border-color: var(--ifm-color-primary);
   }
-  .cardText {
+
+  .cardTitle {
+  }
+
+  .cardDescription {
   }
 }

src/components/mdx/FeatureList/FeatureList.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import clsx from 'clsx'
 import styles from './style.module.scss'
 
 type TProps = {
@@ -6,5 +7,16 @@ type TProps = {
 }
 
 export const FeatureList = ({ children }: TProps): JSX.Element => {
-  return <div className={styles.FeatureList}>{children}</div>
+  return (
+    <section className={styles.FeatureList}>
+      <div
+        className={clsx(
+          styles.FeatureListContainer,
+          styles[`n_${React.Children.count(children)}`],
+        )}
+      >
+        {children}
+      </div>
+    </section>
+  )
 }

src/components/mdx/FeatureList/style.module.scss

@@ -1,2 +1,17 @@
 .FeatureList {
+  .FeatureListContainer {
+    display: grid;
+    grid-auto-rows: 200px;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 10px;
+
+    &.n_1 {
+    }
+
+    &.n_2 {
+    }
+
+    &.n_2 {
+    }
+  }
 }

src/components/mdx/Hero/Hero.tsx

@@ -0,0 +1,40 @@
+import Link from '@docusaurus/Link'
+import clsx from 'clsx'
+import React from 'react'
+import { ButtonWithIcon } from '../../Button/ButtonWithIcon'
+import { IconArrowRightCircle } from '../../Icon'
+import styles from './style.module.scss'
+
+type TProps = {
+  title: string
+  subtitle: string
+  linkUrl?: string
+  linkText?: string
+  label?: string
+  children: React.ReactNode
+}
+
+export const Hero = (props: TProps): JSX.Element => {
+  const { children, title, subtitle, label, linkUrl, linkText } = props
+  return (
+    <section className={styles.Hero}>
+      <div className={clsx('hero', styles.HeroContainer)}>
+        {label && <label>label</label>}
+        <div>
+          <h1 className={'hero__title'}>{title}</h1>
+          <p className={'hero_subtitle'}>{subtitle}</p>
+        </div>
+        {linkUrl && linkText && (
+          <Link href={linkUrl}>
+            <ButtonWithIcon
+              className={'button--secondary'}
+              icon={<IconArrowRightCircle />}
+            >
+              {linkText}
+            </ButtonWithIcon>
+          </Link>
+        )}
+      </div>
+    </section>
+  )
+}

src/components/mdx/Hero/index.tsx

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

src/components/mdx/Hero/style.module.scss

@@ -0,0 +1,9 @@
+.Hero {
+  .HeroContainer {
+    border-radius: var(--ifm-global-radius);
+    .heroTitle {
+    }
+    .heroSubtitle {
+    }
+  }
+}