button icons

Signed-off-by: PRavaga <trueravaga@gmail.com>

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 }) => <Link to={link}>{text}</Link>;
+const Button = ({ icon, text, link }) => (
+  <Link className={styles.button} to={link}>
+    <img src={icon} alt={text} />
+    {text}
+  </Link>
+);
 
 export default Button;

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

src/components/LearnMore/LearnMore.jsx

@@ -8,7 +8,12 @@ function LearnMore({ links }) {
       <h2>Learn more</h2>
       <div>
         {links.map((link) => (
-          <Button link={link.link} text={link.name} key={link.name} />
+          <Button
+            icon={link.icon}
+            link={link.link}
+            text={link.name}
+            key={link.name}
+          />
         ))}
       </div>
     </div>

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;

src/components/Projects/Projects.jsx

@@ -4,7 +4,8 @@ import styles from "./Projects.module.css";
 function Projects({ projects }) {
   const colorMode = "light";
   return (
-    <div>
+    <div className={styles.container}>
+      <h2>Projects built on Zano:</h2>
       <div className={styles.projects}>
         {projects.map((project) => (
           <a href={project.link} key={project.name}>

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;

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