Merge branch 'main' of https://github.com/PRavaga/zano-docs

docs/learn/overview.md

@@ -2,4 +2,4 @@
 sidebar_position: 1
 ---
 
-# Learn overview
+# Learn overview

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",
             },
           ],
         },

src/components/Intro/Intro.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const Intro = () => {
-  return <div>Intro page and stuff</div>;
-};
-
-export default Intro;

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 (
+    <div className={styles.container}>
+      <h2>Learn more</h2>
+      <div>
+        {links.map((link) => (
+          <Button link={link.link} text={link.name} key={link.name} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default LearnMore;

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;
+  }
+}

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 (
+    <div>
+      <div className={styles.projects}>
+        {projects.map((project) => (
+          <a href={project.link} key={project.name}>
+            <img
+              src={
+                colorMode === "light" ? project.logo.light : project.logo.dark
+              }
+              alt={project.name}
+              width="280px"
+            />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Projects;

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;
+  }
+}

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 (
+    <div className={styles.intro}>
+      <article>
+        <div className={styles.welcome}>
+          <h1>Zano Documentation</h1>
+          <span>
+            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.
+          </span>
+        </div>
+        {content.map((item) => (
+          <TextBlock key={item.title} content={item} />
+        ))}
+      </article>
+    </div>
+  );
+}
+
+export default StartArticle;

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;
+}

src/components/TextBlock/TextBlock.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import styles from "./TextBlock.module.css";
+
+function TextBlock({ content }) {
+  return (
+    <div className={styles.container}>
+      <h2>{content.title}</h2>
+      {content.items.map((item, i) => (
+        <TextBlockItem
+          key={i}
+          textBlockLink={item.link}
+          textBlockLinkText={item.linkText}
+          textBlockContent={item.content}
+        />
+      ))}
+    </div>
+  );
+}
+
+function TextBlockItem(props) {
+  return (
+    <>
+      <span>
+        <a href={props.textBlockLink}>{props.textBlockLinkText + " "}</a>
+        {props.textBlockContent}
+      </span>
+    </>
+  );
+}
+
+export default TextBlock;

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;
+}

src/pages/StartPage/StartPage.js

@@ -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 (
-        <>
-            <main className="main-content">
-                <StartArticle />
-                <LearnMoreComponent />
-            </main>
-        </>
-    );
-}
-
-function StartArticle () {
-    return (
-        <div className="article-intro">
-            <article>
-                <div className="article-welcome">
-                    <h1>Zano Documentation</h1>
-                    <span> 
-                        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. 
-                    </span>
-                </div>
-                <StartTextBlock 
-                    textBlockTitle={"Getting started"}
-                    textBlockItems={
-                        [
-                            {
-                                textBlockLink: "#",
-                                textBlockLinkText: "Unassigned link",
-                                textBlockContent: `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`,
-                            }
-                        ]
-                    } 
-                />
-                <StartTextBlock 
-                    textBlockTitle={"Start learning"}
-                    textBlockItems={
-                        [
-                            {
-                                textBlockLink: "#",
-                                textBlockLinkText: "Unassigned link",
-                                textBlockContent: `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`,
-                            }
-                        ]
-                    } 
-                />
-                <StartTextBlock 
-                    textBlockTitle={"Mine and Stake"}
-                    textBlockItems={
-                        [
-                            {
-                                textBlockLink: "#",
-                                textBlockLinkText: "Unassigned link",
-                                textBlockContent: `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`,
-                            }
-                        ]
-                    } 
-                />
-                <StartTextBlock
-                    textBlockTitle={"Build on Zano"}
-                    textBlockItems={
-                        [
-                            {
-                                textBlockLink: "#",
-                                textBlockLinkText: "Unassigned link",
-                                textBlockContent: `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`,
-                            },
-                            {
-                                textBlockLink: "#",
-                                textBlockLinkText: "Unassigned link",
-                                textBlockContent: `On the other hand,
-                                we denounce with righteous indignation and dislike men who are so beguiled and demoralized
-                                by the charms of pleasure of the moment, so blinded by desire,
-                                that they cannot foresee the pain and trouble that are bound to ensue;`,
-                            }
-                        ]
-                    } 
-                />
-            </article>
-            <BuildedProjects />        
-        </div>
-    );
-}
-
-function BuildedProjects () {
-    return (
-        <div>
-            <div className="builded-projects">
-                <span>Projects built on Zano</span>
-                <div className="builded-projects__images">
-                    <img src={ProjectImage} alt="" width="280px" height="115px"/>
-                    <img src={ProjectImage} alt="" width="280px" height="115px"/>
-                    <img src={ProjectImage} alt="" width="280px" height="115px"/>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function LearnMoreComponent (props) {
-    return (
-        <div className="learn-more">
-            <h2>Learn more</h2>
-            <div className="learn-more__links">
-                <Button link="#" text="Developers"/>
-                <Button link="#" text="Miners/Stakers"/>
-                <Button link="#" text="Users"/>
-            </div>
-        </div>
-    );
-}
-
-function StartTextBlock (props) {
-    return (
-        <div className="start-text-block">
-            <h2>{props.textBlockTitle}</h2>
-            {props.textBlockItems.map((item) => (
-                <StartTextBlockItem 
-                    key={item.textBlockLink}
-                    textBlockLink={item.textBlockLink}
-                    textBlockLinkText={item.textBlockLinkText}
-                    textBlockContent={item.textBlockContent}
-                />    
-            ))}
-        </div>
-    );
-}
-
-function StartTextBlockItem (props) {
-    return (
-        <>  
-            <span>
-                <a href={props.textBlockLink}>{props.textBlockLinkText + " "}</a>
-                {props.textBlockContent}
-            </span>
-        </>
-    )
-}
-
-export default StartPage;

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 (
+    <>
+      <main className={styles.container}>
+        <StartArticle content={content} />
+        <Projects projects={projects} />
+        <LearnMore links={links} />
+      </main>
+    </>
+  );
+}
+
+export default StartPage;

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%;
+  }
+}

src/pages/StartPage/startpage.css

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