Develop

2024-10-24 21:05:01 +00:00 · 2024-10-24 21:05:01 +00:00 · f9d8a67176
commit f9d8a67176
parent 0fdf7a9b99
197 changed files with 8145 additions and 7 deletions
--- a/public/chats/1.webp
+++ b/public/chats/1.webp
--- a/public/chats/2.webp
+++ b/public/chats/2.webp
--- a/public/chats/3.webp
+++ b/public/chats/3.webp
--- a/public/chats/Avatar-10.webp
+++ b/public/chats/Avatar-10.webp
--- a/public/chats/Avatar-2.webp
+++ b/public/chats/Avatar-2.webp
--- a/public/chats/Avatar-4.webp
+++ b/public/chats/Avatar-4.webp
--- a/public/chats/Avatar-6.webp
+++ b/public/chats/Avatar-6.webp
--- a/public/chats/Avatar-8.webp
+++ b/public/chats/Avatar-8.webp
--- a/public/chats/CareerWork.webp
+++ b/public/chats/CareerWork.webp
--- a/public/chats/Customer1.webp
+++ b/public/chats/Customer1.webp
--- a/public/chats/Customer3.webp
+++ b/public/chats/Customer3.webp
--- a/public/chats/Customer4.webp
+++ b/public/chats/Customer4.webp
--- a/public/chats/Customer5.webp
+++ b/public/chats/Customer5.webp
--- a/public/chats/Customer6.webp
+++ b/public/chats/Customer6.webp
--- a/public/chats/Customer9.webp
+++ b/public/chats/Customer9.webp
--- a/public/chats/FutureTelling.webp
+++ b/public/chats/FutureTelling.webp
--- a/public/chats/GuidanceLifePath.webp
+++ b/public/chats/GuidanceLifePath.webp
--- a/public/chats/LoveRelationship.webp
+++ b/public/chats/LoveRelationship.webp
--- a/public/chats/angel.webp
+++ b/public/chats/angel.webp
--- a/public/chats/answers_hub_bg.webp
+++ b/public/chats/answers_hub_bg.webp
--- a/public/chats/astrologers-card-mobile.webp
+++ b/public/chats/astrologers-card-mobile.webp
--- a/public/chats/astrologers.webp
+++ b/public/chats/astrologers.webp
--- a/public/chats/big_thumbs_up.webp
+++ b/public/chats/big_thumbs_up.webp
--- a/public/chats/bustle.webp
+++ b/public/chats/bustle.webp
--- a/public/chats/christofer.webp
+++ b/public/chats/christofer.webp
--- a/public/chats/cosmopolitian.webp
+++ b/public/chats/cosmopolitian.webp
--- a/public/chats/done.svg
+++ b/public/chats/done.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.3333 0H2.66667C1.2 0 0 1.2 0 2.66667V21.3333C0 22.8 1.2 24 2.66667 24H21.3333C22.8 24 24 22.8 24 21.3333V2.66667C24 1.2 22.8 0 21.3333 0ZM22 22H2V2H22V22ZM19.3333 7.33333L18.1067 6.10667L9.32 14.8933L5.88 11.4667L4.66667 12.6667L9.32 17.3333L19.3333 7.33333Z" fill="#E2E4E7"/>
+</svg>
--- a/public/chats/done.webp
+++ b/public/chats/done.webp
--- a/public/chats/female.webp
+++ b/public/chats/female.webp
--- a/public/chats/hanna.webp
+++ b/public/chats/hanna.webp
--- a/public/chats/hypebae.webp
+++ b/public/chats/hypebae.webp
--- a/public/chats/life_goal_pic.webp
+++ b/public/chats/life_goal_pic.webp
--- a/public/chats/male.webp
+++ b/public/chats/male.webp
--- a/public/chats/new-york-times.webp
+++ b/public/chats/new-york-times.webp
--- a/public/chats/orbited_heart.webp
+++ b/public/chats/orbited_heart.webp
--- a/public/chats/profile-intro-star.svg
+++ b/public/chats/profile-intro-star.svg
@ -0,0 +1,12 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" role='img'>
+    <title>Shining star</title>
+    <path
+        d="M7 0L7.36953 1.37245C8.06 3.93687 10.0631 5.94 12.6276 6.63047L14 7L12.6276 7.36953C10.0631 8.06 8.06 10.0631 7.36953 12.6276L7 14L6.63047 12.6276C5.94 10.0631 3.93687 8.06 1.37245 7.36953L0 7L1.37245 6.63047C3.93687 5.94 5.94 3.93687 6.63047 1.37245L7 0Z"
+        fill="#FAFAFA" />
+    <path
+        d="M1.69208 12.4598C1.37557 12.8042 0.990482 12.986 0.53418 13.008C0.990482 13.0301 1.37557 13.2146 1.69208 13.5562C2.01387 13.9005 2.16948 14.311 2.16948 14.7875C2.16948 14.311 2.32246 13.9005 2.63897 13.5562C2.95548 13.2146 3.34057 13.0301 3.79688 13.008C3.34057 12.986 2.95548 12.8042 2.63897 12.4598C2.32246 12.1155 2.16948 11.7051 2.16948 11.2285C2.16948 11.7051 2.00859 12.1155 1.69208 12.4598Z"
+        fill="#FAFAFA" />
+    <path
+        d="M11.3542 2.04774C11.0377 2.39207 10.6526 2.57387 10.1963 2.59591C10.6526 2.61795 11.0377 2.80251 11.3542 3.14409C11.676 3.48842 11.8316 3.89886 11.8316 4.37542C11.8316 3.89886 11.9846 3.48842 12.3011 3.14409C12.6176 2.80251 13.0027 2.61795 13.459 2.59591C13.0027 2.57387 12.6176 2.39207 12.3011 2.04774C11.9846 1.7034 11.8316 1.29296 11.8316 0.816406C11.8316 1.29296 11.6707 1.7034 11.3542 2.04774Z"
+        fill="#FAFAFA" />
+</svg>
--- a/public/chats/refinery29.webp
+++ b/public/chats/refinery29.webp
--- a/public/chats/resonate-2.webp
+++ b/public/chats/resonate-2.webp
--- a/public/chats/resonate-3.webp
+++ b/public/chats/resonate-3.webp
--- a/public/chats/resonate-4.webp
+++ b/public/chats/resonate-4.webp
--- a/public/chats/smile-people.webp
+++ b/public/chats/smile-people.webp
--- a/public/chats/sprites.svg
+++ b/public/chats/sprites.svg
@ -0,0 +1,120 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
+    <defs>
+        <symbol viewBox="0 0 24 24" id="arrow-rounded">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.87003 12.8485C7.4014 12.3799 7.4014 11.6201 7.87003 11.1515L14.2286 4.79289C14.6191 4.40237 15.2523 4.40237 15.6428 4.79289C16.0333 5.18342 16.0333 5.81658 15.6428 6.20711L9.84993 12L15.6428 17.7929C16.0333 18.1834 16.0333 18.8166 15.6428 19.2071C15.2523 19.5976 14.6191 19.5976 14.2286 19.2071L7.87003 12.8485Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 16 10" id="arrow-simple">
+            <path d="M8 9.49995L0.5 1.99995L1.55 0.949951L8 7.39995L14.45 0.949951L15.5 1.99995L8 9.49995Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="arrow">
+            <path d="M10.664 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8-8-8z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="burger">
+            <path d="M0.923 3.231c-0.245 0-0.48 0.092-0.653 0.257s-0.27 0.387-0.27 0.62c0 0.233 0.097 0.456 0.27 0.62s0.408 0.257 0.653 0.257h22.154c0.245 0 0.48-0.092 0.653-0.257s0.27-0.387 0.27-0.62c0-0.233-0.097-0.456-0.27-0.62s-0.408-0.257-0.653-0.257h-22.154zM0 12c0-0.233 0.097-0.456 0.27-0.62s0.408-0.257 0.653-0.257h22.154c0.245 0 0.48 0.092 0.653 0.257s0.27 0.387 0.27 0.62c0 0.233-0.097 0.456-0.27 0.62s-0.408 0.257-0.653 0.257h-22.154c-0.245 0-0.48-0.092-0.653-0.257s-0.27-0.387-0.27-0.62zM0 19.892c0-0.233 0.097-0.456 0.27-0.62s0.408-0.257 0.653-0.257h22.154c0.245 0 0.48 0.092 0.653 0.257s0.27 0.387 0.27 0.62c0 0.233-0.097 0.456-0.27 0.62s-0.408 0.257-0.653 0.257h-22.154c-0.245 0-0.48-0.092-0.653-0.257s-0.27-0.387-0.27-0.62z"></path>
+        </symbol>
+        <symbol viewBox="0 0 768 768" id="chat-bubble">
+            <path d="M100.375 127.716c-3.943-0.047-7.81 1.078-11.111 3.233s-5.886 5.239-7.427 8.865c-1.541 3.625-1.969 7.626-1.229 11.494s2.615 7.43 5.387 10.232c2.77 2.801 6.313 4.718 10.177 5.503s7.873 0.406 11.52-1.090c3.647-1.496 6.766-4.042 8.962-7.313s3.368-7.12 3.368-11.059c0.031-2.598-0.454-5.175-1.426-7.583s-2.416-4.601-4.243-6.448c-1.828-1.847-4.004-3.314-6.404-4.315s-4.973-1.516-7.573-1.516z"></path>
+            <path d="M169.822 127.715c-3.932 0-7.777 1.165-11.046 3.347s-5.818 5.285-7.324 8.915c-1.505 3.629-1.898 7.623-1.131 11.476s2.661 7.392 5.442 10.171c2.78 2.778 6.324 4.67 10.18 5.436s7.855 0.373 11.488-1.13c3.634-1.504 6.738-4.049 8.923-7.315s3.351-7.107 3.351-11.035c0-2.609-0.514-5.191-1.513-7.601s-2.464-4.6-4.31-6.444c-1.846-1.845-4.038-3.308-6.451-4.306s-4.998-1.511-7.609-1.511z"></path>
+            <path d="M239.202 127.716c-3.932 0-7.777 1.165-11.046 3.348s-5.818 5.285-7.323 8.914c-1.505 3.629-1.898 7.623-1.131 11.477s2.661 7.392 5.442 10.171c2.78 2.778 6.324 4.67 10.18 5.436s7.855 0.373 11.488-1.13c3.634-1.503 6.738-4.049 8.923-7.316s3.351-7.107 3.351-11.035c0.031-2.618-0.461-5.215-1.449-7.639s-2.452-4.626-4.304-6.478c-1.853-1.851-4.058-3.313-6.485-4.3s-5.026-1.479-7.646-1.447z"></path>
+            <path d="M634.882 640.096c0 7.524-2.993 14.742-8.318 20.064s-12.553 8.311-20.083 8.311h-269.849c-3.23 0.242-6.474 0.242-9.705 0-3.225 0.36-6.481 0.36-9.706 0h-246.649c-7.368-0.247-14.352-3.344-19.476-8.64s-7.986-12.372-7.982-19.736v-421.624h591.768v6.385h23.671v-97.188c0.004-6.808-1.359-13.548-4.003-19.823-2.64-6.275-6.513-11.96-11.389-16.718-4.872-4.759-10.649-8.496-16.99-10.992s-13.116-3.701-19.931-3.544h-535.669c-13.56 0-26.564 5.381-36.154 14.96s-14.975 22.57-14.975 36.117v512.427c-0.032 6.725 1.268 13.394 3.824 19.617s6.317 11.882 11.068 16.652c4.751 4.766 10.398 8.549 16.616 11.131s12.886 3.913 19.622 3.913h535.669c6.834 0.157 13.63-1.053 19.985-3.568 6.356-2.51 12.145-6.266 17.021-11.053 4.876-4.782 8.746-10.496 11.373-16.798 2.628-6.305 3.967-13.069 3.931-19.896v-62.902h-23.671v62.902zM43.114 127.669c0.236-7.2 3.206-14.040 8.304-19.134s11.947-8.059 19.153-8.296h535.67c7.414-0.067 14.558 2.766 19.911 7.891 5.35 5.125 8.483 12.137 8.729 19.538v67.157h-591.768v-67.157z"></path>
+            <path d="M699.088 258.632h-333.756c-13.142 0-25.75 5.199-35.066 14.461s-14.58 21.831-14.643 34.961v315.919c0.004 2.217 0.656 4.382 1.875 6.231s2.954 3.298 4.99 4.175c1.481 0.337 3.017 0.337 4.497 0 2.792 0.039 5.496-0.975 7.575-2.836l101.786-89.385h262.741c13.144-0.063 25.726-5.323 34.997-14.628 9.27-9.309 14.476-21.901 14.476-35.033v-184.444c-0.063-13.089-5.295-25.623-14.558-34.878-9.266-9.255-21.811-14.482-34.915-14.544zM725.837 493.445c0 7.085-2.816 13.883-7.833 18.893s-11.82 7.825-18.917 7.825h-267.003c-2.769 0.086-5.436 1.085-7.574 2.84l-85.927 75.67v-290.619c0-7.087 2.818-13.883 7.834-18.895s11.82-7.827 18.914-7.827h333.756c7.077 0.062 13.844 2.897 18.845 7.895 5.005 4.998 7.84 11.758 7.903 18.826v185.391z"></path>
+            <path d="M520.835 429.478h-102.732c-3.141 0-6.149 1.245-8.369 3.462-2.221 2.221-3.466 5.224-3.466 8.362s1.245 6.145 3.466 8.362c2.221 2.217 5.228 3.462 8.369 3.462h102.732c3.137 0 6.149-1.245 8.365-3.462 2.221-2.217 3.47-5.225 3.47-8.362s-1.25-6.141-3.47-8.362c-2.217-2.217-5.228-3.462-8.365-3.462z"></path>
+            <path d="M646.036 349.722h-227.948c-2.993 0.061-5.847 1.276-7.966 3.391s-3.333 4.967-3.395 7.959c0 3.011 1.198 5.897 3.329 8.026s5.021 3.325 8.033 3.325h227.948c1.661 0.221 3.349 0.065 4.939-0.456s3.039-1.394 4.245-2.552c1.206-1.159 2.135-2.575 2.718-4.142 0.58-1.567 0.803-3.245 0.646-4.909-0.090-1.535-0.486-3.036-1.175-4.413-0.685-1.376-1.641-2.6-2.815-3.595s-2.538-1.741-4.006-2.195c-1.472-0.453-3.020-0.603-4.55-0.439z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="chat-cloud">
+            <path d="M11.9991 3C10.4377 2.99947 8.903 3.40519 7.54582 4.17727C6.18864 4.94936 5.05568 6.06125 4.25826 7.4037C3.46084 8.74615 3.0264 10.273 2.99762 11.8341C2.96884 13.3953 3.34672 14.9371 4.09412 16.308L3.02912 20.043C2.99165 20.1742 2.99065 20.313 3.02624 20.4447C3.06182 20.5764 3.13264 20.6959 3.23108 20.7903C3.32951 20.8847 3.45183 20.9505 3.58487 20.9806C3.71792 21.0107 3.85664 21.0039 3.98612 20.961L7.49312 19.7925C8.68841 20.4832 10.0266 20.8897 11.4041 20.9805C12.7816 21.0713 14.1616 20.844 15.4372 20.3162C16.7128 19.7884 17.8499 18.9742 18.7605 17.9366C19.6711 16.899 20.3308 15.6658 20.6886 14.3325C21.0464 12.9992 21.0926 11.6014 20.8238 10.2473C20.555 8.89323 19.9782 7.61914 19.1382 6.52362C18.2982 5.4281 17.2174 4.54051 15.9795 3.9295C14.7415 3.3185 13.3796 3.00046 11.9991 3V3ZM8.99912 10.5C8.99912 10.3011 9.07814 10.1103 9.21879 9.96967C9.35945 9.82902 9.55021 9.75 9.74912 9.75H14.2491C14.448 9.75 14.6388 9.82902 14.7795 9.96967C14.9201 10.1103 14.9991 10.3011 14.9991 10.5C14.9991 10.6989 14.9201 10.8897 14.7795 11.0303C14.6388 11.171 14.448 11.25 14.2491 11.25H9.74912C9.55021 11.25 9.35945 11.171 9.21879 11.0303C9.07814 10.8897 8.99912 10.6989 8.99912 10.5ZM9.74912 12.75H12.7491C12.948 12.75 13.1388 12.829 13.2795 12.9697C13.4201 13.1103 13.4991 13.3011 13.4991 13.5C13.4991 13.6989 13.4201 13.8897 13.2795 14.0303C13.1388 14.171 12.948 14.25 12.7491 14.25H9.74912C9.55021 14.25 9.35945 14.171 9.21879 14.0303C9.07814 13.8897 8.99912 13.6989 8.99912 13.5C8.99912 13.3011 9.07814 13.1103 9.21879 12.9697C9.35945 12.829 9.55021 12.75 9.74912 12.75V12.75Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 11 8" id="check-rounded">
+            <path d="M1.68945 3.81796L4.27358 6.61744C4.51505 6.87902 4.92879 6.87745 5.16826 6.61404L9.77832 1.54297" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+        </symbol>
+        <symbol viewBox="0 0 18 18" id="check">
+            <path d="M6.74987 11.9379L16.4992 3L18 4.37476L6.74987 14.6874L0 8.5L1.49974 7.12524L6.74987 11.9379Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 28 28" id="clock">
+            <path d="M13.5437 14.7851L13.5442 14.7854C14.5918 15.3897 15.3744 15.8195 16.1549 16.2482L16.1623 16.2522C16.945 16.6821 17.7265 17.1114 18.775 17.7165C19.2096 17.9674 19.7637 17.8252 20.0167 17.3872C20.2677 16.9528 20.1254 16.3984 19.6874 16.1454L19.6875 16.1454L19.6845 16.1438L14.9119 13.4706V7.7C14.9119 7.19636 14.5039 6.78745 14 6.78745C13.4961 6.78745 13.0879 7.19597 13.0879 7.69955V13.9998C13.0879 14.3395 13.274 14.6288 13.5437 14.7851ZM14 1.5C7.10433 1.5 1.5 7.10421 1.5 14C1.5 20.8958 7.10421 26.5 14 26.5C20.8958 26.5 26.5 20.8958 26.5 14C26.5 7.10421 20.8958 1.5 14 1.5ZM14 3.32421C19.9042 3.32421 24.6757 8.09601 24.6757 13.9999C24.6757 19.9037 19.9039 24.6756 14 24.6756C8.09614 24.6756 3.32432 19.9037 3.32432 13.9999C3.32432 8.09602 8.09614 3.32421 14 3.32421Z" stroke="currentColor" stroke-width="0.5"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="cross-rounded">
+            <path d="M18.3 5.71C17.91 5.32 17.28 5.32 16.89 5.71L12 10.59L7.11 5.7C6.72 5.31 6.09 5.31 5.7 5.7C5.31 6.09 5.31 6.72 5.7 7.11L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.11C18.68 6.73 18.68 6.09 18.3 5.71Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="cross">
+            <path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z"></path>
+        </symbol>
+        <symbol viewBox="0 0 32 33" id="envelope">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M25.5214 23.1742C25.6897 23.1739 25.8511 23.107 25.9701 22.988C26.0891 22.869 26.156 22.7076 26.1562 22.5393V10.5482L16.4511 18.2551C16.3228 18.3571 16.1638 18.4126 15.9999 18.4126C15.8361 18.4126 15.677 18.3571 15.5488 18.2551L5.84375 10.5482V22.5393C5.84393 22.7076 5.91087 22.869 6.02988 22.988C6.14889 23.107 6.31025 23.174 6.47856 23.1742H25.5214ZM24.7327 9.82593L16 16.7607L7.26719 9.82593H24.7327Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 7 14" id="facebook">
+            <path d="M1.78694 14V7.43079H0V5.06556H1.78694V3.04535C1.78694 1.45785 2.84249 0 5.27471 0C6.25947 0 6.98766 0.09177 6.98766 0.09177L6.93028 2.30049C6.93028 2.30049 6.18765 2.29347 5.37725 2.29347C4.50015 2.29347 4.35963 2.68638 4.35963 3.33851V5.06556H7L6.88512 7.43079H4.35963V14H1.78694Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 20 20" id="female">
+            <path d="M10.0223 12.0118L10.0223 18.8746M12.38 16.3872L7.62061 16.3872M6.87389 10.4387C5.15923 8.72403 5.15923 5.94402 6.87389 4.22936C8.58855 2.51469 11.3686 2.51469 13.0832 4.22936C14.7979 5.94402 14.7979 8.72403 13.0832 10.4387C11.3686 12.1534 8.58855 12.1534 6.87389 10.4387Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="hands-holding-heart">
+            <path d="M22.77 10.944c-0.15-0.056-0.311-0.081-0.474-0.074-0.318 0.015-0.617 0.156-0.832 0.393l-2.876 3.169c-0.201 0.221-0.543 0.238-0.764 0.037s-0.238-0.543-0.037-0.764l2.876-3.169c0 0 0 0 0 0 0.408-0.449 0.977-0.718 1.582-0.747s1.197 0.185 1.646 0.594c0.197 0.18 0.234 0.476 0.087 0.698l-7.060 10.673c-0.165 0.249-0.501 0.318-0.75 0.153s-0.318-0.501-0.153-0.75l6.756-10.214z"></path>
+            <path d="M17.633 14.273c-0.111-0.102-0.258-0.155-0.407-0.149-0.149 0.006-0.289 0.069-0.392 0.178l-3.264 3.596c-0.612 0.645-0.801 0.86-0.903 1.204-0.055 0.183-0.089 0.423-0.107 0.805s-0.018 0.873-0.018 1.551c0 0.299-0.242 0.541-0.541 0.541s-0.541-0.242-0.541-0.541v-0.014c0-0.661 0-1.177 0.019-1.587 0.019-0.414 0.059-0.757 0.151-1.065 0.184-0.617 0.563-1.016 1.096-1.577 0.018-0.019 0.036-0.038 0.055-0.058l3.261-3.593c0.297-0.318 0.708-0.505 1.142-0.522s0.858 0.138 1.179 0.432c0.321 0.293 0.514 0.701 0.537 1.135s-0.124 0.861-0.411 1.187l-0.005 0.006-2.114 2.33c-0.201 0.221-0.543 0.238-0.764 0.037s-0.238-0.543-0.037-0.764l2.111-2.327c0.098-0.113 0.149-0.26 0.141-0.411-0.008-0.152-0.075-0.293-0.187-0.395z"></path>
+            <path d="M0.873 9.923c0.282-0.102 0.582-0.147 0.882-0.133s0.594 0.088 0.865 0.216c0.271 0.128 0.515 0.309 0.716 0.531 0 0-0 0 0 0l2.876 3.169c0.201 0.221 0.184 0.564-0.037 0.764s-0.564 0.184-0.764-0.037l-2.876-3.169c-0.106-0.117-0.234-0.212-0.377-0.279s-0.297-0.106-0.454-0.113c-0.157-0.008-0.315 0.016-0.463 0.070-0.004 0.001-0.007 0.003-0.011 0.004l6.756 10.214c0.165 0.249 0.096 0.585-0.153 0.75s-0.585 0.096-0.75-0.153l-7.060-10.673c-0.147-0.222-0.11-0.519 0.087-0.698 0.222-0.202 0.481-0.359 0.763-0.461z"></path>
+            <path d="M5.627 13.461c0.325-0.296 0.753-0.451 1.193-0.431s0.851 0.216 1.147 0.541c0 0 0 0 0 0l3.255 3.586c0.018 0.019 0.037 0.039 0.055 0.058 0.534 0.561 0.913 0.96 1.097 1.577 0.092 0.309 0.132 0.651 0.151 1.065 0.019 0.411 0.019 0.926 0.019 1.587v0.014c0 0.299-0.242 0.541-0.541 0.541s-0.541-0.242-0.541-0.541c0-0.678-0-1.169-0.018-1.551s-0.052-0.622-0.107-0.805c-0.103-0.344-0.291-0.559-0.904-1.204l-0.009-0.009-3.259-3.591c-0.102-0.113-0.245-0.18-0.396-0.187s-0.299 0.046-0.412 0.149c-0.113 0.103-0.18 0.246-0.187 0.4s0.047 0.303 0.149 0.416c0 0-0 0 0 0l2.115 2.33c0.201 0.221 0.184 0.564-0.037 0.764s-0.564 0.184-0.764-0.037l-2.115-2.33c-0.295-0.325-0.449-0.755-0.429-1.194s0.214-0.852 0.539-1.148z"></path>
+            <path d="M5.515 5.57c0.050-1.953 1.585-3.57 3.573-3.57 1.081 0 2.147 0.47 2.91 1.136 0.763-0.667 1.829-1.136 2.91-1.136 1.987 0 3.524 1.616 3.574 3.57v0c0.052 2.062-1.303 3.942-2.684 5.327-1.402 1.407-2.951 2.424-3.521 2.766-0.171 0.103-0.385 0.103-0.557 0-0.571-0.342-2.12-1.359-3.522-2.766-1.381-1.386-2.735-3.266-2.683-5.328v-0zM6.597 5.597c-0.040 1.593 1.029 3.192 2.368 4.537 1.131 1.135 2.372 2.005 3.033 2.428 0.661-0.424 1.903-1.295 3.033-2.429 1.34-1.344 2.409-2.944 2.368-4.536zM17.401 5.597c-0.036-1.406-1.13-2.515-2.492-2.515-0.944 0-1.925 0.507-2.501 1.172-0.103 0.119-0.252 0.187-0.409 0.187s-0.306-0.068-0.409-0.186c-0.577-0.665-1.558-1.172-2.502-1.172-1.362 0-2.455 1.109-2.491 2.515z"></path>
+        </symbol>
+        <symbol viewBox="0 0 14 14" id="info">
+            <path d="M6.66732 1.66602C5.25283 1.66602 3.89627 2.22792 2.89608 3.22811C1.89589 4.22831 1.33398 5.58486 1.33398 6.99935C1.33398 8.41384 1.89589 9.77039 2.89608 10.7706C3.89627 11.7708 5.25283 12.3327 6.66732 12.3327C8.08181 12.3327 9.43836 11.7708 10.4386 10.7706C11.4387 9.77039 12.0007 8.41384 12.0007 6.99935C12.0007 5.58486 11.4387 4.22831 10.4386 3.22811C9.43836 2.22792 8.0818 1.66602 6.66732 1.66602ZM6.66732 0.332682C10.3493 0.332682 13.334 3.31735 13.334 6.99935C13.334 10.6813 10.3493 13.666 6.66732 13.666C2.98532 13.666 0.000650145 10.6813 0.000649823 6.99935C0.000649501 3.31735 2.98532 0.332683 6.66732 0.332682ZM7.33398 4.33268L6.00065 4.33268L6.00065 2.99935L7.33398 2.99935L7.33398 4.33268ZM7.33398 10.9993L6.00065 10.9993L6.00065 5.66602L7.33398 5.66602L7.33398 10.9993Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 16 16" id="instagram">
+            <path d="M8.00429 3.95732C5.73286 3.95732 3.90072 5.76084 3.90072 7.99677C3.90072 10.2327 5.73286 12.0362 8.00429 12.0362C10.2757 12.0362 12.1079 10.2327 12.1079 7.99677C12.1079 5.76084 10.2757 3.95732 8.00429 3.95732ZM8.00429 10.6229C6.53644 10.6229 5.33644 9.44521 5.33644 7.99677C5.33644 6.54834 6.53286 5.3706 8.00429 5.3706C9.47572 5.3706 10.6721 6.54834 10.6721 7.99677C10.6721 9.44521 9.47215 10.6229 8.00429 10.6229ZM13.2329 3.79209C13.2329 4.31592 12.8043 4.73428 12.2757 4.73428C11.7436 4.73428 11.3186 4.3124 11.3186 3.79209C11.3186 3.27178 11.7471 2.8499 12.2757 2.8499C12.8043 2.8499 13.2329 3.27178 13.2329 3.79209ZM15.9507 4.74834C15.89 3.48623 15.5971 2.36826 14.6579 1.44717C13.7221 0.526074 12.5864 0.237793 11.3043 0.174512C9.98286 0.100684 6.02215 0.100684 4.70072 0.174512C3.42215 0.234277 2.28644 0.522558 1.34715 1.44365C0.407868 2.36474 0.118583 3.48271 0.0542968 4.74482C-0.0207031 6.0456 -0.0207031 9.94443 0.0542968 11.2452C0.115011 12.5073 0.407868 13.6253 1.34715 14.5464C2.28644 15.4675 3.41858 15.7558 4.70072 15.819C6.02215 15.8929 9.98286 15.8929 11.3043 15.819C12.5864 15.7593 13.7221 15.471 14.6579 14.5464C15.5936 13.6253 15.8864 12.5073 15.9507 11.2452C16.0257 9.94443 16.0257 6.04912 15.9507 4.74834ZM14.2436 12.6409C13.965 13.33 13.4257 13.8608 12.7221 14.1386C11.6686 14.5499 9.16858 14.455 8.00429 14.455C6.84001 14.455 4.33644 14.5464 3.28644 14.1386C2.58644 13.8643 2.04715 13.3335 1.76501 12.6409C1.34715 11.6038 1.44358 9.14287 1.44358 7.99677C1.44358 6.85068 1.35072 4.38623 1.76501 3.35263C2.04358 2.66357 2.58287 2.13271 3.28644 1.85498C4.34001 1.44365 6.84001 1.53857 8.00429 1.53857C9.16858 1.53857 11.6721 1.44717 12.7221 1.85498C13.4221 2.1292 13.9614 2.66006 14.2436 3.35263C14.6614 4.38974 14.565 6.85068 14.565 7.99677C14.565 9.14287 14.6614 11.6073 14.2436 12.6409Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 15 14" id="lock">
+            <path d="M11.1458 6H10.4167V4.66667C10.4167 3.2 9.10417 2 7.5 2C5.89583 2 4.58333 3.2 4.58333 4.66667V6H3.85417C3.48958 6 3.125 6.33333 3.125 6.66667V11.3333C3.125 11.6667 3.48958 12 3.85417 12H11.1458C11.5104 12 11.875 11.6667 11.875 11.3333V6.66667C11.875 6.33333 11.5104 6 11.1458 6ZM8.22917 10.6667H6.77083L7.0625 9.2C6.69792 9.06667 6.40625 8.66667 6.40625 8.33333C6.40625 7.8 6.91667 7.33333 7.5 7.33333C8.08333 7.33333 8.59375 7.8 8.59375 8.33333C8.59375 8.73333 8.375 9.06667 7.9375 9.2L8.22917 10.6667ZM8.95833 6H6.04167V4.66667C6.04167 3.93333 6.69792 3.33333 7.5 3.33333C8.30208 3.33333 8.95833 3.93333 8.95833 4.66667V6Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="magnifying-glass">
+            <path d="M0.846679 9.7846C0.846679 4.7108 4.97126 0.586217 10.0451 0.586217C15.1189 0.586217 19.2434 4.7108 19.2434 9.7846C19.2434 11.7621 18.5993 13.5928 17.5258 15.0731L22.69 20.2486C22.9951 20.565 23.1533 20.9831 23.1533 21.4351C23.1533 22.373 22.464 23.0963 21.5035 23.0963C21.0628 23.0963 20.6221 22.9494 20.3057 22.6217L15.1076 17.4235C13.6611 18.4067 11.9322 18.983 10.0451 18.983C4.97126 18.983 0.846679 14.8584 0.846679 9.7846ZM3.24233 9.7846C3.24233 13.5363 6.28209 16.5873 10.0451 16.5873C13.7967 16.5873 16.8478 13.5363 16.8478 9.7846C16.8478 6.03292 13.7967 2.98186 10.0451 2.98186C6.28209 2.98186 3.24233 6.03292 3.24233 9.7846Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 20 20" id="male">
+            <path d="M11.5819 3.52148L16.3413 3.52148C16.3997 3.52148 16.4471 3.56888 16.4471 3.62734V8.3867M11.2202 8.74847L16.0729 3.89573M12.3341 12.0871C12.3341 14.512 10.3683 16.4778 7.9434 16.4778C5.5185 16.4778 3.55273 14.512 3.55273 12.0871C3.55273 9.66221 5.5185 7.69644 7.9434 7.69644C10.3683 7.69644 12.3341 9.66221 12.3341 12.0871Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
+        </symbol>
+        <symbol viewBox="0 0 16 16" id="nebula-small">
+            <path d="M9.22702 10.3677L7.28777 10.6881L5.9498 9.21636L9.84706 8.44801L13.5167 11.7337V0H15.5V16L9.22702 10.3677Z"></path>
+            <path d="M6.7224 5.63226L8.81094 5.29077L9.90172 6.80556L6.10317 7.55198L2.4833 4.2663V16H0.5V0L6.7224 5.63226Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 141 20" id="nebula">
+            <path d="M41.3194 0H29.0436L29.0338 19.9998H41.3194V17.8675H31.4013V10.5883H37.9856V8.38548H31.4013V2.13234H41.3194V0ZM86.4104 0V13.4158C86.4104 15.8908 84.1967 17.8714 81.4366 17.8714C78.658 17.8714 76.4922 15.7674 76.4922 13.4726V12.33H76.4825V0.0381765L76.4922 0.00880653H74.115V13.2826C74.2883 18.4236 77.9961 19.9949 81.4269 19.9949C85.2502 20.1379 88.6232 17.2341 88.7671 13.406V0H86.4104ZM101.806 17.8665V0H99.4382V19.9998H112.164V17.8665H101.806ZM136.027 11.7328L140.415 19.9998H138.135L135.049 14.2382L122.601 17.7813L121.423 19.991H119.141L121.298 15.9623L136.027 11.7328ZM129.778 0L135.001 9.83838L122.678 13.3805L129.778 0ZM129.778 4.32344L126.769 9.99992L132.012 8.50493L129.778 4.32344ZM8.56106 13.36L10.8884 12.9596L18.4166 19.9998V0H16.0364V14.667L11.6325 10.5599L6.95536 11.5204L8.56106 13.36ZM10.389 6.61342L7.88255 7.04028L0.415039 0V19.9998H2.79521V5.33283L7.13942 9.4399L11.6981 8.50689L10.389 6.61342ZM51.8153 0H57.0955C60.7074 0 63.2089 1.38338 63.2089 4.89912C63.2089 6.87776 62.27 8.63612 60.6124 9.24117V9.3655C62.739 9.83642 64.2243 11.4117 64.2243 14.1501C64.2243 18.079 61.4554 19.9998 57.4979 19.9998H51.8153V0ZM56.7117 8.52059C59.74 8.52059 60.9854 7.26252 60.9854 5.23493C60.9854 2.9009 59.5677 2.02661 56.8077 2.02661H54.0672V8.52059H56.7117ZM57.1719 17.9928C60.21 17.9928 62.0017 16.7631 62.0017 14.0629C62.0017 11.5948 60.2766 10.4708 57.1719 10.4708H54.077V17.9928H57.1719Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 20 20" id="question-circled">
+            <path d="M10.0002 3.33337C8.23205 3.33337 6.53636 4.03575 5.28612 5.286C4.03587 6.53624 3.33349 8.23193 3.33349 10C3.33349 11.7682 4.03587 13.4638 5.28612 14.7141C6.53636 15.9643 8.23205 16.6667 10.0002 16.6667C11.7683 16.6667 13.464 15.9643 14.7142 14.7141C15.9644 13.4638 16.6668 11.7682 16.6668 10C16.6668 8.23193 15.9644 6.53624 14.7142 5.28599C13.464 4.03575 11.7683 3.33337 10.0002 3.33337ZM10.0002 1.66671C14.6027 1.66671 18.3335 5.39754 18.3335 10C18.3335 14.6025 14.6027 18.3334 10.0002 18.3334C5.39766 18.3334 1.66683 14.6025 1.66683 10C1.66683 5.39754 5.39766 1.66671 10.0002 1.66671Z"></path>
+            <path d="M9.34719 12.7106L9.34719 11.8281C9.34719 11.4183 9.41011 11.0769 9.53595 10.8037C9.6618 10.5306 9.82434 10.2942 10.0236 10.0946C10.2333 9.89494 10.4483 9.71108 10.6685 9.54298C10.8993 9.36437 11.1142 9.18577 11.3135 9.00716C11.5232 8.81805 11.691 8.60267 11.8169 8.36103C11.9427 8.10888 12.0056 7.80946 12.0056 7.46275C12.0056 7.32617 11.9846 7.16332 11.9427 6.97421C11.9112 6.77459 11.8273 6.58548 11.691 6.40688C11.5652 6.21776 11.3712 6.06017 11.109 5.9341C10.8468 5.80802 10.5007 5.74499 10.0708 5.74499C9.58839 5.74499 9.20562 5.82378 8.92247 5.98138C8.63933 6.12846 8.42434 6.31757 8.27753 6.54871C8.1412 6.77985 8.04682 7.00573 7.99438 7.22636C7.95243 7.44699 7.93146 7.63085 7.93146 7.77794C7.93146 7.85148 7.93146 7.92502 7.93146 7.99857C7.93146 8.0616 7.9367 8.13515 7.94719 8.2192L6.54719 8.2192C6.5367 8.17717 6.52622 8.11414 6.51573 8.03009C6.50524 7.93553 6.5 7.81996 6.5 7.68338C6.5 7.44174 6.5367 7.17908 6.61011 6.89542C6.68352 6.61175 6.80412 6.32808 6.97191 6.04441C7.1397 5.76074 7.36517 5.50334 7.64831 5.27221C7.93146 5.04107 8.27753 4.85721 8.68652 4.72063C9.10599 4.57354 9.59888 4.5 10.1652 4.5C10.679 4.5 11.1247 4.56304 11.5022 4.68911C11.8798 4.80468 12.1944 4.96753 12.4461 5.17765C12.7082 5.37727 12.9127 5.60315 13.0596 5.8553C13.2169 6.09694 13.327 6.34384 13.3899 6.59599C13.4633 6.84814 13.5 7.08453 13.5 7.30516C13.5 7.80946 13.4318 8.23496 13.2955 8.58166C13.1592 8.92837 12.9809 9.22254 12.7607 9.46418C12.5509 9.69532 12.3255 9.90019 12.0843 10.0788C11.8536 10.2574 11.6281 10.436 11.4079 10.6146C11.1876 10.7827 11.0094 10.9771 10.873 11.1977C10.7367 11.4078 10.6685 11.6705 10.6685 11.9857L10.6685 12.7106L9.34719 12.7106ZM9.23708 15.5L9.23708 13.8453L10.7787 13.8453L10.7787 15.5L9.23708 15.5Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 61 60" id="quotation-marks">
+            <path d="M11.9575 43.745C9.3825 41.01 8 37.9425 8 32.97C8 24.22 14.1425 16.3775 23.075 12.5L25.3075 15.945C16.97 20.455 15.34 26.3075 14.69 29.9975C16.0325 29.3025 17.79 29.06 19.5125 29.22C24.0225 29.6375 27.5775 33.34 27.5775 37.9425C27.5775 40.2631 26.6556 42.4887 25.0147 44.1297C23.3737 45.7706 21.1481 46.6925 18.8275 46.6925C16.145 46.6925 13.58 45.4675 11.9575 43.745ZM36.9575 43.745C34.3825 41.01 33 37.9425 33 32.97C33 24.22 39.1425 16.3775 48.075 12.5L50.3075 15.945C41.97 20.455 40.34 26.3075 39.69 29.9975C41.0325 29.3025 42.79 29.06 44.5125 29.22C49.0225 29.6375 52.5775 33.34 52.5775 37.9425C52.5775 40.2631 51.6556 42.4887 50.0147 44.1297C48.3737 45.7706 46.1481 46.6925 43.8275 46.6925C41.145 46.6925 38.58 45.4675 36.9575 43.745Z"></path>
+            <path d="M11.9575 43.745C9.3825 41.01 8 37.9425 8 32.97C8 24.22 14.1425 16.3775 23.075 12.5L25.3075 15.945C16.97 20.455 15.34 26.3075 14.69 29.9975C16.0325 29.3025 17.79 29.06 19.5125 29.22C24.0225 29.6375 27.5775 33.34 27.5775 37.9425C27.5775 40.2631 26.6556 42.4887 25.0147 44.1297C23.3737 45.7706 21.1481 46.6925 18.8275 46.6925C16.145 46.6925 13.58 45.4675 11.9575 43.745ZM36.9575 43.745C34.3825 41.01 33 37.9425 33 32.97C33 24.22 39.1425 16.3775 48.075 12.5L50.3075 15.945C41.97 20.455 40.34 26.3075 39.69 29.9975C41.0325 29.3025 42.79 29.06 44.5125 29.22C49.0225 29.6375 52.5775 33.34 52.5775 37.9425C52.5775 40.2631 51.6556 42.4887 50.0147 44.1297C48.3737 45.7706 46.1481 46.6925 43.8275 46.6925C41.145 46.6925 38.58 45.4675 36.9575 43.745Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 15 14" id="star-five-points-rounded">
+            <path d="M8.15754 0.901236C7.88855 0.356162 7.1113 0.356165 6.84231 0.901236L5.13672 4.35739L1.32479 4.90837C0.723105 4.99534 0.482451 5.73457 0.917608 6.15909L3.6768 8.8508L3.02451 12.6483C2.92162 13.2473 3.55021 13.7043 4.08827 13.4217L7.49992 11.6296L10.9116 13.4217C11.4496 13.7043 12.0782 13.2473 11.9753 12.6483L11.3231 8.85109L14.0819 6.16353C14.5172 5.7394 14.2773 5.0001 13.6758 4.91256L9.8633 4.35775L8.15754 0.901236Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 22" id="star-five-points">
+            <path d="M12 0.5L8.58752 7.415L0.960022 8.5175L6.48002 13.9025L5.17502 21.5L12 17.915L18.825 21.5L17.52 13.9025L23.04 8.525L15.4125 7.415L12 0.5Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 40 40" id="star-four-points">
+            <path d="M20 40C20 29.0986 10.9015 20 0 20C10.9015 20 20 10.8997 20 0C20 10.8997 29.1003 20 40 20C29.1003 20 20 29.0986 20 40Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 22" id="star-seven-points">
+            <path d="M11.5451 0.496903C11.723 0.106984 12.277 0.106985 12.4549 0.496904L14.6389 5.28328C14.739 5.50259 14.9813 5.61927 15.2151 5.56078L20.319 4.28404C20.7347 4.18003 21.0801 4.61311 20.8862 4.99532L18.5057 9.68711C18.3967 9.90208 18.4565 10.1643 18.6481 10.3106L22.8284 13.5049C23.169 13.7652 23.0457 14.3052 22.626 14.3919L17.4736 15.4561C17.2376 15.5048 17.0699 15.7151 17.0749 15.9561L17.1839 21.2161C17.1928 21.6446 16.6937 21.8849 16.3642 21.6108L12.3198 18.246C12.1345 18.0919 11.8655 18.0919 11.6802 18.246L7.63577 21.6108C7.30629 21.8849 6.80722 21.6446 6.8161 21.2161L6.92511 15.9561C6.93011 15.7151 6.76243 15.5048 6.52636 15.4561L1.37399 14.3919C0.954261 14.3052 0.831001 13.7652 1.17155 13.5049L5.35194 10.3106C5.54348 10.1643 5.60333 9.90208 5.49426 9.68711L3.11382 4.99532C2.9199 4.61311 3.26527 4.18003 3.68105 4.28404L8.78489 5.56078C9.01875 5.61927 9.26105 5.50259 9.36111 5.28328L11.5451 0.496903Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="threads">
+            <path d="M16.0695 11.3427C15.9919 11.3055 15.913 11.2697 15.8331 11.2355C15.6939 8.67546 14.2928 7.20984 11.9403 7.19484C11.9296 7.19478 11.919 7.19478 11.9084 7.19478C10.5012 7.19478 9.33095 7.79446 8.61064 8.88569L9.90447 9.77183C10.4426 8.95672 11.2871 8.78295 11.909 8.78295C11.9162 8.78295 11.9234 8.78295 11.9305 8.78302C12.7051 8.78795 13.2896 9.01281 13.6679 9.45131C13.9433 9.77056 14.1274 10.2117 14.2186 10.7685C13.5318 10.6519 12.7891 10.6161 11.995 10.6616C9.75834 10.7902 8.3204 12.0926 8.41698 13.9024C8.46598 14.8204 8.92404 15.6101 9.70672 16.126C10.3685 16.5622 11.2208 16.7754 12.1065 16.7272C13.2763 16.6631 14.194 16.2175 14.8342 15.4028C15.3204 14.784 15.6279 13.9822 15.7637 12.9718C16.3212 13.3077 16.7343 13.7498 16.9625 14.2811C17.3505 15.1844 17.3731 16.6687 16.16 17.8789C15.0972 18.939 13.8196 19.3976 11.8888 19.4118C9.74702 19.3959 8.12722 18.7102 7.07408 17.3735C6.08789 16.1218 5.57823 14.3139 5.55921 12C5.57823 9.68604 6.08789 7.87815 7.07408 6.6265C8.12722 5.28983 9.74699 4.60406 11.8888 4.58817C14.0461 4.60418 15.6941 5.29326 16.7876 6.63637C17.3237 7.29502 17.728 8.12333 17.9944 9.08909L19.5106 8.68521C19.1876 7.49646 18.6793 6.4721 17.9877 5.62256C16.5859 3.90063 14.5357 3.0183 11.8941 3H11.8835C9.24723 3.01823 7.22 3.90392 5.8581 5.63243C4.6462 7.1706 4.02107 9.31085 4.00007 11.9937L4 12L4.00007 12.0063C4.02107 14.6891 4.6462 16.8294 5.8581 18.3676C7.22 20.0961 9.24723 20.9818 11.8835 21H11.8941C14.2378 20.9838 15.8899 20.3711 17.2509 19.0135C19.0315 17.2374 18.9779 15.0112 18.391 13.6445C17.9699 12.6644 17.1672 11.8684 16.0695 11.3427ZM12.0228 15.1413C11.0425 15.1964 10.024 14.7571 9.97383 13.8161C9.9366 13.1184 10.4711 12.3399 12.083 12.2472C12.2675 12.2366 12.4487 12.2314 12.6266 12.2314C13.2121 12.2314 13.7598 12.2882 14.2577 12.3968C14.072 14.7127 12.9826 15.0887 12.0228 15.1413Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 18 18" id="tiktok">
+            <path d="M12.1917 1.60865L11.8056 1H9.46959V6.48185L9.46163 11.8364C9.46561 11.8762 9.46959 11.9199 9.46959 11.9597C9.46959 13.3003 8.37917 14.3943 7.03405 14.3943C5.68894 14.3943 4.59852 13.3043 4.59852 11.9597C4.59852 10.6191 5.68894 9.52511 7.03405 9.52511C7.31263 9.52511 7.58324 9.57683 7.83396 9.66435V6.99105C7.57528 6.94729 7.30865 6.92342 7.03405 6.92342C4.26025 6.9274 1.99982 9.18697 1.99982 11.9637C1.99982 14.7404 4.26025 17 7.03803 17C9.81582 17 12.0762 14.7404 12.0762 11.9637V5.59473C13.0831 6.60119 14.3844 7.58379 15.8251 7.89806V5.16509C14.2611 4.4729 12.705 2.42815 12.1917 1.60865Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 14 15" id="trusted-customer">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.46852 9.69061C6.34438 9.69061 6.22024 9.66302 6.0892 9.54578L4.2271 8.00782C4.09607 7.89747 4.0202 7.74575 3.99951 7.57333C3.97882 7.40091 4.04089 7.24229 4.15124 7.11815C4.37193 6.85608 4.76504 6.8216 5.04091 7.03539L6.41334 8.18024L8.87545 5.47675C9.10304 5.22157 9.49615 5.18019 9.76512 5.40088C9.89616 5.51813 9.97892 5.66985 9.99271 5.84917C10.0065 6.02158 9.95823 6.18021 9.84099 6.30435L6.97887 9.46302C6.96508 9.46991 6.95818 9.48371 6.95128 9.4906C6.90301 9.53888 6.77887 9.64233 6.66162 9.66992C6.60645 9.68371 6.53748 9.69061 6.46852 9.69061ZM7.0069 13.3595C6.98621 13.3595 6.96552 13.3595 6.95173 13.3526L6.81379 13.2905C3.38615 11.7526 1.68957 8.65599 1.75164 4.07661V3.77316C1.75164 3.69729 1.80682 3.64212 1.88268 3.64212L2.19303 3.62833C4.13099 3.51108 5.63446 2.93176 6.66207 1.87657L6.88966 1.63519C6.92414 1.6076 6.95862 1.58691 7 1.58691C7.03449 1.58691 7.07587 1.60071 7.09656 1.62829L7.33104 1.86968C8.35865 2.91797 9.86212 3.50419 11.7932 3.62143L12.1035 3.62833C12.1794 3.62833 12.2346 3.6835 12.2346 3.76626L12.2484 4.06971C12.3104 8.6491 10.607 11.7388 7.18621 13.2768C7.15863 13.2837 7.02069 13.3595 7.0069 13.3595Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 16 16" id="twitter">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99386 8.29236L0 0.666992H4.74756L8.44753 5.38L12.4004 0.688212H15.0151L9.71175 6.99037L16 15.0003H11.2666L7.2603 9.90351L2.98317 14.9862H0.354296L5.99386 8.29236ZM11.9565 13.5875L2.91105 2.07984H4.0571L13.0912 13.5875H11.9565Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="user">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.007 12.8655C13.9282 12.8655 15.4856 11.308 15.4856 9.38684C15.4856 7.46564 13.9282 5.9082 12.007 5.9082C10.0858 5.9082 8.52832 7.46564 8.52832 9.38684C8.52832 11.308 10.0858 12.8655 12.007 12.8655ZM12.007 11.8655C13.3759 11.8655 14.4856 10.7558 14.4856 9.38684C14.4856 8.01793 13.3759 6.9082 12.007 6.9082C10.638 6.9082 9.52832 8.01793 9.52832 9.38684C9.52832 10.7558 10.638 11.8655 12.007 11.8655Z"></path>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9749 20.6354C20.7093 18.7399 22.5 15.5791 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 15.5523 3.26402 18.6926 5.96387 20.5926C6.25967 20.8008 6.56672 20.9941 6.8839 21.1714C6.91151 21.1869 6.9392 21.2022 6.96697 21.2174C8.46136 22.0351 10.1764 22.5 12 22.5C13.8297 22.5 15.5501 22.032 17.0481 21.2091C17.3675 21.0337 17.6768 20.842 17.9749 20.6354ZM17.0508 20.0476C15.5877 20.9678 13.856 21.5 12 21.5C10.1502 21.5 8.42385 20.9713 6.96387 20.0568V18.7751C6.96387 17.2287 8.21747 15.9751 9.76387 15.9751H14.2508C15.7972 15.9751 17.0508 17.2287 17.0508 18.7751V20.0476ZM18.0508 19.3241V18.7751C18.0508 16.6764 16.3495 14.9751 14.2508 14.9751H9.76387C7.66518 14.9751 5.96387 16.6764 5.96387 18.7751V19.3362C3.84864 17.5938 2.5 14.9544 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 14.9476 20.1576 17.5816 18.0508 19.3241Z"></path>
+        </symbol>
+        <symbol viewBox="0 0 24 24" id="youtube">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.792 5.41471C20.6521 5.64577 21.3325 6.32614 21.5635 7.18621C21.9872 8.75232 22 12.0001 22 12.0001C22 12.0001 22 15.2607 21.5764 16.8139C21.3453 17.674 20.665 18.3544 19.8049 18.5854C18.2516 19.0091 12 19.0091 12 19.0091C12 19.0091 5.74839 19.0091 4.19512 18.5854C3.33504 18.3544 2.65469 17.674 2.42362 16.8139C2 15.2478 2 12.0001 2 12.0001C2 12.0001 2 8.75232 2.41078 7.19905C2.64185 6.33897 3.32221 5.65861 4.18229 5.42755C5.73556 5.00392 11.9872 4.99109 11.9872 4.99109C11.9872 4.99109 18.2388 4.99109 19.792 5.41471ZM15.1836 12.0001L9.99743 15.0039V8.99623L15.1836 12.0001Z"></path>
+        </symbol>
+    </defs>
+</svg>
--- a/public/chats/wing.webp
+++ b/public/chats/wing.webp
--- a/public/chats/zodiac-wheel-arrow.svg
+++ b/public/chats/zodiac-wheel-arrow.svg
@ -0,0 +1,34 @@
+<svg role="img" width="98" height="177" viewBox="0 0 98 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>Wheel arrow</title>
+<g clip-path="url(#clip0_23_774)">
+<path d="M11.1133 4.49998L47.747 148.289L88.1149 4.5973L11.1133 4.49998Z" fill="url(#paint0_linear_23_774)"/>
+<g filter="url(#filter0_d_23_774)">
+<path d="M49 177C65.016 177 78 164.016 78 148C78 131.984 65.016 119 49 119C32.984 119 20 131.984 20 148C20 164.016 32.984 177 49 177Z" fill="url(#paint1_linear_23_774)"/>
+</g>
+<path d="M48.9999 8L53.3299 0.5H44.6699L48.9999 8Z" fill="#90A2FF"/>
+</g>
+<defs>
+<filter id="filter0_d_23_774" x="0" y="89" width="98" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-10"/>
+<feGaussianBlur stdDeviation="10"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.564706 0 0 0 0 0.635294 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_23_774"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_23_774" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_23_774" x1="49.116" y1="4.29477" x2="47.999" y2="148.291" gradientUnits="userSpaceOnUse">
+<stop stop-color="#90A2FF" stop-opacity="0"/>
+<stop offset="0.520833" stop-color="#90A2FF" stop-opacity="0.351562"/>
+<stop offset="1" stop-color="#90A2FF" stop-opacity="0.57"/>
+</linearGradient>
+<linearGradient id="paint1_linear_23_774" x1="96.781" y1="123.471" x2="15.643" y2="157.955" gradientUnits="userSpaceOnUse">
+<stop offset="0.0049505" stop-color="#BD98F5"/>
+<stop offset="0.257008" stop-color="#A9A1E8"/>
+<stop offset="0.90625" stop-color="#5E66FD"/>
+</linearGradient>
+<clipPath id="clip0_23_774">
+<rect width="98" height="177" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/chats/zodiacWheel.svg
+++ b/public/chats/zodiacWheel.svg
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@ -26,6 +26,7 @@ import routes, {
  hasNavbarFooter,
  hasFullDataModal,
  palmistryV1Prefix,
+  chatsPrefix,
 } from "@/routes";
 import BirthdayPage from "../BirthdayPage";
 import BirthtimePage from "../BirthtimePage";
@ -131,6 +132,7 @@ import AddGuides from "../palmistry/AdditionalPurchases/pages/AddGuides";
 import SkipTrial from "../palmistry/AdditionalPurchases/pages/SkipTrial";
 import { parseQueryParams } from "@/services/url";
 import Auth from "../pages/Auth";
+import ChatsRoutes from "@/routerComponents/Chats";

 const isProduction = import.meta.env.MODE === "production";

@ -314,6 +316,7 @@ function App(): JSX.Element {
    <Routes>
      <Route path={routes.client.auth()} element={<Auth />} />
      <Route path="*" element={<ABDesignV1Routes />} />
+      <Route path={`${chatsPrefix}/*`} element={<ChatsRoutes />} />
      <Route path={`${palmistryV1Prefix}/*`} element={<PalmistryV1Routes />} />
      <Route path={`${routes.client.mikeV1()}/*`} element={<MikeV1Routes />} />
      <Route element={<Layout setIsSpecialOfferOpen={setIsSpecialOfferOpen} />}>
--- a/src/components/ChatsPath/components/Address/index.tsx
+++ b/src/components/ChatsPath/components/Address/index.tsx
@ -0,0 +1,12 @@
+import styles from "./styles.module.scss";
+
+function Address() {
+  return (
+    <p className={styles.address}>
+      2024, Wit Apps LLC, <br />
+      123, Rimer Dr, Moraga, California, 94556, US
+    </p>
+  );
+}
+
+export default Address;
--- a/src/components/ChatsPath/components/Address/styles.module.scss
+++ b/src/components/ChatsPath/components/Address/styles.module.scss
@ -0,0 +1,5 @@
+.address {
+  color: #d3d3d3;
+  margin-top: 30px;
+  font-size: 10px;
+}
--- a/src/components/ChatsPath/components/AnimateMessages/index.tsx
+++ b/src/components/ChatsPath/components/AnimateMessages/index.tsx
@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import styles from "./styles.module.scss";
+import { images } from "../../data";
+import { sleep } from "@/services/date";
+
+export interface IAnimateMessage {
+  name: string;
+  text: string;
+  avatar: string;
+}
+
+interface AnimateMessagesProps {
+  messages: IAnimateMessage[];
+}
+
+function AnimateMessages({ messages }: AnimateMessagesProps) {
+  const [activeMessage, setActiveMessage] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      await sleep(2000);
+      setActiveMessage((activeMessage + 1) % messages.length);
+    })();
+  }, [activeMessage, messages.length]);
+
+  return (
+    <div className={styles.container}>
+      <ul className={styles.list}>
+        {messages.map(({ name, text, avatar }, index) => (
+          <li
+            className={`${styles.item} ${
+              index === activeMessage && styles.active
+            } ${index < activeMessage && styles["hide-up"]}`}
+            key={index}
+          >
+            <img src={images(avatar)} alt={`${name} avatar`} />
+            <div>
+              <h4 className={styles.name}>{name}</h4>
+              <p className={styles.text}>{text}</p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default AnimateMessages;
--- a/src/components/ChatsPath/components/AnimateMessages/styles.module.scss
+++ b/src/components/ChatsPath/components/AnimateMessages/styles.module.scss
@ -0,0 +1,78 @@
+.container {
+  margin-top: 20vh;
+  margin-bottom: 8vh;
+}
+
+.list {
+  position: relative;
+  height: 60px;
+  transform-origin: center bottom;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--primary-800);
+    border-radius: 16px;
+    opacity: 0.65;
+    z-index: -1;
+  }
+
+  &::before {
+    transform: translateY(40%) scale(0.8);
+  }
+
+  &::after {
+    transform: translateY(20%) scale(0.9);
+  }
+
+  & > .item {
+    position: absolute;
+    width: 100%;
+    opacity: 0;
+    display: flex;
+    padding: 8px 10px;
+    border-radius: 16px;
+    background: var(--primary-800);
+    bottom: 0;
+    transform: translateY(40%) scale(0.8);
+    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+    box-shadow: 0 2px 6px 0 var(--primary-900-with-opacity-40);
+    z-index: 0;
+
+    &.hide-up {
+      transform: translateY(-80%) scale(1);
+    }
+
+    &.active {
+      transform: translate(0);
+      opacity: 1;
+    }
+
+    & > img {
+      width: 34px;
+      height: 34px;
+      border-radius: 8px;
+      margin-right: 12px;
+      color: transparent;
+    }
+
+    & .name {
+      color: var(--typography-100);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 135%;
+    }
+
+    & .text {
+      color: var(--typography-100);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 135%;
+    }
+  }
+}
--- a/src/components/ChatsPath/components/Answer/index.tsx
+++ b/src/components/ChatsPath/components/Answer/index.tsx
@ -0,0 +1,43 @@
+import { useDispatch } from "react-redux";
+import { IAnswer } from "../../data";
+import styles from "./styles.module.scss";
+import { actions } from "@/store";
+
+interface IAnswerProps {
+  answer: IAnswer;
+  classNameContainer?: string;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+function Answer({
+  answer,
+  classNameContainer = "",
+  active = false,
+  onClick,
+}: IAnswerProps) {
+  const dispatch = useDispatch();
+
+  const handleClick = () => {
+    dispatch(
+      actions.chats.updateAnswers({
+        [answer.questionId]: answer.value,
+      })
+    );
+    onClick && onClick();
+  };
+
+  return (
+    <div
+      role="button"
+      className={`${styles.container} ${classNameContainer} ${
+        active ? styles.active : ""
+      }`}
+      onClick={handleClick}
+    >
+      <span className={styles.text}>{answer.name}</span>
+    </div>
+  );
+}
+
+export default Answer;
--- a/src/components/ChatsPath/components/Answer/styles.module.scss
+++ b/src/components/ChatsPath/components/Answer/styles.module.scss
@ -0,0 +1,37 @@
+.container {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease-in 0ms;
+
+  padding: 16px;
+  border: 1px solid var(--primary);
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+
+  &:hover {
+    transform: scale(1.03);
+    background-color: rgba(#8e8cf0, 0.2);
+  }
+
+  &:active {
+    transform: scale(1.1);
+    background: var(--gradient-tranquil);
+  }
+
+  &.active {
+    background-color: var(--primary);
+  }
+}
+
+.text {
+  color: var(--typography-100);
+  line-height: 21px;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
--- a/src/components/ChatsPath/components/AnswerDescription/index.tsx
+++ b/src/components/ChatsPath/components/AnswerDescription/index.tsx
@ -0,0 +1,29 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import React from "react";
+
+export interface IAnswerDescriptionProps {
+  title: string;
+  description: string;
+  footer?: string | React.ReactNode;
+}
+
+function AnswerDescription({
+  title,
+  description,
+  footer,
+}: IAnswerDescriptionProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <Title className={styles.title} variant="h3">
+          {title}
+        </Title>
+        <p className={styles.text}>{description}</p>
+      </div>
+      {footer && <p className={styles.footer}>{footer}</p>}
+    </div>
+  );
+}
+
+export default AnswerDescription;
--- a/src/components/ChatsPath/components/AnswerDescription/styles.module.scss
+++ b/src/components/ChatsPath/components/AnswerDescription/styles.module.scss
@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid var(--white-with-opacity-15);
+  margin-top: 34px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px 20px;
+  background-color: var(--secondary);
+}
+
+.title {
+  margin: 0;
+  color: var(--primary-100);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 135%;
+  text-align: left;
+}
+
+.text {
+  color: var(--primary-100);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 135%;
+  text-align: left;
+  margin-top: 8px;
+}
+
+.footer {
+  padding: 7px 10px;
+  font-size: 14px;
+  font-weight: 400;
+}
--- a/src/components/ChatsPath/components/Answers/index.tsx
+++ b/src/components/ChatsPath/components/Answers/index.tsx
@ -0,0 +1,34 @@
+import { IAnswer } from "../../data";
+import Answer from "../Answer";
+import styles from "./styles.module.scss";
+
+interface IAnswersProps {
+  answers: IAnswer[];
+  classNameAnswer?: string;
+  activeAnswer?: string;
+}
+
+function Answers({
+  answers,
+  activeAnswer,
+  classNameAnswer = "",
+}: IAnswersProps) {
+  return (
+    <div className={styles.container}>
+      <ul className={styles.list}>
+        {answers.map((answer, index) => (
+          <li className={styles.item} key={index}>
+            <Answer
+              classNameContainer={classNameAnswer}
+              answer={answer}
+              onClick={answer.onClick}
+              active={answer.value === activeAnswer}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Answers;
--- a/src/components/ChatsPath/components/Answers/styles.module.scss
+++ b/src/components/ChatsPath/components/Answers/styles.module.scss
@ -0,0 +1,11 @@
+.container {
+  width: 100%;
+}
+
+.list {
+  margin-bottom: -20px;
+
+  & > .item {
+    padding-bottom: 10px;
+  }
+}
--- a/src/components/ChatsPath/components/AppStoreReviews/index.tsx
+++ b/src/components/ChatsPath/components/AppStoreReviews/index.tsx
@ -0,0 +1,36 @@
+import { images } from "../../data";
+import Stars from "../Stars";
+import styles from "./styles.module.scss";
+
+function AppStoreReviews() {
+  return (
+    <div className={styles["app-wrapper"]}>
+      <div className={styles["app-review"]}>
+        <img
+          alt="wing"
+          width="50"
+          height="107"
+          className={styles.wing}
+          src={images("wing.webp")}
+        />
+        <div className={styles["app-info"]}>
+          <p className={styles["app-title"]}>App Store</p>
+          <p className={styles["app-text"]}>215K reviews</p>
+        </div>
+        <img
+          alt="wing"
+          width="50"
+          height="107"
+          className={styles["wing-right"]}
+          src={images("wing.webp")}
+        />
+      </div>
+
+      <div className={styles["app-rating"]}>
+        <Stars /> | 4.8 rating
+      </div>
+    </div>
+  );
+}
+
+export default AppStoreReviews;
--- a/src/components/ChatsPath/components/AppStoreReviews/styles.module.scss
+++ b/src/components/ChatsPath/components/AppStoreReviews/styles.module.scss
@ -0,0 +1,49 @@
+.app-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 40px;
+}
+
+.app-review {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.wing {
+  width: 27px;
+  height: 58px;
+  color: transparent;
+}
+
+.wing-right {
+  width: 27px;
+  height: 58px;
+  transform: scaleX(-1);
+  color: transparent;
+}
+
+.app-info {
+  text-align: center;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.app-title {
+  font-weight: 700;
+  font-size: 14px;
+  margin-bottom: 5px;
+}
+
+.app-text {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.app-rating {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/components/ChatsPath/components/Astrologers/index.tsx
+++ b/src/components/ChatsPath/components/Astrologers/index.tsx
@ -0,0 +1,28 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { images } from "../../data";
+import Button from "../../ui/Button";
+
+interface IAstrologersProps {
+  onButtonClick: () => void;
+}
+
+function Astrologers({ onButtonClick }: IAstrologersProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <Title variant="h2" className={styles.title}>
+          Best psychics in the love & relationship area
+        </Title>
+        <img
+          className={styles.image}
+          src={images("astrologers-card-mobile.webp")}
+          alt="Astrologers"
+        />
+        <Button onClick={onButtonClick} />
+      </div>
+    </div>
+  );
+}
+
+export default Astrologers;
--- a/src/components/ChatsPath/components/Astrologers/styles.module.scss
+++ b/src/components/ChatsPath/components/Astrologers/styles.module.scss
@ -0,0 +1,30 @@
+.container {
+  padding: 50px 15px;
+  background: var(--secondary-800);
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: 1068px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-family: Open Sans, sans-serif;
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 30px;
+  max-width: 796px;
+}
+
+.image {
+  max-width: 500px;
+  width: 100%;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
--- a/src/components/ChatsPath/components/ChooseGender/index.tsx
+++ b/src/components/ChatsPath/components/ChooseGender/index.tsx
@ -0,0 +1,68 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { images } from "../../data";
+import { useDispatch } from "react-redux";
+import { actions } from "@/store";
+
+interface IChooseGenderProps {
+  onSelectGender?: (gender: string) => void;
+}
+
+function ChooseGender({ onSelectGender }: IChooseGenderProps) {
+  const dispatch = useDispatch();
+
+  const selectGender = (gender: string) => {
+    dispatch(actions.questionnaire.update({ gender }));
+    onSelectGender && onSelectGender(gender);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <Title variant="h2" className={styles.title}>
+          Choose your gender
+        </Title>
+        <ul className={styles.list}>
+          <li className={styles.item}>
+            <div className={styles["button-wrapper"]}>
+              <button type="button" onClick={() => selectGender("male")}>
+                <span className={styles["button-label"]}>
+                  <img
+                    alt="male"
+                    width="315"
+                    height="450"
+                    className={styles.image}
+                    src={images("male.webp")}
+                    style={{ color: "transparent" }}
+                  />
+                </span>
+              </button>
+            </div>
+          </li>
+          <li className={styles.item}>
+            <div className={styles["button-wrapper"]}>
+              <button type="button" onClick={() => selectGender("female")}>
+                <span className={styles["button-label"]}>
+                  <img
+                    alt="female"
+                    width="315"
+                    height="450"
+                    className={styles.image}
+                    src={images("female.webp")}
+                    style={{ color: "transparent" }}
+                  />
+                </span>
+              </button>
+            </div>
+          </li>
+        </ul>
+        <p className={styles.description}>
+          Our algorithm will match you to our top psychics. Get readings,
+          guidance and accurate answers from your psychic expert
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default ChooseGender;
--- a/src/components/ChatsPath/components/ChooseGender/styles.module.scss
+++ b/src/components/ChatsPath/components/ChooseGender/styles.module.scss
@ -0,0 +1,77 @@
+.container {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  border: 1px solid var(--secondary);
+  background: var(--secondary-600);
+  padding: 20px 16px;
+}
+
+.title {
+  margin-bottom: 14px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.list {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
+
+  & > .item {
+    width: auto;
+    margin-left: 10px;
+    margin-right: 10px;
+
+    & > .button-wrapper {
+      margin-top: 0;
+      margin-bottom: 30px;
+
+      & > button {
+        padding: 0;
+        border: none;
+        height: auto;
+        width: auto;
+        background: transparent;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        text-decoration: none;
+        vertical-align: middle;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        align-self: center;
+        border-radius: 30px;
+        outline: none;
+        color: var(--typography-100);
+        font-size: 16px;
+        line-height: 24px;
+        transition: all 0.15s ease-in-out 0ms;
+
+        &:active {
+          transform: scale(1.03);
+        }
+
+        & > .button-label {
+          display: inherit;
+          align-items: inherit;
+          justify-content: inherit;
+
+          & > img {
+            object-fit: contain;
+            width: 100%;
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+.description {
+  font-size: 12px;
+  line-height: 130%;
+  text-align: center;
+}
--- a/src/components/ChatsPath/components/DrawerMenu/index.tsx
+++ b/src/components/ChatsPath/components/DrawerMenu/index.tsx
@ -0,0 +1,37 @@
+import Drawer from "@mui/material/Drawer";
+import styles from "./styles.module.scss";
+import DrawerMenuList from "../DrawerMenuList";
+import { drawerMenuItems, sprites } from "../../data";
+
+interface IDrawerMenuProps {
+  open: boolean;
+  toggleDrawer: (newOpen: boolean) => () => void;
+}
+
+function DrawerMenu({ open, toggleDrawer }: IDrawerMenuProps) {
+  return (
+    <Drawer
+      classes={{
+        paper: styles["drawer-paper"],
+      }}
+      open={open}
+      onClose={toggleDrawer(false)}
+    >
+      <div className={styles.close}>
+        <span className={styles["close-wrapper"]}>
+          <svg
+            aria-hidden="true"
+            width="16px"
+            height="16px"
+            className={styles["close-icon"]}
+          >
+            <use xlinkHref={`${sprites}#cross`}></use>
+          </svg>
+        </span>
+      </div>
+      <DrawerMenuList items={drawerMenuItems} />
+    </Drawer>
+  );
+}
+
+export default DrawerMenu;
--- a/src/components/ChatsPath/components/DrawerMenu/styles.module.scss
+++ b/src/components/ChatsPath/components/DrawerMenu/styles.module.scss
@ -0,0 +1,25 @@
+.drawer-paper {
+  width: 100%;
+  max-width: 312px;
+  background: var(--gradient-amethyst);
+  padding: 20px 15px;
+  color: var(--typography-200) !important;
+}
+
+.close {
+  margin-bottom: 20px;
+
+  & > .close-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    & > .close-icon {
+      fill: var(--typography-100);
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+    }
+  }
+}
--- a/src/components/ChatsPath/components/DrawerMenuList/index.tsx
+++ b/src/components/ChatsPath/components/DrawerMenuList/index.tsx
@ -0,0 +1,24 @@
+import { IDrawerMenuItem } from "../../data";
+import styles from "./styles.module.scss";
+
+interface IDrawerMenuListProps {
+  items: IDrawerMenuItem[];
+}
+
+function DrawerMenuList({ items }: IDrawerMenuListProps) {
+  return (
+    <nav className={styles.container}>
+      <ul className={styles.list}>
+        {items.map((item, index) => (
+          <li key={index} className={styles.item}>
+            <a className={styles.link} href={item.link}>
+              {item.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+export default DrawerMenuList;
--- a/src/components/ChatsPath/components/DrawerMenuList/styles.module.scss
+++ b/src/components/ChatsPath/components/DrawerMenuList/styles.module.scss
@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.list {
+  margin-top: -10px;
+  margin-bottom: -10px;
+
+  & > .item {
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    & > .link {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}
--- a/src/components/ChatsPath/components/Feedback/index.tsx
+++ b/src/components/ChatsPath/components/Feedback/index.tsx
@ -0,0 +1,22 @@
+import { welcomeReviews } from "../../data";
+import AppStoreReviews from "../AppStoreReviews";
+import Review from "../Review";
+import styles from "./styles.module.scss";
+
+function Feedback() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <AppStoreReviews />
+
+        <div className={styles.reviews}>
+          {welcomeReviews.map((review, index) => (
+            <Review {...review} key={index} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Feedback;
--- a/src/components/ChatsPath/components/Feedback/styles.module.scss
+++ b/src/components/ChatsPath/components/Feedback/styles.module.scss
@ -0,0 +1,11 @@
+.container {
+  padding: 50px 15px;
+  background: var(--secondary-800);
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: 1108px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
--- a/src/components/ChatsPath/components/Header/index.tsx
+++ b/src/components/ChatsPath/components/Header/index.tsx
@ -0,0 +1,45 @@
+import { useNavigate } from "react-router-dom";
+import styles from "./styles.module.scss";
+import BackButton from "@/components/pages/ABDesign/v1/ui/BackButton";
+import Title from "@/components/Title";
+import Burger from "../../ui/Burger";
+
+interface IHeaderProps {
+  isBackButtonVisible?: boolean;
+  isBurgerVisible?: boolean;
+  className?: string;
+  classNameTitle?: string;
+  onBack?: () => void;
+  onBurger?: () => void;
+}
+
+function Header({
+  classNameTitle = "",
+  isBackButtonVisible = true,
+  isBurgerVisible = true,
+  onBurger,
+  onBack,
+}: IHeaderProps) {
+  const navigate = useNavigate();
+  const handleBack = onBack ? onBack : () => navigate(-1);
+
+  return (
+    <header className={styles.header}>
+      {isBackButtonVisible && (
+        <BackButton
+          className={styles["back-button"]}
+          fillColor="#F2F3FD"
+          onClick={handleBack}
+        />
+      )}
+      <Title className={`${styles.title} ${classNameTitle}`} variant="h2">
+        AURA
+      </Title>
+      {isBurgerVisible && (
+        <Burger onClick={onBurger} className={styles.burger} />
+      )}
+    </header>
+  );
+}
+
+export default Header;
--- a/src/components/ChatsPath/components/Header/styles.module.scss
+++ b/src/components/ChatsPath/components/Header/styles.module.scss
@ -0,0 +1,43 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+  position: relative;
+  align-self: center;
+  padding: 17px 25px 0;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 28px;
+  margin-bottom: 0;
+  font-weight: 500;
+  line-height: 100%;
+}
+
+.back-button {
+  position: absolute;
+  left: 15px;
+  transition: all 0.1s ease-in-out 0ms;
+
+  border: none;
+  background: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+}
+
+.burger {
+  position: absolute;
+  right: 25px;
+  left: auto;
+  top: 18px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
--- a/src/components/ChatsPath/components/HowItWorks/index.tsx
+++ b/src/components/ChatsPath/components/HowItWorks/index.tsx
@ -0,0 +1,61 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { images } from "../../data";
+import Button from "../../ui/Button";
+
+interface IHowItWorksProps {
+  onButtonClick: () => void;
+}
+
+function HowItWorks({ onButtonClick }: IHowItWorksProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <Title variant="h2" className={styles.title}>
+          How it works
+        </Title>
+        <ul className={styles.list}>
+          <li className={styles.item}>
+            <img alt="one" width="209" height="209" src={images("1.webp")} />
+            <div>
+              <Title variant="h4" className={styles["item-title"]}>
+                Create account
+              </Title>
+              <p className={styles["item-description"]}>
+                Answer simple questions to help us design your profile and
+                personalize your experience
+              </p>
+            </div>
+          </li>
+          <li className={styles.item}>
+            <img alt="two" width="209" height="209" src={images("2.webp")} />
+            <div>
+              <Title variant="h4" className={styles["item-title"]}>
+                Meet our best psychics
+              </Title>
+              <p className={styles["item-description"]}>
+                Get matched based on your answers and choose the best psychic to
+                chat with
+              </p>
+            </div>
+          </li>
+          <li className={styles.item}>
+            <img alt="three" width="209" height="209" src={images("3.webp")} />
+            <div>
+              <Title variant="h4" className={styles["item-title"]}>
+                Ask your questions
+              </Title>
+              <p className={styles["item-description"]}>
+                Start online chat to connect with relationship psychics and gain
+                clarity today
+              </p>
+            </div>
+          </li>
+        </ul>
+        <Button onClick={onButtonClick} />
+      </div>
+    </div>
+  );
+}
+
+export default HowItWorks;
--- a/src/components/ChatsPath/components/HowItWorks/styles.module.scss
+++ b/src/components/ChatsPath/components/HowItWorks/styles.module.scss
@ -0,0 +1,49 @@
+.container {
+  padding: 50px 15px;
+  background: var(--secondary-800);
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: 1068px;
+}
+
+.title {
+  font-family: Open Sans, sans-serif;
+  font-size: 24px;
+  text-align: center;
+  line-height: 32px;
+  font-weight: 600;
+  margin-bottom: 50px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+
+  & > .item {
+    display: flex;
+    margin-bottom: 40px;
+    text-align: left;
+
+    & > img {
+      position: relative;
+      width: 75px;
+      height: 75px;
+      flex-shrink: 0;
+      margin-right: 20px;
+      color: transparent;
+    }
+
+    & .item-title {
+      font-weight: 600;
+      margin-bottom: 5px;
+      text-align: left;
+    }
+
+    & .item-description {
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+}
--- a/src/components/ChatsPath/components/InputAnswerModal/index.tsx
+++ b/src/components/ChatsPath/components/InputAnswerModal/index.tsx
@ -0,0 +1,64 @@
+import Modal from "@mui/material/Modal";
+import styles from "./styles.module.scss";
+import Button, { IButtonProps } from "../../ui/Button";
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+
+interface IInputAnswerModalProps {
+  open: boolean;
+  inputProps: DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  >;
+  buttonProps: IButtonProps;
+  onClose: () => void;
+}
+
+function InputAnswerModal({
+  open,
+  buttonProps,
+  inputProps,
+  onClose,
+}: IInputAnswerModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <div className={styles.container}>
+        <button type="button" className={styles["close-icon"]}>
+          <span className={styles["close-icon-label"]}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              role="img"
+            >
+              <title>cross</title>
+              <path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z"></path>
+            </svg>
+          </span>
+        </button>
+        <h2 className={styles.title}>Enter your own answer</h2>
+        <div className={styles["input-container"]}>
+          <div className={styles["input-wrapper"]}>
+            <input
+              name="custom-answer"
+              placeholder="Type what’s on your mind..."
+              type="text"
+              value=""
+              {...inputProps}
+            />
+          </div>
+        </div>
+        <Button classNameContainer={styles.button} {...buttonProps}>
+          Send your answer
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+export default InputAnswerModal;
--- a/src/components/ChatsPath/components/InputAnswerModal/styles.module.scss
+++ b/src/components/ChatsPath/components/InputAnswerModal/styles.module.scss
@ -0,0 +1,85 @@
+.container {
+  position: relative;
+  background-color: var(--primary-100);
+  width: 330px;
+  padding: 40px 20px 16px;
+  border-radius: 16px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.close-icon {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  opacity: 0.7;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+
+  & > .close-icon-label {
+    display: inherit;
+    align-items: inherit;
+    justify-content: inherit;
+
+    & > svg {
+      color: var(--secondary-600);
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+      transition: fill 0.3s ease-in-out, opacity 0.3s ease-in-out;
+      flex-shrink: 0;
+      display: inline-block;
+    }
+  }
+}
+
+.title {
+  margin-bottom: 16px;
+  color: var(--typography-900);
+  text-align: center;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 150%;
+}
+
+.input-container {
+  width: 100%;
+  position: relative;
+
+  & > .input-wrapper {
+    position: relative;
+    cursor: text;
+
+    & > input {
+      display: block;
+      font-weight: 400;
+      background-clip: padding-box;
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+      -webkit-appearance: none;
+      appearance: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      width: 100%;
+      height: 50px;
+      margin-bottom: 28px;
+      font-size: 16px;
+      line-height: 135%;
+      border: 1px solid var(--typography);
+      border-radius: 25px;
+      padding: 10px 15px;
+      color: var(--typography-900);
+      background-color: transparent;
+    }
+  }
+}
+
+.button {
+  margin-top: 16px;
+  & > button {
+    height: 50px;
+  }
+}
--- a/src/components/ChatsPath/components/MultiplyAnswer/index.tsx
+++ b/src/components/ChatsPath/components/MultiplyAnswer/index.tsx
@ -0,0 +1,42 @@
+import { IAnswer } from "../../data";
+import styles from "./styles.module.scss";
+import Checkbox from "../../ui/Checkbox";
+
+interface IAnswerProps {
+  answer: IAnswer;
+  classNameContainer?: string;
+  active?: boolean;
+  onClick?: (answer: IAnswer) => void;
+}
+
+function MultiplyAnswer({
+  answer,
+  classNameContainer = "",
+  active = false,
+  onClick,
+}: IAnswerProps) {
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event?.stopPropagation();
+    event?.preventDefault();
+    onClick && onClick(answer);
+  };
+
+  return (
+    <div
+      role="button"
+      className={`${styles.container} ${classNameContainer} ${
+        active ? styles.active : ""
+      }`}
+      onClick={handleClick}
+    >
+      <span className={styles.text}>{answer.name}</span>
+      <Checkbox
+        id={`${answer.id}-${answer.value}`}
+        name={`${answer.id}-${answer.value}`}
+        active={active}
+      />
+    </div>
+  );
+}
+
+export default MultiplyAnswer;
--- a/src/components/ChatsPath/components/MultiplyAnswer/styles.module.scss
+++ b/src/components/ChatsPath/components/MultiplyAnswer/styles.module.scss
@ -0,0 +1,27 @@
+.container {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease-in 0ms;
+
+  padding: 16px;
+  border: 1px solid var(--primary);
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+
+  &.active {
+    background-color: rgba(#8e8cf0, 0.2);
+  }
+}
+
+.text {
+  color: var(--typography-100);
+  line-height: 21px;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
--- a/src/components/ChatsPath/components/MultiplyAnswers/index.tsx
+++ b/src/components/ChatsPath/components/MultiplyAnswers/index.tsx
@ -0,0 +1,78 @@
+import { useDispatch, useSelector } from "react-redux";
+import { IAnswer } from "../../data";
+import MultiplyAnswer from "../MultiplyAnswer";
+import styles from "./styles.module.scss";
+import { actions, selectors } from "@/store";
+
+interface IAnswersProps {
+  answers: IAnswer[];
+  classNameAnswer?: string;
+  activeAnswer?: string;
+}
+
+function MultiplyAnswers({ answers, classNameAnswer = "" }: IAnswersProps) {
+  const dispatch = useDispatch();
+  const storeAnswers = useSelector(selectors.selectAnswers);
+
+  const handleClickAll = (answer: IAnswer, storeAnswer: string[]) => {
+    if (storeAnswer?.length === answers.length) {
+      return dispatch(
+        actions.chats.updateAnswers({
+          [answer.questionId]: [],
+        })
+      );
+    }
+    return dispatch(
+      actions.chats.updateAnswers({
+        [answer.questionId]: answers.map((item) => item.value),
+      })
+    );
+  };
+
+  const handleClick = (answer: IAnswer) => {
+    const storeAnswer = (storeAnswers?.[
+      answer.questionId as keyof typeof storeAnswers
+    ] || []) as string[];
+
+    if (answer.value === "all") {
+      return handleClickAll(answer, storeAnswer);
+    }
+
+    if (storeAnswer?.includes(answer.value)) {
+      dispatch(
+        actions.chats.updateAnswers({
+          [answer.questionId]: storeAnswer?.filter(
+            (item) => item !== answer.value && item !== "all"
+          ),
+        })
+      );
+    } else {
+      dispatch(
+        actions.chats.updateAnswers({
+          [answer.questionId]: [...storeAnswer, answer.value],
+        })
+      );
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <ul className={styles.list}>
+        {answers.map((answer, index) => (
+          <li className={styles.item} key={index}>
+            <MultiplyAnswer
+              classNameContainer={classNameAnswer}
+              answer={answer}
+              onClick={handleClick}
+              active={storeAnswers?.[
+                answer.questionId as keyof typeof storeAnswers
+              ]?.includes(answer.value)}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default MultiplyAnswers;
--- a/src/components/ChatsPath/components/MultiplyAnswers/styles.module.scss
+++ b/src/components/ChatsPath/components/MultiplyAnswers/styles.module.scss
@ -0,0 +1,11 @@
+.container {
+  width: 100%;
+}
+
+.list {
+  margin-bottom: -20px;
+
+  & > .item {
+    padding-bottom: 10px;
+  }
+}
--- a/src/components/ChatsPath/components/Partners/index.tsx
+++ b/src/components/ChatsPath/components/Partners/index.tsx
@ -0,0 +1,64 @@
+import { images } from "../../data";
+import styles from "./styles.module.scss";
+
+function Partners() {
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>As featured in</h2>
+      <ul className={styles.list}>
+        <li className={styles.item}>
+          <div className={styles.newYorkTimes}>
+            <img
+              alt="The New York Times"
+              width="285"
+              height="38"
+              src={images("new-york-times.webp")}
+            />
+          </div>
+        </li>
+        <li className={styles.item}>
+          <div className={styles.bustle}>
+            <img
+              alt="Bustle"
+              width="104"
+              height="28"
+              src={images("bustle.webp")}
+            />
+          </div>
+        </li>
+        <li className={styles.item}>
+          <div className={styles.hypebae}>
+            <img
+              alt="Hypebae"
+              width="180"
+              height="48"
+              src={images("hypebae.webp")}
+            />
+          </div>
+        </li>
+        <li className={styles.item}>
+          <div className={styles.refinery}>
+            <img
+              alt="Refinery"
+              width="98"
+              height="60"
+              src={images("refinery29.webp")}
+            />
+          </div>
+        </li>
+        <li className={styles.item}>
+          <div className={styles.cosmopolitan}>
+            <img
+              alt="Cosmopolitan"
+              width="187"
+              height="27"
+              src={images("cosmopolitian.webp")}
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default Partners;
--- a/src/components/ChatsPath/components/Partners/styles.module.scss
+++ b/src/components/ChatsPath/components/Partners/styles.module.scss
@ -0,0 +1,60 @@
+.container {
+  background: var(--typography-900);
+  padding: 30px 15px;
+}
+
+.title {
+  font-family: Open Sans, sans-serif;
+  font-size: 24px;
+  text-align: center;
+  line-height: 32px;
+  font-weight: 600;
+  margin-bottom: 30px;
+}
+
+.list {
+  max-width: 360px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: -30px;
+
+  & > .item {
+    margin-bottom: 30px;
+
+    & img {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      color: transparent;
+    }
+  }
+}
+
+.newYorkTimes {
+  width: 215px;
+  height: 28px;
+}
+
+.bustle {
+  width: 74px;
+  height: 20px;
+}
+
+.hypebae {
+  width: 85px;
+  height: 22px;
+}
+
+.refinery {
+  width: 60px;
+  height: 37px;
+}
+
+.cosmopolitan {
+  width: 131px;
+  height: 19px;
+}
--- a/src/components/ChatsPath/components/ProgressBar/index.tsx
+++ b/src/components/ChatsPath/components/ProgressBar/index.tsx
@ -0,0 +1,121 @@
+import { progressBarSteps } from "../../data";
+import styles from "./styles.module.scss";
+
+interface IProgressBarProps {
+  currentStep: number;
+}
+
+function calculateProgress(currentStep: number) {
+  const totalProgress: number[] = [];
+  let accumulatedLength = 0;
+
+  progressBarSteps.forEach((step) => {
+    if (currentStep >= accumulatedLength + step.length) {
+      totalProgress.push(100);
+    } else if (
+      currentStep > accumulatedLength &&
+      currentStep < accumulatedLength + step.length
+    ) {
+      const stepProgress =
+        ((currentStep - accumulatedLength) / step.length) * 100;
+      totalProgress.push(stepProgress);
+    } else {
+      totalProgress.push(0);
+    }
+    accumulatedLength += step.length;
+  });
+
+  return totalProgress;
+}
+
+function ProgressBar({ currentStep }: IProgressBarProps) {
+  const totalProgress = calculateProgress(currentStep);
+  const totalLength = progressBarSteps.reduce(
+    (acc, step) => acc + step.length,
+    0
+  );
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <div className={styles.header}>
+          <div>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgcm9sZT0naW1nJz4KICAgIDx0aXRsZT5Mb2NrPC90aXRsZT4KICAgIDxwYXRoCiAgICAgICAgZD0iTTguNjQ1ODMgNEg3LjkxNjY3VjIuNjY2NjdDNy45MTY2NyAxLjIgNi42MDQxNyAwIDUgMEMzLjM5NTgzIDAgMi4wODMzMyAxLjIgMi4wODMzMyAyLjY2NjY3VjRIMS4zNTQxN0MwLjk4OTU4MyA0IDAuNjI1IDQuMzMzMzMgMC42MjUgNC42NjY2N1Y5LjMzMzMzQzAuNjI1IDkuNjY2NjcgMC45ODk1ODMgMTAgMS4zNTQxNyAxMEg4LjY0NTgzQzkuMDEwNDIgMTAgOS4zNzUgOS42NjY2NyA5LjM3NSA5LjMzMzMzVjQuNjY2NjdDOS4zNzUgNC4zMzMzMyA5LjAxMDQyIDQgOC42NDU4MyA0Wk01LjcyOTE3IDguNjY2NjdINC4yNzA4M0w0LjU2MjUgNy4yQzQuMTk3OTIgNy4wNjY2NyAzLjkwNjI1IDYuNjY2NjcgMy45MDYyNSA2LjMzMzMzQzMuOTA2MjUgNS44IDQuNDE2NjcgNS4zMzMzMyA1IDUuMzMzMzNDNS41ODMzMyA1LjMzMzMzIDYuMDkzNzUgNS44IDYuMDkzNzUgNi4zMzMzM0M2LjA5Mzc1IDYuNzMzMzMgNS44NzUgNy4wNjY2NyA1LjQzNzUgNy4yTDUuNzI5MTcgOC42NjY2N1pNNi40NTgzMyA0SDMuNTQxNjdWMi42NjY2N0MzLjU0MTY3IDEuOTMzMzMgNC4xOTc5MiAxLjMzMzMzIDUgMS4zMzMzM0M1LjgwMjA4IDEuMzMzMzMgNi40NTgzMyAxLjkzMzMzIDYuNDU4MzMgMi42NjY2N1Y0WiIKICAgICAgICBmaWxsPSIjRTZFNkU2IiBmaWxsLW9wYWNpdHk9IjAuNSIgLz4KPC9zdmc+"
+              alt=""
+              width="10"
+              height="10"
+            />
+            <span className={styles.text}>Your answers are confidential</span>
+          </div>
+          <div className={styles.counter}>
+            {currentStep}/{totalLength}
+          </div>
+        </div>
+        <div className={styles.stepper}>
+          {progressBarSteps.map((step, index) => (
+            <div
+              className={`${styles.step} ${
+                !!totalProgress[index] && styles.completed
+              }`}
+              key={index}
+            >
+              <div className={styles.circle}>{index + 1}</div>
+              <span className={styles["step-label"]}>
+                <span className={styles.svg}>
+                  <svg
+                    focusable="false"
+                    aria-hidden="true"
+                    viewBox="0 0 24 24"
+                    data-testid="CheckCircleIcon"
+                  >
+                    <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"></path>
+                  </svg>
+                </span>
+              </span>
+              <div
+                className={styles.progress}
+                color="var(--primary-800)"
+                data-label={step.name}
+              >
+                <div></div>
+                <span
+                  className={styles["progress-bar"]}
+                  role="progressbar"
+                  aria-valuenow={0}
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                >
+                  <span
+                    className={styles["progress-bar-fill"]}
+                    style={{
+                      transform: `translateX(-${100 - totalProgress[index]}%)`,
+                    }}
+                  ></span>
+                </span>
+                <div></div>
+              </div>
+            </div>
+          ))}
+          <div className={styles.step}>
+            <div className={styles.circle}>{progressBarSteps.length + 1}</div>
+            <span className={styles["step-label"]}>
+              <span className={styles.svg}>
+                <svg
+                  focusable="false"
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  data-testid="CheckCircleIcon"
+                >
+                  <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"></path>
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProgressBar;
--- a/src/components/ChatsPath/components/ProgressBar/styles.module.scss
+++ b/src/components/ChatsPath/components/ProgressBar/styles.module.scss
@ -0,0 +1,162 @@
+.container {
+  margin-bottom: 15px;
+  text-align: center;
+  max-width: 330px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.wrapper {
+  margin-bottom: 15px;
+}
+
+.header {
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  & .text {
+    display: inline-block;
+    margin-left: 4px;
+    color: var(--typography-200-with-opacity-50);
+    text-align: center;
+    font-size: 12px;
+    line-height: 120%;
+  }
+
+  & > .counter {
+    margin-left: 36px;
+    padding: 4px 8px;
+    border-radius: 50px;
+    background: var(--primary-800);
+    color: var(--primary-200);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+  }
+}
+
+.stepper {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  justify-content: center;
+  background: transparent !important;
+  z-index: 1;
+  padding: 0 0 32px !important;
+}
+
+.step {
+  padding: 0 !important;
+  display: flex;
+  position: relative;
+
+  &.completed {
+    .circle {
+      background: var(--primary-300);
+      color: var(--typography-800);
+    }
+
+    .progress::after {
+      font-weight: 700;
+      color: var(--typography-100);
+    }
+  }
+
+  & > .circle {
+    background: var(--primary-800);
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--typography-300);
+    text-align: center;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 150%;
+  }
+
+  .step-label {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+
+    & > .svg {
+      flex-shrink: 0;
+      display: flex;
+      padding-right: 0;
+
+      & > svg {
+        user-select: none;
+        fill: currentcolor;
+        flex-shrink: 0;
+        font-size: 1.5rem;
+        display: block;
+        transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+
+        &.completed {
+          color: var(--primary-800);
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+.progress {
+  position: relative;
+  padding: 0 !important;
+  background: none !important;
+  width: 92px;
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  align-items: center;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &::after {
+    content: attr(data-label);
+    width: 95px;
+    position: absolute;
+    left: 50%;
+    top: 16px;
+    transform: translateX(-50%);
+    text-align: center;
+    font-size: 12px;
+    line-height: 150%;
+    color: var(--typography-400);
+  }
+
+  & > .progress-bar {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    height: 4px;
+    background: var(--primary-800);
+    z-index: 0;
+
+    & > .progress-bar-fill {
+      width: 100%;
+      position: absolute;
+      left: 0px;
+      bottom: 0px;
+      top: 0px;
+      transition: transform 0.4s linear;
+      transform-origin: left center;
+      background: var(--primary-300);
+    }
+  }
+}
--- a/src/components/ChatsPath/components/Review/index.tsx
+++ b/src/components/ChatsPath/components/Review/index.tsx
@ -0,0 +1,46 @@
+import { images, IReview } from "../../data";
+import Stars from "../Stars";
+import styles from "./styles.module.scss";
+
+type TReviewProps = IReview;
+
+function Review({ avatar, name, date, text }: TReviewProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles["info-wrapper"]}>
+        <img
+          src={images(avatar)}
+          alt="avatar"
+          width="45"
+          height="45"
+          className={styles.avatar}
+        />
+        <div className={styles.info}>
+          <span className={styles.name}>{name}</span>
+          <span className={styles.date}>{date}</span>
+        </div>
+        <Stars color="var(--star)" containerClassName={styles.stars} />
+      </div>
+      <div className={styles["quote-wrapper"]}>
+        <div className={styles["quote-container"]}>
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            // title="quote"
+          >
+            <path
+              d="M4.583 17.498C3.553 16.404 3 15.177 3 13.188C3 9.688 5.457 6.551 9.03 5L9.923 6.378C6.588 8.182 5.936 10.523 5.676 11.999C6.213 11.721 6.916 11.624 7.605 11.688C9.409 11.855 10.831 13.336 10.831 15.177C10.831 16.1053 10.4623 16.9955 9.80587 17.6519C9.1495 18.3083 8.25926 18.677 7.331 18.677C6.258 18.677 5.232 18.187 4.583 17.498ZM14.583 17.498C13.553 16.404 13 15.177 13 13.188C13 9.688 15.457 6.551 19.03 5L19.923 6.378C16.588 8.182 15.936 10.523 15.676 11.999C16.213 11.721 16.916 11.624 17.605 11.688C19.409 11.855 20.831 13.336 20.831 15.177C20.831 16.1053 20.4623 16.9955 19.8059 17.6519C19.1495 18.3083 18.2593 18.677 17.331 18.677C16.258 18.677 15.232 18.187 14.583 17.498Z"
+              fill="currentColor"
+            ></path>
+          </svg>
+          <p className={styles.text}>{text}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Review;
--- a/src/components/ChatsPath/components/Review/styles.module.scss
+++ b/src/components/ChatsPath/components/Review/styles.module.scss
@ -0,0 +1,76 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 20px;
+  width: 100%;
+  position: relative;
+  background: var(--typography-100);
+  color: var(--typography-800);
+  padding: 16px 25px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: auto !important;
+  margin-bottom: 20px;
+}
+
+.info-wrapper {
+  display: flex;
+  align-items: flex-start;
+}
+
+.avatar {
+  display: block;
+  border-radius: 50%;
+  color: transparent;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+  max-width: 55%;
+  flex-basis: 50%;
+  overflow: hidden;
+  text-align: left;
+}
+
+.name {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 24px;
+  max-height: 48px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.date {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--typography-300);
+}
+
+.quote-wrapper {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.quote-container {
+  display: flex;
+  margin-top: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 10px;
+}
+
+.text {
+  width: 100%;
+  font-size: 14px;
+  line-height: 24px;
+  margin-left: 8px;
+  text-align: left;
+}
+
+.stars {
+  margin-left: auto;
+}
--- a/src/components/ChatsPath/components/Review2/index.tsx
+++ b/src/components/ChatsPath/components/Review2/index.tsx
@ -0,0 +1,39 @@
+import { images, IReview, sprites } from "../../data";
+import Stars from "../Stars";
+import styles from "./styles.module.scss";
+
+type TReviewProps = IReview;
+
+function Review2({ avatar, name, date, text }: TReviewProps) {
+  return (
+    <div className={styles.container}>
+      <div>
+        <Stars color="var(--star)" />
+        <p className={styles.text}>{text}</p>
+      </div>
+      <div className={styles.footer}>
+        <div className={styles["info-wrapper"]}>
+          <img
+            src={images(avatar)}
+            alt="avatar"
+            width="38"
+            height="38"
+            className={styles.avatar}
+          />
+          <div className={styles.info}>
+            <p className={styles.name}>{name}</p>
+            <div className={styles.verified}>
+              <svg width="16px" height="16px" aria-hidden="true">
+                <use xlinkHref={`${sprites}#trusted-customer`}></use>
+              </svg>
+              <span>Verified user</span>
+            </div>
+          </div>
+        </div>
+        <span className={styles.date}>{date}</span>
+      </div>
+    </div>
+  );
+}
+
+export default Review2;
--- a/src/components/ChatsPath/components/Review2/styles.module.scss
+++ b/src/components/ChatsPath/components/Review2/styles.module.scss
@ -0,0 +1,69 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 20px;
+  width: 100%;
+  position: relative;
+  background: var(--secondary-600);
+  color: var(--typography-800);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  margin-bottom: 20px;
+  text-align: left;
+  height: 310px;
+  width: 303px;
+}
+
+.text {
+  margin-top: 16px;
+  color: var(--typography-100);
+  font-size: 16px;
+  line-height: 1.65;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.info-wrapper {
+  display: flex;
+}
+
+.info {
+  margin-left: 12px;
+
+  & > .name {
+    color: var(--typography-100);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.35;
+  }
+
+  & > .verified {
+    margin-top: 2px;
+    display: flex;
+
+    & > svg {
+      fill: #219653;
+      flex-shrink: 0;
+    }
+
+    & > span {
+      margin-left: 4px;
+      color: var(--typography-300);
+      font-size: 12px;
+      line-height: 1.3;
+    }
+  }
+}
+
+.date {
+  color: var(--typography-300);
+  font-size: 12px;
+  line-height: 1.3334;
+}
--- a/src/components/ChatsPath/components/Stars/index.tsx
+++ b/src/components/ChatsPath/components/Stars/index.tsx
@ -0,0 +1,83 @@
+import styles from "./styles.module.scss";
+
+interface IStarsProps {
+  containerClassName?: string;
+  color?: string;
+}
+
+function Stars({
+  color = "rgb(250, 175, 0)",
+  containerClassName = "",
+}: IStarsProps) {
+  return (
+    <span
+      className={`${styles.stars} ${containerClassName}`}
+      role="img"
+      aria-label="5 Stars"
+      style={{ color }}
+    >
+      <span>
+        <span className={styles.star}>
+          <svg
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            data-testid="StarIcon"
+          >
+            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
+          </svg>
+        </span>
+      </span>
+      <span>
+        <span className={styles.star}>
+          <svg
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            data-testid="StarIcon"
+          >
+            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
+          </svg>
+        </span>
+      </span>
+      <span>
+        <span className={styles.star}>
+          <svg
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            data-testid="StarIcon"
+          >
+            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
+          </svg>
+        </span>
+      </span>
+      <span>
+        <span className={styles.star}>
+          <svg
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            data-testid="StarIcon"
+          >
+            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
+          </svg>
+        </span>
+      </span>
+      <span>
+        <span className={styles.star}>
+          <svg
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            data-testid="StarIcon"
+          >
+            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
+          </svg>
+        </span>
+      </span>
+    </span>
+  );
+}
+
+export default Stars;
--- a/src/components/ChatsPath/components/Stars/styles.module.scss
+++ b/src/components/ChatsPath/components/Stars/styles.module.scss
@ -0,0 +1,27 @@
+.stars {
+  display: inline-flex;
+  position: relative;
+  font-size: 1.5rem;
+  color: rgb(250, 175, 0);
+  cursor: pointer;
+  text-align: left;
+  width: min-content;
+  -webkit-tap-highlight-color: transparent;
+  pointer-events: none;
+}
+
+.star {
+  display: flex;
+  pointer-events: none;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  & > svg {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    fill: currentcolor;
+    flex-shrink: 0;
+    font-size: inherit;
+    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
--- a/src/components/ChatsPath/components/Summary/index.tsx
+++ b/src/components/ChatsPath/components/Summary/index.tsx
@ -0,0 +1,456 @@
+import { images } from "../../data";
+import styles from "./styles.module.scss";
+
+function Summary() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <h2 className={styles.title}>
+          Exclusive livechats with
+          <span className={styles["title-gradient"]}> professional </span>
+          psychics
+        </h2>
+        <div className={styles.astrologers}>
+          <span
+            style={{
+              boxSizing: "border-box",
+              display: "block",
+              overflow: "hidden",
+              width: "initial",
+              height: "initial",
+              background: "none",
+              opacity: 1,
+              border: "0px",
+              margin: "0px",
+              padding: "0px",
+              position: "relative",
+            }}
+          >
+            <span
+              style={{
+                boxSizing: "border-box",
+                display: "block",
+                width: "initial",
+                height: "initial",
+                background: "none",
+                opacity: 1,
+                border: "0px",
+                margin: "0px",
+                padding: "19.8339% 0px 0px",
+              }}
+            ></span>
+            <img
+              src={images("astrologers.webp")}
+              alt="astrologers"
+              style={{
+                position: "absolute",
+                inset: "0px",
+                boxSizing: "border-box",
+                padding: "0px",
+                border: "none",
+                margin: "auto",
+                display: "block",
+                width: "0px",
+                height: "0px",
+                minWidth: "100%",
+                maxWidth: "100%",
+                minHeight: "100%",
+                maxHeight: "100%",
+              }}
+              sizes="100vw"
+            />
+          </span>
+        </div>
+        <ul className={styles.list}>
+          <li className={styles["list-item"]}>
+            <svg
+              width="42"
+              height="39"
+              viewBox="0 0 42 39"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M32.5701 37.9861C34.043 36.7825 35.3661 35.4064 36.5107 33.8873C42.2964 26.1181 42.2964 15.8756 36.1791 8.42933C32.8733 4.45359 28.5746 1.80455 23.2853 0.813912C13.3657 -1.00483 4.1095 5.27729 1.29792 14.5357C0.395547 17.4746 0.255968 20.5948 0.892327 23.6025C1.52869 26.6102 2.92005 29.4065 4.9354 31.7281C8.90237 36.1915 14.5233 38.6714 20.4738 37.8411C30.5581 36.5232 37.6683 26.1049 34.3603 16.3501C32.8733 12.0536 29.5675 8.74564 25.4336 6.92909C17.168 3.45855 7.25056 8.91477 6.09298 17.8525C5.10014 24.9605 10.0599 31.9104 17.3349 32.5694C24.276 33.2283 30.7338 27.2801 29.8969 20.3368C29.238 15.8734 26.0947 11.9043 21.4666 11.2431C19.8447 11.0762 18.2069 11.3205 16.7043 11.9536C15.2017 12.5866 13.8828 13.588 12.8693 14.8652C10.3916 18.16 10.7211 22.6344 13.6974 25.446C15.6743 27.0978 18.3255 27.4229 20.8054 26.6036C23.002 25.7908 24.7812 23.5745 24.7592 21.3692"
+                stroke="url(#paint0_spiral_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <defs>
+                <linearGradient
+                  id="paint0_spiral_linear"
+                  x1="0.5"
+                  y1="17.5035"
+                  x2="56.4866"
+                  y2="18.1366"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+              </defs>
+            </svg>
+            <span className={styles["item-text"]}>
+              Learn about the possible twists of fate in your love life
+              (marriage, divorce, pregnancy and more).
+            </span>
+          </li>
+          <li className={styles["list-item"]}>
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M35.7347 27.3025L41.0493 21.4459C41.6243 20.8121 42.4266 20.4334 43.2799 20.3929C44.1332 20.3525 44.9675 20.6537 45.5995 21.2302L32.5518 40.955"
+                stroke="url(#paint0_hands_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M24.2988 40.9606C24.2988 35.9834 24.2988 35.9834 26.4728 33.692L32.4968 27.0556C32.8668 26.6605 33.3768 26.4273 33.9168 26.4061C34.4567 26.385 34.9833 26.5777 35.3828 26.9426C35.7824 27.3076 36.0228 27.8155 36.0522 28.3568C36.0816 28.898 35.8977 29.4292 35.5401 29.8355L31.6331 34.1418"
+                stroke="url(#paint1_hands_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M12.863 27.3038L7.54833 21.4472C7.26381 21.1335 6.92046 20.879 6.5379 20.6984C6.15534 20.5178 5.74105 20.4145 5.3187 20.3944C4.89634 20.3744 4.47419 20.438 4.07635 20.5817C3.6785 20.7253 3.31276 20.9461 3 21.2316L16.0477 40.9563"
+                stroke="url(#paint2_hands_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M24.3017 40.9608C24.3017 35.9836 24.3017 35.9836 22.1258 33.6922L16.1037 27.0558C15.7362 26.6507 15.2233 26.4087 14.6779 26.383C14.1326 26.3572 13.5993 26.5498 13.1955 26.9185C12.7917 27.2871 12.5504 27.8016 12.5247 28.3486C12.4991 28.8957 12.6911 29.4306 13.0586 29.8357L16.9674 34.142"
+                stroke="url(#paint3_hands_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M35.2792 11.6225C35.2002 8.51813 32.7689 6 29.6742 6C27.6086 6 25.5301 7.08763 24.297 8.51076C23.0621 7.08763 20.9836 6 18.918 6C15.8233 6 13.3939 8.51813 13.3149 11.6225C13.144 18.3768 22.2719 24.4841 24.297 25.6971C26.3203 24.4823 35.4501 18.375 35.2792 11.6225Z"
+                stroke="url(#paint4_hands_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <defs>
+                <linearGradient
+                  id="paint0_hands_linear"
+                  x1="32.5518"
+                  y1="29.7144"
+                  x2="50.6755"
+                  y2="29.8353"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint1_hands_linear"
+                  x1="24.2988"
+                  y1="33.0047"
+                  x2="40.6285"
+                  y2="33.1434"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint2_hands_linear"
+                  x1="3"
+                  y1="29.7158"
+                  x2="21.1238"
+                  y2="29.8367"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint3_hands_linear"
+                  x1="12.5225"
+                  y1="32.9917"
+                  x2="28.8838"
+                  y2="33.1308"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint4_hands_linear"
+                  x1="13.3125"
+                  y1="14.9312"
+                  x2="43.8254"
+                  y2="15.2892"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+              </defs>
+            </svg>
+            <span className={styles["item-text"]}>
+              Gain insight on what you need to do in order to find your way to
+              happiness in the present and in the future.
+            </span>
+          </li>
+          <li className={styles["list-item"]}>
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M24.0074 45.9552C30.1783 45.896 33.8611 42.4452 35.5248 36.6964C35.979 35.124 36.4628 33.3592 36.9318 31.5869C37.2685 31.8544 37.6757 32.0185 38.1038 32.0592C38.532 32.0998 38.9628 32.0153 39.3438 31.8159C39.7249 31.6164 40.0399 31.3107 40.2506 30.9357C40.4612 30.5608 40.5585 30.1327 40.5306 29.7035C40.6442 25.7541 43.6679 24.362 43.4927 21.9529C43.4334 21.189 43.0733 20.4799 42.4915 19.9815C41.9097 19.483 41.1538 19.2359 40.3899 19.2944C40.2046 19.3084 40.021 19.3407 39.842 19.3907C39.921 18.7495 39.9614 18.1041 39.9629 17.458C39.9629 13.2257 38.2816 9.16668 35.2889 6.17398C32.2962 3.18128 28.2373 1.5 24.0049 1.5C19.7726 1.5 15.7136 3.18128 12.7209 6.17398C9.72825 9.16668 8.04697 13.2257 8.04697 17.458C8.04852 18.1041 8.08891 18.7495 8.16792 19.3907C7.75637 19.2751 7.3243 19.2523 6.90289 19.324C6.48147 19.3957 6.08122 19.56 5.73101 19.8051C5.38081 20.0502 5.08939 20.37 4.87777 20.7414C4.66616 21.1129 4.53964 21.5266 4.50733 21.9529C4.33208 24.362 7.35582 25.7517 7.46937 29.7035C7.44148 30.1327 7.53878 30.5608 7.74945 30.9357C7.96012 31.3107 8.2751 31.6164 8.65617 31.8159C9.03724 32.0153 9.468 32.0998 9.89617 32.0592C10.3243 32.0185 10.7315 31.8544 11.0682 31.5869C11.5372 33.3592 12.0186 35.124 12.4752 36.6964C14.1488 42.4452 17.8365 45.896 24.0074 45.9552Z"
+                stroke="url(#paint0_head_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M27.7748 35.899C26.7744 36.8992 25.4177 37.4611 24.0031 37.4611C22.5885 37.4611 21.2318 36.8992 20.2314 35.899"
+                stroke="url(#paint1_head_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M20.6694 22.1234C20.2352 22.5577 19.7198 22.9022 19.1525 23.1372C18.5852 23.3723 17.9771 23.4932 17.363 23.4932C16.7489 23.4932 16.1409 23.3723 15.5736 23.1372C15.0062 22.9022 14.4908 22.5577 14.0566 22.1234"
+                stroke="url(#paint2_head_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M33.9467 22.1234C33.5126 22.5577 32.9971 22.9022 32.4298 23.1372C31.8625 23.3723 31.2544 23.4932 30.6404 23.4932C30.0263 23.4932 29.4182 23.3723 28.8509 23.1372C28.2836 22.9022 27.7681 22.5577 27.334 22.1234"
+                stroke="url(#paint3_head_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M25.5701 14.0194L30.998 12.452L25.5701 10.8846L24.0027 5.45419L22.4353 10.8846L17.0049 12.452L22.4353 14.0194L24.0027 19.4498L25.5701 14.0194Z"
+                stroke="url(#paint4_head_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <defs>
+                <linearGradient
+                  id="paint0_head_linear"
+                  x1="4.5"
+                  y1="21.6572"
+                  x2="58.6702"
+                  y2="22.1571"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint1_head_linear"
+                  x1="20.2314"
+                  y1="36.6073"
+                  x2="30.6829"
+                  y2="37.1382"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint2_head_linear"
+                  x1="14.0566"
+                  y1="22.7445"
+                  x2="23.2188"
+                  y2="23.2098"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint3_head_linear"
+                  x1="27.334"
+                  y1="22.7445"
+                  x2="36.4961"
+                  y2="23.2098"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint4_head_linear"
+                  x1="17.0049"
+                  y1="11.8002"
+                  x2="36.4406"
+                  y2="12.0046"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+              </defs>
+            </svg>
+            <span className={styles["item-text"]}>
+              Get peace of mind, insight on relationships and closure.
+            </span>
+          </li>
+          <li className={styles["list-item"]}>
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19.9221 20.6838L19.9221 6.79188C19.9221 5.78621 20.3216 4.82173 21.0327 4.11062C21.7438 3.3995 22.7083 3 23.714 3C24.7196 3 25.6841 3.3995 26.3952 4.11062C27.1064 4.82173 27.5059 5.78621 27.5059 6.79188L27.5059 20.6838"
+                stroke="url(#paint0_palm_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M27.5041 20.6834L27.5041 10.1077C27.5041 9.60972 27.6021 9.11664 27.7927 8.65659C27.9833 8.19653 28.2626 7.77852 28.6147 7.42641C28.9668 7.0743 29.3848 6.795 29.8449 6.60444C30.3049 6.41388 30.798 6.3158 31.2959 6.3158C31.7939 6.3158 32.287 6.41388 32.747 6.60444C33.2071 6.795 33.6251 7.0743 33.9772 7.42641C34.3293 7.77852 34.6086 8.19653 34.7992 8.65659C34.9897 9.11664 35.0878 9.60972 35.0878 10.1077L35.0878 29.5615C35.0878 29.5615 36.2865 22.9851 42.3358 22.5071C45.2601 22.2739 44.29 24.5779 44.29 24.5779C44.29 24.5779 41.8694 29.1743 42.2005 35.9162C42.5317 42.6581 36.3075 44.9995 31.2959 44.9995L16.1378 44.9995C11.1262 44.9995 4.90205 42.6675 5.23319 35.9162C5.56434 29.165 3.15536 24.5779 3.15536 24.5779C3.15536 24.5779 2.1829 22.2762 5.10726 22.5071C11.1472 22.9735 12.3366 29.5615 12.3366 29.5615L12.3366 10.1077C12.3366 9.10201 12.7361 8.13753 13.4472 7.42641C14.1583 6.7153 15.1228 6.3158 16.1284 6.3158C17.1341 6.3158 18.0986 6.7153 18.8097 7.42641C19.5208 8.13753 19.9203 9.10201 19.9203 10.1077L19.9203 20.6834"
+                stroke="url(#paint1_palm_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M14.075 34.5883C14.075 34.5883 18.3916 39.6744 23.7133 39.6744C29.035 39.6744 33.3516 34.5883 33.3516 34.5883C33.3516 34.5883 29.0443 29.5021 23.7133 29.5021C18.3823 29.5021 14.075 34.5883 14.075 34.5883Z"
+                stroke="url(#paint2_palm_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M21.5609 35.0967C21.2805 33.9084 22.0164 32.7177 23.2048 32.4372C24.3931 32.1567 25.5838 32.8927 25.8642 34.081C26.1447 35.2693 25.4087 36.46 24.2204 36.7405C23.0321 37.021 21.8414 36.285 21.5609 35.0967Z"
+                stroke="url(#paint3_palm_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <defs>
+                <linearGradient
+                  id="paint0_palm_linear"
+                  x1="27.5059"
+                  y1="11.0183"
+                  x2="16.9715"
+                  y2="11.0658"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint1_palm_linear"
+                  x1="44.4443"
+                  y1="23.856"
+                  x2="-13.1183"
+                  y2="24.5048"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint2_palm_linear"
+                  x1="33.3516"
+                  y1="34.1145"
+                  x2="6.58521"
+                  y2="34.6481"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint3_palm_linear"
+                  x1="24.4208"
+                  y1="36.6932"
+                  x2="22.9473"
+                  y2="30.731"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+              </defs>
+            </svg>
+            <span className={styles["item-text"]}>
+              Resolve unanswered questions through a professional medium
+              reading.
+            </span>
+          </li>
+          <li className={styles["list-item"]}>
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M35.1324 10.2766C35.0515 7.08779 32.5464 4.5 29.3576 4.5C27.2287 4.5 25.0854 5.61934 23.8131 7.07879C22.5408 5.61934 20.3993 4.5 18.2704 4.5C15.0798 4.5 12.5747 7.08779 12.4938 10.2766C12.3138 17.2158 21.7256 23.4927 23.8131 24.7398C25.9006 23.4855 35.3106 17.2158 35.1324 10.2766Z"
+                stroke="url(#paint0_heart_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M25.0315 38.2332C35.0247 35.3242 42.5801 31.0917 41.907 28.7795C41.2339 26.4673 32.5873 26.951 22.5941 29.86C12.601 32.7689 5.04563 37.0015 5.7187 39.3137C6.39177 41.6259 15.0384 41.1421 25.0315 38.2332Z"
+                stroke="url(#paint1_heart_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M41.907 39.3079C42.5801 36.9957 35.0247 32.7632 25.0315 29.8542C15.0384 26.9453 6.39177 26.4615 5.7187 28.7737C5.04563 31.0859 12.601 35.3185 22.5941 38.2274C32.5873 41.1364 41.2339 41.6201 41.907 39.3079Z"
+                stroke="url(#paint2_heart_linear)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <defs>
+                <linearGradient
+                  id="paint0_heart_linear"
+                  x1="12.4912"
+                  y1="13.6773"
+                  x2="43.9412"
+                  y2="14.0474"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint1_heart_linear"
+                  x1="5.60518"
+                  y1="38.9237"
+                  x2="56.4344"
+                  y2="26.6016"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+                <linearGradient
+                  id="paint2_heart_linear"
+                  x1="20.9088"
+                  y1="37.7368"
+                  x2="24.3228"
+                  y2="26.1139"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6A4DBC"></stop>
+                  <stop offset="1" stopColor="#F2994A"></stop>
+                </linearGradient>
+              </defs>
+            </svg>
+            <span className={styles["item-text"]}>
+              Find out if your partner is your soul mate or a recipe for
+              disaster.
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default Summary;
--- a/src/components/ChatsPath/components/Summary/styles.module.scss
+++ b/src/components/ChatsPath/components/Summary/styles.module.scss
@ -0,0 +1,61 @@
+.container {
+  background: var(--secondary-700);
+  padding: 50px 15px;
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: 1068px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.title {
+  font-family: Open Sans, sans-serif;
+  font-size: 24px;
+  text-align: center;
+  line-height: 32px;
+  font-weight: 600;
+  margin-bottom: 50px;
+  max-width: 796px;
+
+  & > .title-gradient {
+    background: var(--gradient-pink-base);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.astrologers {
+  width: 100%;
+  max-width: 539px;
+  margin-bottom: 50px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  max-width: 590px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: left;
+
+  & > .list-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+
+    & > svg {
+      width: 48px;
+      flex-shrink: 0;
+    }
+
+    & > .item-text {
+      font-size: 14px;
+      line-height: 24px;
+      margin-left: 20px;
+    }
+  }
+}
--- a/src/components/ChatsPath/components/Tip/index.tsx
+++ b/src/components/ChatsPath/components/Tip/index.tsx
@ -0,0 +1,18 @@
+import styles from "./styles.module.scss";
+
+interface ITipProps {
+  icon: string;
+  text: string;
+}
+
+function Tip({ icon, text }: ITipProps) {
+  return (
+    <div className={styles["tip-container"]}>
+      <p className={styles.tip}>
+        <span>{icon}</span> {text}
+      </p>
+    </div>
+  );
+}
+
+export default Tip;
--- a/src/components/ChatsPath/components/Tip/styles.module.scss
+++ b/src/components/ChatsPath/components/Tip/styles.module.scss
@ -0,0 +1,22 @@
+.tip-container {
+  text-align: left;
+  padding: 10px 15px;
+  background: var(--white-with-opacity-5);
+  border: 1px solid var(--white-with-opacity-15);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  display: flex;
+
+  & > .tip {
+    display: flex;
+    font-size: 13px;
+    line-height: 145%;
+
+    & > span {
+      margin-top: 7px;
+      font-size: 24px;
+      margin-right: 10px;
+      height: 100%;
+    }
+  }
+}
--- a/src/components/ChatsPath/components/YesNoButtons/index.tsx
+++ b/src/components/ChatsPath/components/YesNoButtons/index.tsx
@ -0,0 +1,60 @@
+import styles from "./styles.module.scss";
+
+interface IYesNoButtonProps {
+  onClick: (answer: "yes" | "no") => void;
+}
+
+function YesNoButtons({ onClick }: IYesNoButtonProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles["button-container"]}>
+        <button
+          className={styles.button}
+          type="button"
+          onClick={() => onClick("no")}
+        >
+          <span className={styles.label}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              role="img"
+              className={styles.icon}
+              fill="var(--error)"
+            >
+              <title>cross</title>
+              <path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z"></path>
+            </svg>
+            <span className={styles.text}>No</span>
+          </span>
+        </button>
+      </div>
+      <div className={styles["button-container"]}>
+        <button
+          className={styles.button}
+          type="button"
+          onClick={() => onClick("yes")}
+        >
+          <span className={styles.label}>
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              xmlns="http://www.w3.org/2000/svg"
+              role="img"
+              className={styles.icon}
+              fill="var(--success)"
+            >
+              <title>Check</title>
+              <path d="M13.8193 20.2573L26.0753 8L27.962 9.88533L13.8193 24.028L5.33398 15.5427L7.21932 13.6573L13.8193 20.2573Z"></path>
+            </svg>
+            <span className={styles.text}>Yes</span>
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default YesNoButtons;
--- a/src/components/ChatsPath/components/YesNoButtons/styles.module.scss
+++ b/src/components/ChatsPath/components/YesNoButtons/styles.module.scss
@ -0,0 +1,58 @@
+.container {
+  margin-top: 24px;
+  width: 100%;
+  display: flex;
+}
+
+.button-container {
+  height: 50px;
+  flex-basis: calc(50% - 6px);
+  margin-top: 0;
+  margin-bottom: 0;
+
+  &:not(:last-child) {
+    margin-right: 12px;
+  }
+
+  & > .button {
+    display: inline-flex;
+    align-items: center;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    padding: 5px 10px;
+    align-self: center;
+    outline: none;
+    color: var(--typography-100);
+    font-size: 16px;
+    line-height: 24px;
+    transition: all 0.15s ease-in-out 0ms;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    background: none;
+    border-radius: 30px;
+    border: 1px solid var(--primary);
+
+    &:active {
+      transform: scale(1.03);
+    }
+
+    & > .label {
+      display: inherit;
+      align-items: inherit;
+      justify-content: inherit;
+
+      & > .text {
+        margin-left: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 135%;
+        padding-right: 6px;
+      }
+    }
+  }
+}
--- a/src/components/ChatsPath/components/ZodiacWheel/index.tsx
+++ b/src/components/ChatsPath/components/ZodiacWheel/index.tsx
@ -0,0 +1,52 @@
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { images } from "../../data";
+import ZodiacWheelSVG from "../../ui/ZodiacWheelSVG";
+import styles from "./styles.module.scss";
+
+interface IZodiacWheelProps {
+  date: string;
+}
+
+const zodiacs = [
+  "Gemini",
+  "Cancer",
+  "Leo",
+  "Virgo",
+  "Libra",
+  "Scorpio",
+  "Sagittarius",
+  "Capricorn",
+  "Aquarius",
+  "Pisces",
+  "Aries",
+  "Taurus",
+];
+
+function ZodiacWheel({ date }: IZodiacWheelProps) {
+  const zodiac = getZodiacSignByDate(date);
+
+  const getWheelRotation = () => {
+    const index = zodiacs.indexOf(zodiac);
+    if (index === -1) return 0;
+    return index * 30;
+  };
+
+  return (
+    <div className={styles.container}>
+      <ZodiacWheelSVG
+        currentZodiac={zodiac}
+        className={styles["zodiac-wheel"]}
+        style={{ transform: `rotate(-${getWheelRotation()}deg)` }}
+      />
+      <img
+        className={styles["wheel-arrow"]}
+        src={images("zodiac-wheel-arrow.svg")}
+        alt="wheel arrow"
+        width={93}
+        height={152}
+      />
+    </div>
+  );
+}
+
+export default ZodiacWheel;
--- a/src/components/ChatsPath/components/ZodiacWheel/styles.module.scss
+++ b/src/components/ChatsPath/components/ZodiacWheel/styles.module.scss
@ -0,0 +1,23 @@
+.container {
+  position: relative;
+  width: 250px;
+  height: 125px;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.zodiac-wheel {
+  & path {
+    fill: var(--secondary);
+  }
+}
+
+.wheel-arrow {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  right: 50%;
+  transform: translateX(-50%);
+  color: transparent;
+}
--- a/src/components/ChatsPath/data/index.tsx
+++ b/src/components/ChatsPath/data/index.tsx
@ -0,0 +1,96 @@
+import React from "react";
+
+export const sprites = "/chats/sprites.svg";
+export const images = (path: string) => `/chats/${path}`;
+
+export interface IReview {
+  avatar: string;
+  name: string;
+  date: string;
+  text: string;
+}
+
+export const welcomeReviews: IReview[] = [
+  {
+    avatar: "angel.webp",
+    name: "Angel",
+    date: "06/09/2021",
+    text: "Absolutely incredible - readings have helped me in ways I never knew were possible. Thank you isn’t enough to describe how grateful I am. The consultation helped me figure out my relationship and mend fences with my husband. ",
+  },
+  {
+    avatar: "hanna.webp",
+    name: "Hanna",
+    date: "29/08/2021",
+    text: "It was really helpful. Finally, I let go of my ex-boyfriend, knowing he no longer felt anything for me. It made me feel so much better! Now I clearly understand what I should do with my life. I'll contact you again for advice and support. ",
+  },
+  {
+    avatar: "christofer.webp",
+    name: "Christofer",
+    date: "11/10/2021",
+    text: "So accurate with readings! I am shocked! Such a great soul that will do his best to help as much as possible and be very transparent if needed! Very happy with this site! ❤️",
+  },
+];
+
+interface IProgressBarSteps {
+  name: string;
+  length: number;
+  index: number;
+}
+
+export const progressBarSteps: IProgressBarSteps[] = [
+  {
+    index: 1,
+    name: "Your profile",
+    length: 5,
+  },
+  {
+    index: 2,
+    name: "Personal traits",
+    length: 16,
+  },
+  {
+    index: 3,
+    name: "Preferences",
+    length: 8,
+  },
+];
+
+export interface IAnswer {
+  id: number;
+  value: string;
+  name: string | React.ReactNode;
+  questionId: string;
+  onClick?: () => void;
+}
+
+export interface IDrawerMenuItem {
+  text: string;
+  link: string;
+}
+
+export const drawerMenuItems: IDrawerMenuItem[] = [
+  {
+    text: "Privacy policy",
+    link: "https://aura.wit.life/privacy",
+  },
+  {
+    text: "Terms of use",
+    link: "https://aura.wit.life/terms",
+  },
+  {
+    text: "Money back policy",
+    link: "https://aura.wit.life/privacy",
+  },
+  {
+    text: "Cookie policy",
+    link: "https://aura.wit.life/privacy",
+  },
+  {
+    text: "FAQ",
+    link: "https://aura.wit.life/privacy",
+  },
+  {
+    text: "Contact us",
+    link: "https://witapps.us/en#contact-us",
+  },
+];
--- a/src/components/ChatsPath/hooks/useUpdateStep.ts
+++ b/src/components/ChatsPath/hooks/useUpdateStep.ts
@ -0,0 +1,12 @@
+import { actions } from "@/store";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+
+
+export const useUpdateStep = (step: number) => {
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(actions.chats.updateCurrentStep(step));
+    }, [dispatch, step]);
+};
--- a/src/components/ChatsPath/pages/AnswerHub/index.tsx
+++ b/src/components/ChatsPath/pages/AnswerHub/index.tsx
@ -0,0 +1,65 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import Button from "../../ui/Button";
+import AnimateMessages, {
+  IAnimateMessage,
+} from "../../components/AnimateMessages";
+
+const messages: IAnimateMessage[] = [
+  {
+    name: "Taylor",
+    text: "Will my ex and I get back together?",
+    avatar: "Avatar-2.webp",
+  },
+  {
+    name: "Shawn",
+    text: "When will I start a new relationship?",
+    avatar: "Avatar-4.webp",
+  },
+  {
+    name: "Philip",
+    text: "How is my ex feeling about me?",
+    avatar: "Avatar-6.webp",
+  },
+  {
+    name: "Darrell",
+    text: "Is there anything unresolved with my ex?",
+    avatar: "Avatar-8.webp",
+  },
+  {
+    name: "Arthur",
+    text: "Does my ex think about me?",
+    avatar: "Avatar-10.webp",
+  },
+];
+
+function AnswerHub() {
+  const navigate = useNavigate();
+
+  const handleNext = () => {
+    navigate(routes.client.chatsQuizWhatYouWant());
+  };
+
+  return (
+    <section className={styles.container}>
+      <AnimateMessages messages={messages} />
+      <Title className={styles.title} variant="h2">
+        Get answers to every question that bothers you
+      </Title>
+      <p className={styles.text}>
+        Our experts already helped <strong>10 million men</strong> with their
+        personal questions, and look forward to{" "}
+        <span className={styles.purple}>
+          guiding you towards confident choices
+        </span>
+      </p>
+      <Button classNameContainer={styles.button} onClick={handleNext}>
+        Continue
+      </Button>
+    </section>
+  );
+}
+
+export default AnswerHub;
--- a/src/components/ChatsPath/pages/AnswerHub/styles.module.scss
+++ b/src/components/ChatsPath/pages/AnswerHub/styles.module.scss
@ -0,0 +1,51 @@
+.container {
+  max-width: 360px;
+  width: 100%;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 16px;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.title {
+  color: var(--typography-100);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 150%;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.text {
+  color: var(--typography-100);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 135%;
+  text-align: center;
+  margin-bottom: 80px;
+
+  & > strong {
+    font-weight: 700;
+  }
+
+  & > .purple {
+    color: var(--primary);
+  }
+}
+
+.button {
+  margin: 0;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(0dvh + 30px);
+  & > button {
+    height: 50px;
+    font-weight: 600;
+  }
+
+  &.back-button > button {
+    background: transparent;
+  }
+}
--- a/Show More
+++ b/Show More