feat: design and spacing added

src/assets/images/winsoo.svg

@@ -0,0 +1,14 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.4868 47.1982C49.7614 46.8688 49.0752 46.4729 48.4423 45.9976C48.2444 45.8531 48.0726 45.6682 47.8616 45.4833C47.7952 45.5366 47.7822 45.6279 47.7822 45.7203C47.7822 46.1292 47.8486 46.5251 48.178 46.8154C48.2966 46.9209 48.4281 47.0264 48.5478 47.1319C46.6219 47.1579 45.1049 45.5888 44.2349 44.0456C43.8 43.2539 43.4966 42.608 43.3377 42.1067C43.2323 41.8293 43.0343 41.6978 42.757 41.6978C42.3742 41.6978 42.1763 41.8957 42.1763 42.2785C41.9914 44.8504 41.3585 48.5695 40.3961 51.3796C40.37 51.4459 40.3167 51.5905 40.2373 51.8145C40.2243 51.8406 40.2243 51.8679 40.2112 51.8939C40.1449 52.0788 40.0666 52.2637 40.0003 52.4344C39.5783 53.3707 39.09 53.7132 38.8791 53.8329C38.6811 53.9253 38.4571 53.9775 38.2331 53.9645C35.4373 53.6871 36.3345 47.555 36.4257 45.2462C36.5846 43.4922 36.7552 41.9882 36.914 40.7224C37.1511 39.2456 36.2942 38.0059 34.8566 37.6753L34.0257 37.5165C33.9463 37.5034 33.8681 37.4904 33.8017 37.4773C33.7757 37.4773 33.7484 37.4643 33.7093 37.4643C32.3771 37.3588 32.0868 38.691 32.0868 38.691C32.0737 38.7301 32.0607 38.7834 32.0477 38.8356C31.8367 39.9568 31.5594 42.0806 31.4278 43.6107C30.834 47.0133 29.5813 50.9837 28.434 54.5049C27.6032 56.8658 26.9703 58.4883 25.7697 60.3348C25.5849 60.5849 25.4142 60.7568 25.2554 60.8883C21.8788 63.4211 22.4726 48.8859 22.9206 46.3935C23.3034 42.832 24.0417 39.152 25.1369 35.3677C25.6903 33.9431 25.0574 32.2021 23.8177 31.4246L22.6705 30.6068C21.7603 29.8021 20.165 30.2904 19.8746 31.4246C17.1843 38.6791 15.6803 47.9639 16.4589 55.8513C16.8145 58.6874 17.3952 61.7867 19.506 63.4613C19.506 63.4613 20.7849 64.5434 21.8669 64.5695C22.2628 64.5825 22.6183 64.5304 22.8957 64.464C23.1066 64.4249 23.1991 64.3716 23.1991 64.3716C23.5025 64.2661 23.6874 64.1606 23.6874 64.1606C24.8477 63.5799 25.8373 62.3674 26.7072 61.1005L27.1955 60.2827C28.9887 57.0779 30.3481 52.8445 31.3105 49.2569C31.5214 51.4862 32.0228 54.1375 33.368 55.8382C34.9644 57.6848 37.7472 58.0806 39.3294 56.0492C41.7294 53.1479 42.5081 48.2151 43.0746 44.6536C43.6814 45.5899 44.4992 46.5535 45.4746 47.2516C46.0554 47.7659 46.7404 48.0954 47.5321 48.2282C47.9801 48.3076 48.4293 48.3467 48.8903 48.4131C48.8512 48.4391 48.8109 48.4794 48.7588 48.5185C48.4163 48.7556 48.376 48.835 48.4684 49.2439C48.4814 49.3363 48.5217 49.4288 48.5609 49.5342C48.6403 49.4951 48.7054 49.4679 48.7588 49.4418C49.3917 49.1253 50.0115 48.7828 50.6444 48.4794C50.8032 48.4 50.8554 48.3076 50.8684 48.176C50.9348 47.8987 50.8554 47.6356 50.7499 47.3973C50.7108 47.3049 50.5911 47.2528 50.4856 47.1994L50.4868 47.1982Z" fill="#FF751F"/>
+<path d="M55.4989 41.9627C56.5988 41.9627 57.49 41.0714 57.49 39.9716C57.49 38.8717 56.5988 37.9805 55.4989 37.9805C54.3991 37.9805 53.5078 38.8717 53.5078 39.9716C53.5078 41.0714 54.3991 41.9627 55.4989 41.9627Z" fill="#FF751F"/>
+<path d="M110.32 46.4188C109.278 45.0475 107.88 44.3613 106.112 44.3613C104.345 44.3613 102.921 45.0475 101.879 46.4188C100.943 47.6585 100.48 49.1755 100.48 50.9687C100.48 52.7619 100.943 54.3062 101.879 55.5317C102.872 56.852 104.202 57.5477 105.867 57.6093C105.903 57.6117 105.938 57.6153 105.974 57.6153C105.988 57.6153 106.002 57.6129 106.016 57.6129C106.048 57.6129 106.08 57.6153 106.114 57.6153C107.868 57.6153 109.279 56.929 110.321 55.5317C111.27 54.292 111.746 52.775 111.746 50.9687C111.746 49.1625 111.27 47.6715 110.321 46.4188H110.32ZM106.112 55.6147C105.086 55.6147 104.254 53.543 104.254 50.9889C104.254 48.4348 105.086 46.3631 106.112 46.3631C107.139 46.3631 107.971 48.4348 107.971 50.9889C107.971 53.543 107.139 55.6147 106.112 55.6147Z" fill="#FF751F"/>
+<path d="M93.3019 44.3613C91.5218 44.3613 90.1102 45.0475 89.0684 46.4188C88.1321 47.6585 87.6699 49.1755 87.6699 50.9687C87.6699 52.7619 88.1321 54.3062 89.0684 55.5317C90.0616 56.852 91.3914 57.5477 93.0566 57.6093C93.0921 57.6117 93.1277 57.6153 93.1633 57.6153C93.1775 57.6153 93.1917 57.6129 93.2059 57.6129C93.2391 57.6129 93.2699 57.6153 93.3031 57.6153C95.0572 57.6153 96.4687 56.929 97.5105 55.5317C98.4599 54.292 98.9351 52.775 98.9351 50.9687C98.9351 49.1625 98.4599 47.6715 97.5105 46.4188C96.4687 45.0475 95.0702 44.3613 93.3031 44.3613H93.3019ZM93.3019 55.6147C92.2756 55.6147 91.4436 53.543 91.4436 50.9889C91.4436 48.4348 92.2756 46.3631 93.3019 46.3631C94.3283 46.3631 95.1603 48.4348 95.1603 50.9889C95.1603 53.543 94.3283 55.6147 93.3019 55.6147Z" fill="#FF751F"/>
+<path d="M71.5634 45.3259C70.838 44.693 69.9148 44.3766 68.8066 44.3766C67.6985 44.3766 66.7361 44.7463 66.0108 45.4847C65.9183 45.5771 65.852 45.6826 65.7868 45.7881L65.628 46.0382C65.3909 45.4574 64.8363 44.9431 64.2567 44.7724L63.4259 44.469C62.7397 44.1395 61.8567 44.706 61.8828 45.4456C61.8567 45.8414 61.8306 46.2503 61.8164 46.6592V55.9049C61.8164 56.866 62.5963 57.6459 63.5574 57.6459H65.1005C65.4561 57.6459 65.7465 57.3555 65.7465 57V50.0488L65.8045 48.7606C65.8164 48.5093 65.8437 48.258 65.8946 48.0115V48.008C65.9065 47.9653 65.9266 47.8728 65.9574 47.7294C65.9634 47.7128 65.961 47.6963 65.9669 47.6785C65.993 47.56 66.0262 47.4414 66.0534 47.3312C66.2371 46.7256 66.5086 46.4767 66.6283 46.3878C66.742 46.3155 66.8748 46.2657 67.0134 46.2563C68.745 46.2041 68.681 50.0251 68.8066 51.4426C68.8481 52.5271 68.8623 53.4598 68.8659 54.2468C68.8635 54.3179 68.8659 54.3866 68.8718 54.4554V55.944C68.8718 56.8803 69.6374 57.6459 70.5737 57.6459H72.1702C72.5257 57.6459 72.8161 57.3555 72.8161 57V48.5721C72.8161 47.1606 72.3942 46.0797 71.5634 45.3271V45.3259Z" fill="#FF751F"/>
+<path d="M81.7386 49.2335L80.9741 48.9301L80.2618 48.6397C79.7083 48.4157 79.2722 48.2178 78.9688 48.046C78.3774 47.6928 78.0206 47.291 77.8938 46.8359C77.8654 46.1745 78.1451 45.6543 78.9676 45.4765C81.0879 45.0166 82.7507 45.9446 83.5543 46.5408C83.8778 46.7802 84.3282 46.7482 84.6114 46.4614C84.6695 46.4021 84.6671 46.3049 84.6079 46.2457L84.4076 46.043C83.54 45.0901 82.3383 44.5343 80.8023 44.3778C79.2983 44.2332 78.0194 44.5224 77.0037 45.275C76.0544 45.9612 75.514 46.8311 75.4073 47.9132C75.3018 48.9811 75.6443 49.8913 76.436 50.6297C76.9765 51.118 77.8737 51.6323 79.1394 52.1597L79.9039 52.4631L80.6031 52.7796C80.6328 52.7926 80.6612 52.8057 80.6897 52.8187C81.1151 53.0131 81.6947 53.3828 81.9697 53.7455C82.247 54.1117 82.3513 54.2978 82.4058 54.7671C82.4923 55.5114 82.1048 56.2818 81.2111 56.4762C79.0908 56.936 77.428 56.008 76.6245 55.4119C76.3021 55.1725 75.8553 55.2033 75.5709 55.4877C75.5104 55.5482 75.5104 55.6465 75.5709 55.707L75.5827 55.7188C75.5874 55.7331 75.5946 55.7473 75.6052 55.7603C76.5024 56.8021 77.8476 57.4089 79.6277 57.5938C81.3297 57.7657 82.714 57.4753 83.7688 56.7097C84.7714 56.0365 85.3249 55.1132 85.4434 53.9399C85.575 52.7002 85.2455 51.6584 84.4538 50.8406C83.8861 50.2729 82.9901 49.7455 81.7374 49.2311L81.7386 49.2335ZM82.3264 44.9194L81.9922 44.8187C82.106 44.8483 82.2174 44.8815 82.3264 44.9194Z" fill="#FF751F"/>
+<path d="M59.0929 56.6361C58.9175 56.597 58.7161 56.5425 58.4968 56.469C57.9765 56.296 57.5972 55.8361 57.5439 55.2909C57.5344 55.1949 57.5297 55.0954 57.5297 54.9946V46.5798C57.4503 45.749 56.8304 44.9976 56.0529 44.7724L55.2221 44.469C54.5359 44.1395 53.6529 44.706 53.679 45.4456C53.6399 45.8675 53.6257 46.3025 53.5996 46.7517V51.605C53.5996 53.5179 54.1803 55.0207 55.3276 56.1158C56.2971 57.0367 57.5451 57.5286 59.0526 57.6151C59.1024 57.6198 59.1534 57.6198 59.2032 57.6234C59.266 57.6257 59.3264 57.6317 59.3904 57.6328C59.3916 57.6328 59.394 57.6328 59.3952 57.6328C59.4283 57.6328 59.4615 57.6376 59.4947 57.6376C59.5113 57.6376 59.5267 57.6328 59.5409 57.6269H59.5587C59.6441 57.634 59.7175 57.57 59.7246 57.4847C59.7543 57.0841 59.4864 56.7262 59.0953 56.6373L59.0929 56.6361Z" fill="#FF751F"/>
+<path d="M83.0065 74.4174C84.0957 74.4174 84.9799 73.5344 84.9799 72.444C84.9799 71.3537 84.0969 70.4707 83.0065 70.4707C81.9162 70.4707 81.0332 71.3537 81.0332 72.444C81.0332 73.5344 81.9162 74.4174 83.0065 74.4174Z" fill="#FF751F"/>
+<path d="M86.5827 92.082C85.4935 92.082 84.6094 92.965 84.6094 94.0554C84.6094 95.1457 85.4923 96.0287 86.5827 96.0287C87.6731 96.0287 88.556 95.1457 88.556 94.0554C88.556 92.965 87.6731 92.082 86.5827 92.082Z" fill="#FF751F"/>
+<path d="M91.0163 96.0287C92.1061 96.0287 92.9896 95.1452 92.9896 94.0554C92.9896 92.9655 92.1061 92.082 91.0163 92.082C89.9265 92.082 89.043 92.9655 89.043 94.0554C89.043 95.1452 89.9265 96.0287 91.0163 96.0287Z" fill="#FF751F"/>
+<path d="M95.9794 78.8731C95.9794 78.0553 95.7222 76.7208 95.2066 74.8731C95.0775 74.4109 94.4861 74.277 94.1708 74.6384L93.3459 75.5818C92.6194 76.4138 92.5281 77.6204 93.1101 78.5602C93.3743 78.9869 93.6327 79.4242 93.884 79.8698C93.9148 79.9255 93.9456 79.9801 93.9752 80.0346C94.6212 81.2067 93.8378 82.6574 92.5021 82.7463C91.6961 82.7996 90.7148 82.8269 89.5592 82.8269C88.0055 82.8269 86.857 82.5057 86.1127 81.8645C85.3696 81.2221 84.9975 80.1922 84.9975 78.7735V77.093C84.9975 76.9021 84.7972 76.7789 84.6265 76.8642L84.3989 76.978C84.1418 77.1072 83.9699 77.3608 83.9462 77.6476L83.7483 80.0571C83.6807 80.7552 83.4615 81.3015 83.0893 81.6962C82.7172 82.0909 82.1376 82.3777 81.3495 82.5578C80.5601 82.738 79.4686 82.8281 78.0724 82.8281H77.7346C77.7133 82.8281 77.6932 82.8304 77.6718 82.8316C76.1512 82.8221 75.0241 82.5021 74.2917 81.8692C73.5486 81.2269 73.1764 80.197 73.1764 78.7783V77.1404C73.1764 76.9306 72.956 76.7943 72.7675 76.8879L72.6194 76.9626C72.3349 77.1048 72.1441 77.3833 72.1145 77.6998L71.8917 80.063C71.8016 81.0764 71.5812 81.7922 71.2327 82.2082C70.8831 82.6254 70.3711 82.8328 69.6955 82.8328C68.7948 82.8328 68.0624 82.5341 67.4994 81.938C66.9364 81.3418 66.6544 80.4909 66.6544 79.3875V78.469C66.6544 78.4168 66.6117 78.3741 66.5595 78.3741C66.5157 78.3741 66.4778 78.4038 66.4671 78.4464L66.1471 79.7264C65.8769 80.8073 65.4265 81.5967 64.796 82.0909C64.1655 82.5863 63.2078 82.834 61.9243 82.834C60.8884 82.834 60.0943 82.5187 59.5421 81.8882C58.9898 81.2577 58.7148 80.3901 58.7148 79.2867V77.7934C58.7148 77.7412 58.6721 77.6986 58.62 77.6986C58.5761 77.6986 58.5382 77.7282 58.5287 77.7709L58.1412 79.3875C57.8259 80.5821 57.2345 81.4544 56.3669 82.0055C55.4994 82.5578 54.1992 82.8328 52.4653 82.8328L36.3776 82.8281H36.1489C35.0206 82.8281 34.0594 82.0364 33.8081 80.9365C33.6149 80.0903 33.3506 79.2962 33.0152 78.5543C32.4404 77.2826 31.7258 76.2858 30.8701 75.5641C30.0143 74.8435 29.0911 74.4832 28.0991 74.4832C27.1071 74.4832 26.1281 75.0402 25.2949 76.1555C24.4618 77.2707 23.8087 78.6337 23.3358 80.2432C22.8629 81.8538 22.6259 83.3341 22.6259 84.6864C22.6259 85.9024 22.9803 86.8541 23.6902 87.5415C24.4001 88.229 25.4526 88.5715 26.8487 88.5715C27.4781 88.5715 28.1038 88.5572 28.7249 88.5324L33.5474 88.5051C33.5438 88.5241 33.5415 88.5442 33.5379 88.5644C33.4621 88.8998 33.2783 89.2044 33.0058 89.426C32.3053 89.9925 31.2884 90.5235 29.9575 91.0212C28.1773 91.6849 25.9989 92.2254 23.42 92.6426C21.5829 92.9389 19.6463 93.1534 17.609 93.2838C16.4973 93.3549 15.9166 94.6467 16.6063 95.5214C16.7936 95.7596 16.9702 95.9718 17.1349 96.1567C17.6872 96.7753 18.1992 97.2044 18.6721 97.4402C19.145 97.6772 19.6736 97.7946 20.2603 97.7946C21.9266 97.7946 23.83 97.4402 25.9705 96.7303C28.1098 96.0204 29.6979 95.1931 30.7338 94.2473C31.4318 93.6393 32.0398 92.8393 32.5578 91.8485C33.0757 90.8577 33.4703 89.7424 33.7406 88.5039H35.1261L51.2138 88.5087C52.6549 88.5087 53.8259 88.1827 54.7278 87.5285C55.6286 86.8755 56.3717 85.727 56.9572 84.082C57.0247 85.5469 57.3791 86.6503 58.0215 87.3934C58.6638 88.1365 59.5468 88.5087 60.6739 88.5087C61.6647 88.5087 62.5098 88.1993 63.2078 87.5795C63.9059 86.9608 64.5032 85.9297 64.9986 84.4885C65.0887 85.7045 65.4715 86.6787 66.1471 87.4112C66.8226 88.1436 67.6452 88.5087 68.6135 88.5087C69.9871 88.5087 71.0798 87.0675 71.8905 84.1839C72.0031 85.5575 72.4475 86.6218 73.225 87.3768C74.0025 88.1318 75.0775 88.5087 76.4511 88.5087L76.4535 88.5004C76.4629 88.5015 76.4724 88.5039 76.4831 88.5039H76.8209C78.7575 88.5039 80.2389 88.1152 81.2641 87.3389C82.2893 86.5614 83.1166 85.2269 83.7471 83.3353C83.7921 85.1155 84.1975 86.4215 84.9631 87.2547C85.7287 88.0879 86.844 88.5051 88.3077 88.5051C89.0283 88.5051 89.6706 88.4435 90.2336 88.319C90.7966 88.1958 91.337 87.9978 91.8549 87.7276C92.3729 87.4349 92.9584 86.7652 93.6114 85.7175C94.2644 84.6698 94.8215 83.5048 95.2837 82.2212C95.7447 80.9377 95.977 79.8224 95.977 78.8767L95.9794 78.8731ZM23.7649 82.5792C23.6215 81.5635 25.5569 80.4506 28.0861 80.0938C30.6164 79.7371 32.7829 80.2716 32.9263 81.2873C33.0698 82.303 31.1343 83.4159 28.6052 83.7727C26.0748 84.1294 23.9083 83.5949 23.7649 82.5792Z" fill="#FF751F"/>
+<path d="M110.878 79.4476C110.338 77.9163 109.599 76.7051 108.665 75.815C107.73 74.9261 106.711 74.4805 105.608 74.4805C104.572 74.4805 103.637 75.0375 102.803 76.1528C101.97 77.268 101.317 78.631 100.844 80.2405C100.371 81.8511 100.134 83.3314 100.134 84.6837C100.134 85.8784 100.477 86.8242 101.165 87.5223C101.852 88.2203 102.826 88.57 104.088 88.57C105.35 88.57 106.588 88.3732 107.805 87.9785C109.021 87.5851 110.046 87.0494 110.879 86.3738C110.895 86.4686 110.909 86.5658 110.923 86.6642C111 87.3445 111.038 89.0523 109.685 89.9922C109.081 90.3489 108.343 90.6914 107.467 91.0185C105.688 91.6823 103.509 92.2227 100.93 92.6399C99.0879 92.9374 97.1453 93.1519 95.1021 93.2822C93.9939 93.3534 93.4286 94.644 94.116 95.5163C94.3044 95.7545 94.481 95.9667 94.6458 96.1528C95.1981 96.7714 95.7101 97.2005 96.183 97.4363C96.6559 97.6734 97.1844 97.7907 97.7711 97.7907C99.4375 97.7907 101.341 97.4363 103.481 96.7264C105.621 96.0165 107.209 95.1892 108.245 94.2434C109.303 93.3202 110.142 91.9845 110.762 90.2399C111.381 88.4941 111.691 86.586 111.691 84.5131C111.691 82.6665 111.421 80.9777 110.88 79.4452L110.878 79.4476ZM106.013 83.7735C103.483 84.1302 101.316 83.5957 101.173 82.58C101.029 81.5643 102.965 80.4514 105.494 80.0947C108.024 79.7379 110.191 80.2725 110.334 81.2882C110.477 82.3039 108.542 83.4168 106.013 83.7735Z" fill="#FF751F"/>
+</svg>

src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/components/layout/AdminLayout.tsx

@@ -1,8 +1,9 @@
-import { Layout, Menu, Typography, theme } from 'antd';
-import { Home, UserRound, MonitorPlay } from 'lucide';
-import type { ReactNode } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import LucideIcon from '../ui/LucideIcon';
+import { Drawer, Layout, Menu, Typography, theme } from "antd";
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import winsooLogo from "../../assets/images/winsoo.svg";
+import { getSidebarMenuItems } from "../../constants/navigation";
 
 const { Header, Content, Sider } = Layout;
 const { Title } = Typography;
@@ -15,56 +16,123 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
   const navigate = useNavigate();
   const location = useLocation();
   const {
-    token: { colorBgContainer, borderRadiusLG },
+    token: { borderRadiusLG },
   } = theme.useToken();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
-  const items = [
-    {
-      key: '/profile',
-      icon: <span aria-hidden="true"><LucideIcon icon={UserRound} size={18} /></span>,
-      label: 'پروفایل کاربر',
-    },
-    {
-      key: '/billboards',
-      icon: <span aria-hidden="true"><LucideIcon icon={MonitorPlay} size={18} /></span>,
-      label: 'بیلبوردها',
-    },
-    {
-      key: '/future',
-      icon: <span aria-hidden="true"><LucideIcon icon={Home} size={18} /></span>,
-      label: 'بخش‌های آینده',
-    },
-  ];
+  const items = getSidebarMenuItems();
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 992);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const handleNavigate = (key: string) => {
+    navigate(key);
+    if (isMobile) {
+      setMobileOpen(false);
+    }
+  };
+
+  const sidebarContent = (
+    <>
+      <div
+        style={{
+          height: 64,
+          padding: "0 16px",
+          borderBottom: "1px solid #ECF2F8",
+          background: "#233E5F",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+      >
+        <img
+          src={winsooLogo}
+          alt="Winsoo Logo"
+          style={{ width: "30%", maxWidth: 160, height: "auto" }}
+        />
+      </div>
+      <Menu
+        mode="inline"
+        selectedKeys={[location.pathname]}
+        items={items}
+        onClick={({ key }) => handleNavigate(String(key))}
+        style={{
+          borderInlineEnd: 0,
+          paddingTop: 12,
+          background: "#ffffff",
+          color: "#000000",
+        }}
+        theme="light"
+        className="sidebar-menu"
+      />
+    </>
+  );
 
   return (
-    <Layout style={{ minHeight: '100vh', direction: 'rtl' }}>
-      <Sider width={260} theme="light" breakpoint="lg" collapsedWidth="0">
-        <div style={{ padding: '24px 16px', borderBottom: '1px solid #f0f0f0', background: 'linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%)' }}>
-          <Title level={4} style={{ margin: 0, color: '#4338ca' }}>
-            Winsoo
-          </Title>
-        </div>
-        <Menu
-          mode="inline"
-          selectedKeys={[location.pathname]}
-          items={items}
-          onClick={({ key }) => navigate(key)}
-          style={{ borderInlineEnd: 0, paddingTop: 12 }}
-        />
-      </Sider>
+    <Layout style={{ minHeight: "100vh", direction: "rtl" }}>
+      {isMobile ? (
+        <Drawer
+          placement="right"
+          open={mobileOpen}
+          onClose={() => setMobileOpen(false)}
+          width={260}
+          bodyStyle={{ padding: 0, background: "#ffffff" }}
+          closeIcon={null}
+        >
+          {sidebarContent}
+        </Drawer>
+      ) : (
+        <Sider width={260} theme="light" breakpoint="lg" collapsedWidth="0">
+          {sidebarContent}
+        </Sider>
+      )}
 
       <Layout>
         <Header
           style={{
-            background: colorBgContainer,
-            padding: '0 24px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            borderBottom: '1px solid #f0f0f0',
+            background: "#233E5F",
+            height: 64,
+            padding: "0 24px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            borderBottom: "1px solid #ECF2F8",
           }}
         >
-          <Title level={4} style={{ margin: 0, color: '#111827' }}>
+          {isMobile ? (
+            <div
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: 8,
+                background: "rgba(255,255,255,0.15)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                cursor: "pointer",
+                color: "#ffffff",
+              }}
+              onClick={() => setMobileOpen(true)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  setMobileOpen(true);
+                }
+              }}
+            >
+              ☰
+            </div>
+          ) : null}
+          <Title level={4} style={{ margin: 0, color: "#ffffff", flex: 1, textAlign: "center" }}>
             پنل ادمین وینسو
           </Title>
         </Header>
@@ -72,10 +140,11 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
         <Content style={{ margin: 24 }}>
           <div
             style={{
-              background: colorBgContainer,
+              background: "#ffffff",
               minHeight: 280,
               borderRadius: borderRadiusLG,
               padding: 24,
+              border: "1px solid #ECF2F8",
             }}
           >
             {children}

src/components/layout/Sidebar.tsx

@@ -1,37 +1,18 @@
 import { Menu } from 'antd';
-import { Home, MonitorPlay, UserRound } from 'lucide';
 import { useNavigate, useLocation } from 'react-router-dom';
-import LucideIcon from '../ui/LucideIcon';
+import { getSidebarMenuItems } from '../../constants/navigation';
 
 const Sidebar = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const items = [
-    {
-      key: '/profile',
-      icon: <span aria-hidden="true"><LucideIcon icon={UserRound} size={18} /></span>,
-      label: 'پروفایل کاربر',
-    },
-    {
-      key: '/billboards',
-      icon: <span aria-hidden="true"><LucideIcon icon={MonitorPlay} size={18} /></span>,
-      label: 'بیلبوردها',
-    },
-    {
-      key: '/',
-      icon: <span aria-hidden="true"><LucideIcon icon={Home} size={18} /></span>,
-      label: 'داشبورد',
-    },
-  ];
-
   return (
     <Menu
       mode="inline"
       selectedKeys={[location.pathname]}
-      items={items}
+      items={getSidebarMenuItems()}
       onClick={({ key }) => navigate(key)}
-      style={{ height: '100%', borderInlineEnd: 0, paddingTop: 12 }}
+      style={{ height: '100%', borderInlineEnd: 0, paddingTop: 12, background: '#ffffff', color: '#000000' }}
     />
   );
 };

src/constants/navigation.tsx

@@ -0,0 +1,37 @@
+import { Home, MonitorPlay, UserRound } from 'lucide';
+import type { ReactNode } from 'react';
+import type { MenuProps } from 'antd';
+import LucideIcon from '../components/ui/LucideIcon';
+
+export type SidebarItemKey = '/profile' | '/billboards' | '/';
+
+export interface SidebarItem {
+  key: SidebarItemKey;
+  label: string;
+  icon: ReactNode;
+}
+
+export const sidebarItems: SidebarItem[] = [
+  {
+    key: '/profile',
+    label: 'پروفایل کاربر',
+    icon: <LucideIcon icon={UserRound} size={18} />,
+  },
+  {
+    key: '/billboards',
+    label: 'بیلبوردها',
+    icon: <LucideIcon icon={MonitorPlay} size={18} />,
+  },
+  {
+    key: '/',
+    label: 'داشبورد',
+    icon: <LucideIcon icon={Home} size={18} />,
+  },
+];
+
+export const getSidebarMenuItems = (): NonNullable<MenuProps['items']> =>
+  sidebarItems.map((item) => ({
+    key: item.key,
+    label: <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>{item.icon}<span>{item.label}</span></span>,
+    icon: <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{item.icon}</span>,
+  }));

src/index.css

@@ -1,11 +1,31 @@
-@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');
+@font-face {
+  font-family: 'IRANSans';
+  src: url('./assets/fonts/iransans/IRANSans.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IRANSans';
+  src: url('./assets/fonts/iransans/IRANSans_Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 
 :root {
-  font-family: 'Vazirmatn', sans-serif;
+  font-family: 'IRANSans', sans-serif;
   line-height: 1.5;
   font-weight: 400;
-  color: #111827;
-  background: #f8fafc;
+  color: #000000;
+  background: #ffffff;
+  --primary-blue: #233E5F;
+  --soft-blue: #ECF2F8;
+  --accent-orange: #F0642D;
+  --text-main: #000000;
+  --text-subtle: #B3B3B3;
+  --surface-white: #ffffff;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -20,7 +40,8 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
+  background: var(--surface-white);
+  color: var(--text-main);
 }
 
 #root {
@@ -35,3 +56,34 @@ h4,
 p {
   margin: 0;
 }
+
+.sidebar-menu {
+  padding: 8px 4px;
+}
+
+.sidebar-menu .ant-menu-item {
+  border-radius: 10px;
+  padding-inline: 16px !important;
+  padding-block: 10px !important;
+  color: #000000;
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-menu .ant-menu-item .ant-menu-title-content {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+
+.sidebar-menu .ant-menu-item:hover,
+.sidebar-menu .ant-menu-item-active,
+.sidebar-menu .ant-menu-item-selected {
+  background-color: #ECF2F8 !important;
+  color: #233E5F !important;
+}
+
+.sidebar-menu .ant-menu-item-selected .ant-menu-title-content,
+.sidebar-menu .ant-menu-item:hover .ant-menu-title-content {
+  color: #233E5F !important;
+}

src/main.tsx

@@ -17,9 +17,13 @@ createRoot(document.getElementById('root')!).render(
         locale={faIR}
         theme={{
           token: {
-            colorPrimary: '#4f46e5',
+            colorPrimary: '#233E5F',
+            colorInfo: '#233E5F',
+            colorSuccess: '#233E5F',
             borderRadius: 12,
-            fontFamily: 'Vazirmatn, sans-serif',
+            fontFamily: 'IRANSans, sans-serif',
+            colorText: '#000000',
+            colorTextSecondary: '#B3B3B3',
           },
         }}
       >

src/pages/Billboards/Billboards.tsx

@@ -1,13 +1,15 @@
-import { Typography } from 'antd';
+import { Card, Typography } from 'antd';
 
 const { Title, Paragraph } = Typography;
 
 const Billboards = () => {
   return (
-    <div>
+    <Card bordered={false} style={{ boxShadow: 'none', padding: 0 }}>
       <Title level={2}>بیلبوردها</Title>
-      <Paragraph>مدیریت جدول بیلبوردها به‌زودی اضافه خواهد شد.</Paragraph>
-    </div>
+      <Paragraph style={{ color: '#B3B3B3', marginTop: 8 }}>
+        مدیریت جدول بیلبوردها به‌زودی اضافه خواهد شد.
+      </Paragraph>
+    </Card>
   );
 };
 

src/pages/Home/Home.tsx

@@ -1,15 +1,15 @@
-import { Typography } from 'antd';
+import { Card, Typography } from 'antd';
 
 const { Title, Paragraph } = Typography;
 
 const Home = () => {
   return (
-    <div>
+    <Card bordered={false} style={{ boxShadow: 'none', padding: 0 }}>
       <Title level={2}>خوش آمدید</Title>
-      <Paragraph>
+      <Paragraph style={{ color: '#B3B3B3', marginTop: 8 }}>
         به پنل ادمین وینسو خوش آمدید.
       </Paragraph>
-    </div>
+    </Card>
   );
 };
 

src/pages/Login/Login.tsx

@@ -24,12 +24,12 @@ const Login = () => {
   };
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f5f7fb', direction: 'rtl' }}>
-      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(0,0,0,0.08)' }}>
-        <Title level={3} style={{ marginBottom: 8, color: '#111827' }}>
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#ECF2F8', direction: 'rtl' }}>
+      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: '1px solid #ECF2F8' }}>
+        <Title level={3} style={{ marginBottom: 8, color: '#233E5F' }}>
           ورود به پنل ادمین
         </Title>
-        <Paragraph type="secondary">
+        <Paragraph style={{ color: '#B3B3B3' }}>
           برای ادامه شماره موبایل خود را وارد کنید.
         </Paragraph>
 

src/pages/Profile/Profile.tsx

@@ -1,13 +1,15 @@
-import { Typography } from 'antd';
+import { Card, Typography } from 'antd';
 
 const { Title, Paragraph } = Typography;
 
 const Profile = () => {
   return (
-    <div>
+    <Card bordered={false} style={{ boxShadow: 'none', padding: 0 }}>
       <Title level={2}>پروفایل کاربر</Title>
-      <Paragraph>جدول اطلاعات کاربر به‌زودی اضافه خواهد شد.</Paragraph>
-    </div>
+      <Paragraph style={{ color: '#B3B3B3', marginTop: 8 }}>
+        جدول اطلاعات کاربر به‌زودی اضافه خواهد شد.
+      </Paragraph>
+    </Card>
   );
 };
 

src/pages/VerifyOtp/VerifyOtp.tsx

@@ -37,12 +37,12 @@ const VerifyOtp = () => {
   };
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f5f7fb', direction: 'rtl' }}>
-      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(0,0,0,0.08)' }}>
-        <Title level={3} style={{ marginBottom: 8, color: '#111827' }}>
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#ECF2F8', direction: 'rtl' }}>
+      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: '1px solid #ECF2F8' }}>
+        <Title level={3} style={{ marginBottom: 8, color: '#233E5F' }}>
           تایید کد یکبار مصرف
         </Title>
-        <Paragraph type="secondary">
+        <Paragraph style={{ color: '#B3B3B3' }}>
           کد تایید: 77501
         </Paragraph>