diff --git a/public/assets/link.svg b/public/assets/link.svg
new file mode 100644
index 0000000..e7c5c8b
--- /dev/null
+++ b/public/assets/link.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Docs/ProjectCard/ProjectCard.tsx b/src/components/Docs/ProjectCard/ProjectCard.tsx
new file mode 100644
index 0000000..77aed93
--- /dev/null
+++ b/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 = ({ project }) => {
+ return (
+
+ {project.name}
+
+ {project.items.map((item, index) => (
+
+
+ {item.number}
+ {item.title}
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+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
diff --git a/src/components/Docs/ProjectCard/index.ts b/src/components/Docs/ProjectCard/index.ts
new file mode 100644
index 0000000..6899693
--- /dev/null
+++ b/src/components/Docs/ProjectCard/index.ts
@@ -0,0 +1 @@
+export { default as ProjectCard } from './ProjectCard'
diff --git a/src/components/Docs/ProjectCard/types.ts b/src/components/Docs/ProjectCard/types.ts
new file mode 100644
index 0000000..11328b1
--- /dev/null
+++ b/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[]
+}
diff --git a/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx b/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx
index 802cd4b..4d6bebf 100644
--- a/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx
+++ b/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) {
diff --git a/src/containers/Docs/DocsContainer.tsx b/src/containers/Docs/DocsContainer.tsx
new file mode 100644
index 0000000..c5068a4
--- /dev/null
+++ b/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 (
+
+
+
+ {projectsData.map((project, index) => (
+
+ ))}
+
+
+
+ )
+}
+
+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
diff --git a/src/containers/Docs/index.ts b/src/containers/Docs/index.ts
new file mode 100644
index 0000000..53b51fc
--- /dev/null
+++ b/src/containers/Docs/index.ts
@@ -0,0 +1 @@
+export { default as DocsContainer } from './DocsContainer'
diff --git a/src/containers/Leaderboard/LeaderboardContainer.tsx b/src/containers/Leaderboard/LeaderboardContainer.tsx
index 3de656e..7c349d0 100644
--- a/src/containers/Leaderboard/LeaderboardContainer.tsx
+++ b/src/containers/Leaderboard/LeaderboardContainer.tsx
@@ -5,7 +5,7 @@ import React from 'react'
interface LeaderboardProps {}
-const Leaderboard: React.FC = () => {
+const LeaderboardContainer: React.FC = () => {
return (
@@ -15,14 +15,14 @@ const Leaderboard: React.FC = () => {
}
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
diff --git a/src/containers/Leaderboard/index.ts b/src/containers/Leaderboard/index.ts
index 1c64304..17fad73 100644
--- a/src/containers/Leaderboard/index.ts
+++ b/src/containers/Leaderboard/index.ts
@@ -1 +1 @@
-export { default as Leaderboard } from './LeaderboardContainer'
+export { default as LeaderboardContainer } from './LeaderboardContainer'
diff --git a/src/pages/docs/index.tsx b/src/pages/docs/index.tsx
new file mode 100644
index 0000000..fd6a2fb
--- /dev/null
+++ b/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 (
+ <>
+
+
+ >
+ )
+}