diff --git a/src/assets/icons/developers_ico.png b/src/assets/icons/developers_ico.png new file mode 100644 index 0000000..d38f9bb Binary files /dev/null and b/src/assets/icons/developers_ico.png differ diff --git a/src/assets/icons/miners_ico.png b/src/assets/icons/miners_ico.png new file mode 100644 index 0000000..aefa7ee Binary files /dev/null and b/src/assets/icons/miners_ico.png differ diff --git a/src/assets/icons/stakers_ico.png b/src/assets/icons/stakers_ico.png new file mode 100644 index 0000000..f99b038 Binary files /dev/null and b/src/assets/icons/stakers_ico.png differ diff --git a/src/assets/icons/users_ico.png b/src/assets/icons/users_ico.png new file mode 100644 index 0000000..efc7779 Binary files /dev/null and b/src/assets/icons/users_ico.png differ diff --git a/src/assets/bazaar_logo.png b/src/assets/projects/bazaar_logo.png similarity index 100% rename from src/assets/bazaar_logo.png rename to src/assets/projects/bazaar_logo.png diff --git a/src/assets/bazaar_logo_square.png b/src/assets/projects/bazaar_logo_square.png similarity index 100% rename from src/assets/bazaar_logo_square.png rename to src/assets/projects/bazaar_logo_square.png diff --git a/src/assets/confidential_bridge_logo.png b/src/assets/projects/confidential_bridge_logo.png similarity index 100% rename from src/assets/confidential_bridge_logo.png rename to src/assets/projects/confidential_bridge_logo.png diff --git a/src/assets/confidential_bridge_logo_square.png b/src/assets/projects/confidential_bridge_logo_square.png similarity index 100% rename from src/assets/confidential_bridge_logo_square.png rename to src/assets/projects/confidential_bridge_logo_square.png diff --git a/src/assets/confidential_layer_logo.png b/src/assets/projects/confidential_layer_logo.png similarity index 100% rename from src/assets/confidential_layer_logo.png rename to src/assets/projects/confidential_layer_logo.png diff --git a/src/assets/confidential_layer_logo_square.png b/src/assets/projects/confidential_layer_logo_square.png similarity index 100% rename from src/assets/confidential_layer_logo_square.png rename to src/assets/projects/confidential_layer_logo_square.png diff --git a/src/assets/confidential_money_logo.png b/src/assets/projects/confidential_money_logo.png similarity index 100% rename from src/assets/confidential_money_logo.png rename to src/assets/projects/confidential_money_logo.png diff --git a/src/assets/confidential_money_logo_square.png b/src/assets/projects/confidential_money_logo_square.png similarity index 100% rename from src/assets/confidential_money_logo_square.png rename to src/assets/projects/confidential_money_logo_square.png diff --git a/src/assets/zano-trade_logo.png b/src/assets/projects/zano-trade_logo.png similarity index 100% rename from src/assets/zano-trade_logo.png rename to src/assets/projects/zano-trade_logo.png diff --git a/src/assets/zano-trade_logo_square.png b/src/assets/projects/zano-trade_logo_square.png similarity index 100% rename from src/assets/zano-trade_logo_square.png rename to src/assets/projects/zano-trade_logo_square.png diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx index 0c8628f..87daf25 100644 --- a/src/components/Button/Button.jsx +++ b/src/components/Button/Button.jsx @@ -1,6 +1,12 @@ import React from "react"; import Link from "@docusaurus/Link"; +import styles from "./Button.module.css"; -const Button = ({ text, link }) => {text}; +const Button = ({ icon, text, link }) => ( + + {text} + {text} + +); export default Button; diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css new file mode 100644 index 0000000..e32cc79 --- /dev/null +++ b/src/components/Button/Button.module.css @@ -0,0 +1,21 @@ +.button { + display: flex; + gap: 1em; + align-items: center; + justify-content: center; + text-decoration: none; + color: var(--ifm-link-color); + font-weight: 600; + width: 280px; + padding: 2em; + border-radius: 0.625rem; + border: 1px solid var(--ifm-color-emphasis-300); + backdrop-filter: blur(3px); +} + +.button:hover { + text-decoration: none; + transition: border-color var(--ifm-transition-fast) + var(--ifm-transition-timing-default); + border: 0.0625rem solid var(--ifm-color-primary-lighter); +} diff --git a/src/components/LearnMore/LearnMore.jsx b/src/components/LearnMore/LearnMore.jsx index 0c7c8df..8c65116 100644 --- a/src/components/LearnMore/LearnMore.jsx +++ b/src/components/LearnMore/LearnMore.jsx @@ -8,7 +8,12 @@ function LearnMore({ links }) {

Learn more

{links.map((link) => ( -
diff --git a/src/components/LearnMore/LearnMore.module.css b/src/components/LearnMore/LearnMore.module.css index 94fa1e8..03f4569 100644 --- a/src/components/LearnMore/LearnMore.module.css +++ b/src/components/LearnMore/LearnMore.module.css @@ -22,25 +22,6 @@ 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; diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx index 352d5a4..68f4dbb 100644 --- a/src/components/Projects/Projects.jsx +++ b/src/components/Projects/Projects.jsx @@ -4,7 +4,8 @@ import styles from "./Projects.module.css"; function Projects({ projects }) { const colorMode = "light"; return ( -
+
+

Projects built on Zano:

{projects.map((project) => ( diff --git a/src/components/Projects/Projects.module.css b/src/components/Projects/Projects.module.css index 30a6ed4..a4b3319 100644 --- a/src/components/Projects/Projects.module.css +++ b/src/components/Projects/Projects.module.css @@ -1,3 +1,9 @@ +.container { + display: flex; + flex-direction: column; + margin-top: 20px; +} + .projects { display: flex; margin-top: 20px; diff --git a/src/pages/StartPage/StartPage.jsx b/src/pages/StartPage/StartPage.jsx index c761a61..808ca49 100644 --- a/src/pages/StartPage/StartPage.jsx +++ b/src/pages/StartPage/StartPage.jsx @@ -3,9 +3,13 @@ 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 zanoTradeLogo from "../../assets/zano-trade_logo_square.png"; -import clBridgeLogo from "../../assets/confidential_bridge_logo_square.png"; -import bazaarLogo from "../../assets/bazaar_logo_square.png"; +import zanoTradeLogo from "../../assets/projects/zano-trade_logo_square.png"; +import clBridgeLogo from "../../assets/projects/confidential_bridge_logo_square.png"; +import bazaarLogo from "../../assets/projects/bazaar_logo_square.png"; +import devIcon from "../../assets/icons/developers_ico.png"; +import mineIcon from "../../assets/icons/miners_ico.png"; +import stakeIcon from "../../assets/icons/stakers_ico.png"; +import userIcon from "../../assets/icons/users_ico.png"; const content = [ { @@ -63,32 +67,36 @@ const content = [ const links = [ { name: "Developers", - link: "#", + link: "docs/build/overview", + icon: devIcon, }, { name: "Users", - link: "#", + link: "docs/use/overview", + icon: userIcon, }, { name: "Miners", - link: "#", + link: "docs/mine/overview", + icon: mineIcon, }, { name: "Stakers", - link: "#", + link: "docs/stake/overview", + icon: stakeIcon, }, ]; const projects = [ - { - name: "Confidential Bridge", - link: "https://bridge.confidentiallayer.com", - logo: clBridgeLogo, - }, { name: "Zano Trade", link: "https://trade.zano.org", logo: zanoTradeLogo, }, + { + name: "Confidential Bridge", + link: "https://bridge.confidentiallayer.com", + logo: clBridgeLogo, + }, { name: "Bazaar", link: "#", logo: bazaarLogo }, ];