droplinked-editor-configs 1.8.0

package/src/assets/icons/mint-to-merch.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mint to Merch">
+<path id="Vector" d="M12.0832 7.08342H12.0915M13.5165 16.6334L8.7925 11.8921C8.13175 11.2289 7.80136 10.8974 7.42009 10.7731C7.08473 10.6639 6.72335 10.6638 6.38795 10.7729C6.00663 10.897 5.67612 11.2285 5.0151 11.8914L3.58599 13.3248M3.58599 13.3248L2.0514 10.6668C1.91117 10.4239 1.84106 10.3024 1.81362 10.1734C1.78934 10.0591 1.78934 9.94102 1.81362 9.82685C1.84106 9.69769 1.91117 9.57627 2.0514 9.33344L5.44826 3.44987C5.58848 3.207 5.65859 3.08557 5.75668 2.99725C5.84346 2.91911 5.94571 2.86008 6.05677 2.82399C6.1823 2.7832 6.32252 2.7832 6.60296 2.7832H13.3967C13.6772 2.7832 13.8173 2.7832 13.9429 2.82399C14.0539 2.86008 14.1562 2.91911 14.243 2.99725C14.3411 3.08557 14.4112 3.207 14.5514 3.44987L17.9482 9.33344C18.0885 9.57627 18.1586 9.69769 18.186 9.82685C18.2103 9.94102 18.2103 10.0591 18.186 10.1734C18.1586 10.3024 18.0885 10.4239 17.9482 10.6668L15.7409 14.49M3.58599 13.3248L5.44826 16.5503C5.58848 16.7932 5.65859 16.9146 5.75668 17.0029C5.84346 17.081 5.94571 17.1401 6.05677 17.1762C6.1823 17.2169 6.32252 17.2169 6.60296 17.2169H13.3967C13.6772 17.2169 13.8173 17.2169 13.9429 17.1762C14.0539 17.1401 14.1562 17.081 14.243 17.0029C14.3411 16.9146 14.4112 16.7932 14.5514 16.5503L15.7409 14.49M10.1989 13.3037L10.5059 12.9959C11.1736 12.333 11.5074 12.0015 11.8909 11.8795C12.2282 11.7723 12.591 11.7752 12.9266 11.8878C13.3082 12.0159 13.6367 12.3527 14.2937 13.0262L15.7409 14.49M12.4998 7.08342C12.4998 7.31354 12.3132 7.50009 12.0832 7.50009C11.8531 7.50009 11.6665 7.31354 11.6665 7.08342C11.6665 6.8533 11.8531 6.66675 12.0832 6.66675C12.3132 6.66675 12.4998 6.8533 12.4998 7.08342Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/minus-btn.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <rect width="24" height="24" rx="4" fill="#F2F2F2"/>
+  <path d="M8 12L16 12" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/network.svg

@@ -0,0 +1,8 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#F2F2F2"/>
+<path opacity="0.6" d="M19.9939 16.3579L11.3865 20.2589L19.9939 25.3394L28.6117 20.2589L19.9939 16.3579Z" fill="#6782EB"/>
+<path opacity="0.45" d="M11.3865 20.2587L19.9939 25.3392V6L11.3865 20.2587Z" fill="#6782EB"/>
+<path opacity="0.8" d="M19.9958 6V25.3392L28.6136 20.2587L19.9958 6Z" fill="#6782EB"/>
+<path opacity="0.45" d="M11.3865 21.8936L19.9939 34V26.9638L11.3865 21.8936Z" fill="#6782EB"/>
+<path opacity="0.8" d="M19.9958 26.9638V34L28.6136 21.8936L19.9958 26.9638Z" fill="#6782EB"/>
+</svg>

package/src/assets/icons/nft.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.1667 14.8333C13.1667 15.7538 13.9128 16.5 14.8333 16.5C15.7538 16.5 16.5 15.7538 16.5 14.8333C16.5 13.9128 15.7538 13.1667 14.8333 13.1667M13.1667 14.8333C13.1667 13.9128 13.9128 13.1667 14.8333 13.1667M13.1667 14.8333H4.83333M14.8333 13.1667V4.83333M4.83333 14.8333C4.83333 15.7538 4.08714 16.5 3.16667 16.5C2.24619 16.5 1.5 15.7538 1.5 14.8333C1.5 13.9128 2.24619 13.1667 3.16667 13.1667M4.83333 14.8333C4.83333 13.9128 4.08714 13.1667 3.16667 13.1667M14.8333 4.83333C13.9128 4.83333 13.1667 4.08714 13.1667 3.16667M14.8333 4.83333C15.7538 4.83333 16.5 4.08714 16.5 3.16667C16.5 2.24619 15.7538 1.5 14.8333 1.5C13.9128 1.5 13.1667 2.24619 13.1667 3.16667M3.16667 13.1667V4.83333M3.16667 4.83333C2.24619 4.83333 1.5 4.08714 1.5 3.16667C1.5 2.24619 2.24619 1.5 3.16667 1.5C4.08714 1.5 4.83333 2.24619 4.83333 3.16667M3.16667 4.83333C4.08714 4.83333 4.83333 4.08714 4.83333 3.16667M4.83333 3.16667H13.1667M7.33333 11.5V6.5L10.6667 11.5V6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/person.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M3.3335 14C3.3335 11.4227 5.42284 9.33333 8.00016 9.33333C10.5775 9.33333 12.6668 11.4227 12.6668 14M10.6668 4.66667C10.6668 6.13943 9.4729 7.33333 8.00016 7.33333C6.5274 7.33333 5.3335 6.13943 5.3335 4.66667C5.3335 3.19391 6.5274 2 8.00016 2C9.4729 2 10.6668 3.19391 10.6668 4.66667Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/phone.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M13.9996 10.9843V12.7908C14.0003 12.9585 13.9659 13.1245 13.8986 13.2781C13.8313 13.4318 13.7325 13.5697 13.6087 13.6831C13.4849 13.7965 13.3387 13.8828 13.1795 13.9365C13.0203 13.9903 12.8517 14.0102 12.6843 13.9951C10.8277 13.7938 9.04426 13.1606 7.47734 12.1465C6.01953 11.222 4.78356 9.98843 3.8572 8.53351C2.83752 6.96259 2.20294 5.17405 2.0049 3.31277C1.98982 3.14625 2.00965 2.97843 2.06312 2.81998C2.11659 2.66153 2.20254 2.51592 2.31548 2.39244C2.42843 2.26896 2.5659 2.1703 2.71915 2.10274C2.87239 2.03519 3.03805 2.00022 3.20558 2.00006H5.01565C5.30846 1.99718 5.59233 2.10067 5.81435 2.29122C6.03636 2.48178 6.18138 2.74641 6.22236 3.03578C6.29876 3.61389 6.44044 4.18152 6.64471 4.72785C6.72589 4.94338 6.74346 5.17761 6.69534 5.4028C6.64721 5.62799 6.53542 5.83469 6.3732 5.99841L5.60694 6.76315C6.46585 8.27069 7.71655 9.51891 9.22708 10.3761L9.99334 9.61138C10.1574 9.44948 10.3645 9.33791 10.5901 9.28988C10.8158 9.24185 11.0505 9.25939 11.2664 9.3404C11.8138 9.54427 12.3826 9.68567 12.9619 9.76192C13.2549 9.80318 13.5226 9.95052 13.714 10.1759C13.9053 10.4013 14.007 10.689 13.9996 10.9843Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/plus-btn.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <rect width="24" height="24" rx="4" fill="#F2F2F2"/>
+  <path d="M8 12H12M12 12H16M12 12V8M12 12V16" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/refresh.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M1.3335 6.66667C1.3335 6.66667 2.67015 4.84548 3.75605 3.75883C4.84196 2.67218 6.34256 2 8.00016 2C11.3139 2 14.0002 4.68629 14.0002 8C14.0002 11.3137 11.3139 14 8.00016 14C5.26477 14 2.9569 12.1695 2.23467 9.66667M1.3335 6.66667V2.66667M1.3335 6.66667H5.3335" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/required.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Asterisk">
+<path id="Icon" d="M6 2V10M9 3L3 9M10 6H2M9 9L3 3" stroke="#FF2244" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/secure.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M10.0939 18.3174C10.0308 18.3389 9.96908 18.3387 9.90617 18.3166C9.09792 18.0326 3.33325 15.7828 3.33325 9.37702V3.58656C3.33325 3.43336 3.43735 3.29981 3.58574 3.26265L9.91909 1.67666C9.97217 1.66336 10.0277 1.66336 10.0808 1.67666L16.4141 3.26265C16.5625 3.29981 16.6666 3.43336 16.6666 3.58656V9.37702C16.6666 15.8474 10.9033 18.0413 10.0939 18.3174Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linejoin="round"/>
+  <path d="M11.6666 8.25699C11.6668 8.58617 11.56 8.9073 11.361 9.17613C11.162 9.44495 10.8806 9.64824 10.5555 9.75796L10.9833 11.8689C10.9988 11.9456 10.9964 12.0248 10.9762 12.1005C10.956 12.1763 10.9184 12.2469 10.8663 12.3072C10.8142 12.3675 10.7487 12.4161 10.6746 12.4494C10.6005 12.4828 10.5196 12.5 10.4377 12.5H9.56214C9.48032 12.4999 9.39954 12.4825 9.32558 12.4491C9.25162 12.4157 9.1863 12.3671 9.13428 12.3068C9.08227 12.2465 9.04485 12.176 9.02469 12.1003C9.00454 12.0246 9.00215 11.9456 9.0177 11.8689L9.44436 9.75796C9.15632 9.66074 8.90181 9.4898 8.70865 9.26382C8.51548 9.03785 8.3911 8.76553 8.34909 8.47663C8.30707 8.18773 8.34905 7.89336 8.47042 7.6257C8.5918 7.35803 8.78791 7.12737 9.03731 6.95891C9.28672 6.79045 9.57983 6.69068 9.88461 6.6705C10.1894 6.65032 10.4941 6.71051 10.7655 6.84449C11.0369 6.97847 11.2645 7.18108 11.4234 7.43019C11.5823 7.6793 11.6664 7.96532 11.6666 8.25699Z" fill="black"/>
+</svg>

package/src/assets/icons/share.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Share">
+<path id="Icon" d="M17.5 7.50001L17.5 2.50001M17.5 2.50001H12.5M17.5 2.50001L10 10M8.33333 2.5H6.5C5.09987 2.5 4.3998 2.5 3.86502 2.77248C3.39462 3.01217 3.01217 3.39462 2.77248 3.86502C2.5 4.3998 2.5 5.09987 2.5 6.5V13.5C2.5 14.9001 2.5 15.6002 2.77248 16.135C3.01217 16.6054 3.39462 16.9878 3.86502 17.2275C4.3998 17.5 5.09987 17.5 6.5 17.5H13.5C14.9001 17.5 15.6002 17.5 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.5 15.6002 17.5 14.9001 17.5 13.5V11.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/skale-skl-seeklogo.com.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><circle cx="64" cy="64" r="64"/><g fill="#fff"><path d="m84.094 72.849c.288 2.083.856 3.639 1.701 4.67 1.547 1.877 4.196 2.815 7.949 2.815 2.248 0 4.073-.247 5.475-.742 2.66-.949 3.99-2.712 3.99-5.289 0-1.506-.66-2.671-1.979-3.496-1.32-.804-3.392-1.515-6.218-2.134l-4.825-1.082c-4.743-1.073-8.021-2.238-9.836-3.496-3.072-2.103-4.609-5.392-4.609-9.867 0-4.083 1.485-7.475 4.454-10.176 2.97-2.701 7.331-4.052 13.084-4.052 4.805 0 8.903 1.273 12.295 3.82 3.393 2.547 5.171 6.243 5.336 11.089h-9.156c-.165-2.743-1.361-4.691-3.588-5.846-1.484-.763-3.33-1.145-5.536-1.145-2.454 0-4.413.495-5.877 1.485s-2.196 2.371-2.196 4.145c0 1.629.721 2.846 2.165 3.65.928.536 2.907 1.165 5.939 1.887l7.856 1.886c3.444.825 6.042 1.928 7.795 3.31 2.722 2.145 4.083 5.248 4.083 9.31 0 4.166-1.593 7.625-4.779 10.378s-7.686 4.129-13.502 4.129c-5.938 0-10.609-1.356-14.011-4.068-3.403-2.711-5.104-6.438-5.104-11.181z" fill-rule="nonzero"/><path d="m28 26v76h66v-7h-58v-62h58v-7z"/></g></svg>

package/src/assets/icons/social-media/appSocialMediaIcons.ts

@@ -0,0 +1,27 @@
+/// <reference types="vite-plugin-svgr/client" />
+import Discord from "./discord.svg?react";
+import Facebook from "./facebook.svg?react";
+import Globe from "./globe.svg?react";
+import Instagram from "./instagram.svg?react";
+import LinkedIn from "./linked-in.svg?react";
+import Messenger from "./messenger.svg?react";
+import Telegram from "./telegram.svg?react";
+import Tiktok from "./tiktok.svg?react";
+import X from "./x.svg?react";
+import Youtube from "./youtube.svg?react";
+
+
+const AppSocialMediaIcons = {
+    Discord,
+    Facebook,
+    Globe,
+    Instagram,
+    LinkedIn,
+    Messenger,
+    Telegram,
+    Tiktok,
+    X,
+    Youtube
+};
+
+export default AppSocialMediaIcons;

package/src/assets/icons/social-media/discord.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.44775 11.8231C8.05182 11.8231 8.5415 11.2518 8.5415 10.547C8.5415 9.8423 8.05182 9.271 7.44775 9.271C6.84369 9.271 6.354 9.8423 6.354 10.547C6.354 11.2518 6.84369 11.8231 7.44775 11.8231Z" stroke="currentColor" stroke-linejoin="round"/>
+  <path d="M12.5522 11.8231C13.1563 11.8231 13.646 11.2518 13.646 10.547C13.646 9.8423 13.1563 9.271 12.5522 9.271C11.9482 9.271 11.4585 9.8423 11.4585 10.547C11.4585 11.2518 11.9482 11.8231 12.5522 11.8231Z" stroke="currentColor" stroke-linejoin="round"/>
+  <path d="M8.17708 5.26025C8.17708 5.26025 8.96429 4.89567 10 4.89567C11.0357 4.89567 11.8229 5.26025 11.8229 5.26025L12.1875 4.1665C13.4675 4.1665 14.419 4.38031 15.4688 4.89567C16.1979 6.11095 17.6563 9.56234 17.6563 13.6457C16.297 15.0487 15.2473 15.6406 13.6458 15.8332L12.5521 14.0103C12.1875 14.1318 11.1667 14.3748 10 14.3748C8.83333 14.3748 7.8125 14.1318 7.44792 14.0103L6.35417 15.8332C4.75271 15.6406 3.70302 15.0487 2.34375 13.6457C2.34375 9.56234 3.80208 6.11095 4.53125 4.89567C5.58094 4.38031 6.53251 4.1665 7.8125 4.1665L8.17708 5.26025Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.44808 14.0104C6.65602 13.8081 5.98975 13.2812 5.98975 13.2812" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.5522 14.0104C13.3443 13.8081 14.0106 13.2812 14.0106 13.2812" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/social-media/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.1667 1.6665H11.6667C10.5616 1.6665 9.50175 2.10549 8.72042 2.8869C7.93898 3.6683 7.5 4.7281 7.5 5.83317V8.33317H5V11.6665H7.5V18.3332H10.8333V11.6665H13.3333L14.1667 8.33317H10.8333V5.83317C10.8333 5.61215 10.9212 5.4002 11.0774 5.24391C11.2337 5.08764 11.4457 4.99984 11.6667 4.99984H14.1667V1.6665Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/social-media/globe.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.5 10C17.5 14.1422 14.1422 17.5 10 17.5M17.5 10C17.5 5.85787 14.1422 2.5 10 2.5M17.5 10C17.5 11.3807 14.1422 12.5 10 12.5C5.85787 12.5 2.5 11.3807 2.5 10M17.5 10C17.5 8.61925 14.1422 7.5 10 7.5C5.85787 7.5 2.5 8.61925 2.5 10M10 17.5C5.85787 17.5 2.5 14.1422 2.5 10M10 17.5C8.61925 17.5 7.5 14.1422 7.5 10C7.5 5.85787 8.61925 2.5 10 2.5M10 17.5C11.3807 17.5 12.5 14.1422 12.5 10C12.5 5.85787 11.3807 2.5 10 2.5M10 2.5C5.85787 2.5 2.5 5.85787 2.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/social-media/instagram.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/>
+  <path d="M13.75 2.5H6.25C4.17893 2.5 2.5 4.17893 2.5 6.25V13.75C2.5 15.8211 4.17893 17.5 6.25 17.5H13.75C15.8211 17.5 17.5 15.8211 17.5 13.75V6.25C17.5 4.17893 15.8211 2.5 13.75 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.0625 6.875C14.5803 6.875 15 6.45527 15 5.9375C15 5.41973 14.5803 5 14.0625 5C13.5447 5 13.125 5.41973 13.125 5.9375C13.125 6.45527 13.5447 6.875 14.0625 6.875Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/social-media/linked-in.svg

@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_9526_984)">
+    <path d="M8.3335 7.5V15.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5 7.5V15.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8.3335 11.1458C8.3335 10.1789 8.72858 9.25157 9.43184 8.56784C10.1351 7.88411 11.0889 7.5 12.0835 7.5C13.0781 7.5 14.0319 7.88411 14.7351 8.56784C15.4384 9.25157 15.8335 10.1789 15.8335 11.1458V15.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4.99984 5.83317C5.46007 5.83317 5.83317 5.46007 5.83317 4.99984C5.83317 4.5396 5.46007 4.1665 4.99984 4.1665C4.5396 4.1665 4.1665 4.5396 4.1665 4.99984C4.1665 5.46007 4.5396 5.83317 4.99984 5.83317Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_9526_984">
+      <rect width="20" height="20" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/icons/social-media/messenger.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-blue-500">
+  <g clip-path="url(#clip0_11535_195)">
+    <path d="M5.83301 11.6668L7.49584 9.67141C8.02595 9.03533 8.29101 8.71725 8.61076 8.71725C8.93059 8.71725 9.19559 9.03533 9.72576 9.67141L10.2736 10.3289C10.8038 10.965 11.0688 11.2831 11.3886 11.2831C11.7083 11.2831 11.9734 10.965 12.5035 10.3289L14.1663 8.3335" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M10.0003 18.3332C14.6027 18.3332 18.3337 14.6022 18.3337 9.99984C18.3337 5.39746 14.6027 1.6665 10.0003 1.6665C5.39795 1.6665 1.66699 5.39746 1.66699 9.99984C1.66699 11.1489 1.89955 12.2437 2.32018 13.2396C2.55264 13.7899 2.66888 14.0652 2.68327 14.2732C2.69766 14.4812 2.63644 14.7099 2.51401 15.1675L1.66699 18.3332L4.83263 17.4862C5.29023 17.3638 5.51903 17.3025 5.72701 17.3169C5.935 17.3313 6.2102 17.4475 6.76062 17.68C7.75653 18.1006 8.85124 18.3332 10.0003 18.3332Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_11535_195">
+      <rect width="20" height="20" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/icons/social-media/telegram.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-current">
+  <path fill="none" stroke="currentColor" d="M16.4814 3.69133C17.388 3.30961 18.3599 4.07621 18.1998 5.04679L16.3091 16.5107C16.1267 17.616 14.9127 18.2503 13.8987 17.6995C13.0501 17.2385 11.7911 16.5291 10.6564 15.7877C10.0898 15.4175 8.35491 14.2303 8.56816 13.3852C8.75049 12.6626 11.6671 9.94771 13.3337 8.33313C13.9884 7.69891 13.6902 7.33251 12.9171 7.91646C10.9991 9.36505 7.91976 11.5675 6.90146 12.1873C6.00301 12.7341 5.53391 12.8275 4.97437 12.7341C3.9526 12.5639 3.00529 12.3002 2.23189 11.9796C1.18658 11.5463 1.2375 10.1098 2.23118 9.69146L16.4814 3.69133Z" stroke-width="1.5"/>
+</svg>

package/src/assets/icons/social-media/tiktok.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.125 7.96875C14.3992 8.88589 15.9301 9.37796 17.5 9.375V6.25C16.3397 6.25 15.2269 5.78906 14.4064 4.96859C13.5859 4.14812 13.125 3.03532 13.125 1.875H10V12.1875C9.99984 12.5789 9.89464 12.9631 9.69539 13.3001C9.49614 13.637 9.21014 13.9143 8.86721 14.103C8.52428 14.2917 8.137 14.385 7.74575 14.3731C7.3545 14.3611 6.97362 14.2444 6.64284 14.0351C6.31207 13.8258 6.04351 13.5316 5.86519 13.1831C5.68686 12.8347 5.6053 12.4448 5.62902 12.0541C5.65273 11.6633 5.78085 11.2861 6.00001 10.9618C6.21917 10.6375 6.52134 10.3779 6.875 10.2102V6.875C4.38828 7.31797 2.5 9.57344 2.5 12.1875C2.5 13.5965 3.05971 14.9477 4.056 15.944C5.05228 16.9403 6.40354 17.5 7.8125 17.5C9.22146 17.5 10.5727 16.9403 11.569 15.944C12.5653 14.9477 13.125 13.5965 13.125 12.1875V7.96875Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/social-media/x.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.7984 7.86419L7.3123 2.89944L7.26004 2.825H7.16908H3H2.66326L2.85679 3.10057L8.24368 10.7713L2.86858 16.8844L2.6131 17.175H3H4.235H4.31417L4.36644 17.1155L8.99829 11.8462L12.6877 17.1006L12.74 17.175H12.8309H17H17.3367L17.1432 16.8994L11.5558 8.94081L16.6773 3.11555L16.9327 2.825H16.5459H15.3109H15.2317L15.1795 2.88441L10.7984 7.86419ZM9.78384 10.7501L9.78376 10.7499L9.22913 9.97445L9.22909 9.97441L5.02055 4.08603H6.48756L9.99218 8.98989L9.99234 8.99013L10.5445 9.76543L10.5447 9.76566L14.9701 15.9584H13.5031L9.78384 10.7501Z" fill="currentColor" stroke="currentColor" stroke-width="0.35"/>
+</svg>

package/src/assets/icons/social-media/youtube.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.9847 5.99975C17.8947 5.64022 17.7115 5.31082 17.4535 5.0448C17.1954 4.77878 16.8717 4.58556 16.5152 4.48467C15.2122 4.1665 10.0003 4.1665 10.0003 4.1665C10.0003 4.1665 4.78848 4.1665 3.48551 4.51497C3.1289 4.61586 2.80523 4.80908 2.54718 5.0751C2.28915 5.34112 2.10588 5.67052 2.01589 6.03005C1.77743 7.35236 1.66078 8.69375 1.66743 10.0374C1.65893 11.3912 1.77558 12.7428 2.01589 14.0751C2.1151 14.4234 2.30248 14.7403 2.55991 14.9951C2.81735 15.2498 3.13615 15.4339 3.48551 15.5296C4.78848 15.878 10.0003 15.878 10.0003 15.878C10.0003 15.878 15.2122 15.878 16.5152 15.5296C16.8717 15.4287 17.1954 15.2354 17.4535 14.9694C17.7115 14.7034 17.8947 14.374 17.9847 14.0145C18.2214 12.7021 18.338 11.3709 18.3332 10.0374C18.3417 8.68367 18.2251 7.33202 17.9847 5.99975Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.125 7.88782C8.125 7.49009 8.125 7.29122 8.20812 7.1802C8.28055 7.08345 8.39142 7.02291 8.512 7.0143C8.65033 7.00442 8.81758 7.11195 9.15217 7.32704L12.4378 9.4393C12.7282 9.62588 12.8733 9.71921 12.9235 9.83788C12.9672 9.94155 12.9672 10.0585 12.9235 10.1622C12.8733 10.2809 12.7282 10.3742 12.4378 10.5608L9.15217 12.673C8.81758 12.8881 8.65033 12.9957 8.512 12.9858C8.39142 12.9772 8.28055 12.9166 8.20812 12.8199C8.125 12.7089 8.125 12.51 8.125 12.1123V7.88782Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/soon.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Soon">
+<path id="Vector" d="M5.8 11.2998L2 21.9998L12.7 18.2098"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M4 3H4.01"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M22 8H22.01"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M15 2H15.01"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M22 20H22.01"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M22 2L19.76 2.75C19.1224 2.96239 18.5783 3.38964 18.2208 3.95872C17.8633 4.52781 17.7146 5.20339 17.8 5.87C17.9 6.73 17.23 7.5 16.35 7.5H15.97C15.11 7.5 14.37 8.1 14.21 8.94L14 10"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M22 12.9999L21.18 12.6699C20.32 12.3299 19.36 12.8699 19.2 13.7799C19.09 14.4799 18.48 14.9999 17.77 14.9999H17"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_8" d="M11 2L11.33 2.82C11.67 3.68 11.13 4.64 10.22 4.8C9.52 4.9 9 5.52 9 6.23V7"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_9" d="M11 12.9995C12.93 14.9295 13.83 17.1695 13 17.9995C12.17 18.8295 9.93002 17.9295 8.00002 15.9995C6.07002 14.0695 5.17002 11.8295 6.00002 10.9995C6.83002 10.1695 9.07002 11.0695 11 12.9995Z"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/stripe.svg

@@ -0,0 +1,9 @@
+<svg width="59" height="20" viewBox="0 0 59 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3333 10.3335C58.3333 6.91551 56.6773 4.21851 53.5122 4.21851C50.3337 4.21851 48.4106 6.91551 48.4106 10.3068C48.4106 14.3256 50.6809 16.355 53.9395 16.355C55.5288 16.355 56.7307 15.9945 57.6389 15.4872V12.8169C56.7307 13.2708 55.689 13.5512 54.3669 13.5512C53.0715 13.5512 51.9229 13.0973 51.776 11.5218H58.3066C58.3066 11.3482 58.3333 10.6539 58.3333 10.3335ZM51.736 9.06511C51.736 7.55639 52.6575 6.92886 53.4988 6.92886C54.3135 6.92886 55.1816 7.55639 55.1816 9.06511H51.736Z" fill="#635BFF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M41 4.21851C39.6912 4.21851 38.8498 4.83268 38.3824 5.25992L38.2088 4.43213H35.2707V20L38.6094 19.2924L38.6228 15.5139C39.1036 15.861 39.8114 16.355 40.9866 16.355C43.3772 16.355 45.554 14.4324 45.554 10.2C45.5407 6.32805 43.3371 4.21851 41 4.21851ZM40.1987 13.4177C39.4107 13.4177 38.9433 13.1373 38.6228 12.7902L38.6094 7.83677C38.9567 7.44957 39.4374 7.18254 40.1987 7.18254C41.414 7.18254 42.2553 8.5444 42.2553 10.2934C42.2553 12.0826 41.4273 13.4177 40.1987 13.4177Z" fill="#635BFF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M29.058 3.43134L32.4101 2.71036V0L29.058 0.70763V3.43134Z" fill="#635BFF"/>
+  <path d="M32.4101 4.44592H29.058V16.1285H32.4101V4.44592Z" fill="#635BFF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4206 5.43419L23.2069 4.44618H20.3223V16.1288H23.661V8.2113C24.449 7.18324 25.7845 7.37016 26.1985 7.51702V4.44618C25.7711 4.28596 24.2086 3.99222 23.4206 5.43419Z" fill="#635BFF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9422 1.54895L11.6836 2.24323L11.6702 12.9378C11.6702 14.9138 13.1526 16.3691 15.1292 16.3691C16.2243 16.3691 17.0256 16.1689 17.4663 15.9285V13.2182C17.0389 13.3917 14.9288 14.0059 14.9288 12.0299V7.2901H17.4663V4.44623H14.9288L14.9422 1.54895Z" fill="#635BFF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.71212 7.83689C3.71212 7.31618 4.13948 7.11591 4.8473 7.11591C5.86228 7.11591 7.14435 7.42299 8.15933 7.97041V4.8328C7.05087 4.3922 5.95576 4.21863 4.8473 4.21863C2.13624 4.21863 0.333313 5.63389 0.333313 7.99711C0.333313 11.6821 5.40821 11.0947 5.40821 12.6835C5.40821 13.2977 4.87401 13.4979 4.12613 13.4979C3.01766 13.4979 1.60204 13.044 0.480218 12.4298V15.6075C1.72223 16.1415 2.9776 16.3685 4.12613 16.3685C6.90396 16.3685 8.81373 14.9933 8.81373 12.6034C8.80037 8.62463 3.71212 9.33226 3.71212 7.83689Z" fill="#635BFF"/>
+</svg>

package/src/assets/icons/timer-alien.svg

@@ -0,0 +1,40 @@
+<svg width="62" height="38" viewBox="0 0 62 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_9029_18184)">
+<g id="[component:lottie:https://assets10.lottiefiles.com/packages/lf20_borkvxlu.json]">
+<g id="Group">
+<g id="Group_2">
+<path id="Vector" d="M30.8918 0.226562C17.9017 0.226562 7.37109 10.8115 7.37109 23.8686V36.5436H54.4125V23.8686C54.4125 10.8115 43.8817 0.226562 30.8918 0.226562Z" fill="#2BCFA1"/>
+</g>
+</g>
+<g id="Group_3">
+<g id="Group_4">
+<path id="Vector_2" d="M5.99823 31.4883C2.7145 31.4883 0.0527344 34.1639 0.0527344 37.4645V37.57C0.0527344 37.7657 0.210457 37.9243 0.405227 37.9243H2.79676V37.0048C2.79676 36.751 3.00151 36.5452 3.25405 36.5452C3.50674 36.5452 3.71149 36.751 3.71149 37.0048V37.9243H5.54079V37.0048C5.54079 36.751 5.74554 36.5452 5.99823 36.5452C6.25077 36.5452 6.45552 36.751 6.45552 37.0048V37.9243H8.28497V37.0048C8.28497 36.751 8.48972 36.5452 8.74226 36.5452C8.9948 36.5452 9.19955 36.751 9.19955 37.0048V37.9243H11.5912C11.7859 37.9243 11.9437 37.7657 11.9437 37.57V37.4645C11.9437 34.1639 9.28181 31.4883 5.99823 31.4883Z" fill="#2BCFA1"/>
+</g>
+<g id="Group_5">
+<path id="Vector_3" d="M55.8498 31.4883C52.5662 31.4883 49.9043 34.1639 49.9043 37.4645V37.57C49.9043 37.7657 50.0622 37.9243 50.2568 37.9243H52.6485V37.0048C52.6485 36.751 52.8532 36.5452 53.1058 36.5452C53.3582 36.5452 53.5631 36.751 53.5631 37.0048V37.9243H55.3925V37.0048C55.3925 36.751 55.5973 36.5452 55.8498 36.5452C56.1025 36.5452 56.3071 36.751 56.3071 37.0048V37.9243H58.1365V37.0048C58.1365 36.751 58.3413 36.5452 58.5938 36.5452C58.8465 36.5452 59.0513 36.751 59.0513 37.0048V37.9243H61.4429C61.6374 37.9243 61.7953 37.7657 61.7953 37.57V37.4645C61.7953 34.1639 59.1334 31.4883 55.8498 31.4883Z" fill="#2BCFA1"/>
+</g>
+</g>
+<g id="Group_6">
+<g id="Group_7">
+<path id="Vector_4" d="M22.006 19.5352C25.2896 19.5352 27.9515 22.211 27.9515 25.5113C27.9515 28.812 25.2896 31.4878 22.006 31.4878C18.7225 31.4878 16.0605 28.812 16.0605 25.5113C16.0605 22.211 18.7225 19.5352 22.006 19.5352Z" fill="white"/>
+</g>
+<g id="Group_8">
+<path id="Vector_5" d="M39.3849 19.5352C42.6685 19.5352 45.3304 22.211 45.3304 25.5113C45.3304 28.812 42.6685 31.4878 39.3849 31.4878C36.1012 31.4878 33.4395 28.812 33.4395 25.5113C33.4395 22.211 36.1012 19.5352 39.3849 19.5352Z" fill="white"/>
+</g>
+</g>
+<g id="Group_9">
+<g id="Group_10">
+<path id="Vector_6" d="M19.4951 27.4258C20.2528 27.4258 20.8671 28.0432 20.8671 28.8049C20.8671 29.5667 20.2528 30.184 19.4951 30.184C18.7373 30.184 18.123 29.5667 18.123 28.8049C18.123 28.0432 18.7373 27.4258 19.4951 27.4258Z" fill="black"/>
+</g>
+<g id="Group_11">
+<path id="Vector_7" d="M36.874 27.4258C37.6319 27.4258 38.246 28.0432 38.246 28.8049C38.246 29.5667 37.6319 30.184 36.874 30.184C36.1162 30.184 35.502 29.5667 35.502 28.8049C35.502 28.0432 36.1162 27.4258 36.874 27.4258Z" fill="black"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_9029_18184">
+<rect width="62" height="38" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/timer-modal-cross.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Vector">
+<path id="Vector_2" d="M2.66876 0.437628C2.0719 -0.159228 1.0886 -0.14362 0.47249 0.47249C-0.14362 1.0886 -0.159228 2.0719 0.437628 2.66876L9.55273 11.7839C9.6721 11.9032 9.6721 12.0968 9.55273 12.2161L0.437628 21.3312C-0.159228 21.9281 -0.14362 22.9114 0.47249 23.5275C1.0886 24.1436 2.0719 24.1592 2.66876 23.5624L11.7839 14.4473C11.9032 14.3279 12.0968 14.3279 12.2161 14.4473L21.3312 23.5624C21.9281 24.1592 22.9114 24.1436 23.5275 23.5275C24.1436 22.9114 24.1592 21.9281 23.5624 21.3312L14.4473 12.2161C14.3279 12.0968 14.3279 11.9032 14.4473 11.7839L23.5624 2.66876C24.1592 2.0719 24.1436 1.0886 23.5275 0.47249C22.9114 -0.14362 21.9281 -0.159227 21.3312 0.437628L12.2161 9.55273C12.0968 9.6721 11.9032 9.6721 11.7839 9.55273L2.66876 0.437628Z" fill="#C2C2C2"/>
+</g>
+</svg>

package/src/assets/icons/unstoppableDomains.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100" viewBox="0 0 100 100" xml:space="preserve">
+<desc>Created with Fabric.js 5.2.4</desc>
+<defs>
+</defs>
+<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
+<g transform="matrix(1 0 0 1 50 50)" id="181fa84f-9073-46ab-862e-47588f0b4284"  >
+<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
+</g>
+<g transform="matrix(0 0 0 0 0 0)" id="6b5b359d-e6e6-4927-816a-a41c74d12369"  >
+</g>
+<g transform="matrix(0.09 0 0 0.09 170.25 168.92)"  >
+<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-45.05, -45)" d="M 72.2 4.6 L 53.4 32.5 C 52.1 34.4 54.6 36.7 56.4 35.1 L 74.9 19 C 75.4 18.6 76.10000000000001 18.9 76.10000000000001 19.6 L 76.10000000000001 69.9 C 76.10000000000001 70.60000000000001 75.2 70.9 74.80000000000001 70.4 L 18.80000000000001 3.4000000000000057 C 17 1.2 14.4 0 11.5 0 L 9.5 0 C 4.3 0 0 4.3 0 9.6 L 0 80.39999999999999 C 0 85.7 4.3 90 9.6 90 C 12.899999999999999 90 16 88.3 17.799999999999997 85.4 L 36.599999999999994 57.50000000000001 C 37.89999999999999 55.60000000000001 35.39999999999999 53.300000000000004 33.599999999999994 54.900000000000006 L 15.099999999999994 70.9 C 14.599999999999994 71.30000000000001 13.899999999999995 71 13.899999999999995 70.30000000000001 L 13.899999999999995 20.1 C 13.899999999999995 19.400000000000002 14.799999999999995 19.1 15.199999999999996 19.6 L 71.19999999999999 86.6 C 72.99999999999999 88.8 75.69999999999999 90 78.49999999999999 90 L 80.49999999999999 90 C 85.79999999999998 90 90.09999999999998 85.7 90.09999999999998 80.4 L 90.09999999999998 9.6 C 90.09999999999998 4.3 85.79999999999998 0 80.49999999999999 0 C 77.1 0 74 1.7 72.2 4.6 z" stroke-linecap="round" />
+</g>
+<g transform="matrix(1 0 0 1 62 62)" id="1968f3db-a18a-4f81-b7d3-d2b4dc067594"  >
+<rect style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  x="-12" y="-12" rx="0" ry="0" width="24" height="24" />
+</g>
+<g transform="matrix(0.36 0 0 0.36 50 50)" id="29d20b46-2405-46a1-a85a-85db879655ec"  >
+	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  xlink:href="data:image/png;base64,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" x="-140" y="-140" width="280" height="280"></image>
+</g>
+</svg>

package/src/assets/icons/warning.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.0429 21H3.95707C2.41904 21 1.4566 19.3364 2.22326 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z"  stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+<path d="M12 9V13"  stroke="currentColor"  stroke-width="2" stroke-linecap="round"/>
+<path d="M12 17.0093L12.0094 16.9989"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/SocialMediaBar/SocialMediaBar.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { socialMediaLinks } from './socialLinks';
+import CustomIcon from 'components/customIcon/CustomIcon';
+import useThemeInfo from 'hooks/useThemeInfo';
+
+// Accept socialChannels as prop
+interface SocialChannel {
+  links?: {
+    type?: string;
+    channel?: string;
+    url?: string;
+  };
+}
+
+interface SocialMediaBarProps {
+  socialChannels?: SocialChannel[];
+}
+
+/**
+ * SocialMediaBar Component
+ * 
+ * @description Renders a horizontal bar of social media icons based on the provided socialChannels prop.
+ * Each icon uses the provided url and channel to determine the icon and link.
+ */
+const SocialMediaBar: React.FC<SocialMediaBarProps> = React.memo(({ socialChannels }) => {
+  const { shopDesign: { foreground } } = useThemeInfo()
+
+  // Map channel name to icon from socialMediaLinks
+  const getIconByChannel = (channel: string) => {
+    const found = socialMediaLinks.find(
+      (item) => item.key.replace('URL', '').toLowerCase() === channel.toLowerCase()
+    );
+    return found ? found.icon : undefined;
+  };
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {(socialChannels ?? [])
+        .filter((item) => !!item.links?.url && !!item.links?.channel)
+        .map((item, idx) => {
+          const { channel, url } = item.links!;
+          const Icon = getIconByChannel(channel!);
+          if (!Icon) return null;
+          return (
+            <a
+              key={channel + idx}
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block rounded-md p-[10px] transition-colors duration-100 ease-out"
+              style={{ backgroundColor: foreground }}
+            >
+              <CustomIcon as={Icon} w="20px" h="20px" />
+            </a>
+          );
+        })}
+    </div>
+  );
+});
+
+export default SocialMediaBar;
+
+/**
+ * Utility function to darken a hexadecimal color by a percentage
+ * 
+ * @param color - Hexadecimal color string (e.g., "#FFFFFF")
+ * @param percent - Percentage to darken the color (-100 to 100)
+ * @returns Darkened hexadecimal color string
+ */
+const darkenColor = (color: string, percent: number): string => {
+  let num = parseInt(color.slice(1), 16);
+  let amt = Math.round(2.55 * percent);
+  let R = (num >> 16) + amt;
+  let G = ((num >> 8) & 0x00ff) + amt;
+  let B = (num & 0x0000ff) + amt;
+
+  return (
+    '#' +
+    (
+      0x1000000 +
+      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+      (B < 255 ? (B < 1 ? 0 : B) : 255)
+    )
+      .toString(16)
+      .slice(1)
+  );
+};

package/src/components/SocialMediaBar/socialLinks.ts

@@ -0,0 +1,37 @@
+import AppIcons from "assets/icons/appIcons";
+import AppSocialMediaIcons from "assets/icons/social-media/appSocialMediaIcons";
+
+export interface SocialMediaLink {
+  link: string;
+  key: keyof ShopURLs; 
+  icon: React.ElementType; 
+}
+
+export interface ShopURLs {
+  discordURL?: string;
+  instagramURL?: string;
+  facebookURL?: string;
+  infoEmail?: string;
+  linkedinURL?: string;
+  tiktokURL?: string;
+  twitterURL?: string;
+  webURL?: string;
+  youtubeURL?: string;
+  telegramURL?: string;
+  messengerURL?: string;
+}
+
+// Array of social media links using your custom icons
+export const socialMediaLinks: SocialMediaLink[] = [
+  { link: "https://discord.gg/", key: "discordURL", icon: AppSocialMediaIcons.Discord },
+  { link: "https://instagram.com/", key: "instagramURL", icon: AppSocialMediaIcons.Instagram },
+  { link: "https://facebook.com/", key: "facebookURL", icon: AppSocialMediaIcons.Facebook },
+  { link: "mailto:", key: "infoEmail", icon: AppIcons.Letter },
+  { link: "https://linkedin.com/", key: "linkedinURL", icon: AppSocialMediaIcons.LinkedIn },
+  { link: "https://tiktok.com/@", key: "tiktokURL", icon: AppSocialMediaIcons.Tiktok },
+  { link: "https://twitter.com/", key: "twitterURL", icon: AppSocialMediaIcons.X },
+  { link: "http://", key: "webURL", icon: AppSocialMediaIcons.Globe },
+  { link: "https://youtube.com/@", key: "youtubeURL", icon: AppSocialMediaIcons.Youtube },
+  { link: "https://t.me/", key: "telegramURL", icon: AppSocialMediaIcons.Telegram },
+  { link: "https://m.me/", key: "messengerURL", icon: AppSocialMediaIcons.Messenger },
+];

package/src/components/StylesWrapper.tsx

@@ -0,0 +1,12 @@
+import { ChakraProvider } from "@chakra-ui/react"
+import { theme } from "theme"
+
+function StylesWrapper({ children }) {
+    return (
+        <ChakraProvider theme={theme}>
+            {children}
+        </ChakraProvider>
+    )
+}
+
+export default StylesWrapper

package/src/components/blog-posts/BlogPosts.tsx

@@ -0,0 +1,49 @@
+import Text from 'components/ui/Text'
+import BlogCard from './components/blog-card/BlogCard'
+import AppContainer from 'components/legacy-components/container/AppContainer'
+import useBlogs from './hooks/useBlogs'
+import Spinner from 'components/ui/Spinner'
+import { useCustomNavigate } from 'hooks/useCustomNavigate'
+
+export default function BlogPosts({ text }: { text: string }) {
+    const { navigate } = useCustomNavigate()
+    const { moreToDiscover } = useBlogs()
+
+    return (
+        <AppContainer props={{ margin: "auto", paddingBlock: { base: 6, md: "48px" } }}>
+            {moreToDiscover.isFetching && !moreToDiscover.blogs.length ? (
+                <div className='flex w-full items-center justify-center'>
+                    <Spinner />
+                </div>
+            ) : (
+                <div className="w-full">
+                    <div className="flex justify-between items-center mb-4">
+                        <Text className='text-xl font-bold'>{text}</Text>
+                        <Text className='text-sm font-bold text-text-link cursor-pointer' onClick={() => navigate("blogs")}>All Blogs</Text>
+                    </div>
+
+                    {!moreToDiscover.isFetching && moreToDiscover.blogs.length === 0 ? (
+                        <Text className='text-center'>No blogs found</Text>
+                    ) : (
+                        <div className='grid xl:grid-cols-4 md:grid-cols-3 grid-cols-1 lg:gap-6 gap-4'>
+                            {moreToDiscover.blogs.slice(0, 4).map((blog, index) => (
+                                <div className="px-1" key={blog.slug}>
+                                    <BlogCard
+                                        category={blog.category}
+                                        direction='column'
+                                        image={blog.image}
+                                        summary={blog.searchEngineSummary}
+                                        tags={blog.tags}
+                                        updatedAt={blog.createdAt}
+                                        title={blog.title}
+                                        slug={blog.slug}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            )}
+        </AppContainer>
+    )
+}

package/src/components/blog-posts/components/blog-card/BlogCard.tsx

@@ -0,0 +1,55 @@
+import useThemeInfo from 'hooks/useThemeInfo'
+import BlogContent from './BlogContent'
+import BlogImage from './BlogImage'
+import useResponsiveTags from 'components/blog-posts/hooks/useResponsiveTags'
+import { BlogDisplayProps } from 'components/blog-posts/utils/types'
+
+/**
+ * BlogCard - Displays a single blog post card with image, title, summary and tags
+ * @returns A styled blog card component
+ */
+export default function BlogCard(props: BlogDisplayProps) {
+    const { shopDesign: { foreground }, isDarkTheme } = useThemeInfo()
+
+    // Using our custom hook for responsive tag handling
+    const visibleTagsCount = useResponsiveTags()
+
+    const { image, category, updatedAt, title, summary, tags, isFeatured, direction, slug } = props
+
+    // Card height based on direction and featured status
+    const cardHeight = direction === 'column'
+        ? isFeatured
+            ? 'h-auto' // Featured cards need auto height to accommodate larger images
+            : 'h-auto md:h-[450px]' // Responsive height for regular column cards
+        : '' // Row cards use the defined heights in the flex container
+
+    return (
+        <div
+            className={`overflow-hidden rounded-lg ${cardHeight}`}
+            style={{
+                backgroundColor: (direction === "row" || isFeatured) ? foreground : "transparent",
+                border: (direction === "row" || isFeatured) ? "unset" : `1px solid ${foreground}`,
+            }}
+        >
+            <div className={`flex h-full flex-col ${direction === 'row' && 'md:flex-row h-auto md:h-[186px] lg:h-[226px]'}`}>
+                <BlogImage
+                    image={image}
+                    title={title}
+                    isFeatured={isFeatured}
+                    direction={direction}
+                />
+                <BlogContent
+                    category={category}
+                    updatedAt={updatedAt}
+                    title={title}
+                    summary={summary}
+                    tags={tags}
+                    isFeatured={isFeatured}
+                    direction={direction}
+                    isDarkTheme={isDarkTheme}
+                    visibleTagsCount={visibleTagsCount}
+                />
+            </div>
+        </div>
+    )
+}