From 5f3da61d1a97791e9df0d0eb3bbd6270d876b9a8 Mon Sep 17 00:00:00 2001 From: PRavaga Date: Thu, 7 Sep 2023 22:49:18 +0400 Subject: [PATCH] button icons Signed-off-by: PRavaga --- src/assets/icons/developers_ico.png | Bin 0 -> 490 bytes src/assets/icons/miners_ico.png | Bin 0 -> 413 bytes src/assets/icons/stakers_ico.png | Bin 0 -> 203 bytes src/assets/icons/users_ico.png | Bin 0 -> 400 bytes src/assets/{ => projects}/bazaar_logo.png | Bin .../{ => projects}/bazaar_logo_square.png | Bin .../confidential_bridge_logo.png | Bin .../confidential_bridge_logo_square.png | Bin .../confidential_layer_logo.png | Bin .../confidential_layer_logo_square.png | Bin .../confidential_money_logo.png | Bin .../confidential_money_logo_square.png | Bin src/assets/{ => projects}/zano-trade_logo.png | Bin .../{ => projects}/zano-trade_logo_square.png | Bin src/components/Button/Button.jsx | 8 ++++- src/components/Button/Button.module.css | 21 ++++++++++++ src/components/LearnMore/LearnMore.jsx | 7 +++- src/components/LearnMore/LearnMore.module.css | 19 ----------- src/components/Projects/Projects.jsx | 3 +- src/components/Projects/Projects.module.css | 6 ++++ src/pages/StartPage/StartPage.jsx | 32 +++++++++++------- 21 files changed, 62 insertions(+), 34 deletions(-) create mode 100644 src/assets/icons/developers_ico.png create mode 100644 src/assets/icons/miners_ico.png create mode 100644 src/assets/icons/stakers_ico.png create mode 100644 src/assets/icons/users_ico.png rename src/assets/{ => projects}/bazaar_logo.png (100%) rename src/assets/{ => projects}/bazaar_logo_square.png (100%) rename src/assets/{ => projects}/confidential_bridge_logo.png (100%) rename src/assets/{ => projects}/confidential_bridge_logo_square.png (100%) rename src/assets/{ => projects}/confidential_layer_logo.png (100%) rename src/assets/{ => projects}/confidential_layer_logo_square.png (100%) rename src/assets/{ => projects}/confidential_money_logo.png (100%) rename src/assets/{ => projects}/confidential_money_logo_square.png (100%) rename src/assets/{ => projects}/zano-trade_logo.png (100%) rename src/assets/{ => projects}/zano-trade_logo_square.png (100%) create mode 100644 src/components/Button/Button.module.css diff --git a/src/assets/icons/developers_ico.png b/src/assets/icons/developers_ico.png new file mode 100644 index 0000000000000000000000000000000000000000..d38f9bbdb87a52c4550f082c55428755fcdcb118 GIT binary patch literal 490 zcmVPg1*fp zo$1%}dR~X%pn1c=<_n=x=(0li@j@dLuXngdK*)@-IzfLvrj?yXE>WYypR)M7cLw@I zIF*Oc%33WZRI~FuR6r{A3|kJ2mAg;Dk%i;Xa`%!6=rx|Ca$+{Xl2w6ZPvW8N>2E~R zgI3vQ4W!LhjBC*uSl{*q&E=5W+&whn#Vdt&NcKL;a(}3x5=n6(EX{OD3>MQgmbh_I z^q}Tbir|oG#xu$>%GVT6O=zfgC%`{JEFLp!{ffJ!VYJ(QN<_xlp~S`|FQstcoGMbZ zL4;zn{l*0k4v-97lJqplZmsMl(oxWxtY2pKP~tHr45@j}0ee{PB;jv{oQW)7t#O+h z+AZn(5o8Ii(VoBk{sD5cw*4?eHGG?-KxDw~X>{tbf;n9jh>Tv&OqYo6zHzu%Ar|-E gA)CEeWYyffA6>JIVC19C!T4%P)2A&oy2xZGOY9%_!TWFbrHl*l<*M}!;>xMl@pap z1PNsbnc-!uHI=xMNb7>SXrDK*iZ=G1;bKXC_Hjo$tFI5K!*))%MNa^X{(Y;oqOPeSDmqX(S*)tFJ5eA_&V`&ld$Rq uvr}6-?7g;hxH7e^2u)dWe_4810drWKip2WIA)kSEF?hQAxvX`p~6oB{{q!#d<2F-lmy{tQXrT=ARCs!UJ|5B%#n}*UXq~Ij2uWI8VAklk>*K| z6Lpw4LkL0| {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 }, ];