2022-08-12 09:59:33 +00:00
40 changed files with 1056 additions and 191 deletions
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+legacy-peer-deps=true
--- a/src/assets/svg/agricultural.svg
+++ b/src/assets/svg/agricultural.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5495 18.1523C20.0358 21.1083 21.1165 25.66 19.7396 29.9152H30.4102C31.4258 26.9366 34.4857 25.2281 37.9199 26.6722L39.1536 19.4836C39.362 18.2715 38.138 17.2497 36.8978 17.2497H30.0098V11.8372C30.0098 11.415 29.668 11.0636 29.2448 11.0442V8.24616H28.1901V11.0442C27.7767 11.0733 27.4479 11.4182 27.4479 11.834V17.2497H22.0703C23.099 12.4304 21.8978 10.7831 21.2044 5.88004C20.931 5.1773 20.3939 5.01934 19.7884 5H7.25586C6.6276 5.00645 6.19141 5.31591 5.96354 5.96063L5.11393 14.068L3.42122 16.0473C2.68229 16.8951 2.89714 16.6984 3.57747 17.7106C3.69466 17.6268 3.81185 17.543 3.93229 17.4656C7.49349 15.1576 13.1966 15.5734 16.5495 18.1523ZM29.0951 6.74397C29.1439 6.69561 29.222 6.69239 29.2741 6.74074C29.3229 6.7891 29.3262 6.86646 29.2773 6.91804C29.1829 7.01475 29.2188 7.15336 29.2513 7.28231C29.3099 7.50151 29.362 7.70137 29.0951 7.85288C29.0332 7.88834 28.9583 7.86578 28.9225 7.80775C28.8867 7.74973 28.9128 7.67236 28.9714 7.6369C29.069 7.5821 29.0397 7.46928 29.0072 7.34678C28.9583 7.15336 28.903 6.94383 29.0951 6.74397ZM28.3333 6.74397C28.3822 6.69561 28.4603 6.69239 28.5124 6.74074C28.5612 6.7891 28.5645 6.86646 28.5156 6.91804C28.4212 7.01475 28.457 7.15336 28.4896 7.28231C28.5482 7.50151 28.6003 7.70137 28.3333 7.85288C28.2715 7.88834 28.1966 7.86578 28.1608 7.80775C28.125 7.7465 28.1478 7.67236 28.2064 7.6369C28.304 7.5821 28.2747 7.46928 28.2422 7.34678C28.1934 7.15336 28.138 6.94383 28.3333 6.74397ZM14.4694 7.68203V13.6618C15.8659 13.9745 17.2461 14.4032 18.6035 14.9512C19.3132 15.2381 20.1497 14.313 20 13.5683L19.0885 9.06173C18.9388 8.31708 18.4603 7.67881 17.6921 7.67881H14.4694V7.68203ZM13.0827 13.3878V7.68203H9.63216C8.86393 7.68203 8.41146 8.32353 8.23568 9.06496L7.63021 11.6503C7.45768 12.3917 8.25846 13.0203 9.02669 13.0332C10.3939 13.0461 11.7448 13.1654 13.0827 13.3878ZM35.7585 27.2428C38.099 27.2428 40 29.1222 40 31.4432C40 33.7609 38.1022 35.6403 35.7585 35.6403C33.4147 35.6403 31.5202 33.7609 31.5202 31.4432C31.5202 29.1222 33.418 27.2428 35.7585 27.2428ZM9.05925 17.8267C14.0625 17.8267 18.1185 21.8433 18.1185 26.798C18.1185 31.7526 14.0625 35.7692 9.05925 35.7692C4.05599 35.7692 0 31.7526 0 26.798C0 21.8433 4.05599 17.8267 9.05925 17.8267ZM9.05925 21.9755C11.748 21.9755 13.929 24.1353 13.929 26.798C13.929 29.4607 11.748 31.6205 9.05925 31.6205C6.37044 31.6205 4.18945 29.4607 4.18945 26.798C4.18945 24.1353 6.37044 21.9755 9.05925 21.9755ZM35.7585 29.3124C36.9466 29.3124 37.9069 30.2666 37.9069 31.4399C37.9069 32.6166 36.9434 33.5675 35.7585 33.5675C34.5703 33.5675 33.61 32.6133 33.61 31.4399C33.61 30.2666 34.5736 29.3124 35.7585 29.3124ZM29.4564 19.8737H34.8112L34.6908 20.4862H29.3522L29.4564 19.8737ZM27.5781 23.1746H34.8112L34.6908 23.7871H27.4707L27.5781 23.1746ZM28.2454 21.5242H34.8145L34.694 22.1366H28.138L28.2454 21.5242Z" fill="#8C8C8C"/>
+</svg>
--- a/src/assets/svg/duplicate.svg
+++ b/src/assets/svg/duplicate.svg
@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 20.5V8.5C8 7.39543 8.89543 6.5 10 6.5H15.5H18C19.1046 6.5 20 7.39543 20 8.5L20 11.3V20.5C20 21.6046 19.1046 22.5 18 22.5H10C8.89543 22.5 8 21.6046 8 20.5Z" fill="none" stroke-width="2" stroke-linecap="round"/>
+<path d="M11 14.5H17" fill="none" stroke-width="2" stroke-linecap="round"/>
+<path d="M11 18.5H17" fill="none" stroke-width="2" stroke-linecap="round"/>
+<path d="M16 6.3L16 4.50001C16 3.39543 15.1046 2.5 14 2.5H11.5H6C4.89543 2.5 4 3.39543 4 4.5V16.5C4 17.6046 4.89543 18.5 6 18.5H8" fill="none" stroke-width="2" stroke-linecap="round"/>
+</svg>
--- a/src/assets/svg/facebook.svg
+++ b/src/assets/svg/facebook.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8576 1.28333H2.14328C1.66917 1.28333 1.28613 1.66636 1.28613 2.14047V21.8548C1.28613 22.3289 1.66917 22.7119 2.14328 22.7119H21.8576C22.3317 22.7119 22.7147 22.3289 22.7147 21.8548V2.14047C22.7147 1.66636 22.3317 1.28333 21.8576 1.28333ZM21.0004 20.9976H16.0692V14.4137H18.8549L19.2727 11.1806H16.0692V9.11547C16.0692 8.17797 16.329 7.54047 17.671 7.54047H19.3826V4.64761C19.0852 4.60743 18.0701 4.51904 16.8861 4.51904C14.4165 4.51904 12.7263 6.02708 12.7263 8.79404V11.178H9.93524V14.411H12.729V20.9976H3.00042V2.99761H21.0004V20.9976Z" stroke="none"/>
+</svg>
--- a/src/assets/svg/fundamental.svg
+++ b/src/assets/svg/fundamental.svg
--- a/src/assets/svg/grid.svg
+++ b/src/assets/svg/grid.svg
@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" transform="translate(0 0.5)" fill="white"/>
+<rect x="2" y="7.5" width="20" height="2" rx="1" stroke="none"/>
+<rect x="2" y="15.5" width="20" height="2" rx="1" stroke="none"/>
+<rect x="7" y="22.5" width="20" height="2" rx="1" transform="rotate(-90 7 22.5)" stroke="none"/>
+<rect x="15" y="22.5" width="20" height="2" rx="1" transform="rotate(-90 15 22.5)" stroke="none"/>
+</svg>
--- a/src/assets/svg/humanitarian.svg
+++ b/src/assets/svg/humanitarian.svg
--- a/src/assets/svg/instagram.svg
+++ b/src/assets/svg/instagram.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9993 6.50248C8.95911 6.50248 6.50554 8.95605 6.50554 11.9962C6.50554 15.0364 8.95911 17.49 11.9993 17.49C15.0395 17.49 17.493 15.0364 17.493 11.9962C17.493 8.95605 15.0395 6.50248 11.9993 6.50248ZM11.9993 15.5668C10.0332 15.5668 8.42876 13.9623 8.42876 11.9962C8.42876 10.0302 10.0332 8.4257 11.9993 8.4257C13.9654 8.4257 15.5698 10.0302 15.5698 11.9962C15.5698 13.9623 13.9654 15.5668 11.9993 15.5668ZM17.718 4.99712C17.0082 4.99712 16.435 5.57034 16.435 6.28016C16.435 6.98998 17.0082 7.5632 17.718 7.5632C18.4279 7.5632 19.0011 6.99266 19.0011 6.28016C19.0013 6.11161 18.9682 5.94467 18.9038 5.78891C18.8394 5.63315 18.7449 5.49163 18.6258 5.37244C18.5066 5.25326 18.3651 5.15876 18.2093 5.09436C18.0535 5.02995 17.8866 4.99691 17.718 4.99712ZM22.7082 11.9962C22.7082 10.5177 22.7216 9.05248 22.6386 7.57659C22.5555 5.8623 22.1645 4.34087 20.9109 3.0873C19.6546 1.83105 18.1359 1.44266 16.4216 1.35962C14.943 1.27659 13.4779 1.28998 12.002 1.28998C10.5234 1.28998 9.05822 1.27659 7.58233 1.35962C5.86804 1.44266 4.34661 1.83373 3.09304 3.0873C1.83679 4.34355 1.4484 5.8623 1.36536 7.57659C1.28233 9.05516 1.29572 10.5203 1.29572 11.9962C1.29572 13.4721 1.28233 14.94 1.36536 16.4159C1.4484 18.1302 1.83947 19.6516 3.09304 20.9052C4.34929 22.1614 5.86804 22.5498 7.58233 22.6328C9.0609 22.7159 10.5261 22.7025 12.002 22.7025C13.4805 22.7025 14.9457 22.7159 16.4216 22.6328C18.1359 22.5498 19.6573 22.1587 20.9109 20.9052C22.1672 19.6489 22.5555 18.1302 22.6386 16.4159C22.7243 14.94 22.7082 13.4748 22.7082 11.9962ZM20.3511 18.3123C20.1555 18.7998 19.9198 19.1641 19.5422 19.5391C19.1645 19.9168 18.8029 20.1525 18.3154 20.348C16.9064 20.9078 13.5609 20.7819 11.9993 20.7819C10.4377 20.7819 7.08947 20.9078 5.68054 20.3507C5.19304 20.1552 4.82875 19.9194 4.45375 19.5418C4.07608 19.1641 3.84036 18.8025 3.64483 18.315C3.08768 16.9034 3.21358 13.5578 3.21358 11.9962C3.21358 10.4346 3.08768 7.08641 3.64483 5.67748C3.84036 5.18998 4.07608 4.8257 4.45375 4.4507C4.83143 4.0757 5.19304 3.8373 5.68054 3.64177C7.08947 3.08462 10.4377 3.21052 11.9993 3.21052C13.5609 3.21052 16.9091 3.08462 18.318 3.64177C18.8055 3.8373 19.1698 4.07302 19.5448 4.4507C19.9225 4.82837 20.1582 5.18998 20.3538 5.67748C20.9109 7.08641 20.785 10.4346 20.785 11.9962C20.785 13.5578 20.9109 16.9034 20.3511 18.3123Z" stroke="none"/>
+</svg>
--- a/src/assets/svg/medicine.svg
+++ b/src/assets/svg/medicine.svg
@ -0,0 +1,10 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_22_4699)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3027 20.5378C27.0006 19.6363 28.0276 19.0479 29.1589 18.9015C30.2901 18.7552 31.4332 19.0628 32.3379 19.7571C33.2409 20.4539 33.8303 21.4802 33.9768 22.6107C34.1233 23.7413 33.8149 24.8838 33.1193 25.7874C30.1398 29.6467 27.1603 33.4712 24.1777 37.3369C23.4852 38.2341 22.4647 38.8199 21.3402 38.9657C20.2158 39.1115 19.0794 38.8054 18.1807 38.1145C17.2849 37.4211 16.7003 36.4016 16.5544 35.2788C16.4086 34.156 16.7135 33.0212 17.4024 32.1223C20.3851 28.2502 23.3169 24.4099 26.2964 20.5378H26.3027ZM7.40947 27.0093H18.7556L19.9499 25.4573C21.3698 23.6038 22.7864 21.7598 24.6891 19.2905C25.1615 18.6793 25.7431 18.1606 26.4044 17.7607V13.511C26.4361 10.9307 25.1084 8.07422 23.7108 6.21118L23.2661 5.61451H24.0252C24.4465 5.61451 24.8504 5.44731 25.1483 5.14971C25.4461 4.8521 25.6134 4.44847 25.6134 4.02759V1.58692C25.6093 1.16732 25.4406 0.766082 25.1437 0.46937C24.8467 0.172657 24.4452 0.00413754 24.0252 3.30446e-06H8.55932C8.13608 -0.00085484 7.72965 0.165459 7.42859 0.462705C7.12754 0.759951 6.95625 1.16404 6.95206 1.58692V4.01172C6.95206 4.4326 7.11939 4.83624 7.41724 5.13384C7.71508 5.43144 8.11905 5.59864 8.54027 5.59864H9.12472C8.96273 5.8208 8.80708 6.03662 8.63873 6.25244C7.0283 8.42969 5.83715 11.2163 6.0182 14.0537V31.5098C6.00916 32.1551 6.24918 32.7791 6.68842 33.2522C7.12041 33.6711 7.74934 33.887 8.61332 33.8616H14.531C14.5668 33.596 14.6198 33.3331 14.6898 33.0745C14.7427 32.8744 14.8063 32.6774 14.8804 32.4841H8.96908C8.55495 32.5135 8.14605 32.3777 7.83193 32.1064C7.60567 31.8633 7.46706 31.5517 7.43805 31.221C7.43805 31.1511 7.40947 27.0125 7.40947 27.0125V27.0093ZM15.3028 15.9707H17.1166C17.28 15.9707 17.4367 16.0356 17.5523 16.151C17.6679 16.2665 17.7328 16.4231 17.7328 16.5864V18.6558H19.8038C19.9667 18.6558 20.1229 18.7202 20.2384 18.835C20.3539 18.9498 20.4192 19.1056 20.42 19.2683V21.0774C20.42 21.2407 20.3551 21.3973 20.2395 21.5128C20.124 21.6282 19.9672 21.6931 19.8038 21.6931H17.7264V23.7625C17.7256 23.9241 17.6612 24.079 17.5471 24.1936C17.433 24.3082 17.2783 24.3733 17.1166 24.375H15.3028C15.1399 24.375 14.9837 24.3106 14.8682 24.1958C14.7527 24.081 14.6874 23.9252 14.6866 23.7625V21.6931H12.6156C12.4527 21.6923 12.2968 21.627 12.1819 21.5117C12.067 21.3963 12.0025 21.2401 12.0025 21.0774V19.2683C12.0034 19.1061 12.0682 18.9508 12.183 18.8361C12.2978 18.7214 12.4533 18.6566 12.6156 18.6558H14.6866V16.5864C14.6866 16.4231 14.7515 16.2665 14.8671 16.151C14.9827 16.0356 15.1394 15.9707 15.3028 15.9707ZM24.9019 13.3301H7.52064C7.52064 12.6731 7.47935 13.3586 7.54923 12.7461C7.87798 10.5869 8.71277 8.53587 9.98553 6.76026C10.2428 6.41748 10.5065 6.05884 10.7796 5.67481H21.6143C21.8558 6.01123 22.1162 6.35718 22.3735 6.70313C23.5456 8.2583 24.6605 10.8291 24.867 12.7683C24.8892 12.9587 24.9019 13.3364 24.9019 13.3364V13.3301ZM27.2175 31.8081L22.0559 27.8408L18.3204 32.6904C17.7956 33.3752 17.5635 34.2396 17.6748 35.0949C17.7861 35.9501 18.2318 36.7266 18.9144 37.2544C19.5995 37.7736 20.4619 38.0022 21.3145 37.8905C22.1671 37.7788 22.9413 37.3359 23.4694 36.6577L27.2175 31.8145V31.8081Z" fill="#8C8C8C"/>
+</g>
+<defs>
+<clipPath id="clip0_22_4699">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/svg/pages.svg
+++ b/src/assets/svg/pages.svg
@ -0,0 +1,14 @@
+<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_889_22377)">
+<path d="M20 23.5V21.3284C20 20.798 19.7893 20.2893 19.4142 19.9142L14.5858 15.0858C14.2107 14.7107 13.702 14.5 13.1716 14.5H6C4.89543 14.5 4 15.3954 4 16.5V23.5" fill="none" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 1.5V4.5C4 5.60457 4.89543 6.5 6 6.5H18C19.1046 6.5 20 5.60457 20 4.5V1.5" fill="none" stroke-width="2" stroke-linecap="round"/>
+<path d="M14 20.5L19 20.5" fill="none" stroke-width="2" stroke-linecap="round"/>
+<path d="M14 15.5V20.5" fill="none" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 10.5H20" fill="none" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_889_22377">
+<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/svg/rmProps.sh
+++ b/src/assets/svg/rmProps.sh
@ -0,0 +1,6 @@
+#!/bin/bash
+ls *.svg | while read filename; do
+sed -i '1 s/width=\"..\" height=\"..\" //' $filename; 
+sed -i 's/fill=\"#262626\"/stroke="none"/' $filename;
+sed -i 's/stroke=\"#262626\"/fill="none"/' $filename 
+done 
--- a/src/assets/svg/rotate.svg
+++ b/src/assets/svg/rotate.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 4.5V10.5H17" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.49 15.5C19.84 17.3399 18.6096 18.9187 16.9842 19.9985C15.3588 21.0783 13.4265 21.6006 11.4784 21.4866C9.53038 21.3726 7.67216 20.6286 6.18376 19.3667C4.69536 18.1047 3.65743 16.3932 3.22637 14.4901C2.79531 12.5869 2.99448 10.5952 3.79386 8.81508C4.59325 7.03496 5.94954 5.56288 7.65836 4.62065C9.36717 3.67843 11.3359 3.31711 13.268 3.59116C15.2 3.8652 16.9906 4.75975 18.37 6.14001L23 10.5" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/svg/select-arrow.svg
+++ b/src/assets/svg/select-arrow.svg
@ -1,3 +0,0 @@
-<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.1315 0.6875H0.868974C0.561161 0.6875 0.389286 1.0125 0.579911 1.23438L5.71116 7.18437C5.85804 7.35469 6.14085 7.35469 6.28929 7.18437L11.4205 1.23438C11.6112 1.0125 11.4393 0.6875 11.1315 0.6875Z" fill="#262626"/>
-</svg>
--- a/src/assets/svg/socials.svg
+++ b/src/assets/svg/socials.svg
--- a/src/assets/svg/technics-and-techology.svg
+++ b/src/assets/svg/technics-and-techology.svg
--- a/src/assets/svg/text-transition.svg
+++ b/src/assets/svg/text-transition.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15.5L8.00001 19.5L4 15.5" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 5.5H17C18.6569 5.5 20 6.84315 20 8.5V8.5C20 10.1569 18.6569 11.5 17 11.5H12C9.79086 11.5 8 13.2909 8 15.5V19.5" fill="none" stroke-width="2" stroke-linecap="round"/>
+</svg>
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@ -1,28 +1,23 @@
 import React from "react";
+import { Footer } from "./parts/Footer";
+import Header from "./parts/Header";
 type Props = {
-    header?: React.ReactElement,
-    children: React.ReactNode,
-    footer?: React.ReactElement,
-    className : string,
+  header?: React.ReactElement;
+  children: React.ReactNode;
+  footer?: React.ReactElement;
+  className?: string;
+};
+
+function BaseLayout({ header, footer, children, className }: Props) {
+  return (
+    <div className={className}>
+      <Header />
+
+      <main>{children}</main>
+
+      <Footer />
+    </div>
+  );
 }

-function BaseLayout( { header, footer, children, className }: Props ) {
-    return (
-    <div className={className}>
-        <header>
-            {header}
-        </header>
-
-        <main>
-            {children}
-        </main>
-
-        <footer>
-            {footer}
-        </footer>
-    </div>
-    );
-  }
-  
-  export default BaseLayout;
-  
+export default BaseLayout;
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@ -38,9 +38,6 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
  children,
  ...props
 }) => {
-  console.log(
-    React.isValidElement(children) && React.Children.only(children).type
-  );
  const isOnlyIcon =
    children &&
    React.isValidElement(children) &&
@ -51,7 +48,7 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
  return (
    <button
      //TODO change on click event
-      onClick={!disabled ? () => alert("Click") : undefined}
+      onClick={!disabled ? () => {} : undefined}
      className={classNames([
        "flex content-center justify-between",
        "text-center",
--- a/src/components/Cards/CategoryCard.tsx
+++ b/src/components/Cards/CategoryCard.tsx
@ -0,0 +1,55 @@
+import React from "react";
+import { SVGMedicine } from "../icons";
+import Typography from "components/typography/Typography";
+import { Button } from "components/Button/Button";
+import classNames from "classnames";
+import { JsxElement } from "typescript";
+
+type Props = {
+  count?: number;
+  title: string;
+
+  iconChild: Required<JSX.Element>;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
+
+function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
+  const iconChildStyle =
+    "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";
+
+  return (
+    <div className="snap-start">
+      <Button
+        defaultStyle={false}
+        className="focus:outline-none group hover:bg-gray-75 active:bg-white active:outline active:outline-1 active:outline-blue-600 focus:outline-1 focus:outline-blue-600"
+      >
+        <div className=" rounded py-1 px-4 flex flex-row items-center ">
+          <div className="justify-center max-w-max">
+            {React.cloneElement(iconChild, {
+              className: classNames(iconChildStyle, className),
+            })}
+          </div>
+          <div className="flex flex-col ml-3 min-w-max">
+            <div className="">
+              <Typography
+                fontWeightVariant="bold"
+                className="text-sm leading-6 min-w-max group-active:text-blue-600 group-focus:text-blue-600"
+              >
+                {title}
+              </Typography>
+            </div>
+            <div className="max-w-max ">
+              <Typography
+                fontWeightVariant="normal"
+                className="text-xs text-gray-500 group-active:text-blue-600 group-focus:text-blue-600"
+              >
+                {count} Items
+              </Typography>
+            </div>
+          </div>
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default CategoryCard;
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@ -0,0 +1,115 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Imports                                  */
+/* -------------------------------------------------------------------------- */
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { PropsPartion } from "./ContextMenuItem";
+import classNames from "classnames";
+import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
+type ChildType = React.ReactElement<any & PropsPartion[]>;
+type ChildrenType = ChildType[] | ChildType;
+
+/* -------------------------------------------------------------------------- */
+/*                               Component props                              */
+/* -------------------------------------------------------------------------- */
+
+type MenuProps = {
+  emphasis?: "high" | "low";
+  disabled?: boolean;
+  className?: string | undefined;
+  button: React.ReactNode;
+  children: ChildrenType;
+};
+/* -------------------------------------------------------------------------- */
+/*                                Styles                                      */
+/* -------------------------------------------------------------------------- */
+
+const MenuButtonStyle = `
+inline-flex 
+justify-center w-full
+cursor-default    
+rounded
+border border-gray-100
+outline-8
+py-2
+px-2 
+text-base`;
+
+const MenuItemStyle = `
+absolute
+left-0 
+mt-2 w-60 
+origin-top-left 
+rounded 
+shadow-lg 
+focus:outline-none 
+py-2 px-4 sm:text-sm`;
+
+/* -------------------------------------------------------------------------- */
+/*                          Component implementation                          */
+/* -------------------------------------------------------------------------- */
+/**
+ *   Use width ContextMenuAction.tsx , for example:
+ *   <ContextMenu button="MyButton" emphasis="low/high">
+ *   <ContextMenuAction
+ *   caption="First Menu"
+ *   icon={icon}
+ *   action={() => alert('click')}
+ *   ></ContextMenuAction>
+ *   ...
+ *  </ContextMenu>
+ */
+export default function ContextMenu({
+  button,
+  children,
+  className,
+  emphasis = "low",
+}: MenuProps) {
+  return (
+    <Menu as="div" className="relative inline-block text-right">
+      {({ open }) => (
+        <>
+          <Menu.Button
+            className={classNames([
+              `${MenuButtonStyle}`,
+              {
+                "hover:bg-gray-100 font-bold uppercase": emphasis === "high",
+              },
+              className,
+            ])}
+          >
+            {button}
+            <SelectIcon
+              className={`${
+                open ? "rotate-180 transform" : "font-normal"
+              } my-2 mx-3 h-2 w-3 flex-center`}
+              aria-hidden="true"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            show={open}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items
+              static
+              className={classNames([
+                className,
+                `${MenuItemStyle}`,
+                { "ml-2": emphasis === "high" },
+              ])}
+            >
+              {children}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  );
+}
--- a/src/components/ContextMenuAction.tsx
+++ b/src/components/ContextMenuAction.tsx
@ -0,0 +1,32 @@
+import classNames from "classnames";
+import React from "react";
+
+type Props = {
+  action: Function;
+  caption: string;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  className?: string | undefined;
+};
+
+export default function ContextMenuAction({
+  action,
+  caption,
+  disabled,
+  icon,
+  className,
+}: Props) {
+  return (
+    <a
+      href="#"
+      onClick={(e) => action(e)}
+      className={classNames([
+        "group flex px-2 rounded items-center text-base hover:bg-gray-100",
+        className,
+      ])}
+    >
+      {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
+      <span className="px-2 py-2">{caption}</span>
+    </a>
+  );
+}
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@ -0,0 +1,42 @@
+import React from "react";
+import classNames from "classnames";
+export type Props = {
+  className?: string;
+};
+
+const Logo = ({ className }: Props) => {
+  return (
+    <div className={classNames("", className)}>
+      <svg
+        // width="40"
+        // height="40"
+        viewBox="0 0 40 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.4144 23.7511C8.27781 15.6345 1.97719 21.8024 3.62218 27.4753C7.75871 36.521 18.4462 40.5011 27.4937 36.364C30.6123 34.9384 33.2592 32.6525 35.1232 29.7747C30.3791 34.2166 21.7659 33.4741 14.4144 23.7497V23.7511Z"
+          fill="#003A8C"
+        />
+        <path
+          d="M19.9003 18.1623C11.4604 5.36346 1.99988 12.1818 1.99988 20.0029C1.99656 22.5922 2.55489 25.1515 3.63638 27.5043C2.51332 22.2054 8.60318 18.1213 14.273 25.7253C22.5092 36.7684 30.5857 34.8254 35.1069 29.8009C36.5583 27.5725 37.4959 25.0493 37.8517 22.414V22.4486C35.9103 28.4694 27.3438 29.4487 19.9003 18.1623Z"
+          fill="#0050B3"
+        />
+        <path
+          d="M25.6847 12.4357C19.4173 2.09746 11.4696 3.03152 6.09469 8.56867C3.44128 11.788 1.99328 15.8313 1.99989 20.0029C2.56566 12.4371 11.7164 7.16935 20.0007 20.0029C27.3643 31.4243 36.5384 28.4489 37.8432 22.4812V22.4239C37.9578 21.6113 38.0065 20.7908 37.9889 19.9703V19.1522C34.8 21.434 30.6062 20.553 25.6832 12.435L25.6847 12.4357Z"
+          fill="#096DD9"
+        />
+        <path
+          d="M25.7278 14.2762C31.4676 23.5022 36.416 21.1419 38.0009 19.1685C37.9371 17.7893 37.714 16.4222 37.3361 15.0943C34.6607 15.1515 34.0369 14.704 31.404 10.6969C27.3806 4.53119 22.3119 0.369312 13.4568 3.23299C10.5865 4.35751 8.05111 6.19656 6.09116 8.57569C12.1761 2.97702 19.6422 4.49654 25.7278 14.2762Z"
+          fill="#40A9FF"
+        />
+        <path
+          d="M31.0114 11.4889C33.6359 15.5037 35.2335 15.708 37.336 15.095C34.6097 5.51969 24.6358 -0.0323048 15.0593 2.69349C14.5162 2.84763 13.982 3.02747 13.4568 3.23299C21.367 0.737706 26.9774 5.32312 31.0114 11.4889Z"
+          fill="#91D5FF"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default Logo;
--- a/src/components/Logofreeland.tsx
+++ b/src/components/Logofreeland.tsx
--- a/src/components/Logotype.tsx
+++ b/src/components/Logotype.tsx
@ -1,27 +0,0 @@
-import React from 'react';
-import {ReactComponent as SVGLogotype} from 'assets/svg/logotype.svg';
-import { Link } from 'react-router-dom';
-
-type Props = {
-  name?: string;
-}
-
-/**
- * Horizontal variant of logotype component
- * @param {string} name Name of service to attach to logotype
- * @return {React.ReactNode}
- */
-export default function Logotype({name}: Props): JSX.Element {
-  return (
-    <div className="inline-flex flex-row flex-nowrap items-center">
-      <div className="flex-none">
-        <Link to="/">
-          <SVGLogotype className="w-8 h-8 mr-2" />
-        </Link>
-      </div>
-      <div className="flex-initial text-2xl font-bold">
-        {name ?? ''} {process.env.REACT_APP_CMS_APP_NAME?.toLowerCase()}
-      </div>
-    </div>
-  );
-}
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -0,0 +1,147 @@
+import { Menu, Transition } from "@headlessui/react";
+import React, { Fragment } from "react";
+import classNames from "classnames";
+
+/* -------------------------------------------------------------------------- */
+/*                                 Components                                 */
+/* -------------------------------------------------------------------------- */
+import ContextMenuAction from "./drop-down-menu/ContextMenuAction";
+import ContextMenu from "./drop-down-menu/ContextMenu";
+import { Button } from "./Button/Button";
+
+/* -------------------------------------------------------------------------- */
+/*                                    Icons                                   */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
+import { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
+import { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
+import { ReactComponent as SVGFile } from "assets/svg/file.svg";
+import { ReactComponent as SVGEye } from "assets/svg/eye.svg";
+
+type Props = React.ComponentPropsWithoutRef<"div">;
+
+const Navbar = (props: Props) => {
+  return (
+    <div {...props}>
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          <Menu.Button as={Button} emphasis="low">
+            <Button.Icon>
+              <SVGHamburger className="h-6 w-6" />
+            </Button.Icon>
+          </Menu.Button>
+        </div>
+
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            className="origin-top-right absolute right-0 mt-5 w-56 rounded-md 
+          shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+          >
+            <div className="py-1">
+              <Menu.Item>
+                {({ active }) => (
+                  <a
+                    href="#"
+                    className={classNames(
+                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                      "block px-4 py-2 text-sm"
+                    )}
+                  >
+                    CREATE NEW
+                  </a>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <a
+                    href="#"
+                    className={classNames(
+                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                      "block px-4 py-2 text-sm"
+                    )}
+                  >
+                    {/* Dropdown Menu start My library */}
+                    <ContextMenu
+                      emphasis="low"
+                      button="MY LIBRARY"
+                      className="border-none"
+                    >
+                      <ContextMenuAction
+                        caption="My Publications"
+                        action={() => console.log("My publications")}
+                        icon={<SVGFile className="stroke-black" />}
+                      ></ContextMenuAction>
+
+                      <ContextMenuAction
+                        caption="My Favorites"
+                        action={() => console.log("My Favorites")}
+                        icon={<SVGFavoriteOutlined className="stroke-black" />}
+                      ></ContextMenuAction>
+
+                      <ContextMenuAction
+                        caption="My Collections"
+                        action={() => console.log("My Collections")}
+                        icon={<SVGFolder className="stroke-black fill-black" />}
+                      ></ContextMenuAction>
+
+                      <ContextMenuAction
+                        caption="Recent Viewed"
+                        action={() => console.log("Recent Viewed")}
+                        icon={<SVGEye className="stroke-black " />}
+                      ></ContextMenuAction>
+                    </ContextMenu>
+                    {/* Dropdown Menu End My library */}
+                  </a>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <a
+                    href="#"
+                    className={classNames(
+                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                      "block px-4 py-2 text-sm"
+                    )}
+                  >
+                    {/* Dropdown Menu About - start - */}
+                    <ContextMenu
+                      emphasis="low"
+                      button="ABOUT"
+                      className="border-none"
+                    >
+                      <ContextMenuAction
+                        caption="About Freeland"
+                        action={() => console.log("About Freeland")}
+                      ></ContextMenuAction>
+
+                      <ContextMenuAction
+                        caption="Contact Us"
+                        action={() => console.log("Contact Us")}
+                      ></ContextMenuAction>
+
+                      <ContextMenuAction
+                        caption="Help"
+                        action={() => console.log("Help")}
+                      ></ContextMenuAction>
+                    </ContextMenu>
+                    {/* Dropdown Menu About - End - */}
+                  </a>
+                )}
+              </Menu.Item>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  );
+};
+
+export default Navbar;
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@ -26,7 +26,7 @@ const Page = ({ title, withOutlet, children, activePath }: Props) => {
  return (
    <div className="grid grid-flow-col grid-rows-page grid-cols-layout max-h-screen overflow-hidden transition-all">
      <header className="col-span-2">
-        <Header title={title} />
+        <Header />
      </header>
      <aside
        className={classNames(
--- a/src/components/containers/modal/BottomSheetModal.tsx
+++ b/src/components/containers/modal/BottomSheetModal.tsx
@ -25,7 +25,7 @@ export function BottomSheetModal({
      leaveFrom="translate-y-0 opacity-100"
      leaveTo="translate-y-full opacity-0"
    >
-      <Dialog className="fixed bottom-0" as="div" onClose={() => {}}>
+      <Dialog className="fixed bottom-0 w-full" as="div" onClose={() => {}}>
        {children}
      </Dialog>
    </Transition>
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@ -1,65 +1,76 @@
+export { ReactComponent as SVGAgricultural } from "assets/svg/agricultural.svg";
 export { ReactComponent as SVGArrowBigRight } from "assets/svg/arrow-big-right.svg";
 export { ReactComponent as SVGArrowDown } from "assets/svg/arrow-down.svg";
 export { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg";
 export { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg";
-export { ReactComponent as SVGBookmark } from "assets/svg/bookmark.svg";
+export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg";
+export { ReactComponent as SVGBell } from "assets/svg/bell.svg";
+export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg";
+export { ReactComponent as SVGBookmarkFilled } from "assets/svg/bookmark-filled.svg";
+export { ReactComponent as SVGBookmarkOutlined } from "assets/svg/bookmark-outlined.svg";
 export { ReactComponent as SVGCaretDown } from "assets/svg/caret-down.svg";
 export { ReactComponent as SVGCaretLeft } from "assets/svg/caret-left.svg";
 export { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
 export { ReactComponent as SVGCaretUp } from "assets/svg/caret-up.svg";
+export { ReactComponent as SVGChart } from "assets/svg/chart.svg";
 export { ReactComponent as SVGChevronesLeft } from "assets/svg/chevrones-left.svg";
 export { ReactComponent as SVGChevronesRight } from "assets/svg/chevrones-right.svg";
+export { ReactComponent as SVGCircle } from "assets/svg/circle.svg";
 export { ReactComponent as SVGCite } from "assets/svg/cite.svg";
 export { ReactComponent as SVGCopy } from "assets/svg/copy.svg";
 export { ReactComponent as SVGDelete } from "assets/svg/delete.svg";
 export { ReactComponent as SVGDownload } from "assets/svg/download.svg";
+export { ReactComponent as SVGDuplicate } from "assets/svg/duplicate.svg";
 export { ReactComponent as SVGEdit1 } from "assets/svg/edit1.svg";
 export { ReactComponent as SVGEdit2 } from "assets/svg/edit2.svg";
 export { ReactComponent as SVGError } from "assets/svg/error.svg";
 export { ReactComponent as SVGEye } from "assets/svg/eye.svg";
-export { ReactComponent as SVGFavorite } from "assets/svg/favorite.svg";
-export { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg";
-export { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
-export { ReactComponent as SVGKey } from "assets/svg/key.svg";
-export { ReactComponent as SVGList } from "assets/svg/list.svg";
-export { ReactComponent as SVGMinus } from "assets/svg/minus.svg";
-export { ReactComponent as SVGMore } from "assets/svg/more.svg";
-export { ReactComponent as SVGPlus } from "assets/svg/plus.svg";
-export { ReactComponent as SVGPrinter } from "assets/svg/printer.svg";
-export { ReactComponent as SVGSearch } from "assets/svg/search.svg";
-export { ReactComponent as SVGShare } from "assets/svg/share.svg";
-export { ReactComponent as SVGUser } from "assets/svg/user.svg";
-export { ReactComponent as SVGXMark } from "assets/svg/xmark.svg";
-export { ReactComponent as SVGCheckmark } from "assets/svg/checkmark.svg";
-export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg";
-export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg";
-export { ReactComponent as SVGBell } from "assets/svg/bell.svg";
-export { ReactComponent as SVGBookmarkFilled } from "assets/svg/bookmark-filled.svg";
-export { ReactComponent as SVGBookmarkOutlined } from "assets/svg/bookmark-outlined.svg";
-export { ReactComponent as SVGChart } from "assets/svg/chart.svg";
-export { ReactComponent as SVGCircle } from "assets/svg/circle.svg";
+export { ReactComponent as SVGFacebook } from "assets/svg/facebook.svg";
 export { ReactComponent as SVGFavoriteFilled } from "assets/svg/favorite-filled.svg";
 export { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
 export { ReactComponent as SVGFile } from "assets/svg/file.svg";
+export { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg";
 export { ReactComponent as SVGFilter } from "assets/svg/filter.svg";
 export { ReactComponent as SVGFlag } from "assets/svg/flag.svg";
+export { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
 export { ReactComponent as SVGFormula } from "assets/svg/formula.svg";
+export { ReactComponent as SVGFundamental } from "assets/svg/fundamental.svg";
+export { ReactComponent as SVGGrid } from "assets/svg/grid.svg";
 export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
 export { ReactComponent as SVGHelp } from "assets/svg/help.svg";
 export { ReactComponent as SVGHorizontal } from "assets/svg/horizontal.svg";
+export { ReactComponent as SVGHumanitarian } from "assets/svg/humanitarian.svg";
 export { ReactComponent as SVGImage } from "assets/svg/image.svg";
 export { ReactComponent as SVGInfo } from "assets/svg/info.svg";
+export { ReactComponent as SVGInstagram } from "assets/svg/instagram.svg";
+export { ReactComponent as SVGKey } from "assets/svg/key.svg";
 export { ReactComponent as SVGLeftMenu } from "assets/svg/left-menu.svg";
 export { ReactComponent as SVGLink } from "assets/svg/link.svg";
+export { ReactComponent as SVGList } from "assets/svg/list.svg";
 export { ReactComponent as SVGLogo } from "assets/svg/logo.svg";
+export { ReactComponent as SVGMedicine } from "assets/svg/medicine.svg";
+export { ReactComponent as SVGMinus } from "assets/svg/minus.svg";
+export { ReactComponent as SVGMore } from "assets/svg/more.svg";
+export { ReactComponent as SVGPages } from "assets/svg/pages.svg";
 export { ReactComponent as SVGPalete } from "assets/svg/palete.svg";
 export { ReactComponent as SVGPlot } from "assets/svg/plot.svg";
+export { ReactComponent as SVGPlus } from "assets/svg/plus.svg";
+export { ReactComponent as SVGPrinter } from "assets/svg/printer.svg";
 export { ReactComponent as SVGRightMenu } from "assets/svg/right-menu.svg";
+export { ReactComponent as SVGRotate } from "assets/svg/rotate.svg";
+export { ReactComponent as SVGSearch } from "assets/svg/search.svg";
 export { ReactComponent as SVGSelection } from "assets/svg/selection.svg";
 export { ReactComponent as SVGSend } from "assets/svg/send.svg";
 export { ReactComponent as SVGSettings } from "assets/svg/settings.svg";
 export { ReactComponent as SVGShape } from "assets/svg/shape.svg";
+export { ReactComponent as SVGShare } from "assets/svg/share.svg";
 export { ReactComponent as SVGSmile } from "assets/svg/smile.svg";
+export { ReactComponent as SVGSocials } from "assets/svg/socials.svg";
 export { ReactComponent as SVGTable } from "assets/svg/table.svg";
+export { ReactComponent as SVGTechnicsAndTechology } from "assets/svg/technics-and-techology.svg";
+export { ReactComponent as SVGText } from "assets/svg/text.svg";
+export { ReactComponent as SVGTextTransition } from "assets/svg/text-transition.svg";
+export { ReactComponent as SVGUser } from "assets/svg/user.svg";
 export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg";
 export { ReactComponent as SVGVideo } from "assets/svg/video.svg";
+export { ReactComponent as SVGXmark } from "assets/svg/xmark.svg";
--- a/src/components/parts/FeaturedArticles.tsx
+++ b/src/components/parts/FeaturedArticles.tsx
@ -0,0 +1,60 @@
+import React, { useMemo } from "react";
+import Typography from "components/typography/Typography";
+import CategoryCard from "components/Cards/CategoryCard";
+import {
+  SVGMedicine,
+  SVGAgricultural,
+  SVGHumanitarian,
+  SVGSocials,
+  SVGTechnicsAndTechology,
+  SVGFundamental,
+} from "components/icons";
+
+const categories = [
+  { id: 1, title: "Medical", count: 5617813, icon: <SVGMedicine /> },
+  {
+    id: 2,
+    title: "Technics and Technology",
+    count: 5617813,
+    icon: <SVGTechnicsAndTechology />,
+  },
+  { id: 3, title: "Fundamental", count: 5617813, icon: <SVGFundamental /> },
+  { id: 4, title: "Humanitarian", count: 5617813, icon: <SVGHumanitarian /> },
+  { id: 5, title: "Argicultural", count: 5617813, icon: <SVGAgricultural /> },
+  { id: 6, title: "Social", count: 5617813, icon: <SVGSocials /> },
+];
+
+export function FeaturedArticles() {
+  const categoryCards = useMemo(
+    () =>
+      categories.map((category) => (
+        <CategoryCard
+          title={category.title}
+          count={category.count}
+          iconChild={category.icon}
+        />
+      )),
+    categories
+  );
+
+  return (
+    <section className="w-full items-center justify-center">
+      <div className="pt-14 lg:pt-16 pb-4 md:pb-8 text-center">
+        <Typography
+          htmlTag="h1"
+          fontWeightVariant="semibold"
+          className="text-3xl mb-2"
+        >
+          Featured articles
+        </Typography>
+        <Typography htmlTag="h2" className="text-base text-gray-500">
+          Select the category of science <br className="visible sm:hidden" />
+          you are interested in
+        </Typography>
+      </div>
+      <div className="py-8 px-10 flex md:flex justify-start md:justify-center md:flex-wrap overflow-x-scroll md:overflow-hidden snap-x  scroll-smooth overscroll-x-contain">
+        {categoryCards}
+      </div>
+    </section>
+  );
+}
--- a/src/components/parts/Footer.tsx
+++ b/src/components/parts/Footer.tsx
@ -0,0 +1,115 @@
+import React, { useMemo } from "react";
+/* -------------------------------------------------------------------------- */
+/*                              Import Components                             */
+/* -------------------------------------------------------------------------- */
+import Typography from "components/typography/Typography";
+import { SVGFacebook, SVGInstagram, SVGCircle } from "components/icons";
+import { RouterLink } from "components/typography/RouterLink";
+import Link from "components/typography/Link";
+
+/* -------------------------------------------------------------------------- */
+/*                                Define consts                               */
+/* -------------------------------------------------------------------------- */
+
+const mainLinks = [
+  { label: "account settings", url: "/account/settings", enabled: true },
+  { label: "about freeland", url: "/about", enabled: true },
+  { label: "help", url: "/help", enabled: true },
+  { label: "contact us", url: "/contact-us", enabled: true },
+];
+
+const secondaryLinks = [
+  { index: 1, label: "Terms of Use", url: "/terms-of-use", enabled: true },
+  { index: 2, label: "Privacy Policy", url: "/privacy-policy", enabled: true },
+  { index: 3, label: "Cookies Policy", url: "/cookies-policy", enabled: true },
+];
+
+/* -------------------------------------------------------------------------- */
+/*                           Difine parts of footer                           */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------- Icons with social networks icons -------------------- */
+const circleDivider = (
+  <SVGCircle className="fill-gray-500 stroke-gray-500 w-1.5 h-1.5 mx-2" />
+);
+
+/* -------------------------------------------------------------------------- */
+/*                           Define component footer                          */
+/* -------------------------------------------------------------------------- */
+
+export function Footer() {
+  /* -------------------------- Part with main links -------------------------- */
+  const mainLinksPart = useMemo(
+    () =>
+      mainLinks.map((link) => (
+        <RouterLink
+          key={link.url}
+          className="py-1 md:py-2 text-gray-900 px-4"
+          enabled={link.enabled}
+          to={link.url}
+        >
+          <Typography className="" fontWeightVariant="semibold" htmlTag="p">
+            {link.label.toUpperCase()}
+          </Typography>
+        </RouterLink>
+      )),
+    mainLinks
+  );
+  /* ------------------------ Part with secondary links ----------------------- */
+  const secondaryLinksPart = useMemo(
+    () =>
+      secondaryLinks.map((link) => (
+        <div className="flex flex-row items-center">
+          {link.index != 1 && circleDivider}
+          <RouterLink key={link.url} enabled={link.enabled} to={link.url}>
+            {link.label}
+          </RouterLink>
+        </div>
+      )),
+    secondaryLinks
+  );
+
+  /* -------------------------------------------------------------------------- */
+  /*                         Implement footer component                         */
+  /* -------------------------------------------------------------------------- */
+  return (
+    <div className="lg:px-12 px-2 sm:px-8 md:px-4 pb-2 md:pt-4 pt-2 lg:pt-5 bg-gray-200">
+      <section className="w-full grid grid-cols-2 md:grid-rows-2 sm:grid-flow-row-dense sm:grid-rows-2 justify-items-between md:justify-between mb-2 md: items-center md:flex-row md:flex">
+        <div className="sm:col-span-1">
+          <RouterLink to="/">
+            <Typography className="text-2xl" fontWeightVariant="semibold">
+              Freeland
+            </Typography>
+          </RouterLink>
+        </div>
+        <div className="order-last md:order-none justify-center justify-items-center items-center flex flex-col col-span-4 sm:flex sm:flex-row text-sm">
+          {mainLinksPart}
+        </div>
+        <div className="flex flex-row sm:col-span-1 justify-end">
+          <Link href="https://www.facebook.com">
+            <SVGFacebook className="w-5 h-5 fill-gray-900 stroke-gray-900 mr-2" />
+          </Link>
+          <Link href="https://www.instagram/com">
+            {" "}
+            <SVGInstagram className="w-5 h-5 fill-gray-900 stroke-gray-900 ml-2 " />
+          </Link>
+        </div>
+      </section>
+      <section className="w-full flex flex-col md:flex-row text-gray-500 text-xs justify-between">
+        <div className="flex flex-col md:flex-row justify-center items-center">
+          <Typography>
+            @ Copyright 2022 Freeland - All rights reserved
+          </Typography>
+          <div className="hidden md:flex">{circleDivider}</div>
+          <div className="flex flex-row items-center">{secondaryLinksPart}</div>
+        </div>
+        <div className="flex flex-row justify-center md:justify-end">
+          Supported by
+          <Typography className="ml-1 lg:ml-2" fontWeightVariant="bold">
+            Comfortel
+          </Typography>
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/src/components/parts/Header.tsx
+++ b/src/components/parts/Header.tsx
@ -1,113 +1,174 @@
-/* -------------------------------------------------------------------------- */
-/*                                    Libs                                    */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import classNames from "classnames";
+import { useState } from "react";
 /* -------------------------------------------------------------------------- */
 /*                                 Components                                 */
 /* -------------------------------------------------------------------------- */
-import ContextMenu from "components/containers/contextmenu/ContextMenu";
-import Logotype from "components/Logotype";
-import Avatar from "components/containers/Avatar";
-import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
-/* -------------------------------------------------------------------------- */
-/*                                     SVG                                    */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/*                                    Hooks                                   */
-/* -------------------------------------------------------------------------- */
-import { useUserStore } from "user/data/userSlice";
-import { useUserViewModel } from "user/controller/userViewModel";
-import { useUIStore } from "ui/data/uiSlice";
-import { useUIViewModel } from "ui/controller/uiViewModel";
-import { useTranslation } from "react-i18next";
-import ServicesNavigationContext from "services/views/ServicesNavigationContext";
-import { useAuthStore } from "auth/data/authSlice";
-import { useAuthViewModel } from "auth/controller/useAuthViewModel";
+import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
+import ContextMenu from "../drop-down-menu/ContextMenu";
+import Logofreeland from "../Logofreeland";
+import { Button } from "../Button/Button";
+import Avatar from "../Avatar";
+import Navbar from "../Navbar";
+import Logo from "../Logo";
+import { RouterLink } from "components/typography/RouterLink";

 /* -------------------------------------------------------------------------- */
-/*                           Main application header                          */
+/*                                    Icons                                   */
 /* -------------------------------------------------------------------------- */
-type Props = {
-  title?: string;
-}
-/**
- * Main application header
- * @return {JSX.Element}
- */
-export default function Header({title}: Props) {
+import {
+  SVGBellNotification,
+  SVGBell,
+  SVGFavoriteOutlined,
+  SVGFolder,
+  SVGFile,
+  SVGEye,
+} from "components/icons";

-  const {t} = useTranslation();
-  const userStore = useUserStore();
-  const uiStore = useUIStore();
-  const authStore = useAuthStore();
-  const {signOut} = useAuthViewModel(authStore);
-  const { user, isLoading, getUser } = useUserViewModel(userStore);
-  const { showSearchbar } = useUIViewModel(uiStore);
+const Header = () => {
+  const [authenticated, setAuthenticated] = useState(false);
+  const onClick = () => setAuthenticated(true);
+  const [notification, setNotification] = useState(false);

-  useEffect(() => {
-    getUser();
-  }, [getUser]);
-
-  const navigate = useNavigate();
+  /* -------------------------------------------------------------------------- */
+  /*                         Implement Header Component                         */
+  /* -------------------------------------------------------------------------- */
  return (
-    <div
-      className="flex items-center flex-row
-    justify-between py-2.5 px-8 bg-gray-300/5 h-14"
+    <header
+      className="header flex justify-between items-center  box-border w-full 
+                border border-gray-75  
+                h-16 
+                px-4
+                gap-5
+                md:gap-20
+                lg:gap-40 lg:px-8
+                xl:gap-60 xl:px-16"
    >
-      <div className="flex-none flex items-center space-x-3">
-        <ServicesNavigationContext />
-        <Logotype name={title} />
-      </div>
-      <div className="flex-none flex items-center space-x-3">
-       
-        <ContextMenu
-          button={<Avatar className="p-2" />}
-          className="absolute w-full min-h-14 sm:w-80  -bottom-3
-          sm:top-auto sm:bottom-auto right-0
-          mt-5 z-10 sm:transform -translate-1/2 
-          origin-top-center flex flex-col items-center justify-center !pt-8"
+      {/* Logo and Menu */}
+      <div className="flex gap-8 xl:gap-x-16">
+        {/* Logo  - start - className="w-7 sm:w-10  " /> */}
+        <a className="Logo flex items-center gap-1  sm:gap-2 " href="/">
+          <Logo
+            className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
+          />
+          <Logofreeland
+            className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
+          />
+        </a>
+        {/* Logo  - end - */}
+
+        {/* Menu( Create new - My library - About ) Start */}
+        <div
+          className="hidden lg:flex items-center
+             gap-2"
        >
-          <Logotype name="techpal" />
-          <div className="w-full my-4 flex justify-center">
-            <Avatar width="27%" className="p-3.5" />
-          </div>
-          <div className="text-xl text-center font-bold leading-relaxed">
-            {isLoading
-              ? " "
-              : t("hellousr", {
-                  username: [user?.lastname, user?.firstname].join(" "),
-                })}
-          </div>
-          <div className="text-sm text-center text-gray-300 leading-relaxed mb-5">
-            {isLoading ? " " : user?.email}
-          </div>
-          <ContextMenuAction
-            action={() => {
-              navigate('/personal-information');
-            }}
-            disabled={isLoading}
-            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
-            caption="Account settings"
-     
-          />
-          <ContextMenuAction
-            action={() => {
-              navigate("");
-            }}
-            disabled={isLoading}
-            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
-            caption={t("account.connect")}
-         
-          />
-          <ContextMenuAction
-            action={signOut}
-            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
-            caption={t('logOut')}
-        
-          />
-        </ContextMenu>
+          {/* Link Create now - start -  */}
+          <RouterLink
+            className="text-blue-500 px-4 font-bold uppercase"
+            to="/create-new"
+          >
+            Create new
+          </RouterLink>
+          {/* Link Create now - end -  */}
+
+          {/* Dropdown Menu My library - start - */}
+          <ContextMenu
+            emphasis="high"
+            button="My library"
+            className="border-none uppercase"
+          >
+            <ContextMenuAction
+              caption="My Publications"
+              action={() => console.log("My publications")}
+              icon={<SVGFile className="stroke-black " />}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="My Favorites"
+              action={() => console.log("My Favorites")}
+              icon={<SVGFavoriteOutlined className="stroke-black" />}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="My Collections"
+              action={() => console.log("My Collections")}
+              icon={<SVGFolder className="stroke-black fill-black" />}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="Recent Viewed"
+              action={() => console.log("Recent Viewed")}
+              icon={<SVGEye className="stroke-black " />}
+            ></ContextMenuAction>
+          </ContextMenu>
+          {/* Dropdown Menu My library - End -  */}
+
+          {/* Dropdown Menu About - start - */}
+          <ContextMenu
+            emphasis="high"
+            button="About"
+            className="border-none uppercase"
+          >
+            <ContextMenuAction
+              caption="About Freeland"
+              action={() => console.log("About Freeland")}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="Contact Us"
+              action={() => console.log("Contact Us")}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="Help"
+              action={() => console.log("Help")}
+            ></ContextMenuAction>
+          </ContextMenu>
+          {/* Dropdown Menu About - End - */}
+        </div>
+        {/* Menu( Create new - My library - About ) End */}
      </div>
-    </div>
+
+      {/* Sign in - Sign up - Notification - Avatar - Burger  */}
+      <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
+        {!authenticated
+          ? [
+              <Button
+                emphasis="low"
+                onClick={onClick}
+                className="text-xs sm:px-4 sm:text-sm  "
+              >
+                Sign in
+              </Button>,
+              <Button
+                emphasis="medium"
+                className="hidden md:flex"
+                onClick={onClick}
+              >
+                Sign up
+              </Button>,
+            ]
+          : [
+              <Button emphasis="low">
+                <Button.Icon>
+                  {!notification ? (
+                    <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+                  ) : (
+                    <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+                  )}
+                </Button.Icon>
+              </Button>,
+
+              <Button emphasis="low" className="hidden lg:flex">
+                <Button.Icon>
+                  <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
+                </Button.Icon>
+              </Button>,
+            ]}
+        {/* Burger component will be shown for the small screens */}
+        <Navbar className="block lg:hidden" />
+      </div>
+    </header>
  );
-}
+};
+
+export default Header;
--- a/src/components/typography/RouterLink.tsx
+++ b/src/components/typography/RouterLink.tsx
@ -0,0 +1,18 @@
+import classNames from "classnames";
+import { NavLink, NavLinkProps, To } from "react-router-dom";
+
+type Props = {
+  enabled?: boolean;
+  children?: React.ReactNode;
+} & NavLinkProps;
+
+export function RouterLink({ children, enabled = true, className, to }: Props) {
+  return (
+    <NavLink
+      to={to}
+      className={classNames({ "pointer-events-none": !enabled }, className)}
+    >
+      {children}
+    </NavLink>
+  );
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,16 +1,39 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";

 import "./localization/i18n";
+import About from "pages/Information/About";
+import Help from "pages/Information/Help";
+import ContactUs from "pages/Information/ContactUs";
+import TermsOfUse from "pages/Information/TermsOfUse";
+import PrivacyPolicy from "pages/Information/PrivacyPolicy";
+import CookiesPolicy from "pages/Information/CookiesPolicy";
+import AccountSettings from "pages/Information/AccountSettings";

-ReactDOM.render(
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Failed to find the root element");
+const root = ReactDOM.createRoot(rootElement);
+root.render(
  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/help" element={<Help />} />
+        <Route path="/contact-us" element={<ContactUs />} />
+        <Route path="/terms-of-use" element={<TermsOfUse />} />
+        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+        <Route path="/cookies-policy" element={<CookiesPolicy />} />
+        <Route path="/account">
+          <Route path="settings" element={<AccountSettings />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  </React.StrictMode>
 );

 // If you want to start measuring performance in your app, pass a function
--- a/src/pages/Information/About.tsx
+++ b/src/pages/Information/About.tsx
@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function About({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>About page</Typography>
+    </BaseLayout>
+  );
+}
--- a/src/pages/Information/AccountSettings.tsx
+++ b/src/pages/Information/AccountSettings.tsx
@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function AccountSettings({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Accont Setting page</Typography>
+    </BaseLayout>
+  );
+}
--- a/src/pages/Information/ContactUs.tsx
+++ b/src/pages/Information/ContactUs.tsx
@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function ContactUs({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Contact us page</Typography>
+    </BaseLayout>
+  );
+}
--- a/src/pages/Information/CookiesPolicy.tsx
+++ b/src/pages/Information/CookiesPolicy.tsx
@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function CookiesPolicy({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Privacy Cookies page</Typography>
+    </BaseLayout>
+  );
+}
--- a/src/pages/Information/Help.tsx
+++ b/src/pages/Information/Help.tsx
@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function Help({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Help page</Typography>
+    </BaseLayout>
+  );
+}
--- a/src/pages/Information/PrivacyPolicy.tsx
+++ b/src/pages/Information/PrivacyPolicy.tsx
@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function PrivacyPolicy({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Privacy Policy page</Typography>
+    </BaseLayout>
+  );
+}
--- a/src/pages/Information/TermsOfUse.tsx
+++ b/src/pages/Information/TermsOfUse.tsx
@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function TermsOfUse({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Terms of use page</Typography>
+    </BaseLayout>
+  );
+}