From 09de5d18b52cb58800403ca321c6dc64e179505c Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Fri, 20 Oct 2023 12:55:50 +0100
Subject: [PATCH 1/2] feat(website): create navbar component

---
 apps/website/public/next.svg                 |  1 -
 apps/website/public/semaphore-logo.svg       | 13 ++++++
 apps/website/public/vercel.svg               |  1 -
 apps/website/src/app/page.tsx                | 23 ++++++----
 apps/website/src/components/Container.tsx    | 11 +++++
 apps/website/src/components/Navbar.tsx       | 46 ++++++++++++++++++++
 apps/website/src/icons/IconArrowUpRight.tsx  | 12 ++---
 apps/website/src/icons/IconBook.tsx          | 12 ++---
 apps/website/src/icons/IconBox.tsx           | 12 ++---
 apps/website/src/icons/IconChevronRight.tsx  | 12 ++---
 apps/website/src/icons/IconCli.tsx           | 12 ++---
 apps/website/src/icons/IconCommunity.tsx     | 12 ++---
 apps/website/src/icons/IconDiscord.tsx       | 12 ++---
 apps/website/src/icons/IconEye.tsx           | 12 ++---
 apps/website/src/icons/IconEyelash.tsx       | 12 ++---
 apps/website/src/icons/IconGroup.tsx         | 12 ++---
 apps/website/src/icons/IconManageUsers.tsx   | 12 ++---
 apps/website/src/icons/IconPSE.tsx           | 12 ++---
 apps/website/src/icons/IconSemaphore.tsx     | 12 ++---
 apps/website/src/icons/IconSemaphoreLogo.tsx | 12 ++---
 apps/website/src/icons/IconTree.tsx          | 12 ++---
 apps/website/src/icons/IconUser.tsx          | 12 ++---
 apps/website/src/styles/components/Link.ts   | 14 +++++-
 23 files changed, 145 insertions(+), 156 deletions(-)
 delete mode 100644 apps/website/public/next.svg
 create mode 100644 apps/website/public/semaphore-logo.svg
 delete mode 100644 apps/website/public/vercel.svg
 create mode 100644 apps/website/src/components/Container.tsx
 create mode 100644 apps/website/src/components/Navbar.tsx

diff --git a/apps/website/public/next.svg b/apps/website/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/apps/website/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/apps/website/public/semaphore-logo.svg b/apps/website/public/semaphore-logo.svg
new file mode 100644
index 000000000..82ab73c3e
--- /dev/null
+++ b/apps/website/public/semaphore-logo.svg
@@ -0,0 +1,13 @@
+<svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9239 0H19.3595C8.66769 0 0 8.68848 0 19.406V19.9999H9.96197L19.9239 10.0954V0ZM18.2705 1.6939V9.40519L9.28173 18.3425H1.68653C1.94142 14.0024 3.74877 9.95766 6.84047 6.85854C9.92721 3.7644 13.9507 1.95437 18.2705 1.6939Z" fill="white"/>
+<path d="M19.9256 20.0001H9.96362L0 29.9046V40H0.56604C11.2579 40 19.9256 31.3115 19.9256 20.594V20.0001Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M139.575 26.0528C140.552 26.6013 141.649 26.8756 142.866 26.8756C143.826 26.8756 144.727 26.6956 145.566 26.3356C146.424 25.9756 147.144 25.4528 147.727 24.767L146.235 23.2499C145.824 23.7299 145.326 24.0899 144.744 24.3299C144.178 24.5699 143.552 24.6899 142.866 24.6899C142.044 24.6899 141.315 24.5185 140.681 24.1756C140.046 23.8156 139.558 23.3185 139.215 22.6842C139.005 22.2855 138.86 21.8484 138.778 21.3727H148.344C148.395 21.1156 148.429 20.8927 148.447 20.7042C148.464 20.4984 148.472 20.3099 148.472 20.1384C148.472 18.9899 148.224 17.9613 147.727 17.0527C147.247 16.1441 146.569 15.4327 145.695 14.9184C144.838 14.4041 143.844 14.147 142.712 14.147C141.529 14.147 140.458 14.4298 139.498 14.9956C138.555 15.5441 137.801 16.2984 137.235 17.2584C136.686 18.2184 136.412 19.2984 136.412 20.4984C136.412 21.7156 136.695 22.8042 137.261 23.7642C137.826 24.7242 138.598 25.487 139.575 26.0528ZM138.783 19.4442C138.862 19.0025 138.997 18.5997 139.189 18.2356C139.515 17.6184 139.978 17.1384 140.578 16.7956C141.178 16.4527 141.872 16.2813 142.661 16.2813C143.415 16.2813 144.058 16.4441 144.589 16.7699C145.121 17.0784 145.532 17.5241 145.824 18.107C146.022 18.4929 146.153 18.9386 146.217 19.4442H138.783Z" fill="white"/>
+<path d="M128.062 26.6185V14.4041H130.376V15.8236C130.441 15.7244 130.509 15.6284 130.582 15.5356C131.302 14.6098 132.339 14.147 133.693 14.147C134.31 14.147 134.867 14.2584 135.365 14.4813C135.862 14.687 136.325 15.0384 136.753 15.5356L135.236 17.1041C134.979 16.8299 134.696 16.6327 134.387 16.5127C134.079 16.3927 133.719 16.3327 133.307 16.3327C132.45 16.3327 131.747 16.607 131.199 17.1556C130.65 17.7041 130.376 18.5356 130.376 19.6499V26.6185H128.062Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.608 26.0271C117.568 26.5928 118.648 26.8756 119.848 26.8756C121.031 26.8756 122.103 26.5928 123.063 26.0271C124.04 25.4613 124.811 24.6985 125.377 23.7385C125.943 22.7613 126.225 21.6727 126.225 20.4727C126.225 19.2899 125.943 18.2184 125.377 17.2584C124.811 16.2984 124.04 15.5441 123.063 14.9956C122.103 14.4298 121.031 14.147 119.848 14.147C118.648 14.147 117.568 14.4298 116.608 14.9956C115.648 15.5613 114.885 16.3241 114.32 17.2841C113.754 18.227 113.471 19.2899 113.471 20.4727C113.471 21.6727 113.754 22.7613 114.32 23.7385C114.885 24.6985 115.648 25.4613 116.608 26.0271ZM121.905 24.0985C121.305 24.4585 120.62 24.6385 119.848 24.6385C119.077 24.6385 118.391 24.4585 117.791 24.0985C117.191 23.7385 116.72 23.2499 116.377 22.6327C116.034 21.9985 115.863 21.2785 115.863 20.4727C115.863 19.6842 116.034 18.9813 116.377 18.3641C116.72 17.747 117.191 17.267 117.791 16.9241C118.391 16.5641 119.077 16.3841 119.848 16.3841C120.62 16.3841 121.297 16.5641 121.88 16.9241C122.48 17.267 122.951 17.747 123.294 18.3641C123.654 18.9813 123.834 19.6842 123.834 20.4727C123.834 21.2785 123.663 21.9985 123.32 22.6327C122.977 23.2499 122.505 23.7385 121.905 24.0985Z" fill="white"/>
+<path d="M109.592 26.6185V19.4956C109.592 18.5699 109.301 17.807 108.718 17.207C108.135 16.607 107.381 16.307 106.455 16.307C105.838 16.307 105.289 16.4441 104.809 16.7184C104.329 16.9927 103.952 17.3699 103.678 17.8499C103.403 18.3299 103.266 18.8784 103.266 19.4956V26.6185H100.952V8.25838H103.266V15.9822C103.637 15.4972 104.1 15.0998 104.655 14.7898C105.392 14.3613 106.223 14.147 107.149 14.147C108.075 14.147 108.889 14.3527 109.592 14.7641C110.312 15.1756 110.878 15.7498 111.289 16.487C111.701 17.2241 111.906 18.0727 111.906 19.0327V26.6185H109.592Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.6654 26.3099C91.4197 26.6871 92.2597 26.8756 93.1854 26.8756C94.2997 26.8756 95.3026 26.6013 96.194 26.0528C97.1026 25.487 97.814 24.7242 98.3283 23.7642C98.8426 22.8042 99.0997 21.7242 99.0997 20.5242C99.0997 19.3242 98.8426 18.2441 98.3283 17.2841C97.814 16.3241 97.1026 15.5613 96.194 14.9956C95.3026 14.4298 94.2997 14.147 93.1854 14.147C92.2768 14.147 91.4454 14.3441 90.6911 14.7384C90.0461 15.0684 89.5061 15.5165 89.0711 16.0828V14.4041H86.7568V31.7357H89.0711V24.9483C89.492 25.5127 90.0235 25.9665 90.6654 26.3099ZM94.8311 24.1499C94.2483 24.5099 93.5711 24.6899 92.7997 24.6899C92.0454 24.6899 91.3682 24.5099 90.7682 24.1499C90.1854 23.7899 89.7311 23.3013 89.4054 22.6842C89.0968 22.0499 88.9425 21.3299 88.9425 20.5242C88.9425 19.7013 89.1054 18.9727 89.4311 18.3384C89.7568 17.7041 90.2111 17.2156 90.794 16.8727C91.3768 16.5127 92.054 16.3327 92.8254 16.3327C93.5797 16.3327 94.2483 16.5127 94.8311 16.8727C95.414 17.2156 95.8768 17.7041 96.2197 18.3384C96.5626 18.9727 96.734 19.6927 96.734 20.4984C96.734 21.3213 96.5626 22.0499 96.2197 22.6842C95.8768 23.3013 95.414 23.7899 94.8311 24.1499Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.2702 26.8756C77.1559 26.8756 76.1445 26.6013 75.2359 26.0528C74.3273 25.487 73.6073 24.7242 73.0759 23.7642C72.5616 22.8042 72.3045 21.7242 72.3045 20.5242C72.3045 19.3242 72.5616 18.2441 73.0759 17.2841C73.6073 16.3241 74.3188 15.5613 75.2102 14.9956C76.1188 14.4298 77.1388 14.147 78.2702 14.147C79.1959 14.147 80.0188 14.3441 80.7388 14.7384C81.3807 15.0668 81.9122 15.5123 82.3331 16.0747V14.4041H84.6731V26.6185H82.3331V24.9569C81.9261 25.5173 81.4032 25.9683 80.7645 26.3099C80.0445 26.6871 79.2131 26.8756 78.2702 26.8756ZM78.6559 24.6899C79.8045 24.6899 80.7302 24.3042 81.4331 23.5327C82.136 22.7442 82.4874 21.7413 82.4874 20.5242C82.4874 19.6842 82.3245 18.9556 81.9988 18.3384C81.6902 17.7041 81.2445 17.2156 80.6617 16.8727C80.0788 16.5127 79.4017 16.3327 78.6302 16.3327C77.8588 16.3327 77.1731 16.5127 76.5731 16.8727C75.9902 17.2327 75.5273 17.7299 75.1845 18.3641C74.8588 18.9813 74.6959 19.6927 74.6959 20.4984C74.6959 21.3213 74.8588 22.0499 75.1845 22.6842C75.5273 23.3013 75.9988 23.7899 76.5988 24.1499C77.1988 24.5099 77.8845 24.6899 78.6559 24.6899Z" fill="white"/>
+<path d="M51.8494 14.4041V26.6185H54.1637V19.2127C54.1637 18.6127 54.3009 18.0984 54.5752 17.6699C54.8495 17.2413 55.2095 16.907 55.6552 16.667C56.1009 16.427 56.6066 16.307 57.1723 16.307C58.0123 16.307 58.7066 16.5727 59.2552 17.1041C59.8209 17.6184 60.1038 18.3299 60.1038 19.2384V26.6185H62.4181V19.2127C62.4181 18.6127 62.5552 18.0984 62.8295 17.6699C63.1038 17.2413 63.4638 16.907 63.9095 16.667C64.3724 16.427 64.8867 16.307 65.4524 16.307C66.2752 16.307 66.961 16.5727 67.5095 17.1041C68.0752 17.6184 68.3581 18.3299 68.3581 19.2384V26.6185H70.6981V18.7756C70.6981 17.8156 70.4838 16.9927 70.0553 16.307C69.6438 15.6213 69.0867 15.0898 68.3838 14.7127C67.681 14.3356 66.8838 14.147 65.9924 14.147C65.1352 14.147 64.3467 14.3441 63.6267 14.7384C62.9067 15.1156 62.3152 15.647 61.8524 16.3327C61.8459 16.3424 61.8395 16.352 61.8332 16.3617C61.8226 16.3434 61.8118 16.3252 61.8009 16.307C61.4066 15.6213 60.8581 15.0898 60.1552 14.7127C59.4695 14.3356 58.6981 14.147 57.8409 14.147C56.9666 14.147 56.178 14.3441 55.4752 14.7384C54.9596 15.015 54.5225 15.3747 54.1637 15.8173V14.4041H51.8494Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.4917 26.8756C43.2746 26.8756 42.1774 26.6013 41.2003 26.0528C40.2231 25.487 39.4517 24.7242 38.886 23.7642C38.3202 22.8042 38.0374 21.7156 38.0374 20.4984C38.0374 19.2984 38.3117 18.2184 38.8602 17.2584C39.426 16.2984 40.1802 15.5441 41.1231 14.9956C42.0831 14.4298 43.1546 14.147 44.3374 14.147C45.4689 14.147 46.4631 14.4041 47.3203 14.9184C48.1946 15.4327 48.8717 16.1441 49.3517 17.0527C49.8489 17.9613 50.0975 18.9899 50.0975 20.1384C50.0975 20.3099 50.0889 20.4984 50.0717 20.7042C50.0546 20.8927 50.0203 21.1156 49.9689 21.3727H40.4034C40.4848 21.8484 40.6304 22.2855 40.8403 22.6842C41.1831 23.3185 41.6717 23.8156 42.306 24.1756C42.9403 24.5185 43.6688 24.6899 44.4917 24.6899C45.1774 24.6899 45.8031 24.5699 46.3689 24.3299C46.9517 24.0899 47.4489 23.7299 47.8603 23.2499L49.3517 24.767C48.7689 25.4528 48.0489 25.9756 47.1917 26.3356C46.3517 26.6956 45.4517 26.8756 44.4917 26.8756ZM40.4081 19.4442H47.8418C47.7786 18.9386 47.6477 18.4929 47.4489 18.107C47.1574 17.5241 46.746 17.0784 46.2146 16.7699C45.6831 16.4441 45.0403 16.2813 44.286 16.2813C43.4974 16.2813 42.8031 16.4527 42.2031 16.7956C41.6031 17.1384 41.1403 17.6184 40.8145 18.2356C40.6224 18.5997 40.4869 19.0025 40.4081 19.4442Z" fill="white"/>
+<path d="M30.5607 26.6185C31.1779 26.7899 31.8293 26.8756 32.515 26.8756C33.8864 26.8756 34.975 26.5413 35.7807 25.8728C36.6036 25.2042 37.015 24.2956 37.015 23.147C37.015 22.3927 36.8522 21.7842 36.5265 21.3213C36.2179 20.8584 35.815 20.4899 35.3179 20.2156C34.8207 19.9413 34.2979 19.727 33.7493 19.5727C33.2007 19.4013 32.6693 19.2384 32.155 19.0842C31.6579 18.9299 31.255 18.7413 30.9464 18.5184C30.6378 18.2956 30.4836 17.9784 30.4836 17.567C30.4836 17.1556 30.655 16.8384 30.9979 16.6156C31.3579 16.3756 31.8721 16.2556 32.5407 16.2556C33.175 16.2556 33.7407 16.3756 34.2379 16.6156C34.7522 16.8556 35.1807 17.1984 35.5236 17.6441L37.015 16.1527C36.535 15.4841 35.9179 14.987 35.1636 14.6613C34.4264 14.3184 33.5779 14.147 32.6179 14.147C31.7093 14.147 30.9293 14.2927 30.2778 14.5841C29.6436 14.8756 29.1464 15.2956 28.7864 15.8441C28.4264 16.3756 28.2464 17.0099 28.2464 17.747C28.2464 18.4841 28.4007 19.0756 28.7093 19.5213C29.035 19.967 29.4464 20.3184 29.9436 20.5756C30.4407 20.8327 30.9636 21.047 31.5121 21.2185C32.0779 21.3727 32.6093 21.5356 33.1064 21.707C33.6036 21.8613 34.0064 22.067 34.315 22.3242C34.6407 22.5642 34.8036 22.907 34.8036 23.3527C34.8036 23.7985 34.6064 24.1499 34.2122 24.407C33.8179 24.647 33.2607 24.767 32.5407 24.767C31.8207 24.767 31.1693 24.6385 30.5864 24.3813C30.0036 24.107 29.4893 23.6956 29.0436 23.147L27.5521 24.6385C27.9293 25.1013 28.375 25.5042 28.8893 25.847C29.4036 26.1728 29.9607 26.4299 30.5607 26.6185Z" fill="white"/>
+</svg>
diff --git a/apps/website/public/vercel.svg b/apps/website/public/vercel.svg
deleted file mode 100644
index d2f842227..000000000
--- a/apps/website/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index aed2e5076..03de3e533 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -1,15 +1,20 @@
+"use client"
+
 import { Heading, Text, VStack } from "@chakra-ui/react"
+import Container from "../components/Container"
 
 export default function Home() {
     return (
-        <VStack h="400" justify="center">
-            <Heading as="h2" size="xl">
-                Anonymous interactions
-            </Heading>
-            <Text align="center">
-                Using zero knowledge, users can prove their group membership <br />
-                and send signals such as votes or endorsements without revealing their original identity.
-            </Text>
-        </VStack>
+        <Container>
+            <VStack h="400" justify="center">
+                <Heading as="h2" size="xl">
+                    Anonymous interactions
+                </Heading>
+                <Text align="center">
+                    Using zero knowledge, users can prove their group membership <br />
+                    and send signals such as votes or endorsements without revealing their original identity.
+                </Text>
+            </VStack>
+        </Container>
     )
 }
diff --git a/apps/website/src/components/Container.tsx b/apps/website/src/components/Container.tsx
new file mode 100644
index 000000000..650f8b68b
--- /dev/null
+++ b/apps/website/src/components/Container.tsx
@@ -0,0 +1,11 @@
+import { Container as _Container, ContainerProps } from "@chakra-ui/react"
+import Navbar from "./Navbar"
+
+export default function Container({ children }: ContainerProps) {
+    return (
+        <_Container maxW="1440px" px="20">
+            <Navbar />
+            {children}
+        </_Container>
+    )
+}
diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
new file mode 100644
index 000000000..94f7055fe
--- /dev/null
+++ b/apps/website/src/components/Navbar.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { HStack, Image, Link } from "@chakra-ui/react"
+import { usePathname } from "next/navigation"
+import IconArrowUpRight from "../icons/IconArrowUpRight"
+
+export default function Navbar() {
+    const pathname = usePathname()
+
+    return (
+        <HStack py="7" justify="space-between">
+            <Image htmlWidth="148px" src="./semaphore-logo.svg" alt="Semaphore logo" />
+            <HStack fontSize="18px" spacing="10">
+                <Link
+                    href="/projects"
+                    variant="navlink"
+                    borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
+                >
+                    Projects
+                </Link>
+                <Link
+                    href="/learn"
+                    variant="navlink"
+                    borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
+                >
+                    Learn
+                </Link>
+                <Link
+                    href="/build"
+                    variant="navlink"
+                    borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
+                >
+                    Build
+                </Link>
+                <Link href="https://docs.semaphore.pse.dev" isExternal>
+                    Documentation
+                    <IconArrowUpRight width="10px" ml={3} mb={1} />
+                </Link>
+                <Link href="https://github.com/semaphore-protocol" isExternal>
+                    Github
+                    <IconArrowUpRight width="10px" ml={3} mb={1} />
+                </Link>
+            </HStack>
+        </HStack>
+    )
+}
diff --git a/apps/website/src/icons/IconArrowUpRight.tsx b/apps/website/src/icons/IconArrowUpRight.tsx
index a57275593..e12b78a90 100644
--- a/apps/website/src/icons/IconArrowUpRight.tsx
+++ b/apps/website/src/icons/IconArrowUpRight.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconArrowUpRightProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconArrowUpRight({ width, height, color }: IconArrowUpRightProps): JSX.Element {
+export default function IconArrowUpRight(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="00 0 10 11" width={width} height={height} color={color}>
+        <Icon viewBox="00 0 10 11" {...props}>
             <path
                 d="M3.8934 0.621094L3.88987 2.12109L7.30807 2.12909L0.105469 9.31723L1.16506 10.3789L8.3874 3.17112L8.3793 6.63163L9.8793 6.63508L9.8934 0.635119L3.8934 0.621094Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconBook.tsx b/apps/website/src/icons/IconBook.tsx
index f105968f6..1d6aa7e25 100644
--- a/apps/website/src/icons/IconBook.tsx
+++ b/apps/website/src/icons/IconBook.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconBookProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconBook({ width, height, color }: IconBookProps): JSX.Element {
+export default function IconBook(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 61 52" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 61 52" {...props}>
             <path
                 d="M16.4927 42.3526C12.2991 42.7791 8.08266 43.9388 4.71704 45.1706V9.01435C7.98748 7.67666 12.5479 6.27336 16.972 5.8288L16.9722 5.82878C21.8216 5.34019 25.7837 6.05722 28.092 8.35488V43.8716C24.5873 42.1687 20.3541 41.964 16.4932 42.3526L16.4927 42.3526ZM44.4409 42.3563C40.5768 41.9643 36.3465 42.1653 32.842 43.8709V8.35488C35.1504 6.05722 39.1125 5.34019 43.9619 5.82878L43.9621 5.8288C48.3862 6.27336 52.9466 7.67666 56.217 9.01435V45.1708C52.8492 43.9387 48.6355 42.7758 44.4409 42.3563ZM16.4935 1.10253L16.493 1.10259C10.7474 1.68322 4.96378 3.649 1.35879 5.28867C0.943874 5.47737 0.592024 5.78149 0.345241 6.16472C0.0984578 6.54795 -0.0328327 6.9941 -0.032959 7.44992V7.45005V48.7001L-0.032959 48.7002C-0.032849 49.0976 0.0669673 49.4886 0.257347 49.8374C0.447728 50.1862 0.722584 50.4816 1.05674 50.6967L1.32733 50.2762L1.05674 50.6967C1.3909 50.9117 1.77368 51.0395 2.17001 51.0683C2.56617 51.0971 2.96321 51.026 3.3248 50.8617C6.59797 49.3772 11.8732 47.5931 16.9685 47.0788C22.2133 46.5502 26.4081 47.4293 28.6143 50.1827L28.6145 50.1829C28.8371 50.4603 29.1191 50.6842 29.4397 50.838C29.7603 50.9919 30.1114 51.0717 30.467 51.0717C30.8227 51.0717 31.1737 50.9919 31.4944 50.838C31.815 50.6842 32.097 50.4603 32.3195 50.1829L32.3197 50.1827C34.526 47.4293 38.7209 46.5502 43.9619 47.0788C49.061 47.5931 54.3399 49.3773 57.6091 50.8616C57.9707 51.026 58.3678 51.0971 58.7641 51.0683C59.1604 51.0395 59.5432 50.9117 59.8773 50.6967C60.2115 50.4816 60.4864 50.1862 60.6767 49.8374C60.8671 49.4886 60.9669 49.0976 60.967 48.7002V48.7001V7.45005V7.44992C60.9669 6.9941 60.8356 6.54795 60.5888 6.16472C60.3421 5.78149 59.9902 5.47737 59.5753 5.28867C55.9703 3.64901 50.1867 1.68322 44.4411 1.10259L44.4409 1.10257C39.6636 0.621166 34.3025 1.04352 30.467 4.11179C26.6315 1.04364 21.2702 0.624865 16.4935 1.10253Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconBox.tsx b/apps/website/src/icons/IconBox.tsx
index bdb5032c5..bfb9d6c86 100644
--- a/apps/website/src/icons/IconBox.tsx
+++ b/apps/website/src/icons/IconBox.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconBoxProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconBox({ width, height, color }: IconBoxProps): JSX.Element {
+export default function IconBox(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 63 63" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 63 63" {...props}>
             <path
                 d="M31.9261 4.38852C31.4635 4.20312 30.9472 4.20312 30.4846 4.38852L7.35857 13.6381L16.6741 17.362L40.5208 7.82564L31.9261 4.38852ZM45.7366 9.91427L21.8898 19.4506L31.2053 23.1745L55.0521 13.6381L45.7366 9.91427ZM58.3303 16.5018L33.1428 26.5768V57.2745L58.3303 47.1995V16.5056V16.5018ZM29.2678 57.2784V26.5729L4.08032 16.5018V47.2034L29.2678 57.2784ZM29.0469 0.788643C30.4325 0.234515 31.9781 0.234515 33.3637 0.788643L60.9886 11.8401C61.3477 11.9841 61.6556 12.2323 61.8724 12.5527C62.0893 12.8732 62.2052 13.2512 62.2053 13.6381V47.2034C62.2048 47.9777 61.9724 48.7341 61.5379 49.3751C61.1035 50.016 60.487 50.5121 59.7679 50.7994L31.9261 61.9361C31.4635 62.1215 30.9472 62.1215 30.4846 61.9361L2.64657 50.7994C1.9268 50.5127 1.30947 50.0169 0.87431 49.3759C0.439146 48.7349 0.206122 47.9781 0.205322 47.2034L0.205322 13.6381C0.205412 13.2512 0.321354 12.8732 0.538212 12.5527C0.75507 12.2323 1.06291 11.9841 1.42207 11.8401L29.0469 0.788643Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconChevronRight.tsx b/apps/website/src/icons/IconChevronRight.tsx
index 2cfe23c67..4e7503c2f 100644
--- a/apps/website/src/icons/IconChevronRight.tsx
+++ b/apps/website/src/icons/IconChevronRight.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconChevronRightProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconChevronRight({ width, height, color }: IconChevronRightProps): JSX.Element {
+export default function IconChevronRight(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 6 9" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 6 9" {...props}>
             <path d="M2.829 4.243L0 1.415L1.414 0L5.657 4.243L1.414 8.486L0 7.071L2.829 4.243Z" fill="currentColor" />
         </Icon>
     )
diff --git a/apps/website/src/icons/IconCli.tsx b/apps/website/src/icons/IconCli.tsx
index 05631cd57..45b5a0697 100644
--- a/apps/website/src/icons/IconCli.tsx
+++ b/apps/website/src/icons/IconCli.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconCliProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconCli({ width, height, color }: IconCliProps): JSX.Element {
+export default function IconCli(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 66 58" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 66 58" {...props}>
             <path
                 d="M30.3189 25.6833L5.21206 50.7902L0.191406 45.7695L20.2776 25.6833L0.191406 5.59718L5.21206 0.580078L30.3189 25.6833ZM30.3189 50.5381H65.8256V57.6394H30.3189V50.5381Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconCommunity.tsx b/apps/website/src/icons/IconCommunity.tsx
index 0b22d37f1..0c05140dd 100644
--- a/apps/website/src/icons/IconCommunity.tsx
+++ b/apps/website/src/icons/IconCommunity.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconCommunityProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconCommunity({ width, height, color }: IconCommunityProps): JSX.Element {
+export default function IconCommunity(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 19 19" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 19 19" {...props}>
             <path
                 d="M9.5 8.625C10.6603 8.625 11.7731 9.08594 12.5936 9.90641C13.4141 10.7269 13.875 11.8397 13.875 13V18.25H12.125V13C12.125 12.3304 11.8692 11.6862 11.4099 11.199C10.9505 10.7119 10.3224 10.4187 9.654 10.3794L9.5 10.375C8.83044 10.375 8.18617 10.6308 7.69902 11.0901C7.21187 11.5495 6.91866 12.1776 6.87937 12.846L6.875 13V18.25H5.125V13C5.125 11.8397 5.58594 10.7269 6.40641 9.90641C7.22688 9.08594 8.33968 8.625 9.5 8.625ZM3.8125 11.25C4.05663 11.25 4.29375 11.2789 4.52125 11.3322C4.37165 11.7776 4.28305 12.2412 4.25787 12.7104L4.25 13V13.0753C4.14942 13.0393 4.04481 13.0158 3.9385 13.0053L3.8125 13C3.48623 13 3.17166 13.1216 2.93013 13.3409C2.68861 13.5603 2.53745 13.8617 2.50612 14.1865L2.5 14.3125V18.25H0.75V14.3125C0.75 13.5003 1.07266 12.7213 1.64699 12.147C2.22132 11.5727 3.00027 11.25 3.8125 11.25ZM15.1875 11.25C15.9997 11.25 16.7787 11.5727 17.353 12.147C17.9273 12.7213 18.25 13.5003 18.25 14.3125V18.25H16.5V14.3125C16.5 13.9862 16.3784 13.6717 16.1591 13.4301C15.9397 13.1886 15.6383 13.0374 15.3135 13.0061L15.1875 13C15.0344 13 14.8874 13.0262 14.75 13.0744V13C14.75 12.4172 14.6555 11.8573 14.4796 11.334C14.7063 11.2789 14.9434 11.25 15.1875 11.25ZM3.8125 6C4.39266 6 4.94906 6.23047 5.3593 6.6407C5.76953 7.05094 6 7.60734 6 8.1875C6 8.76766 5.76953 9.32406 5.3593 9.7343C4.94906 10.1445 4.39266 10.375 3.8125 10.375C3.23234 10.375 2.67594 10.1445 2.2657 9.7343C1.85547 9.32406 1.625 8.76766 1.625 8.1875C1.625 7.60734 1.85547 7.05094 2.2657 6.6407C2.67594 6.23047 3.23234 6 3.8125 6ZM15.1875 6C15.7677 6 16.3241 6.23047 16.7343 6.6407C17.1445 7.05094 17.375 7.60734 17.375 8.1875C17.375 8.76766 17.1445 9.32406 16.7343 9.7343C16.3241 10.1445 15.7677 10.375 15.1875 10.375C14.6073 10.375 14.0509 10.1445 13.6407 9.7343C13.2305 9.32406 13 8.76766 13 8.1875C13 7.60734 13.2305 7.05094 13.6407 6.6407C14.0509 6.23047 14.6073 6 15.1875 6ZM3.8125 7.75C3.69647 7.75 3.58519 7.79609 3.50314 7.87814C3.42109 7.96019 3.375 8.07147 3.375 8.1875C3.375 8.30353 3.42109 8.41481 3.50314 8.49686C3.58519 8.57891 3.69647 8.625 3.8125 8.625C3.92853 8.625 4.03981 8.57891 4.12186 8.49686C4.20391 8.41481 4.25 8.30353 4.25 8.1875C4.25 8.07147 4.20391 7.96019 4.12186 7.87814C4.03981 7.79609 3.92853 7.75 3.8125 7.75ZM15.1875 7.75C15.0715 7.75 14.9602 7.79609 14.8781 7.87814C14.7961 7.96019 14.75 8.07147 14.75 8.1875C14.75 8.30353 14.7961 8.41481 14.8781 8.49686C14.9602 8.57891 15.0715 8.625 15.1875 8.625C15.3035 8.625 15.4148 8.57891 15.4969 8.49686C15.5789 8.41481 15.625 8.30353 15.625 8.1875C15.625 8.07147 15.5789 7.96019 15.4969 7.87814C15.4148 7.79609 15.3035 7.75 15.1875 7.75ZM9.5 0.75C10.4283 0.75 11.3185 1.11875 11.9749 1.77513C12.6313 2.4315 13 3.32174 13 4.25C13 5.17826 12.6313 6.0685 11.9749 6.72487C11.3185 7.38125 10.4283 7.75 9.5 7.75C8.57174 7.75 7.6815 7.38125 7.02513 6.72487C6.36875 6.0685 6 5.17826 6 4.25C6 3.32174 6.36875 2.4315 7.02513 1.77513C7.6815 1.11875 8.57174 0.75 9.5 0.75ZM9.5 2.5C9.03587 2.5 8.59075 2.68437 8.26256 3.01256C7.93437 3.34075 7.75 3.78587 7.75 4.25C7.75 4.71413 7.93437 5.15925 8.26256 5.48744C8.59075 5.81563 9.03587 6 9.5 6C9.96413 6 10.4092 5.81563 10.7374 5.48744C11.0656 5.15925 11.25 4.71413 11.25 4.25C11.25 3.78587 11.0656 3.34075 10.7374 3.01256C10.4092 2.68437 9.96413 2.5 9.5 2.5Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconDiscord.tsx b/apps/website/src/icons/IconDiscord.tsx
index b7c4aa758..81fc92ad2 100644
--- a/apps/website/src/icons/IconDiscord.tsx
+++ b/apps/website/src/icons/IconDiscord.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconDiscordProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconDiscord({ width, height, color }: IconDiscordProps): JSX.Element {
+export default function IconDiscord(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 287 219" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 287 219" {...props}>
             <path
                 d="M242.512 18.6526C224.277 10.2853 204.722 4.12073 184.276 0.590006C183.904 0.521864 183.532 0.692155 183.34 1.03274C180.825 5.50573 178.039 11.3411 176.088 15.9277C154.098 12.6354 132.22 12.6354 110.68 15.9277C108.729 11.2392 105.842 5.50573 103.316 1.03274C103.124 0.703518 102.752 0.533228 102.379 0.590006C81.9449 4.10945 62.3901 10.2741 44.1433 18.6526C43.9854 18.7207 43.85 18.8343 43.7601 18.9818C6.6687 74.3955 -3.49219 128.447 1.4924 181.829C1.51495 182.09 1.66156 182.34 1.86455 182.499C26.3364 200.47 50.0416 211.381 73.3065 218.612C73.6789 218.726 74.0734 218.59 74.3103 218.283C79.8137 210.768 84.7194 202.843 88.9256 194.51C89.1738 194.022 88.9369 193.443 88.4295 193.25C80.6482 190.298 73.2388 186.699 66.1115 182.612C65.5478 182.283 65.5026 181.477 66.0213 181.091C67.5211 179.967 69.0214 178.797 70.4535 177.617C70.7126 177.401 71.0737 177.356 71.3783 177.492C118.202 198.87 168.893 198.87 215.164 177.492C215.469 177.344 215.83 177.39 216.1 177.605C217.533 178.786 219.033 179.967 220.544 181.091C221.062 181.477 221.029 182.283 220.465 182.612C213.338 186.779 205.928 190.298 198.136 193.238C197.628 193.432 197.403 194.022 197.651 194.51C201.947 202.832 206.853 210.756 212.255 218.272C212.48 218.59 212.886 218.726 213.259 218.612C236.636 211.381 260.341 200.47 284.813 182.499C285.028 182.34 285.163 182.101 285.186 181.84C291.151 120.125 275.194 66.5167 242.884 18.9931C242.805 18.8343 242.67 18.7207 242.512 18.6526ZM95.9179 149.325C81.8208 149.325 70.2053 136.383 70.2053 120.489C70.2053 104.594 81.5956 91.6522 95.9179 91.6522C110.353 91.6522 121.856 104.708 121.63 120.489C121.63 136.383 110.24 149.325 95.9179 149.325ZM190.986 149.325C176.889 149.325 165.274 136.383 165.274 120.489C165.274 104.594 176.663 91.6522 190.986 91.6522C205.421 91.6522 216.924 104.708 216.698 120.489C216.698 136.383 205.421 149.325 190.986 149.325Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconEye.tsx b/apps/website/src/icons/IconEye.tsx
index 660e66854..e9c9a1338 100644
--- a/apps/website/src/icons/IconEye.tsx
+++ b/apps/website/src/icons/IconEye.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconEyeProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconEye({ width, height, color }: IconEyeProps): JSX.Element {
+export default function IconEye(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 111 110" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 111 110" {...props}>
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
diff --git a/apps/website/src/icons/IconEyelash.tsx b/apps/website/src/icons/IconEyelash.tsx
index d51fc2bd6..373fdd8a6 100644
--- a/apps/website/src/icons/IconEyelash.tsx
+++ b/apps/website/src/icons/IconEyelash.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconEyelashProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconEyelash({ width, height, color }: IconEyelashProps): JSX.Element {
+export default function IconEyelash(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 55 32" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 55 32" {...props}>
             <path
                 fill="currentColor"
                 d="M20.9148 31.0633L16.1257 29.7786L18.0775 22.4894C15.1558 21.4119 12.4405 19.8415 10.0493 17.8466L4.70958 23.1888L1.20018 19.6794L6.5424 14.3397C3.52674 10.728 1.50049 6.3952 0.661987 1.76537L5.5429 0.875C7.42533 11.2965 16.5423 19.2032 27.507 19.2032C38.4692 19.2032 47.5887 11.2965 49.4711 0.875L54.3521 1.76289C53.5147 6.39335 51.4893 10.727 48.4741 14.3397L53.8139 19.6794L50.3045 23.1888L44.9647 17.8466C42.5736 19.8415 39.8582 21.4119 36.9365 22.4894L38.8884 29.781L34.0992 31.0633L32.1449 23.7717C29.0753 24.2976 25.9387 24.2976 22.8692 23.7717L20.9148 31.0633Z"
diff --git a/apps/website/src/icons/IconGroup.tsx b/apps/website/src/icons/IconGroup.tsx
index 53d687524..8ddae556d 100644
--- a/apps/website/src/icons/IconGroup.tsx
+++ b/apps/website/src/icons/IconGroup.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconGroupProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconGroup({ width, height, color }: IconGroupProps): JSX.Element {
+export default function IconGroup(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 56 56" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 56 56" {...props}>
             <path
                 d="M21.0849 26.5786C19.4569 26.5786 17.8956 25.9319 16.7444 24.7807C15.5932 23.6296 14.9465 22.0682 14.9465 20.4403C14.9465 18.8123 15.5932 17.2509 16.7444 16.0998C17.8956 14.9486 19.4569 14.3019 21.0849 14.3019C22.7129 14.3019 24.2742 14.9486 25.4253 16.0998C26.5765 17.2509 27.2232 18.8123 27.2232 20.4403C27.2232 22.0682 26.5765 23.6296 25.4253 24.7807C24.2742 25.9319 22.7129 26.5786 21.0849 26.5786ZM22.3125 49.0804V39.9466C22.3125 38.6152 22.7054 37.3903 23.4147 36.2963C20.983 35.9503 18.5059 36.1155 16.1416 36.7811C13.7773 37.4467 11.5779 38.5983 9.68391 40.1621C12.666 44.575 17.1567 47.7474 22.3125 49.0831V49.0804ZM7.17947 35.1996C11.1639 32.2509 15.9916 30.6631 20.9485 30.6708C23.7939 30.6708 26.5221 31.1837 29.0429 32.1222C31.4382 31.1864 34.2946 30.6708 37.3174 30.6708C41.8461 30.6708 46.0066 31.8276 48.792 33.8246C49.7129 30.5232 49.8433 27.0513 49.1726 23.6901C48.5019 20.3289 47.0491 17.1729 44.9317 14.4777C42.8143 11.7825 40.0919 9.62386 36.985 8.17661C33.8781 6.72936 30.4741 6.03418 27.0485 6.14737C23.6229 6.26056 20.2722 7.17894 17.2676 8.82813C14.263 10.4773 11.689 12.811 9.75419 15.6401C7.81935 18.4691 6.57801 21.7142 6.1307 25.1123C5.68338 28.5104 6.04267 31.9661 7.17947 35.1996ZM46.5358 39.0899C45.4637 37.6358 41.8761 36.1271 37.3174 36.1271C31.8447 36.1271 27.7688 38.3015 27.7688 39.9466V49.7679C31.5551 49.77 35.2767 48.7866 38.5677 46.9144C41.8586 45.0422 44.6056 42.3456 46.5385 39.0899H46.5358ZM27.7688 55.2242C12.7013 55.2242 0.487305 43.0103 0.487305 27.9427C0.487305 12.8751 12.7013 0.661133 27.7688 0.661133C42.8364 0.661133 55.0504 12.8751 55.0504 27.9427C55.0504 43.0103 42.8364 55.2242 27.7688 55.2242ZM37.3174 29.3068C35.8703 29.3068 34.4825 28.7319 33.4592 27.7086C32.4359 26.6854 31.8611 25.2975 31.8611 23.8504C31.8611 22.4033 32.4359 21.0155 33.4592 19.9923C34.4825 18.969 35.8703 18.3941 37.3174 18.3941C38.7645 18.3941 40.1523 18.969 41.1756 19.9923C42.1988 21.0155 42.7737 22.4033 42.7737 23.8504C42.7737 25.2975 42.1988 26.6854 41.1756 27.7086C40.1523 28.7319 38.7645 29.3068 37.3174 29.3068Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconManageUsers.tsx b/apps/website/src/icons/IconManageUsers.tsx
index 25390a66e..e0b7b4d7c 100644
--- a/apps/website/src/icons/IconManageUsers.tsx
+++ b/apps/website/src/icons/IconManageUsers.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconManageUsersProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconManageUsers({ width, height, color }: IconManageUsersProps): JSX.Element {
+export default function IconManageUsers(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 57 50" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 57 50" {...props}>
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
diff --git a/apps/website/src/icons/IconPSE.tsx b/apps/website/src/icons/IconPSE.tsx
index b2bbc9410..38c1001a8 100644
--- a/apps/website/src/icons/IconPSE.tsx
+++ b/apps/website/src/icons/IconPSE.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconPSEProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconPSE({ width, height, color }: IconPSEProps): JSX.Element {
+export default function IconPSE(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 332 333" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 332 333" {...props}>
             <path
                 d="M165.992 332.092C121.655 332.092 79.979 314.827 48.6259 283.481C17.2797 252.127 0.0141602 210.444 0.0141602 166.114C0.0141602 121.784 17.2797 80.1006 48.6259 48.7475C79.9721 17.3943 121.655 0.135742 165.992 0.135742C210.33 0.135742 252.006 17.4013 283.359 48.7475C314.706 80.0936 331.971 121.777 331.971 166.114C331.971 210.452 314.706 252.127 283.359 283.481C252.012 314.827 210.33 332.092 165.992 332.092ZM165.992 8.51707C123.897 8.51707 84.3233 24.9095 54.5556 54.6772C24.7879 84.4449 8.39548 124.019 8.39548 166.114C8.39548 208.209 24.7879 247.784 54.5556 277.55C84.3233 307.318 123.897 323.71 165.992 323.71C208.088 323.71 247.662 307.318 277.429 277.55C307.197 247.784 323.589 208.209 323.589 166.114C323.589 124.019 307.197 84.4449 277.429 54.6772C247.662 24.9095 208.088 8.51707 165.992 8.51707Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconSemaphore.tsx b/apps/website/src/icons/IconSemaphore.tsx
index 8b6be3ff6..0bd196506 100644
--- a/apps/website/src/icons/IconSemaphore.tsx
+++ b/apps/website/src/icons/IconSemaphore.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconSemaphoreProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconSemaphore({ width, height, color }: IconSemaphoreProps): JSX.Element {
+export default function IconSemaphore(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 20 40" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 20 40" {...props}>
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
diff --git a/apps/website/src/icons/IconSemaphoreLogo.tsx b/apps/website/src/icons/IconSemaphoreLogo.tsx
index d2fffc009..666c805d4 100644
--- a/apps/website/src/icons/IconSemaphoreLogo.tsx
+++ b/apps/website/src/icons/IconSemaphoreLogo.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconSemaphoreLogoProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconSemaphoreLogo({ width, height, color }: IconSemaphoreLogoProps): JSX.Element {
+export default function IconSemaphoreLogo(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 149 40" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 149 40" {...props}>
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
diff --git a/apps/website/src/icons/IconTree.tsx b/apps/website/src/icons/IconTree.tsx
index eaf6bbfed..020666a90 100644
--- a/apps/website/src/icons/IconTree.tsx
+++ b/apps/website/src/icons/IconTree.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconTreeProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconTree({ width, height, color }: IconTreeProps): JSX.Element {
+export default function IconTree(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 49 60" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 49 60" {...props}>
             <path
                 d="M18.9624 0.180664C20.4559 0.180664 21.6681 1.51399 21.6681 3.15683V15.0615C21.6681 16.7043 20.4559 18.0377 18.9624 18.0377H13.5512V23.99H27.0793V21.0138C27.0793 19.371 28.2914 18.0377 29.7849 18.0377H46.0185C47.512 18.0377 48.7241 19.371 48.7241 21.0138V32.9185C48.7241 34.5614 47.512 35.8947 46.0185 35.8947H29.7849C28.2914 35.8947 27.0793 34.5614 27.0793 32.9185V29.9423H13.5512V47.7994H27.0793V44.8232C27.0793 43.1803 28.2914 41.847 29.7849 41.847H46.0185C47.512 41.847 48.7241 43.1803 48.7241 44.8232V56.7279C48.7241 58.3707 47.512 59.704 46.0185 59.704H29.7849C28.2914 59.704 27.0793 58.3707 27.0793 56.7279V53.7517H10.8456C9.35213 53.7517 8.14002 52.4184 8.14002 50.7755V18.0377H2.7288C1.23531 18.0377 0.0231934 16.7043 0.0231934 15.0615V3.15683C0.0231934 1.51399 1.23531 0.180664 2.7288 0.180664H18.9624ZM43.3129 47.7994H32.4905V53.7517H43.3129V47.7994ZM43.3129 23.99H32.4905V29.9423H43.3129V23.99ZM16.2568 6.133H5.43441V12.0853H16.2568V6.133Z"
                 fill="currentColor"
diff --git a/apps/website/src/icons/IconUser.tsx b/apps/website/src/icons/IconUser.tsx
index b4901aab3..d95c805cd 100644
--- a/apps/website/src/icons/IconUser.tsx
+++ b/apps/website/src/icons/IconUser.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconUserProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconUser({ width, height, color }: IconUserProps): JSX.Element {
+export default function IconUser(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 61 60" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 61 60" {...props}>
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
diff --git a/apps/website/src/styles/components/Link.ts b/apps/website/src/styles/components/Link.ts
index e4a03d42b..e4106d581 100644
--- a/apps/website/src/styles/components/Link.ts
+++ b/apps/website/src/styles/components/Link.ts
@@ -1,8 +1,20 @@
+import { SystemStyleObject } from "@chakra-ui/theme-tools"
+
 const Link = {
     baseStyle: {
         _focus: {
             boxShadow: "none"
-        }
+        },
+        _hover: { textDecoration: "none" }
+    },
+    variants: {
+        navlink: (): SystemStyleObject => ({
+            borderBottomColor: "transparent",
+            borderBottomWidth: "2px",
+            pb: "5px",
+            pt: "6px",
+            _hover: { borderBottomColor: "ceruleanBlue" }
+        })
     }
 }
 

From 7ca4fb969f68541dac3ee0e47ea66dcd73bb4848 Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Fri, 20 Oct 2023 16:11:21 +0100
Subject: [PATCH 2/2] refactor(website): add navlink variant to all navbar
 links

---
 apps/website/src/components/Navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
index 94f7055fe..92d242558 100644
--- a/apps/website/src/components/Navbar.tsx
+++ b/apps/website/src/components/Navbar.tsx
@@ -32,11 +32,11 @@ export default function Navbar() {
                 >
                     Build
                 </Link>
-                <Link href="https://docs.semaphore.pse.dev" isExternal>
+                <Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
                     Documentation
                     <IconArrowUpRight width="10px" ml={3} mb={1} />
                 </Link>
-                <Link href="https://github.com/semaphore-protocol" isExternal>
+                <Link href="https://github.com/semaphore-protocol" variant="navlink" isExternal>
                     Github
                     <IconArrowUpRight width="10px" ml={3} mb={1} />
                 </Link>