diff --git a/docs/learn/overview.md b/docs/learn/overview.md index 67814ab..6d536d8 100644 --- a/docs/learn/overview.md +++ b/docs/learn/overview.md @@ -2,4 +2,4 @@ sidebar_position: 1 --- -# Learn overview \ No newline at end of file +# Learn overview diff --git a/docusaurus.config.js b/docusaurus.config.js index 74ecb82..02754af 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,7 +1,6 @@ const lightCodeTheme = require("prism-react-renderer/themes/github"); const darkCodeTheme = require("prism-react-renderer/themes/dracula"); -/** @type {import('@docusaurus/types').Config} */ const config = { title: "Zano Docs", tagline: "Blockchain privacy for mass adoption", @@ -86,23 +85,23 @@ const config = { items: [ { label: "Learn", - to: "/docs/learn/intro", + to: "/docs/learn/overview", }, { label: "Use", - to: "/docs/use/intro", + to: "/docs/use/overview", }, { label: "Build", - to: "/docs/use/intro", + to: "/docs/build/overview", }, { label: "Mine", - to: "/docs/use/intro", + to: "/docs/mine/overview", }, { label: "Stake", - to: "/docs/use/intro", + to: "/docs/stake/overview", }, ], }, diff --git a/src/components/Intro/Intro.jsx b/src/components/Intro/Intro.jsx deleted file mode 100644 index 9c19991..0000000 --- a/src/components/Intro/Intro.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const Intro = () => { - return
Intro page and stuff
; -}; - -export default Intro; diff --git a/src/components/LearnMore/LearnMore.jsx b/src/components/LearnMore/LearnMore.jsx new file mode 100644 index 0000000..0c7c8df --- /dev/null +++ b/src/components/LearnMore/LearnMore.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import styles from "./LearnMore.module.css"; +import Button from "../Button/Button"; + +function LearnMore({ links }) { + return ( +
+

Learn more

+
+ {links.map((link) => ( +
+
+ ); +} + +export default LearnMore; diff --git a/src/components/LearnMore/LearnMore.module.css b/src/components/LearnMore/LearnMore.module.css new file mode 100644 index 0000000..94fa1e8 --- /dev/null +++ b/src/components/LearnMore/LearnMore.module.css @@ -0,0 +1,72 @@ +.container { + margin-top: 40px; + display: flex; + flex-direction: column; + margin-bottom: 50px; +} + +.container > h2 { + margin-block-start: 0; + margin-block-end: 0; +} + +.container > div { + margin-top: 20px; + + display: flex; + flex-direction: row; + align-items: center; +} + +.container > div > :not(:first-child) { + margin-left: 20px; +} + +.container > div > a { + display: flex; + align-items: center; + text-decoration: none; + color: var(--ifm-link-color); + font-weight: 600; + width: 280px; + padding: 25px 0px 25px 20px; + border-radius: 0.625rem; + border: 1px solid var(--ifm-color-emphasis-300); + backdrop-filter: blur(3px); +} + +.container > div > a:hover { + transition: border-color var(--ifm-transition-fast) + var(--ifm-transition-timing-default); + border: 0.0625rem solid var(--ifm-color-primary-lighter); +} + +@media (max-width: 900px) { + .container > div { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .container > div > :not(:first-child) { + margin-top: 10px; + margin-left: 0; + } +} + +@media (max-width: 400px) { + .container > div { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .container > div > a { + width: 220px; + } + + .container > div > :not(:first-child) { + margin-top: 10px; + margin-left: 0; + } +} diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx new file mode 100644 index 0000000..ef81c8d --- /dev/null +++ b/src/components/Projects/Projects.jsx @@ -0,0 +1,27 @@ +import React from "react"; +import { useColorMode } from "@docusaurus/theme-common"; +import styles from "./Projects.module.css"; + +function Projects({ projects }) { + // const { colorMode } = useColorMode(); + const colorMode = "light"; + return ( +
+
+ {projects.map((project) => ( + + {project.name} + + ))} +
+
+ ); +} + +export default Projects; diff --git a/src/components/Projects/Projects.module.css b/src/components/Projects/Projects.module.css new file mode 100644 index 0000000..30a6ed4 --- /dev/null +++ b/src/components/Projects/Projects.module.css @@ -0,0 +1,21 @@ +.projects { + display: flex; + margin-top: 20px; + align-items: center; + gap: 20px; +} + +.projects :not(:first-child) { + margin-left: 20px; +} + +@media (max-width: 900px) { + .projects { + display: flex; + flex-direction: column; + } + .projects:not(:first-child) { + margin-left: 0; + margin-top: 20px; + } +} diff --git a/src/components/StartArticle/StartArticle.jsx b/src/components/StartArticle/StartArticle.jsx new file mode 100644 index 0000000..7bbcb48 --- /dev/null +++ b/src/components/StartArticle/StartArticle.jsx @@ -0,0 +1,28 @@ +import React from "react"; +import styles from "./StartArticle.module.css"; +import TextBlock from "../TextBlock/TextBlock"; + +function StartArticle({ content }) { + return ( +
+
+
+

Zano Documentation

+ + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae vitae + dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores + eos qui ratione voluptatem sequi nesciunt. + +
+ {content.map((item) => ( + + ))} +
+
+ ); +} + +export default StartArticle; diff --git a/src/components/StartArticle/StartArticle.module.css b/src/components/StartArticle/StartArticle.module.css new file mode 100644 index 0000000..1174ce4 --- /dev/null +++ b/src/components/StartArticle/StartArticle.module.css @@ -0,0 +1,14 @@ +.welcome > h1 { + font-size: 3rem; +} + +@media (max-width: 460px) { + .welcome > h1 { + font-size: 2rem; + } +} + +.intro > article { + display: flex; + flex-direction: column; +} diff --git a/src/components/TextBlock/TextBlock.jsx b/src/components/TextBlock/TextBlock.jsx new file mode 100644 index 0000000..e79d334 --- /dev/null +++ b/src/components/TextBlock/TextBlock.jsx @@ -0,0 +1,31 @@ +import React from "react"; +import styles from "./TextBlock.module.css"; + +function TextBlock({ content }) { + return ( +
+

{content.title}

+ {content.items.map((item, i) => ( + + ))} +
+ ); +} + +function TextBlockItem(props) { + return ( + <> + + {props.textBlockLinkText + " "} + {props.textBlockContent} + + + ); +} + +export default TextBlock; diff --git a/src/components/TextBlock/TextBlock.module.css b/src/components/TextBlock/TextBlock.module.css new file mode 100644 index 0000000..222a5b1 --- /dev/null +++ b/src/components/TextBlock/TextBlock.module.css @@ -0,0 +1,22 @@ +.container { + font-size: var(--ifm-code-font-size); + margin-top: 20px; + display: flex; + flex-direction: column; +} + +.container > h2 { + margin-block-start: 0; + margin-block-end: 0; +} + +.container > span { + font-size: var(--ifm-code-font-size); + margin-top: 15px; +} + +.container > span > a { + font-size: var(--ifm-code-font-size); + color: var(--ifm-color-primary-lighter); + text-decoration: none; +} diff --git a/src/pages/StartPage/StartPage.js b/src/pages/StartPage/StartPage.js deleted file mode 100644 index 5c4b7ea..0000000 --- a/src/pages/StartPage/StartPage.js +++ /dev/null @@ -1,170 +0,0 @@ -import React from "react"; -import ProjectImage from "../../../static/img/blue.jpg"; -import Button from "../../components/Button/Button"; -import "./startpage.css"; - -function StartPage () { - return ( - <> -
- - -
- - ); -} - -function StartArticle () { - return ( -
-
-
-

Zano Documentation

- - Sed ut perspiciatis unde omnis - iste natus error sit voluptatem - accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae - vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia - voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni - dolores eos qui ratione voluptatem sequi nesciunt. - -
- - - - -
- -
- ); -} - -function BuildedProjects () { - return ( -
-
- Projects built on Zano -
- - - -
-
-
- ); -} - -function LearnMoreComponent (props) { - return ( -
-

Learn more

-
-
-
- ); -} - -function StartTextBlock (props) { - return ( -
-

{props.textBlockTitle}

- {props.textBlockItems.map((item) => ( - - ))} -
- ); -} - -function StartTextBlockItem (props) { - return ( - <> - - {props.textBlockLinkText + " "} - {props.textBlockContent} - - - ) -} - -export default StartPage; \ No newline at end of file diff --git a/src/pages/StartPage/StartPage.jsx b/src/pages/StartPage/StartPage.jsx new file mode 100644 index 0000000..8cf849e --- /dev/null +++ b/src/pages/StartPage/StartPage.jsx @@ -0,0 +1,109 @@ +import React from "react"; +import styles from "./StartPage.module.css"; +import StartArticle from "../../components/StartArticle/StartArticle"; +import LearnMore from "../../components/LearnMore/LearnMore"; +import Projects from "../../components/Projects/Projects"; +import layerLogoDark from "../../../static/img/projects/confidential-bridge_logo_1_dark.png"; +import layerLogo from "../../../static/img/projects/confidential-bridge_logo_1.png"; +import zanoLogo from "../../../static/img/projects/zano_white_theme.png"; +import zanoLogoDark from "../../../static/img/projects/zano_block.png"; +import bazaarLogo from "../../../static/img/projects/bazaar_wordmark.png"; + +const content = [ + { + title: "Getting started", + items: [ + { + link: "#", + linkText: "Add link", + content: + "At vero eos et accusamus et iusto odio dignissimosducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga", + }, + ], + }, + { + title: "Start learning", + items: [ + { + link: "#", + linkText: "Add link", + content: + "At vero eos et accusamus et iusto odio dignissimosducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga", + }, + ], + }, + { + title: "Mine and Stake", + items: [ + { + link: "#", + linkText: "Add link", + content: + "At vero eos et accusamus et iusto odio dignissimosducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga", + }, + ], + }, + { + title: "Build on Zano", + items: [ + { + link: "#", + linkText: "Add link", + content: + "At vero eos et accusamus et iusto odio dignissimosducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga", + }, + { + link: "#", + linkText: "Add link", + content: + "At vero eos et accusamus et iusto odio dignissimosducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga", + }, + ], + }, +]; + +const links = [ + { + name: "Developers", + link: "#", + }, + { + name: "Users", + link: "#", + }, + { + name: "Miners", + link: "#", + }, + { + name: "Stakers", + link: "#", + }, +]; +const projects = [ + { + name: "Confidential Bridge", + link: "https://bridge.confidentiallayer.com", + logo: { light: layerLogo, dark: layerLogoDark }, + }, + { + name: "Zano Trade", + link: "https://trade.zano.org", + logo: { light: zanoLogo, dark: zanoLogoDark }, + }, + { name: "Bazaar", link: "#", logo: { light: bazaarLogo, dark: bazaarLogo } }, +]; + +function StartPage() { + return ( + <> +
+ + + +
+ + ); +} + +export default StartPage; diff --git a/src/pages/StartPage/StartPage.module.css b/src/pages/StartPage/StartPage.module.css new file mode 100644 index 0000000..22b5128 --- /dev/null +++ b/src/pages/StartPage/StartPage.module.css @@ -0,0 +1,21 @@ +.container { + margin: 3% 20% 3% 20%; + display: flex; + justify-content: center; + flex-direction: column; + width: 60%; +} + +@media (max-width: 600px) { + .container { + margin: 3% 10% 3% 10%; + width: 80%; + } +} + +@media (max-width: 460px) { + .container { + margin: 3% 5% 3% 5%; + width: 90%; + } +} diff --git a/src/pages/StartPage/startpage.css b/src/pages/StartPage/startpage.css deleted file mode 100644 index b747249..0000000 --- a/src/pages/StartPage/startpage.css +++ /dev/null @@ -1,172 +0,0 @@ -@import url("../../css/custom.css"); - -.main-content{ - margin: 3% 20% 3% 20%; - display: flex; - justify-content: center; - flex-direction: column; - width: 60%; -} - -.article-welcome > h1{ - font-size: 3rem; -} - - -@media (max-width: 600px) { - .main-content{ - margin: 3% 10% 3% 10%; - width: 80%; - } -} - -@media (max-width: 460px) { - .main-content{ - margin: 3% 5% 3% 5%; - width: 90%; - } - - .article-welcome > h1{ - font-size: 2rem; - } -} - - - -.article-intro > article { - display: flex; - flex-direction: column; - -} - -.start-text-block { - font-size: var(--ifm-code-font-size); - margin-top: 20px; - display: flex; - flex-direction: column; - -} - -.start-text-block > h2 { - margin-block-start: 0; - margin-block-end: 0; -} - -.start-text-block > span { - font-size: var(--ifm-code-font-size); - margin-top: 15px; -} - -.start-text-block > span > a { - font-size: var(--ifm-code-font-size); - color: var(--ifm-color-primary-lighter); - text-decoration: none; -} - -.builded-projects{ - width: 100%; - display: flex; - flex-direction: column; - margin-top: 3%; -} - -.builded-projects span { - font-size: var(--ifm-code-font-size); - font-weight: 500; -} - -.builded-projects__images{ - display: flex; - margin-top: 15px; -} - - -.builded-projects__images :not(:first-child){ - margin-left: 20px; -} - -@media (max-width: 900px) { - .builded-projects__images{ - display: flex; - flex-direction: column; - - } - .builded-projects__images :not(:first-child){ - margin-left: 0; - margin-top: 20px; - } -} - -.learn-more{ - margin-top: 40px; - display: flex; - flex-direction: column; - margin-bottom: 50px; -} - -.learn-more > h2 { - margin-block-start: 0; - margin-block-end: 0; -} - -.learn-more > div{ - margin-top: 20px; - - display: flex; - flex-direction: row; - align-items: center; -} - -.learn-more > div > :not(:first-child){ - margin-left: 20px; -} - -.learn-more > div > a{ - display: flex; - align-items: center; - text-decoration: none; - color: var(--ifm-link-color); - font-weight: 600; - width: 280px; - padding: 25px 0px 25px 20px; - border-radius: 0.625rem; - border: 1px solid var(--ifm-color-emphasis-300); - backdrop-filter: blur(3px); -} - -.learn-more > div > a:hover{ - transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default); - border: 0.0625rem solid var(--ifm-color-primary-lighter); -} - -@media (max-width: 900px) { - .learn-more > div{ - display: flex; - flex-direction: column; - align-items: start; - } - - .learn-more > div > :not(:first-child){ - margin-top: 10px; - margin-left: 0; - } -} - -@media (max-width: 400px) { - .learn-more > div{ - display: flex; - flex-direction: column; - align-items: start; - } - - .learn-more > div > a{ - width: 220px; - } - - .learn-more > div > :not(:first-child){ - margin-top: 10px; - margin-left: 0; - } -} - - diff --git a/static/img/projects/bazaar_wordmark.png b/static/img/projects/bazaar_wordmark.png new file mode 100644 index 0000000..46f9872 Binary files /dev/null and b/static/img/projects/bazaar_wordmark.png differ diff --git a/static/img/projects/confidential-bridge_logo_1.png b/static/img/projects/confidential-bridge_logo_1.png new file mode 100644 index 0000000..70d355d Binary files /dev/null and b/static/img/projects/confidential-bridge_logo_1.png differ diff --git a/static/img/projects/confidential-bridge_logo_1_dark.png b/static/img/projects/confidential-bridge_logo_1_dark.png new file mode 100644 index 0000000..ff2d35b Binary files /dev/null and b/static/img/projects/confidential-bridge_logo_1_dark.png differ diff --git a/static/img/projects/zano_block.png b/static/img/projects/zano_block.png new file mode 100644 index 0000000..15d8692 Binary files /dev/null and b/static/img/projects/zano_block.png differ diff --git a/static/img/projects/zano_white_theme.png b/static/img/projects/zano_white_theme.png new file mode 100644 index 0000000..064fdcb Binary files /dev/null and b/static/img/projects/zano_white_theme.png differ