feat: implement docs page

public/assets/link.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8845 9.15865L10.0213 8.29421L10.8845 7.431C11.4527 6.85771 11.7708 6.08265 11.769 5.27542C11.7672 4.46819 11.4458 3.69453 10.875 3.12374C10.3043 2.55294 9.53064 2.23149 8.72345 2.22972C7.91627 2.22795 7.14125 2.54601 6.56799 3.11431L5.7042 3.97813L4.84103 3.11492L5.7042 2.2517C6.50561 1.45025 7.59256 1 8.72592 1C9.85928 1 10.9462 1.45025 11.7476 2.2517C12.549 3.05315 12.9993 4.14015 12.9993 5.27357C12.9993 6.40699 12.549 7.49399 11.7476 8.29543L10.8845 9.15865ZM9.1575 10.8851L8.29433 11.7483C7.49292 12.5498 6.40598 13 5.27262 13C4.13925 13 3.05231 12.5498 2.2509 11.7483C1.44949 10.9469 0.999268 9.85985 0.999268 8.72643C0.999268 7.59301 1.44949 6.50601 2.2509 5.70456L3.11469 4.84135L3.97786 5.70579L3.11469 6.569C2.55422 7.14381 2.24276 7.91629 2.24779 8.71912C2.25282 9.52195 2.57393 10.2905 3.14156 10.8582C3.70919 11.426 4.47763 11.7472 5.28041 11.7523C6.0832 11.7575 6.85569 11.4461 7.43055 10.8857L8.29433 10.0225L9.1575 10.8851ZM8.72592 4.40974L9.5897 5.27357L5.27262 9.58965L4.40944 8.72643L8.72592 4.40974Z" fill="white"/>
+</svg>

src/components/Docs/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled'
+import Link from 'next/link'
+import React from 'react'
+import { ProjectData } from './types'
+
+interface ProjectCardProps {
+  project: ProjectData
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
+  return (
+    <CardWrapper>
+      <ProjectTitle>{project.name}</ProjectTitle>
+      <ItemList>
+        {project.items.map((item, index) => (
+          <ItemWrapper
+            key={index}
+            isLastItem={index === project.items.length - 1}
+          >
+            <ItemContent>
+              <ItemNumber>{item.number}</ItemNumber>
+              <ItemTitle>{item.title}</ItemTitle>
+            </ItemContent>
+            <Link href={item.link} target="_blank">
+              <ItemIcon src={'/assets/link.svg'} alt="link" />
+            </Link>
+          </ItemWrapper>
+        ))}
+      </ItemList>
+    </CardWrapper>
+  )
+}
+
+const CardWrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  font-family: Courier, sans-serif;
+  font-weight: 400;
+
+  @media (max-width: 991px) {
+    margin-top: 28px;
+  }
+`
+
+const ProjectTitle = styled.h2`
+  color: rgb(var(--lsd-text-primary));
+  font-size: 32px;
+  line-height: 40px;
+  margin: 0 0 32px;
+`
+
+const ItemList = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+`
+
+const ItemWrapper = styled.li<{ isLastItem: boolean }>`
+  background-color: var(--grey-900);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  color: rgb(var(--lsd-text-primary));
+  margin-bottom: ${(props) => (props.isLastItem ? '0' : '2px')};
+`
+
+const ItemContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`
+
+const ItemNumber = styled.span`
+  width: 44px;
+`
+
+const ItemTitle = styled.span`
+  font-size: 14px;
+`
+
+const ItemIcon = styled.img`
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+`
+
+export default ProjectCard

src/components/Docs/ProjectCard/index.ts

@@ -0,0 +1 @@
+export { default as ProjectCard } from './ProjectCard'

src/components/Docs/ProjectCard/types.ts

@@ -0,0 +1,10 @@
+export interface ProjectItem {
+  number: string
+  title: string
+  link: string
+}
+
+export interface ProjectData {
+  name: string
+  items: ProjectItem[]
+}

src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx

@@ -16,7 +16,6 @@ const TabsWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
-  margin-top: 32px;
   width: 100%;
 
   @media (max-width: 991px) {

src/containers/Docs/DocsContainer.tsx

@@ -0,0 +1,109 @@
+import { ProjectCard } from '@/components/Docs/ProjectCard'
+import { ProjectData } from '@/components/Docs/ProjectCard/types'
+import styled from '@emotion/styled'
+import React from 'react'
+
+const projectsData: ProjectData[] = [
+  {
+    name: 'IFT',
+    items: [
+      { number: '1.', title: 'Deck', link: 'https://logos.co' },
+      { number: '2.', title: 'Whitepaper', link: 'https://logos.co' },
+      { number: '3.', title: 'Github', link: 'https://logos.co' },
+    ],
+  },
+  {
+    name: 'Logos',
+    items: [
+      { number: '1.', title: 'Deck', link: 'https://logos.co' },
+      { number: '2.', title: 'Whitepaper', link: 'https://logos.co' },
+      { number: '3.', title: 'Github', link: 'https://logos.co' },
+    ],
+  },
+  {
+    name: 'Operators',
+    items: [
+      { number: '1.', title: 'Deck', link: 'https://logos.co' },
+      { number: '2.', title: 'Whitepaper', link: 'https://logos.co' },
+      { number: '3.', title: 'Github', link: 'https://logos.co' },
+    ],
+  },
+  {
+    name: 'Vac',
+    items: [
+      { number: '1.', title: 'Deck', link: 'https://logos.co' },
+      { number: '2.', title: 'Whitepaper', link: 'https://logos.co' },
+      { number: '3.', title: 'Github', link: 'https://logos.co' },
+    ],
+  },
+  {
+    name: 'Codex',
+    items: [
+      { number: '1.', title: 'Deck', link: 'https://logos.co' },
+      { number: '2.', title: 'Whitepaper', link: 'https://logos.co' },
+      { number: '3.', title: 'Github', link: 'https://logos.co' },
+    ],
+  },
+  {
+    name: 'Waku',
+    items: [
+      { number: '1.', title: 'Deck', link: 'https://logos.co' },
+      { number: '2.', title: 'Whitepaper', link: 'https://logos.co' },
+      { number: '3.', title: 'Github', link: 'https://logos.co' },
+    ],
+  },
+  {
+    name: 'Nomos',
+    items: [
+      { number: '1.', title: 'Deck', link: 'https://logos.co' },
+      { number: '2.', title: 'Whitepaper', link: 'https://logos.co' },
+      { number: '3.', title: 'Github', link: 'https://logos.co' },
+    ],
+  },
+]
+
+const DocsSection: React.FC = () => {
+  return (
+    <Container>
+      <ProjectContainer>
+        <ProjectGrid>
+          {projectsData.map((project, index) => (
+            <ProjectCard key={index} project={project} />
+          ))}
+        </ProjectGrid>
+      </ProjectContainer>
+    </Container>
+  )
+}
+
+const Container = styled.section`
+  width: 100%;
+
+  @media (max-width: 991px) {
+    padding: 0 20px;
+  }
+`
+
+const ProjectContainer = styled.div`
+  margin-top: 65px;
+  width: 100%;
+
+  @media (max-width: 991px) {
+    max-width: 100%;
+    margin-top: 40px;
+  }
+`
+
+const ProjectGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 70px 16px;
+  width: 100%;
+
+  @media (max-width: 991px) {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+`
+
+export default DocsSection

src/containers/Docs/index.ts

@@ -0,0 +1 @@
+export { default as DocsContainer } from './DocsContainer'

src/containers/Leaderboard/LeaderboardContainer.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 interface LeaderboardProps {}
 
-const Leaderboard: React.FC<LeaderboardProps> = () => {
+const LeaderboardContainer: React.FC<LeaderboardProps> = () => {
   return (
     <Container>
       <LeaderboardTabs />
@@ -15,14 +15,14 @@ const Leaderboard: React.FC<LeaderboardProps> = () => {
 }
 
 const Container = styled.div`
-  background-color: #000;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: 28px 32px;
+  margin-top: 60px;
+
   @media (max-width: 991px) {
     padding: 0 20px;
   }
 `
 
-export default Leaderboard
+export default LeaderboardContainer

src/containers/Leaderboard/index.ts

@@ -1 +1 @@
-export { default as Leaderboard } from './LeaderboardContainer'
+export { default as LeaderboardContainer } from './LeaderboardContainer'

src/pages/docs/index.tsx

@@ -0,0 +1,13 @@
+import { SEO } from '@/components/SEO'
+import DocsContainer from '@/containers/Docs/DocsContainer'
+
+type PageProps = {}
+
+export default function DocsPage(props: PageProps) {
+  return (
+    <>
+      <SEO />
+      <DocsContainer />
+    </>
+  )
+}