diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..521a9f7
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 69002fa..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-/* -------------------------------------------------------------------------- */
-/* Application root component */
-/* -------------------------------------------------------------------------- */
-/**
- * Application root component
- * @return {JSX.Element}
- */
-function App() {
- return <div>Hello world!</div>;
-}
-
-export default App;
diff --git a/src/assets/svg/agricultural.svg b/src/assets/svg/agricultural.svg
new file mode 100644
index 0000000..5fc8d1f
--- /dev/null
+++ 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>
diff --git a/src/assets/svg/fundomental.svg b/src/assets/svg/fundomental.svg
new file mode 100644
index 0000000..981ee00
--- /dev/null
+++ b/src/assets/svg/fundomental.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4987 0C21.326 0 22.8784 2.37305 23.9133 6.20768C24.2723 7.53906 24.5795 9.05924 24.8221 10.7227C26.3745 10.1042 27.8363 9.61263 29.1591 9.25781C32.9722 8.24219 35.7891 8.41146 36.7044 10.0033C37.6164 11.5951 36.3519 14.1341 33.5705 16.9499C32.6067 17.9264 31.4521 18.9551 30.139 20C30.663 20.4167 31.1643 20.8333 31.6365 21.2435C31.2063 21.5462 30.8538 21.9466 30.608 22.4154C30.0647 21.9434 29.4825 21.4648 28.868 20.9798C27.7846 21.7904 26.6171 22.6042 25.3751 23.4082C25.304 24.8958 25.1876 26.3216 25.0323 27.6725C26.6591 28.3366 28.1856 28.8574 29.5569 29.222C32.6649 30.0488 34.8415 30.1107 35.359 29.2122C35.6339 28.7337 35.4398 27.9818 34.8609 27.0378C35.3299 26.8327 35.7438 26.5202 36.0737 26.1328C37.0084 27.6725 37.2704 29.0104 36.7076 29.9902C35.7923 31.582 32.9786 31.7513 29.1623 30.7357C27.8396 30.3841 26.3777 29.8893 24.8221 29.2708C24.5795 30.9342 24.2723 32.4544 23.9133 33.7858C22.8784 37.6204 21.326 39.9935 19.4987 39.9935C17.6714 39.9935 16.119 37.6204 15.0841 33.7858C14.7251 32.4544 14.4178 30.9342 14.1753 29.2708C13.6125 29.4954 13.0627 29.7038 12.5291 29.8926C12.487 29.349 12.3156 28.8444 12.0472 28.4049C12.6682 28.1836 13.3085 27.9395 13.9683 27.6693C13.813 26.3184 13.6934 24.8893 13.6255 23.4017C12.3836 22.5977 11.216 21.7839 10.1326 20.9733C8.74513 22.0605 7.53232 23.1315 6.53297 24.1439C4.26259 26.4486 3.12094 28.3171 3.6384 29.2187C3.92624 29.7201 4.72831 29.9219 5.91848 29.86C5.90878 29.9577 5.90554 30.0586 5.90554 30.1595C5.90554 30.5859 5.9864 30.9928 6.1287 31.3672C4.23025 31.4486 2.87514 31.0124 2.293 29.9967C1.38096 28.4049 2.64552 25.8659 5.42689 23.0501C6.3939 22.0736 7.54526 21.0449 8.85832 20C7.54849 18.9551 6.3939 17.9264 5.42689 16.9499C2.64552 14.1341 1.38096 11.5951 2.293 10.0033C3.20826 8.41146 6.02197 8.24219 9.83827 9.25781C11.161 9.60937 12.6229 10.1009 14.1785 10.7227C14.2658 10.1204 14.3629 9.53776 14.4663 8.97786C14.9159 9.20573 15.4204 9.33268 15.9573 9.33268H15.9864C15.8667 9.97396 15.76 10.6478 15.663 11.3444C16.9017 11.8815 18.1889 12.4935 19.4987 13.1738C20.8118 12.4935 22.0957 11.8815 23.3344 11.3444C23.0918 9.58984 22.7781 7.99805 22.4062 6.62109C21.5653 3.5026 20.5304 1.57227 19.4987 1.57227C18.9262 1.57227 18.3506 2.16797 17.8105 3.22917C17.3933 2.94596 16.9114 2.75391 16.3874 2.68555C17.2704 0.973307 18.3279 0 19.4987 0ZM33.302 21.7253C34.489 21.7253 35.4528 22.6953 35.4528 23.89C35.4528 25.0846 34.489 26.0547 33.302 26.0547C32.1151 26.0547 31.1513 25.0846 31.1513 23.89C31.1513 22.6953 32.1119 21.7253 33.302 21.7253ZM9.22702 27.9264C10.414 27.9264 11.3777 28.8965 11.3777 30.0911C11.3777 31.2858 10.414 32.2559 9.22702 32.2559C8.04008 32.2559 7.07631 31.2858 7.07631 30.0911C7.07631 28.8965 8.04008 27.9264 9.22702 27.9264ZM15.9541 3.82812C17.141 3.82812 18.1048 4.79818 18.1048 5.99284C18.1048 7.1875 17.141 8.15755 15.9541 8.15755C14.7671 8.15755 13.8033 7.1875 13.8033 5.99284C13.8033 4.79818 14.7671 3.82812 15.9541 3.82812ZM19.4987 17.1224C21.077 17.1224 22.3577 18.4115 22.3577 20C22.3577 21.5885 21.077 22.8776 19.4987 22.8776C17.9204 22.8776 16.6397 21.5885 16.6397 20C16.6397 18.4115 17.9204 17.1224 19.4987 17.1224ZM10.1293 19.0169C11.2128 18.2064 12.3803 17.3926 13.6222 16.5885C13.6934 15.1042 13.8098 13.6751 13.9651 12.3242C12.335 11.6602 10.8118 11.1393 9.44047 10.7715C6.33245 9.94466 4.15587 9.88281 3.6384 10.7812C3.12094 11.6829 4.26259 13.5514 6.52974 15.8464C7.52909 16.8587 8.7419 17.9297 10.1293 19.0169ZM23.3344 28.6589C22.0957 28.1217 20.8085 27.5065 19.4987 26.8262C18.1856 27.5065 16.9017 28.1185 15.663 28.6589C15.9055 30.4134 16.2193 32.0052 16.5912 33.3822C17.4321 36.5006 18.467 38.431 19.5019 38.431C20.5336 38.431 21.5718 36.5006 22.4094 33.3822C22.7781 32.0052 23.0918 30.4102 23.3344 28.6589ZM17.8202 25.9277C17.3933 25.6901 16.9631 25.446 16.533 25.1953C16.52 25.1888 16.5039 25.179 16.4909 25.1693C16.0673 24.9219 15.65 24.6745 15.2393 24.4238C15.2975 25.3223 15.3719 26.1947 15.4625 27.0345C16.2322 26.696 17.0213 26.3249 17.8202 25.9277ZM21.1772 14.0723C21.6074 14.3099 22.0407 14.5573 22.4773 14.8079C22.9107 15.0586 23.3376 15.3125 23.7581 15.5697C23.6999 14.6745 23.6255 13.8021 23.5349 12.9622C22.7652 13.304 21.9793 13.6751 21.1772 14.0723ZM25.3751 16.5885C26.6171 17.3926 27.7846 18.2064 28.868 19.0169C30.2555 17.9297 31.4683 16.8587 32.4676 15.8464C34.7315 13.5514 35.8732 11.6829 35.359 10.7812C34.8415 9.88281 32.6649 9.94466 29.5569 10.7715C28.1856 11.1361 26.6591 11.6569 25.0323 12.3242C25.1876 13.6751 25.304 15.1009 25.3751 16.5885ZM27.5744 20C26.8952 19.502 26.1837 19.0006 25.4398 18.5026C25.4495 18.9974 25.456 19.4954 25.456 20C25.456 20.5046 25.4495 21.0059 25.4398 21.5007C26.1837 21.0026 26.8952 20.5013 27.5744 20ZM23.8519 17.4674C23.1565 17.028 22.4353 16.5918 21.6979 16.1654C20.9605 15.7357 20.2264 15.3288 19.4987 14.9381C18.771 15.3255 18.0368 15.7357 17.2995 16.1654H17.2962C16.5588 16.5951 15.8409 17.028 15.1455 17.4674C15.1164 18.2975 15.1002 19.1406 15.1002 20C15.1002 20.8594 15.1164 21.7057 15.1455 22.5326C15.8344 22.9655 16.5427 23.3952 17.2704 23.8184C17.2736 23.8184 17.2898 23.8281 17.2898 23.8281L17.2995 23.8346C18.0401 24.2643 18.7742 24.6745 19.5019 25.0618C20.2231 24.6777 20.9476 24.2741 21.6785 23.8477C21.6914 23.8411 21.7044 23.8314 21.7173 23.8249C22.4482 23.3984 23.163 22.9687 23.8519 22.5326C23.881 21.7057 23.8971 20.8594 23.8971 20C23.8971 19.1406 23.881 18.2975 23.8519 17.4674ZM17.8169 14.0723C17.0181 13.6751 16.229 13.304 15.4625 12.9622C15.3719 13.8053 15.2975 14.6745 15.2393 15.5729C15.6597 15.3158 16.0867 15.0618 16.52 14.8112C16.9534 14.5573 17.3868 14.3099 17.8169 14.0723ZM11.423 20C12.1022 20.5013 12.8137 21.0026 13.5575 21.5007C13.5478 21.0059 13.5414 20.5046 13.5414 20C13.5414 19.4954 13.5478 18.9941 13.5575 18.4993C12.8137 18.9974 12.0989 19.4987 11.423 20ZM21.174 25.9277C21.976 26.3249 22.7619 26.696 23.5317 27.0378C23.6222 26.1947 23.6966 25.3255 23.7548 24.4271C23.3344 24.6842 22.9075 24.9381 22.4709 25.1921L22.4482 25.2051C22.0246 25.4525 21.5977 25.6934 21.174 25.9277Z" fill="#8C8C8C"/>
+</svg>
diff --git a/src/assets/svg/humanitarian.svg b/src/assets/svg/humanitarian.svg
new file mode 100644
index 0000000..c6447b4
--- /dev/null
+++ b/src/assets/svg/humanitarian.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_4694)">
+<path d="M3.90627 29.0015C3.94967 21.1247 3.99199 13.2593 4.03322 5.40517C4.03499 5.15241 4.12065 4.90811 4.27559 4.71398C4.43054 4.51984 4.64516 4.38789 4.88283 4.34065C7.6172 3.74547 11.9271 3.89512 14.8535 5.06847C16.9144 5.84597 18.7209 7.22023 20.0619 9.03066C21.4458 7.3069 23.2432 5.99821 25.2702 5.23852C28.0339 4.13659 32.2266 3.87131 35.2311 4.34065C35.4791 4.37578 35.7068 4.50304 35.8723 4.69914C36.0379 4.89525 36.1304 5.14708 36.1328 5.40857V29.1001C36.1324 29.2438 36.1048 29.3859 36.0517 29.5184C35.9986 29.6509 35.921 29.7712 35.8233 29.8723C35.7256 29.9734 35.6098 30.0534 35.4825 30.1076C35.3552 30.1619 35.2189 30.1893 35.0814 30.1884C35.0003 30.1872 34.9195 30.177 34.8405 30.1578C32.2747 29.81 29.6669 30.0645 27.207 30.9026C25.3899 31.6103 23.6651 32.5542 22.0736 33.7119C24.3116 32.9863 26.6445 32.6305 28.9876 32.6576C31.9945 32.7076 34.9868 33.1045 37.9102 33.8411V9.04767H38.9551C39.2322 9.04767 39.498 9.16269 39.694 9.36743C39.8899 9.57217 40 9.84985 40 10.1394V35.2695C40 35.5591 39.8899 35.8368 39.694 36.0415C39.498 36.2463 39.2322 36.3613 38.9551 36.3613C38.8443 36.3603 38.7344 36.3408 38.6296 36.3035C35.4805 35.3987 32.2365 34.9041 28.9714 34.8308C26.0859 34.7928 23.2262 35.4029 20.5859 36.6198C20.4089 36.7375 20.2034 36.8 19.9935 36.8C19.7836 36.8 19.5781 36.7375 19.4011 36.6198C16.7609 35.4026 13.9012 34.7925 11.0156 34.8308C7.75784 34.9083 4.52162 35.4052 1.38023 36.3103C1.27538 36.3476 1.16548 36.3671 1.05471 36.3681C0.916117 36.3694 0.778654 36.342 0.65032 36.2873C0.521986 36.2326 0.405347 36.1518 0.307193 36.0496C0.20904 35.9473 0.131333 35.8257 0.0785971 35.6918C0.0258615 35.5579 -0.000849036 35.4144 2.05702e-05 35.2695V10.1394C2.05702e-05 9.84985 0.11011 9.57217 0.306071 9.36743C0.502032 9.16269 0.767812 9.04767 1.04494 9.04767H2.08986V33.8411C5.01324 33.1045 8.00557 32.7076 11.0124 32.6576C13.5243 32.6265 16.0233 33.0369 18.405 33.8717C16.9006 32.6004 15.1861 31.6275 13.3464 31.0013C11.0677 30.219 7.59116 29.9572 5.04885 30.185C4.91101 30.199 4.77188 30.1843 4.63955 30.1416C4.50722 30.099 4.38432 30.0293 4.27801 29.9365C4.1717 29.8438 4.08408 29.7299 4.02026 29.6015C3.95645 29.4731 3.9177 29.3327 3.90627 29.1885C3.90298 29.1262 3.90298 29.0638 3.90627 29.0015ZM23.9714 25.9031C23.8893 25.967 23.7955 26.0127 23.6959 26.0372C23.5962 26.0617 23.4928 26.0647 23.392 26.0458C23.2913 26.0269 23.1953 25.9867 23.11 25.9275C23.0247 25.8684 22.9519 25.7916 22.8962 25.7018C22.8404 25.6121 22.8028 25.5114 22.7858 25.406C22.7688 25.3005 22.7726 25.1925 22.7971 25.0886C22.8216 24.9848 22.8663 24.8873 22.9283 24.8022C22.9902 24.717 23.0683 24.6461 23.1576 24.5937C24.3586 23.8147 25.6493 23.1976 26.9987 22.7572C28.368 22.273 29.7894 21.9679 31.2305 21.8491C31.3284 21.8435 31.4264 21.8581 31.5188 21.8921C31.6113 21.9261 31.6965 21.9788 31.7695 22.0472C31.8425 22.1155 31.9019 22.1983 31.9443 22.2906C31.9867 22.383 32.0113 22.4832 32.0166 22.5854C32.022 22.6877 32.008 22.7901 31.9754 22.8867C31.9429 22.9833 31.8925 23.0723 31.827 23.1486C31.7616 23.2249 31.6824 23.2869 31.594 23.3312C31.5056 23.3755 31.4097 23.4012 31.3119 23.4068C30.0047 23.5211 28.7158 23.8021 27.474 24.2434C26.2439 24.6396 25.067 25.1973 23.9714 25.9031ZM24.0365 19.8629C23.8694 19.9739 23.667 20.0109 23.4738 19.966C23.2806 19.921 23.1124 19.7977 23.0062 19.6231C22.9 19.4486 22.8645 19.2371 22.9076 19.0353C22.9506 18.8334 23.0686 18.6577 23.2357 18.5467C24.4342 17.7849 25.7177 17.1795 27.0573 16.7442C28.4046 16.273 29.8014 15.9738 31.2175 15.8531C31.4112 15.8496 31.5986 15.9248 31.7404 16.0627C31.8822 16.2006 31.9673 16.3906 31.9779 16.5927C31.9884 16.7948 31.9235 16.9933 31.7969 17.1465C31.6703 17.2997 31.4918 17.3956 31.2988 17.4142C30.01 17.5259 28.7389 17.8 27.513 18.2304C26.2948 18.6243 25.1272 19.1726 24.0365 19.8629ZM24.056 13.8431C23.9729 13.898 23.8802 13.9353 23.7832 13.9528C23.6863 13.9704 23.587 13.9677 23.491 13.9452C23.3951 13.9226 23.3043 13.8805 23.2239 13.8212C23.1435 13.762 23.0751 13.6868 23.0225 13.5999C22.9699 13.5131 22.9342 13.4162 22.9174 13.3149C22.9007 13.2137 22.9032 13.1099 22.9248 13.0097C22.9464 12.9094 22.9867 12.8145 23.0434 12.7306C23.1001 12.6466 23.1721 12.575 23.2552 12.5201C24.4519 11.7618 25.7332 11.1599 27.0703 10.7278C28.4133 10.2586 29.8059 9.96171 31.2175 9.84351C31.3153 9.83792 31.4133 9.85254 31.5058 9.88652C31.5983 9.92051 31.6835 9.97319 31.7565 10.0416C31.8295 10.1099 31.8889 10.1927 31.9313 10.285C31.9737 10.3774 31.9982 10.4776 32.0036 10.5798C32.0089 10.6821 31.9949 10.7845 31.9624 10.8811C31.9299 10.9777 31.8795 11.0667 31.814 11.143C31.7486 11.2193 31.6694 11.2813 31.581 11.3256C31.4926 11.3699 31.3967 11.3956 31.2988 11.4012C30.0146 11.513 28.7479 11.7859 27.526 12.214C26.3101 12.6071 25.1447 13.1542 24.056 13.8431ZM16.8425 24.5937C16.9317 24.6461 17.0098 24.717 17.0718 24.8022C17.1338 24.8873 17.1784 24.9848 17.2029 25.0886C17.2274 25.1925 17.2312 25.3005 17.2142 25.406C17.1972 25.5114 17.1596 25.6121 17.1039 25.7018C17.0481 25.7916 16.9753 25.8684 16.8901 25.9275C16.8048 25.9867 16.7088 26.0269 16.608 26.0458C16.5072 26.0647 16.4038 26.0617 16.3042 26.0372C16.2045 26.0127 16.1108 25.967 16.0287 25.9031C14.9371 25.1983 13.7646 24.6407 12.5391 24.2434C11.2972 23.8021 10.0083 23.5211 8.70119 23.4068C8.6033 23.4008 8.5075 23.3746 8.41927 23.3299C8.33103 23.2852 8.25209 23.2228 8.18695 23.1462C8.12181 23.0696 8.07175 22.9804 8.03962 22.8836C8.00749 22.7868 7.99392 22.6843 7.99969 22.582C8.00546 22.4798 8.03046 22.3797 8.07325 22.2875C8.11605 22.1953 8.1758 22.1128 8.2491 22.0448C8.3224 21.9767 8.40782 21.9244 8.50047 21.8908C8.59311 21.8573 8.69119 21.8431 8.78908 21.8491C10.2302 21.9679 11.6516 22.273 13.0208 22.7572C14.3703 23.1976 15.6609 23.8147 16.862 24.5937H16.8425ZM16.7643 18.5467C16.9314 18.6595 17.0487 18.8369 17.0906 19.0401C17.1324 19.2432 17.0952 19.4554 16.9873 19.6299C16.8794 19.8045 16.7095 19.9271 16.5151 19.9708C16.3207 20.0145 16.1176 19.9757 15.9505 19.8629C14.8598 19.1726 13.6922 18.6243 12.474 18.2304C11.2481 17.8 9.97697 17.5259 8.68817 17.4142C8.49003 17.4002 8.30533 17.3046 8.17469 17.1483C8.04405 16.992 7.97817 16.7879 7.99155 16.5809C8.00493 16.3739 8.09648 16.1809 8.24604 16.0445C8.39561 15.908 8.59094 15.8391 8.78908 15.8531C10.2051 15.9738 11.602 16.273 12.9492 16.7442C14.2888 17.1795 15.5723 17.7849 16.7708 18.5467H16.7643ZM16.7448 12.5201C16.8343 12.5713 16.9129 12.6411 16.9756 12.7252C17.0384 12.8093 17.084 12.9059 17.1098 13.0091C17.1355 13.1122 17.1408 13.2198 17.1252 13.3252C17.1097 13.4306 17.0737 13.5316 17.0195 13.6219C16.9653 13.7122 16.8939 13.79 16.8099 13.8505C16.7258 13.911 16.6308 13.9529 16.5307 13.9736C16.4306 13.9943 16.3275 13.9934 16.2277 13.971C16.128 13.9485 16.0336 13.905 15.9505 13.8431C14.8618 13.1542 13.6965 12.6071 12.4805 12.214C11.2586 11.7859 9.99195 11.513 8.7077 11.4012C8.60981 11.3956 8.51392 11.3699 8.42553 11.3256C8.33713 11.2813 8.25795 11.2193 8.19251 11.143C8.12707 11.0667 8.07664 10.9777 8.04412 10.8811C8.01159 10.7845 7.9976 10.6821 8.00295 10.5798C8.00829 10.4776 8.03286 10.3774 8.07526 10.285C8.11766 10.1927 8.17706 10.1099 8.25005 10.0416C8.32305 9.97319 8.40823 9.92051 8.50071 9.88652C8.5932 9.85254 8.69119 9.83792 8.78908 9.84351C10.2006 9.96171 11.5932 10.2586 12.9362 10.7278C14.2733 11.1599 15.5546 11.7618 16.7513 12.5201H16.7448ZM34.0365 6.38127C31.6211 6.14319 28.1576 6.42208 25.9863 7.28254C23.9679 8.02178 22.2376 9.4329 21.0612 11.2991V31.7937C22.7529 30.5823 24.5809 29.5931 26.5039 28.8484C28.9345 28.035 31.4893 27.704 34.0365 27.8723V6.38127ZM18.9714 31.5828V11.2685C17.8776 9.25173 16.11 7.90492 14.1113 7.10568C11.8327 6.19761 8.33335 5.99355 6.11655 6.32345L5.99937 27.9403C8.41799 27.8485 11.7578 28.1716 13.9811 28.93C15.7675 29.5351 17.4516 30.4303 18.9714 31.5828Z" fill="#8C8C8C"/>
+</g>
+<defs>
+<clipPath id="clip0_22_4694">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svg/medicine.svg b/src/assets/svg/medicine.svg
new file mode 100644
index 0000000..8c88b83
--- /dev/null
+++ 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>
diff --git a/src/assets/svg/socials.svg b/src/assets/svg/socials.svg
new file mode 100644
index 0000000..6dc6b17
--- /dev/null
+++ b/src/assets/svg/socials.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="M26.9286 19.2347C27.0411 18.781 27.2421 18.6492 27.4728 18.6064C28.1067 18.5119 28.0068 21.4416 26.9286 21.5778V19.2347ZM27.9602 17.6287C27.9568 17.6825 27.9545 17.7363 27.9511 17.7935L27.4944 18.0703C28.9554 17.9714 28.6668 21.9161 26.9967 22.1534C26.957 22.1589 26.9229 22.1589 26.8877 22.1556C26.8877 22.3566 26.8934 22.5456 26.865 22.7499C26.6298 24.4537 24.7791 26.7847 23.3407 27.6053C21.273 28.7851 18.6372 28.9872 16.2787 27.0978C15.0585 26.1201 13.7383 24.335 13.26 22.8367C13.1544 22.5038 13.1532 22.4643 13.1532 22.1556C11.891 22.4039 11.3002 19.7213 11.7354 18.6459C12.008 17.9769 12.692 17.878 13.1532 18.391V18.0593L12.8101 17.8726C12.7692 17.6034 12.7647 17.3277 12.7806 17.0509C12.467 16.5434 12.3818 16.1106 12.4806 15.7437C12.342 15.5613 12.2568 15.3647 12.2386 15.1516V11.3244L18.3668 13.1347C18.9463 13.2567 19.5359 13.3193 20.1358 13.3182C20.6959 13.3149 21.2639 13.2567 21.8422 13.1347L28.2578 11.3431L28.3635 15.1175C28.3249 15.4723 28.2226 15.7744 28.059 16.0238C28.0374 16.0567 28.0113 16.0897 27.9818 16.1215C28.1556 16.5445 28.1624 17.0432 27.9602 17.6287ZM16.7411 26.6814C19.5677 28.7224 22.7579 27.8656 24.8495 25.2413C25.5948 24.3054 26.089 23.242 26.2049 22.2808V17.6518C26.2708 17.6518 26.106 17.3497 25.914 17.0344C23.8906 17.5727 21.0799 17.8748 20.1233 17.8308C18.9542 17.777 16.0833 17.5035 14.1462 16.7828C13.9599 16.8916 13.8337 17.063 13.7781 17.3167V22.383C14.1325 24.0318 15.3686 25.6895 16.7411 26.6814ZM21.0435 18.8898C20.9447 19.0501 20.9731 19.2182 21.131 19.3028C21.4434 19.4731 21.8433 19.2193 22.1478 19.1259C22.9476 18.8799 23.8986 18.8502 24.5905 19.2698C24.7745 19.3808 24.9631 19.5247 25.1528 19.7005C25.0824 19.4566 24.9722 19.2336 24.8109 19.0348C24.203 18.2856 22.7704 18.1593 21.8036 18.457C21.5673 18.5295 21.1742 18.6843 21.0435 18.8898ZM18.8451 18.937C18.9133 19.082 18.8758 19.227 18.7349 19.3028C18.4202 19.4731 18.0226 19.2193 17.7181 19.1259C16.9183 18.8799 15.9662 18.8502 15.2732 19.2698C15.0892 19.3808 14.9017 19.5247 14.7108 19.7005C14.7824 19.4566 14.8937 19.2336 15.0539 19.0348C15.6618 18.2889 17.0796 18.1615 18.0465 18.4526C18.3009 18.5295 18.7338 18.6975 18.8451 18.937ZM15.6765 20.1223C15.6402 20.0091 15.6958 19.885 15.7981 19.8466C16.5888 19.5511 17.3943 19.5697 18.1896 19.8466C18.2919 19.885 18.3498 20.0058 18.318 20.1201C18.2862 20.2332 18.1737 20.2947 18.0726 20.2607C17.9408 20.2157 17.809 20.1761 17.6772 20.1486C17.7002 20.2282 17.7037 20.3118 17.6877 20.393C17.6716 20.4741 17.6363 20.5506 17.5846 20.6163C17.5329 20.6821 17.4661 20.7353 17.3896 20.772C17.313 20.8086 17.2287 20.8276 17.1432 20.8275C16.8388 20.8275 16.5888 20.5869 16.5888 20.2926C16.5888 20.219 16.6047 20.1508 16.6309 20.0882C16.4241 20.1091 16.215 20.1552 16.0071 20.2277C15.8765 20.2717 15.7401 20.3134 15.6765 20.1223ZM22.3353 20.1223C22.3171 20.1728 22.308 20.2288 22.308 20.2871C22.308 20.5815 22.5568 20.822 22.8624 20.822C22.9563 20.8219 23.0486 20.7988 23.1307 20.7548C23.2128 20.7107 23.282 20.6472 23.3318 20.5702C23.3815 20.4932 23.4102 20.4053 23.4152 20.3146C23.4201 20.224 23.4011 20.1336 23.3601 20.052C23.5998 20.0772 23.8463 20.1289 24.0894 20.2047C24.1951 20.2387 24.3042 20.1717 24.3326 20.0542C24.3621 19.9388 24.3008 19.8191 24.1985 19.7861C23.7997 19.6587 23.4021 19.5961 23.0033 19.5983C22.6079 19.5983 22.2114 19.6642 21.8229 19.7883C21.7161 19.8224 21.6582 19.941 21.6866 20.0542C21.7161 20.1673 21.8286 20.2365 21.9308 20.2025C22.0558 20.1629 22.1819 20.13 22.3069 20.1036C22.3557 20.0948 22.3466 20.086 22.3353 20.1223ZM19.2223 23.5595C19.2189 23.498 19.2371 23.4365 19.2814 23.3848C19.3734 23.2805 19.5336 23.2673 19.6427 23.3541C19.9063 23.5683 20.1312 23.5639 20.3948 23.3519C20.5027 23.264 20.6652 23.2805 20.7549 23.3848C20.847 23.4903 20.8299 23.6463 20.7209 23.7341C20.3096 24.0626 19.8483 24.1032 19.4075 23.8034C19.3144 23.7396 19.2303 23.6814 19.2223 23.5595ZM18.3759 25.1743C18.3214 24.9601 18.5588 24.7733 18.7633 24.881C19.5836 25.3006 20.3766 25.3204 21.1958 24.8843C21.5093 24.7217 21.7615 25.1732 21.4559 25.3402C20.5391 25.8312 19.5779 25.8444 18.6372 25.4017C18.5248 25.3489 18.4111 25.3072 18.3759 25.1743ZM13.0748 21.5503V19.2347C12.9623 18.781 12.7601 18.6492 12.5284 18.6064C11.9103 18.513 11.9626 21.3889 13.0476 21.5734C13.0828 21.58 13.0748 21.5844 13.0748 21.5503ZM25.1778 27.8403C29.6109 31.6972 35.8539 26.7715 38 36H2C4.15293 26.7682 10.5311 31.573 14.8222 27.8403C17.1319 31.2732 23.6089 31.1303 25.1778 27.8403ZM30.9641 8.62428V13.2369H31.1152C31.2174 13.2369 31.3015 13.3182 31.3015 13.4181V14.6572C31.3015 14.7561 31.2174 14.8374 31.1152 14.8374H30.9641V15.2724C31.1549 15.3065 31.3015 15.4712 31.3015 15.6657C31.3015 15.8854 31.1152 16.0655 30.8879 16.0655H30.1461C30.0429 16.0656 29.9434 16.0283 29.8671 15.9611C29.7909 15.8938 29.7434 15.8014 29.734 15.7021C29.7246 15.6027 29.754 15.5035 29.8164 15.424C29.8787 15.3445 29.9696 15.2904 30.0711 15.2724V14.8374H29.92C29.8177 14.8374 29.7336 14.7561 29.7336 14.6572V13.4181C29.7336 13.3182 29.8177 13.2369 29.92 13.2369H30.0711V8.89342L22.2637 11.2409C20.8492 11.5661 19.4359 11.588 18.0215 11.2409L9.40405 8.75391L8.62581 8.52981C7.65557 8.14534 7.89756 7.24457 8.80077 7.03805L18.5475 4.22479C19.5529 3.94687 20.5573 3.90403 21.5627 4.22479L31.1333 7.004C32.174 7.24786 32.3797 8.18049 31.1686 8.56277L30.9641 8.62428Z" fill="#8C8C8C"/>
+</svg>
diff --git a/src/assets/svg/technics-and-techology.svg b/src/assets/svg/technics-and-techology.svg
new file mode 100644
index 0000000..bf63908
--- /dev/null
+++ b/src/assets/svg/technics-and-techology.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.57656 6.4937H30.4234C31.2125 6.4937 31.9297 6.81904 32.4484 7.34085L32.4922 7.38957C32.9867 7.90824 33.2922 8.61158 33.2922 9.37857V30.6218C33.2922 31.4108 32.968 32.1314 32.4484 32.6548L32.4453 32.6579C31.925 33.1805 31.2086 33.5067 30.4234 33.5067H9.57656C8.79141 33.5067 8.07422 33.1813 7.55391 32.6587C7.03203 32.1361 6.70781 31.4147 6.70781 30.6218V9.37857C6.70781 8.58486 7.03047 7.86266 7.55 7.34085L7.59766 7.29684C8.11328 6.80018 8.81172 6.4937 9.57656 6.4937V6.4937ZM13.05 19.6937C13.6617 19.6937 14.2187 19.9444 14.6227 20.3499L14.6258 20.353C15.0297 20.7609 15.2781 21.3204 15.2781 21.935C15.2781 22.5526 15.0289 23.1137 14.6258 23.5192L14.5836 23.5585C14.3633 23.7684 14.1008 23.9342 13.8109 24.0403V27.3354H21.4414C21.818 27.3354 22.1234 27.6418 22.1234 28.0206V31.9868H30.4234C30.7945 31.9868 31.1344 31.8328 31.3812 31.5853C31.6281 31.3361 31.7812 30.9943 31.7812 30.6218V9.37857C31.7812 9.02022 31.6406 8.69095 31.4125 8.44576L31.3805 8.41511C31.1344 8.16757 30.7953 8.01354 30.4234 8.01354H28.4875V18.9157C28.4875 19.2945 28.1828 19.6018 27.8055 19.6018H24.818C24.7109 19.9625 24.5148 20.287 24.2563 20.5471C23.8547 20.9542 23.2969 21.2057 22.682 21.2057C22.0711 21.2057 21.5141 20.9542 21.1102 20.5487L21.107 20.5464C20.7031 20.1385 20.4547 19.579 20.4547 18.9644C20.4547 18.346 20.7039 17.7849 21.107 17.3794C21.5102 16.9746 22.068 16.7232 22.682 16.7232C23.2969 16.7232 23.8547 16.9746 24.2578 17.3801L24.2961 17.4226C24.5125 17.652 24.682 17.9263 24.7867 18.2297H27.1242V8.01354H9.57656C9.21875 8.01354 8.89141 8.15421 8.64766 8.38289L8.61797 8.41511C8.37187 8.66266 8.21875 9.00451 8.21875 9.37857V12.1346H20.0484V11.6434C20.0484 11.3699 20.1594 11.1216 20.3375 10.9424C20.5156 10.7632 20.7633 10.6517 21.0344 10.6517H23.3555C23.6273 10.6517 23.8742 10.7632 24.0523 10.9424C24.2297 11.1216 24.3414 11.3699 24.3414 11.6434V13.997C24.3414 14.2697 24.2297 14.5188 24.0523 14.6972C23.8742 14.8764 23.6273 14.988 23.3555 14.988H21.0344C20.7633 14.988 20.5156 14.8764 20.3375 14.6972C20.1594 14.5188 20.0484 14.2697 20.0484 13.997V13.5059H8.21875V16.4843H17.7C18.0766 16.4843 18.382 16.7915 18.382 17.1703V23.913H24.4187V23.2348C24.4187 22.9511 24.5344 22.6925 24.7187 22.5071C24.9039 22.3208 25.1609 22.2045 25.443 22.2045H28.0195C28.3023 22.2045 28.5586 22.3208 28.7438 22.5071C28.9281 22.6925 29.0438 22.9511 29.0438 23.2348V25.8469C29.0438 26.1314 28.9281 26.3892 28.7438 26.5754C28.5586 26.7617 28.3023 26.878 28.0195 26.878H25.443C25.1609 26.878 24.9039 26.7617 24.7187 26.5754C24.5344 26.3892 24.4187 26.1314 24.4187 25.8469V25.2851H17.7C17.3234 25.2851 17.018 24.9778 17.018 24.599V17.8556H8.21875V30.6218C8.21875 30.9951 8.37266 31.3369 8.61875 31.5845C8.86484 31.8328 9.20469 31.9868 9.57656 31.9868H20.7594V28.7067H13.1297C12.7531 28.7067 12.4477 28.3994 12.4477 28.0206V24.0929C12.075 23.9876 11.7414 23.7872 11.475 23.5192C11.0719 23.1137 10.8227 22.5526 10.8227 21.935C10.8227 21.3188 11.0727 20.7577 11.4766 20.3515C11.8781 19.9444 12.4352 19.6937 13.05 19.6937V19.6937ZM13.7305 21.2473C13.5586 21.0744 13.318 20.9668 13.05 20.9668C12.7844 20.9668 12.5438 21.0752 12.3695 21.2505C12.1945 21.4234 12.0883 21.6654 12.0883 21.935C12.0883 22.2021 12.1961 22.4442 12.3695 22.6194C12.5438 22.7939 12.7844 22.9023 13.05 22.9023C13.3047 22.9023 13.5344 22.8057 13.7047 22.6469L13.7305 22.6194C13.9047 22.4442 14.0125 22.2021 14.0125 21.935C14.0125 21.6654 13.9055 21.4234 13.7336 21.2505L13.7305 21.2473V21.2473ZM27.7781 23.4776H25.6844V25.6041H27.7781V23.4776ZM23.3625 18.2799C23.1891 18.1055 22.9484 17.997 22.682 17.997C22.4164 17.997 22.1758 18.1047 22.0023 18.2799C21.8281 18.4544 21.7203 18.6972 21.7203 18.9644C21.7203 19.2332 21.8273 19.4752 21.9992 19.6489L22.0023 19.6513C22.1742 19.8249 22.4148 19.9318 22.682 19.9318C22.9484 19.9318 23.1891 19.8234 23.3625 19.6489C23.5133 19.4996 23.6133 19.3 23.6383 19.076C23.6266 19.0242 23.6195 18.9707 23.6195 18.9157C23.6195 18.8748 23.6234 18.8348 23.6305 18.7955C23.5977 18.6076 23.5125 18.4387 23.3906 18.3067L23.3625 18.2799V18.2799ZM23.075 11.9247H21.3141V13.7149H23.075V11.9247ZM0 27.0634V29.4619C0 29.7086 0.200781 29.9106 0.446094 29.9106H3.94922C4.19453 29.9106 4.39531 29.7086 4.39531 29.4619V27.0634C4.39531 26.8167 4.19453 26.6147 3.94922 26.6147H0.446094C0.200781 26.6147 0 26.8167 0 27.0634H0ZM0 21.5554V23.9538C0 24.2006 0.200781 24.4025 0.446094 24.4025H3.94922C4.19453 24.4025 4.39531 24.2006 4.39531 23.9538V21.5554C4.39531 21.3086 4.19453 21.1067 3.94922 21.1067H0.446094C0.200781 21.1067 0 21.3086 0 21.5554H0ZM0 16.0473V18.4458C0 18.6925 0.200781 18.8945 0.446094 18.8945H3.94922C4.19453 18.8945 4.39531 18.6925 4.39531 18.4458V16.0473C4.39531 15.8006 4.19453 15.5986 3.94922 15.5986H0.446094C0.200781 15.5986 0 15.8006 0 16.0473H0ZM0 10.5393V12.9377C0 13.1845 0.200781 13.3864 0.446094 13.3864H3.94922C4.19453 13.3864 4.39531 13.1845 4.39531 12.9377V10.5393C4.39531 10.2925 4.19453 10.0906 3.94922 10.0906H0.446094C0.200781 10.0906 0 10.2925 0 10.5393H0ZM40 27.0634V29.4619C40 29.7086 39.7992 29.9106 39.5539 29.9106H36.05C35.8055 29.9106 35.6047 29.7086 35.6047 29.4619V27.0634C35.6047 26.8167 35.8055 26.6147 36.05 26.6147H39.5539C39.7992 26.6147 40 26.8167 40 27.0634ZM40 21.5554V23.9538C40 24.2006 39.7992 24.4025 39.5539 24.4025H36.05C35.8055 24.4025 35.6047 24.2006 35.6047 23.9538V21.5554C35.6047 21.3086 35.8055 21.1067 36.05 21.1067H39.5539C39.7992 21.1067 40 21.3086 40 21.5554ZM40 16.0473V18.4458C40 18.6925 39.7992 18.8945 39.5539 18.8945H36.05C35.8055 18.8945 35.6047 18.6925 35.6047 18.4458V16.0473C35.6047 15.8006 35.8055 15.5986 36.05 15.5986H39.5539C39.7992 15.5986 40 15.8006 40 16.0473ZM40 10.5393V12.9377C40 13.1845 39.7992 13.3864 39.5539 13.3864H36.05C35.8055 13.3864 35.6047 13.1845 35.6047 12.9377V10.5393C35.6047 10.2925 35.8055 10.0906 36.05 10.0906H39.5539C39.7992 10.0906 40 10.2925 40 10.5393ZM27.0211 39.9939H29.4055C29.6508 39.9939 29.8516 39.7919 29.8516 39.5452V36.0214C29.8516 35.7746 29.6508 35.5727 29.4055 35.5727H27.0211C26.7758 35.5727 26.575 35.7746 26.575 36.0214V39.5452C26.575 39.7919 26.7758 39.9939 27.0211 39.9939V39.9939ZM21.5461 39.9939H23.9305C24.1758 39.9939 24.3758 39.7919 24.3758 39.5452V36.0214C24.3758 35.7746 24.1758 35.5727 23.9305 35.5727H21.5461C21.3008 35.5727 21.1 35.7746 21.1 36.0214V39.5452C21.1 39.7919 21.3008 39.9939 21.5461 39.9939V39.9939ZM16.0703 39.9939H18.4547C18.6992 39.9939 18.9 39.7919 18.9 39.5452V36.0214C18.9 35.7746 18.6992 35.5727 18.4547 35.5727H16.0703C15.825 35.5727 15.6242 35.7746 15.6242 36.0214V39.5452C15.6242 39.7919 15.825 39.9939 16.0703 39.9939V39.9939ZM10.5945 39.9939H12.9789C13.2242 39.9939 13.4242 39.7919 13.4242 39.5452V36.0214C13.4242 35.7746 13.2242 35.5727 12.9789 35.5727H10.5945C10.3492 35.5727 10.1484 35.7746 10.1484 36.0214V39.5452C10.1484 39.7919 10.3492 39.9939 10.5945 39.9939V39.9939ZM27.0211 0.00646973H29.4055C29.6508 0.00646973 29.8516 0.208434 29.8516 0.455193V3.97975C29.8516 4.22572 29.6508 4.42769 29.4055 4.42769H27.0211C26.7758 4.42769 26.575 4.22572 26.575 3.97975V0.455193C26.575 0.208434 26.7758 0.00646973 27.0211 0.00646973V0.00646973ZM21.5461 0.00646973H23.9305C24.1758 0.00646973 24.3758 0.208434 24.3758 0.455193V3.97975C24.3758 4.22572 24.1758 4.42769 23.9305 4.42769H21.5461C21.3008 4.42769 21.1 4.22572 21.1 3.97975V0.455193C21.1 0.208434 21.3008 0.00646973 21.5461 0.00646973V0.00646973ZM16.0703 0.00646973H18.4547C18.6992 0.00646973 18.9 0.208434 18.9 0.455193V3.97975C18.9 4.22572 18.6992 4.42769 18.4547 4.42769H16.0703C15.825 4.42769 15.6242 4.22572 15.6242 3.97975V0.455193C15.6242 0.208434 15.825 0.00646973 16.0703 0.00646973V0.00646973ZM10.5945 0.00646973H12.9789C13.2242 0.00646973 13.4242 0.208434 13.4242 0.455193V3.97975C13.4242 4.22572 13.2242 4.42769 12.9789 4.42769H10.5945C10.3492 4.42769 10.1484 4.22572 10.1484 3.97975V0.455193C10.1484 0.208434 10.3492 0.00646973 10.5945 0.00646973V0.00646973Z" fill="#8C8C8C"/>
+</svg>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 7928c33..98c618e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -55,7 +55,7 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
className={classNames([
"flex content-center justify-between",
"text-center",
- padding,
+ { padding: defaultStyle },
"rounded",
{
"!cursor-default": disabled,
diff --git a/src/components/Cards/CategoryCard.tsx b/src/components/Cards/CategoryCard.tsx
new file mode 100644
index 0000000..7690a9a
--- /dev/null
+++ 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;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..d9934f5
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,163 @@
+import classNames from "classnames";
+import { useState } from "react";
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import ContextMenuAction from "./ContextMenuAction";
+import ContextMenu from "./ContextMenu";
+import Logofreeland from "./Logofreeland";
+import { Button } from "./Button/Button";
+import Avatar from "./Avatar";
+import Navbar from "./Navbar";
+import Bell from "./Bell";
+import Logo from "./Logo";
+import Link from "./Link";
+
+/* -------------------------------------------------------------------------- */
+/* Icons */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.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";
+
+const Header = () => {
+ const [authenticated, setAuthenticated] = useState(false);
+ const onClick = () => setAuthenticated(true);
+
+ /* -------------------------------------------------------------------------- */
+ /* Implement Header Component */
+ /* -------------------------------------------------------------------------- */
+ return (
+ <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"
+ >
+ {/* 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"
+ >
+ {/* Link Create now - start - */}
+ <Link className="text-blue-500 px-4 font-bold uppercase" href="#">
+ Create new
+ </Link>
+ {/* 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>
+
+ {/* 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>
+ <Bell className="h-6 w-6" />
+ </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;
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..2cd65b8
--- /dev/null
+++ 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;
diff --git a/src/components/Logofreeland.tsx b/src/components/Logofreeland.tsx
new file mode 100644
index 0000000..88e6cdf
--- /dev/null
+++ b/src/components/Logofreeland.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import classNames from "classnames";
+export type Props = {
+ className?: string;
+};
+
+const Logofreeland = ({ className }: Props) => {
+ return (
+ <div className={classNames("", className)}>
+ <svg
+ // width="110"
+ // height="26"
+ viewBox="0 0 110 26"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M1.86506 22V3.09091H13.9787V5.96236H5.29048V11.0959H13.1477V13.9673H5.29048V22H1.86506ZM16.7486 22V7.81818H19.9893V10.1818H20.1371C20.3956 9.36316 20.8388 8.73224 21.4666 8.28906C22.1006 7.83973 22.8239 7.61506 23.6364 7.61506C23.821 7.61506 24.0272 7.62429 24.255 7.64275C24.4889 7.65507 24.6828 7.67661 24.8366 7.70739V10.782C24.6951 10.7327 24.4704 10.6896 24.1626 10.6527C23.861 10.6096 23.5687 10.5881 23.2855 10.5881C22.6761 10.5881 22.1283 10.7204 21.642 10.9851C21.1619 11.2436 20.7834 11.6037 20.5064 12.0653C20.2294 12.527 20.0909 13.0594 20.0909 13.6626V22H16.7486ZM32.7516 22.277C31.3297 22.277 30.1017 21.9815 29.0676 21.3906C28.0397 20.7936 27.2488 19.9503 26.6948 18.8608C26.1408 17.7652 25.8638 16.4756 25.8638 14.9922C25.8638 13.5334 26.1408 12.2531 26.6948 11.1513C27.2549 10.0433 28.0366 9.18158 29.04 8.56605C30.0433 7.94437 31.222 7.63352 32.5762 7.63352C33.4502 7.63352 34.275 7.77509 35.0506 8.05824C35.8323 8.33523 36.5217 8.7661 37.1188 9.35085C37.722 9.93561 38.196 10.6804 38.5407 11.5852C38.8854 12.4839 39.0577 13.5549 39.0577 14.7983V15.8232H27.4334V13.5703H35.8539C35.8477 12.9302 35.7092 12.3608 35.4384 11.8622C35.1676 11.3575 34.789 10.9605 34.3027 10.6712C33.8226 10.3819 33.2625 10.2372 32.6223 10.2372C31.9391 10.2372 31.339 10.4034 30.8219 10.7358C30.3049 11.062 29.9017 11.4929 29.6124 12.0284C29.3292 12.5578 29.1846 13.1394 29.1784 13.7734V15.7401C29.1784 16.5649 29.3292 17.2727 29.6309 17.8636C29.9325 18.4484 30.3541 18.8977 30.8958 19.2116C31.4374 19.5194 32.0714 19.6733 32.7978 19.6733C33.284 19.6733 33.7241 19.6056 34.1181 19.4702C34.512 19.3286 34.8536 19.1224 35.1429 18.8516C35.4322 18.5807 35.6507 18.2453 35.7985 17.8452L38.9192 18.196C38.7222 19.0208 38.3468 19.741 37.7928 20.3565C37.245 20.9659 36.5433 21.4399 35.6877 21.7784C34.8321 22.1108 33.8534 22.277 32.7516 22.277ZM48.1637 22.277C46.7418 22.277 45.5138 21.9815 44.4798 21.3906C43.4518 20.7936 42.6609 19.9503 42.1069 18.8608C41.5529 17.7652 41.2759 16.4756 41.2759 14.9922C41.2759 13.5334 41.5529 12.2531 42.1069 11.1513C42.667 10.0433 43.4487 9.18158 44.4521 8.56605C45.4554 7.94437 46.6341 7.63352 47.9883 7.63352C48.8623 7.63352 49.6871 7.77509 50.4627 8.05824C51.2444 8.33523 51.9338 8.7661 52.5309 9.35085C53.1341 9.93561 53.6081 10.6804 53.9528 11.5852C54.2975 12.4839 54.4698 13.5549 54.4698 14.7983V15.8232H42.8455V13.5703H51.266C51.2598 12.9302 51.1213 12.3608 50.8505 11.8622C50.5797 11.3575 50.2011 10.9605 49.7148 10.6712C49.2347 10.3819 48.6746 10.2372 48.0344 10.2372C47.3512 10.2372 46.7511 10.4034 46.234 10.7358C45.717 11.062 45.3138 11.4929 45.0245 12.0284C44.7414 12.5578 44.5967 13.1394 44.5906 13.7734V15.7401C44.5906 16.5649 44.7414 17.2727 45.043 17.8636C45.3446 18.4484 45.7662 18.8977 46.3079 19.2116C46.8496 19.5194 47.4835 19.6733 48.2099 19.6733C48.6961 19.6733 49.1362 19.6056 49.5302 19.4702C49.9241 19.3286 50.2657 19.1224 50.555 18.8516C50.8443 18.5807 51.0629 18.2453 51.2106 17.8452L54.3313 18.196C54.1344 19.0208 53.7589 19.741 53.2049 20.3565C52.6571 20.9659 51.9554 21.4399 51.0998 21.7784C50.2442 22.1108 49.2655 22.277 48.1637 22.277ZM60.6397 3.09091V22H57.2974V3.09091H60.6397ZM68.1577 22.2862C67.259 22.2862 66.4496 22.1262 65.7294 21.8061C65.0154 21.4799 64.4491 20.9998 64.0305 20.3658C63.6181 19.7318 63.4119 18.95 63.4119 18.0206C63.4119 17.2204 63.5597 16.5587 63.8551 16.0355C64.1506 15.5123 64.5537 15.0938 65.0646 14.7798C65.5755 14.4659 66.151 14.2289 66.7912 14.0689C67.4375 13.9027 68.1054 13.7827 68.7947 13.7088C69.6257 13.6226 70.2997 13.5457 70.8168 13.478C71.3338 13.4041 71.7093 13.2933 71.9432 13.1456C72.1832 12.9917 72.3033 12.7547 72.3033 12.4347V12.3793C72.3033 11.6837 72.0971 11.1451 71.6847 10.7635C71.2723 10.3819 70.6783 10.1911 69.9027 10.1911C69.084 10.1911 68.4347 10.3696 67.9545 10.7266C67.4806 11.0836 67.1605 11.5052 66.9943 11.9915L63.8736 11.5483C64.1198 10.6866 64.526 9.96638 65.0923 9.38778C65.6586 8.80303 66.3511 8.366 67.1697 8.0767C67.9884 7.78125 68.8932 7.63352 69.8842 7.63352C70.5675 7.63352 71.2476 7.71354 71.9247 7.87358C72.6018 8.03362 73.2204 8.29829 73.7805 8.66761C74.3407 9.03078 74.79 9.52628 75.1286 10.1541C75.4732 10.782 75.6456 11.5668 75.6456 12.5085V22H72.4325V20.0518H72.3217C72.1186 20.4458 71.8324 20.8151 71.4631 21.1598C71.0999 21.4983 70.6413 21.7723 70.0874 21.9815C69.5395 22.1847 68.8963 22.2862 68.1577 22.2862ZM69.0256 19.8303C69.6965 19.8303 70.2782 19.6979 70.7706 19.4332C71.263 19.1624 71.6416 18.8054 71.9062 18.3622C72.1771 17.919 72.3125 17.4358 72.3125 16.9126V15.2415C72.2079 15.3277 72.0294 15.4077 71.777 15.4815C71.5308 15.5554 71.2538 15.62 70.946 15.6754C70.6383 15.7308 70.3336 15.7801 70.032 15.8232C69.7304 15.8662 69.4688 15.9032 69.2472 15.9339C68.7486 16.0017 68.3023 16.1125 67.9084 16.2663C67.5144 16.4202 67.2036 16.6357 66.9759 16.9126C66.7481 17.1835 66.6342 17.5343 66.6342 17.9652C66.6342 18.5807 66.8589 19.0455 67.3082 19.3594C67.7576 19.6733 68.33 19.8303 69.0256 19.8303ZM82.3487 13.6903V22H79.0064V7.81818H82.201V10.228H82.3672C82.6934 9.43395 83.2135 8.80303 83.9276 8.33523C84.6477 7.86742 85.5372 7.63352 86.5959 7.63352C87.5746 7.63352 88.4271 7.8428 89.1534 8.26136C89.8859 8.67992 90.4522 9.28622 90.8523 10.0803C91.2585 10.8743 91.4586 11.8376 91.4524 12.9702V22H88.1101V13.4872C88.1101 12.5393 87.8639 11.7976 87.3714 11.2621C86.8852 10.7266 86.2112 10.4588 85.3494 10.4588C84.7647 10.4588 84.2446 10.5881 83.7891 10.8466C83.3397 11.099 82.9858 11.4652 82.7273 11.9453C82.4749 12.4254 82.3487 13.0071 82.3487 13.6903ZM100.113 22.2493C98.9988 22.2493 98.0017 21.9631 97.1214 21.3906C96.2412 20.8182 95.5457 19.9872 95.0348 18.8977C94.5239 17.8082 94.2685 16.4848 94.2685 14.9276C94.2685 13.3518 94.527 12.0223 95.044 10.9389C95.5672 9.84943 96.272 9.0277 97.1584 8.47372C98.0447 7.91359 99.0327 7.63352 100.122 7.63352C100.953 7.63352 101.636 7.77509 102.172 8.05824C102.707 8.33523 103.132 8.67069 103.446 9.06463C103.76 9.45241 104.003 9.81865 104.175 10.1634H104.314V3.09091H107.665V22H104.379V19.7656H104.175C104.003 20.1103 103.754 20.4766 103.428 20.8643C103.101 21.246 102.67 21.5722 102.135 21.843C101.599 22.1139 100.925 22.2493 100.113 22.2493ZM101.045 19.5071C101.753 19.5071 102.357 19.3163 102.855 18.9347C103.354 18.5469 103.732 18.0083 103.991 17.3189C104.249 16.6295 104.379 15.8262 104.379 14.9091C104.379 13.992 104.249 13.1948 103.991 12.5178C103.738 11.8407 103.363 11.3144 102.864 10.9389C102.372 10.5634 101.766 10.3757 101.045 10.3757C100.301 10.3757 99.679 10.5696 99.1804 10.9574C98.6818 11.3452 98.3063 11.8807 98.054 12.5639C97.8016 13.2472 97.6754 14.0289 97.6754 14.9091C97.6754 15.7955 97.8016 16.5864 98.054 17.282C98.3125 17.9714 98.6911 18.5161 99.1896 18.9162C99.6944 19.3101 100.313 19.5071 101.045 19.5071Z"
+ fill="url(#paint0_linear_18_179)"
+ />
+ <defs>
+ <linearGradient
+ id="paint0_linear_18_179"
+ x1="55"
+ y1="0"
+ x2="55"
+ y2="26"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop stop-color="#096DD9" />
+ <stop offset="1" stop-color="#002766" />
+ </linearGradient>
+ </defs>
+ </svg>
+ </div>
+ );
+};
+
+export default Logofreeland;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..81fc892
--- /dev/null
+++ 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 "./ContextMenuAction";
+import ContextMenu from "./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;
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index e480c84..f17c0d9 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -2,7 +2,6 @@ export { ReactComponent as SVGArrowBigRight } from "assets/svg/arrow-big-right.s
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 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";
@@ -17,7 +16,6 @@ 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";
@@ -30,7 +28,6 @@ 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";
@@ -63,3 +60,12 @@ export { ReactComponent as SVGSmile } from "assets/svg/smile.svg";
export { ReactComponent as SVGTable } from "assets/svg/table.svg";
export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg";
export { ReactComponent as SVGVideo } from "assets/svg/video.svg";
+export { ReactComponent as SVGFacebook } from "assets/svg/facebook.svg";
+export { ReactComponent as SVGInstagram } from "assets/svg/instagram.svg";
+export { ReactComponent as SVGSelectArrow } from "assets/svg/select-arrow.svg";
+export { ReactComponent as SVGAgricultural } from "assets/svg/agricultural.svg";
+export { ReactComponent as SVGFundomental } from "assets/svg/fundomental.svg";
+export { ReactComponent as SVGHumanitarian } from "assets/svg/humanitarian.svg";
+export { ReactComponent as SVGMedicine } from "assets/svg/medicine.svg";
+export { ReactComponent as SVGSocials } from "assets/svg/socials.svg";
+export { ReactComponent as SVGTechnicsAndTechology } from "assets/svg/technics-and-techology.svg";
diff --git a/src/components/parts/FeaturedArticles.tsx b/src/components/parts/FeaturedArticles.tsx
new file mode 100644
index 0000000..62cb623
--- /dev/null
+++ 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>
+ );
+}