initial version

public/images/icons/facebook.svg

@@ -0,0 +1,10 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Facebook - Negative" clip-path="url(#clip0_1039_166)">
+<path id="Vector" d="M32.4752 16.7625C32.4752 7.79473 25.2054 0.524902 16.2376 0.524902C7.26983 0.524902 0 7.79473 0 16.7625C0 24.8671 5.93783 31.5847 13.7005 32.8029V21.4562H9.57766V16.7625H13.7005V13.1852C13.7005 9.11562 16.1247 6.86772 19.8337 6.86772C21.6097 6.86772 23.4684 7.18486 23.4684 7.18486V11.1808H21.421C19.404 11.1808 18.7748 12.4326 18.7748 13.718V16.7625H23.2782L22.5582 21.4562H18.7748V32.8029C26.5374 31.5847 32.4752 24.8671 32.4752 16.7625Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1039_166">
+<rect width="32.4752" height="32.4752" fill="white" transform="translate(0 0.524902)"/>
+</clipPath>
+</defs>
+</svg>

public/images/icons/instagram.svg

@@ -0,0 +1,12 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Instagram - Negative" clip-path="url(#clip0_1039_160)">
+<path id="Vector" d="M16.2541 3.44894C20.5926 3.44894 21.1064 3.46797 22.8126 3.54409C24.3983 3.61386 25.2546 3.88026 25.8255 4.10225C26.5803 4.39402 27.1257 4.74922 27.6903 5.31373C28.2611 5.88459 28.61 6.42373 28.9017 7.17852C29.1237 7.74938 29.3901 8.612 29.4599 10.1914C29.536 11.9039 29.555 12.4177 29.555 16.7498C29.555 21.0883 29.536 21.6021 29.4599 23.3083C29.3901 24.894 29.1237 25.7503 28.9017 26.3212C28.61 27.076 28.2548 27.6214 27.6903 28.1859C27.1194 28.7568 26.5803 29.1057 25.8255 29.3974C25.2546 29.6194 24.392 29.8858 22.8126 29.9556C21.1001 30.0317 20.5863 30.0507 16.2541 30.0507C11.9157 30.0507 11.4019 30.0317 9.69567 29.9556C8.10997 29.8858 7.25368 29.6194 6.68283 29.3974C5.92804 29.1057 5.38255 28.7505 4.81804 28.1859C4.24719 27.6151 3.89833 27.076 3.60656 26.3212C3.38456 25.7503 3.11817 24.8877 3.04839 23.3083C2.97228 21.5958 2.95325 21.082 2.95325 16.7498C2.95325 12.4114 2.97228 11.8976 3.04839 10.1914C3.11817 8.60566 3.38456 7.74938 3.60656 7.17852C3.89833 6.42373 4.25353 5.87824 4.81804 5.31373C5.3889 4.74288 5.92804 4.39402 6.68283 4.10225C7.25368 3.88026 8.11631 3.61386 9.69567 3.54409C11.4019 3.46797 11.9157 3.44894 16.2541 3.44894ZM16.2541 0.524902C11.8459 0.524902 11.2941 0.543931 9.56247 0.620045C7.83722 0.696159 6.65112 0.975243 5.62358 1.37484C4.55164 1.79347 3.64462 2.34529 2.74394 3.25232C1.83692 4.153 1.28509 5.06002 0.866463 6.12561C0.466866 7.15949 0.187781 8.33926 0.111668 10.0645C0.0355537 11.8024 0.0165253 12.3543 0.0165253 16.7625C0.0165253 21.1708 0.0355537 21.7226 0.111668 23.4542C0.187781 25.1794 0.466866 26.3656 0.866463 27.3931C1.28509 28.465 1.83692 29.3721 2.74394 30.2727C3.64462 31.1734 4.55164 31.7316 5.61724 32.1439C6.65112 32.5435 7.83088 32.8225 9.55613 32.8987C11.2877 32.9748 11.8395 32.9938 16.2478 32.9938C20.6561 32.9938 21.2079 32.9748 22.9395 32.8987C24.6647 32.8225 25.8508 32.5435 26.8784 32.1439C27.944 31.7316 28.851 31.1734 29.7517 30.2727C30.6524 29.3721 31.2105 28.465 31.6228 27.3994C32.0224 26.3656 32.3015 25.1858 32.3776 23.4605C32.4537 21.729 32.4727 21.1771 32.4727 16.7689C32.4727 12.3606 32.4537 11.8088 32.3776 10.0772C32.3015 8.35194 32.0224 7.16584 31.6228 6.1383C31.2232 5.06002 30.6714 4.153 29.7644 3.25232C28.8637 2.35163 27.9567 1.79347 26.8911 1.38118C25.8572 0.981585 24.6774 0.702501 22.9522 0.626387C21.2142 0.543931 20.6624 0.524902 16.2541 0.524902Z" fill="black"/>
+<path id="Vector_2" d="M16.2541 8.42188C11.6492 8.42188 7.9133 12.1578 7.9133 16.7627C7.9133 21.3676 11.6492 25.1035 16.2541 25.1035C20.859 25.1035 24.5949 21.3676 24.5949 16.7627C24.5949 12.1578 20.859 8.42188 16.2541 8.42188ZM16.2541 22.1731C13.2666 22.1731 10.8437 19.7502 10.8437 16.7627C10.8437 13.7752 13.2666 11.3523 16.2541 11.3523C19.2416 11.3523 21.6645 13.7752 21.6645 16.7627C21.6645 19.7502 19.2416 22.1731 16.2541 22.1731Z" fill="black"/>
+<path id="Vector_3" d="M26.872 8.09178C26.872 9.17006 25.9967 10.039 24.9247 10.039C23.8465 10.039 22.9775 9.16372 22.9775 8.09178C22.9775 7.0135 23.8528 6.14453 24.9247 6.14453C25.9967 6.14453 26.872 7.01984 26.872 8.09178Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1039_160">
+<rect width="32.4752" height="32.4752" fill="white" transform="translate(0.0165253 0.524902)"/>
+</clipPath>
+</defs>
+</svg>

public/images/icons/linkedin.svg

@@ -0,0 +1,10 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="LinkedIn - Negative" clip-path="url(#clip0_1039_158)">
+<path id="Vector" d="M30.5961 0.524902H2.92234C1.59669 0.524902 0.52475 1.57147 0.52475 2.8654V30.6533C0.52475 31.9472 1.59669 33.0001 2.92234 33.0001H30.5961C31.9217 33.0001 33 31.9472 33 30.6596V2.8654C33 1.57147 31.9217 0.524902 30.5961 0.524902ZM10.1595 28.1986H5.33895V12.6968H10.1595V28.1986ZM7.74922 10.5846C6.20158 10.5846 4.95204 9.33508 4.95204 7.79378C4.95204 6.25247 6.20158 5.00293 7.74922 5.00293C9.29053 5.00293 10.5401 6.25247 10.5401 7.79378C10.5401 9.32874 9.29053 10.5846 7.74922 10.5846ZM28.1985 28.1986H23.3843V20.6634C23.3843 18.8683 23.3526 16.5532 20.8789 16.5532C18.3734 16.5532 17.9929 18.5131 17.9929 20.5365V28.1986H13.185V12.6968H17.8026V14.8153H17.866C18.5066 13.5975 20.0797 12.3099 22.4202 12.3099C27.2978 12.3099 28.1985 15.5193 28.1985 19.6929V28.1986Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1039_158">
+<rect width="32.4752" height="32.4752" fill="white" transform="translate(0.52475 0.524902)"/>
+</clipPath>
+</defs>
+</svg>

public/images/icons/twitter.svg

@@ -0,0 +1,10 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Twitter - Negative" clip-path="url(#clip0_1039_164)">
+<path id="Vector" d="M10.7246 29.9555C22.9764 29.9555 29.6795 19.8025 29.6795 11.0006C29.6795 10.7152 29.6732 10.4234 29.6605 10.138C30.9645 9.19496 32.0897 8.02692 32.9835 6.68873C31.7691 7.22904 30.4797 7.58191 29.1594 7.7353C30.5496 6.902 31.5905 5.59293 32.0892 4.05075C30.7813 4.82581 29.3511 5.37255 27.8598 5.66754C26.8549 4.59985 25.5264 3.89291 24.0794 3.65602C22.6325 3.41913 21.1479 3.66549 19.855 4.35701C18.5622 5.04852 17.5331 6.14667 16.927 7.48169C16.3209 8.8167 16.1714 10.3142 16.5017 11.7427C13.8535 11.6098 11.2629 10.9219 8.89767 9.72354C6.53245 8.5252 4.44546 6.84318 2.77201 4.78652C1.92147 6.25295 1.6612 7.98821 2.04411 9.63964C2.42701 11.2911 3.42435 12.7347 4.83343 13.6773C3.77557 13.6437 2.7409 13.3589 1.81488 12.8463V12.9288C1.81393 14.4677 2.34595 15.9595 3.32049 17.1505C4.29503 18.3415 5.65196 19.1582 7.16061 19.4619C6.18067 19.73 5.15219 19.7691 4.15474 19.5761C4.58045 20.8995 5.40873 22.0571 6.52398 22.8872C7.63924 23.7172 8.98581 24.1784 10.3758 24.2063C8.01602 26.06 5.10103 27.0654 2.1003 27.0606C1.56815 27.0598 1.03652 27.0272 0.508255 26.9629C3.55667 28.9186 7.1028 29.9574 10.7246 29.9555Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1039_164">
+<rect width="32.4752" height="32.4752" fill="white" transform="translate(0.50827 0.524902)"/>
+</clipPath>
+</defs>
+</svg>

public/images/logo.svg

@@ -0,0 +1,3 @@
+<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M33.5 67C52.0015 67 67 52.0015 67 33.5C67 31.2865 66.7853 29.1232 66.3756 27.0296C66.2738 27.2142 66.1722 27.399 66.0709 27.584C62.3989 34.28 58.7749 41 55.9669 48.128C55.4629 49.424 54.9589 50.72 54.6229 52.064C54.5509 52.352 54.5029 52.616 54.4789 52.904C54.4549 53.432 54.3109 53.552 53.7829 53.408C52.8229 53.144 52.0069 52.112 51.8869 50.984C51.7669 49.76 52.0069 48.584 52.3189 47.408C53.6869 42.128 55.8229 37.136 58.2229 32.264C58.9601 30.7343 59.7538 29.233 60.5499 27.7273C60.7905 27.2723 61.0313 26.8168 61.2709 26.36C61.3669 26.168 61.4629 25.976 61.4869 25.712C61.3429 25.856 61.1989 26 61.0789 26.144L61.0778 26.1452C56.7582 31.2808 52.4385 36.4164 48.1189 41.528C46.9189 42.944 45.6709 44.288 44.3269 45.56C43.4629 46.376 42.5749 47.192 41.2309 46.64C39.6949 46.04 38.5189 45.08 38.2549 43.328C37.9909 41.648 38.2789 39.992 38.7109 38.384C39.9349 33.896 41.9029 29.72 44.0389 25.616C45.5029 22.808 47.1109 20.072 49.1029 17.6C50.2549 16.184 50.9269 16.064 52.4869 17.024C52.5522 17.0697 52.6176 17.1137 52.6824 17.1573C52.8558 17.274 53.0257 17.3883 53.1829 17.528C54.0949 18.32 54.2149 18.824 53.6389 19.88C53.0591 20.9465 52.4708 22.0065 51.8829 23.0659C50.4995 25.5588 49.1181 28.0479 47.8549 30.608C46.0789 34.28 44.4229 38.024 43.1269 41.888C43.0638 42.0562 43.0191 42.2244 42.9445 42.5055C42.9339 42.5453 42.9228 42.5874 42.9109 42.632C43.9909 41.864 44.8789 41.096 45.7189 40.304C49.2134 36.9173 52.4171 33.298 55.6262 29.6726C55.9875 29.2644 56.349 28.8561 56.7109 28.448C58.5794 26.3396 60.3749 24.1713 62.1707 22.0028C62.7966 21.2469 63.4226 20.4911 64.0516 19.7377C58.8011 8.09998 47.0965 0 33.5 0C14.9985 0 0 14.9985 0 33.5C0 34.1419 0.018056 34.7797 0.053688 35.4127C2.46602 29.918 5.01924 24.4924 7.728 19.136C8.088 18.44 8.472 17.792 8.928 17.168C9.336 16.616 9.816 16.496 10.464 16.688C11.064 16.88 11.592 17.216 12.072 17.624C12.696 18.152 12.912 18.776 12.624 19.592C11.7184 22.4447 10.5138 25.1693 9.31233 27.8865C9.24019 28.0497 9.16805 28.2129 9.096 28.376C8.472 29.792 7.848 31.208 7.344 32.672C7.576 32.384 7.80534 32.0933 8.03467 31.8027C8.49334 31.2213 8.952 30.64 9.432 30.08C12.936 25.904 16.632 21.896 20.52 18.056C20.7672 17.8265 21.0273 17.623 21.2909 17.4168C21.3856 17.3426 21.4808 17.2682 21.576 17.192C22.632 16.352 23.712 16.376 24.84 17C26.712 18.008 27.24 19.16 26.832 21.224C26.5156 22.7608 25.9012 24.1912 25.2896 25.6154C25.2517 25.7036 25.2138 25.7918 25.176 25.88C24.2949 27.9066 23.3329 29.8726 22.3642 31.8521C22.2775 32.0293 22.1908 32.2066 22.104 32.384C22.0893 32.4098 22.0729 32.4361 22.0559 32.4633C21.9621 32.6137 21.851 32.7919 21.912 33.056C22.0244 32.9232 22.1324 32.7991 22.236 32.68C22.3759 32.5193 22.5079 32.3676 22.632 32.216C23.3179 31.4327 24.0012 30.6468 24.6845 29.8607C27.5397 26.5764 30.3963 23.2904 33.456 20.192C34.656 18.992 35.904 17.864 37.272 16.88C38.376 16.088 39.408 16.064 40.512 16.784C41.664 17.528 42.312 18.464 42.072 19.904C41.64 22.52 40.608 24.92 39.36 27.224C38.1201 29.5087 36.7994 31.753 35.4775 33.9992C34.5222 35.6225 33.5663 37.2468 32.64 38.888C30.288 43.04 27.96 47.192 26.04 51.56C25.4367 52.9027 24.9755 54.2928 24.5155 55.6791C24.4082 56.0025 24.301 56.3257 24.192 56.648C24 57.152 23.952 57.68 23.976 58.208C23.976 58.976 23.688 59.168 22.968 58.904C21.576 58.376 20.712 56.744 21.12 55.184C21.936 52.016 22.944 48.896 24.216 45.872C27.048 39.104 30.408 32.624 34.104 26.288C34.872 24.944 35.592 23.576 36.168 22.136C34.752 23.312 33.456 24.608 32.208 25.928C28.1643 30.3025 24.3177 34.846 20.4741 39.3859C19.299 40.7739 18.1241 42.1616 16.944 43.544C16.6971 43.849 16.5293 44.1979 16.3609 44.5482C16.2509 44.7768 16.1407 45.006 16.008 45.224C15.816 45.56 15.612 45.896 15.408 46.232C15.204 46.568 15 46.904 14.808 47.24C14.52 47.768 14.112 47.864 13.584 47.648C12.072 47 11.832 46.304 12.024 45.128C12.384 43.208 13.152 41.432 13.92 39.68C15.3862 36.32 16.9884 33.028 18.5907 29.7361C19.5062 27.855 20.4218 25.9738 21.312 24.08C21.672 23.336 21.984 22.544 22.248 21.704C22.1483 21.7954 22.0485 21.884 21.9498 21.9716C21.7634 22.1371 21.5806 22.2994 21.408 22.472C16.224 27.44 11.616 32.912 7.464 38.768C5.80169 41.0952 4.06888 43.352 2.21909 45.515C7.04885 58.0813 19.2329 67 33.5 67Z" fill="#FD6F00"/>
+</svg>

public/images/web-design-vector.svg

@@ -0,0 +1,21 @@
+<svg width="72" height="82" viewBox="0 0 72 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Layer_1" clip-path="url(#clip0_645_441)">
+<path id="Vector" d="M48.3197 82H23.6799C22.6731 81.3978 22.346 80.7871 22.5747 79.9479C22.7863 79.1791 23.4276 78.8011 24.537 78.799C25.593 78.799 26.6489 78.799 27.7391 78.799C28.2885 75.8094 28.8229 72.9138 29.3765 69.8986C28.9404 69.8986 28.6283 69.8986 28.3163 69.8986C21.9997 69.8986 15.6832 69.9029 9.36664 69.8922C8.62276 69.8922 7.86392 69.873 7.14142 69.7235C2.83207 68.8416 0.0104643 65.3267 0.00618911 60.8444C-0.00449877 49.7467 -0.000223621 38.6489 0.00405153 27.5511C0.00405153 22.0247 3.76405 18.2664 9.28755 18.2578C10.025 18.2578 10.7603 18.2578 11.5512 18.2578C11.5512 17.8371 11.5512 17.5211 11.5512 17.2051C11.5512 13.1499 11.5406 9.09474 11.5555 5.03958C11.5641 2.60307 12.8915 0.834948 15.1637 0.158021C15.2856 0.121719 15.3989 0.0533854 15.5164 0C29.1713 0 42.824 0 56.4788 0C59.6809 1.3026 60.4462 2.46 60.4462 6.00052C60.4462 9.78875 60.4462 13.577 60.4462 17.3652C60.4462 17.6449 60.4462 17.9268 60.4462 18.2578C61.3333 18.2578 62.1007 18.2557 62.8702 18.2578C68.1927 18.2813 71.987 22.0674 71.9912 27.391C71.9998 38.5144 71.9976 49.6399 71.9848 60.7633C71.9848 61.5299 71.9207 62.3157 71.7454 63.061C70.7707 67.2251 67.3228 69.8794 62.8723 69.8901C56.4767 69.9071 50.0789 69.8943 43.6833 69.8943C43.3712 69.8943 43.0591 69.8943 42.6209 69.8943C43.181 72.9309 43.7196 75.8479 44.2626 78.7947C45.5173 78.7947 46.6887 78.7712 47.858 78.8011C48.9011 78.8268 49.5467 79.5848 49.4612 80.5778C49.3992 81.3188 48.884 81.6733 48.3176 81.9936L48.3197 82ZM14.8004 11.5099V58.3011H57.1864V11.5099H14.8004ZM68.7271 61.6559H3.21469C3.31516 62.0872 3.37073 62.4268 3.47334 62.7556C4.23859 65.2199 6.33983 66.6912 9.13792 66.6933C27.0508 66.6976 44.9637 66.6955 62.8766 66.6933C63.116 66.6933 63.3554 66.6848 63.5948 66.6656C66.3224 66.4648 68.398 64.464 68.7271 61.6559ZM11.4893 58.3246V29.8489H3.24676V58.3246H11.4893ZM68.7421 58.3182V29.8424H60.4911V58.3182H68.7421ZM14.7747 8.17865H57.1864C57.2163 8.04839 57.2377 7.995 57.2377 7.94375C57.2419 7.08958 57.2484 6.23755 57.2462 5.38339C57.2441 3.71562 56.7225 3.20312 55.0317 3.20312C42.3473 3.20312 29.6629 3.20312 16.9785 3.20312C16.7648 3.20312 16.551 3.19458 16.3394 3.20953C15.4865 3.27146 14.8431 3.80104 14.7918 4.65307C14.7234 5.81474 14.7747 6.98495 14.7747 8.17865ZM40.9985 78.7627C40.4727 75.9055 39.9682 73.1295 39.4317 70.3598C39.3975 70.1805 39.1067 69.9221 38.9336 69.9199C36.858 69.8901 34.7824 69.9007 32.6406 69.9007C32.0912 72.8711 31.5504 75.7923 30.9989 78.7648H41.0006L40.9985 78.7627ZM11.4914 26.5603V21.5165C6.56855 21.0552 3.29592 23.0817 3.3173 26.5603H11.4914ZM60.4825 26.5539H68.7079C68.5839 24.2348 66.8568 22.1037 64.5525 21.6638C63.24 21.414 61.8698 21.4716 60.4846 21.3883V26.5539H60.4825Z" fill="#FD6F00"/>
+<path id="Vector_2" d="M16.7693 38.5015C16.7693 34.314 16.7672 30.1264 16.7693 25.9389C16.7714 23.2632 18.2549 21.7748 20.9141 21.7706C23.2055 21.7663 25.497 21.762 27.7885 21.7706C30.1484 21.7812 31.7345 23.2867 31.7409 25.6527C31.7665 34.2414 31.7665 42.83 31.7409 51.4187C31.7345 53.7869 30.1655 55.2881 27.7949 55.303C25.4243 55.318 23.0516 55.3222 20.6811 55.303C18.3169 55.2838 16.78 53.7484 16.7736 51.3845C16.7586 47.0902 16.7693 42.7959 16.7693 38.5015ZM28.5559 38.6019C28.5559 34.4165 28.5495 30.2289 28.5623 26.0435C28.5644 25.3517 28.4319 24.9438 27.5961 24.9587C25.3602 24.9993 23.12 24.9908 20.8841 24.963C20.1787 24.9545 19.9586 25.2385 19.9607 25.9154C19.9735 34.3418 19.9757 42.7681 19.9607 51.1923C19.9607 51.9034 20.245 52.1212 20.9141 52.1148C23.0709 52.0913 25.2298 52.1084 27.3866 52.1063C28.4875 52.1063 28.5538 52.038 28.5559 50.9233C28.558 46.8169 28.5559 42.7105 28.5559 38.604V38.6019Z" fill="black"/>
+<path id="Vector_3" d="M44.7886 21.7705C46.9198 21.7705 49.0531 21.762 51.1843 21.7727C53.4928 21.7855 55.0618 23.3016 55.0918 25.6143C55.1281 28.307 55.126 31.0019 55.0918 33.6968C55.064 35.9774 53.5613 37.5256 51.2719 37.5491C46.9284 37.5961 42.5848 37.5982 38.2412 37.5491C35.892 37.5235 34.4064 35.9112 34.4 33.5452C34.3936 30.9571 34.3936 28.3711 34.4 25.783C34.4064 23.3401 35.9562 21.7812 38.3909 21.7705C40.522 21.762 42.6553 21.7705 44.7865 21.7705H44.7886ZM37.6 29.3406C38.3032 28.7661 38.859 28.2814 39.4468 27.8372C40.8854 26.746 42.6853 26.7631 44.1003 27.8757C44.6027 28.2707 45.12 28.6594 45.5624 29.1164C46.1417 29.7143 46.6141 29.6395 47.1827 29.0993C48.4311 27.9077 49.8739 27.6878 51.46 28.3561C51.5754 28.4053 51.6994 28.4309 51.9004 28.4928C51.9004 27.5041 51.9046 26.5731 51.9004 25.6442C51.8961 25.1295 51.5947 24.9672 51.118 24.9694C46.8835 24.9758 42.6489 24.9758 38.4144 24.9694C37.8372 24.9694 37.5936 25.2192 37.6021 25.7894C37.6171 26.9083 37.6064 28.0273 37.6064 29.3406H37.6ZM44.7181 34.3631C46.7937 34.3631 48.8714 34.3823 50.947 34.3439C51.2548 34.3374 51.802 34.0855 51.817 33.9104C51.8683 33.3039 52.2338 32.5907 51.5049 32.0953C50.4375 31.3706 49.5711 31.2781 48.9056 31.8177C47.2725 33.148 45.4342 33.148 43.8118 31.8155C43.3586 31.444 42.8947 31.0831 42.4779 30.6731C41.9863 30.1905 41.5716 30.1691 41.0415 30.6453C40.1116 31.4803 39.1134 32.2405 38.1771 33.0711C37.9334 33.2868 37.8116 33.6434 37.6342 33.9339C37.9719 34.0769 38.3075 34.3396 38.6495 34.346C40.6717 34.3844 42.6959 34.3652 44.7181 34.3652V34.3631Z" fill="black"/>
+<path id="Vector_4" d="M44.7459 55.3073C42.6404 55.3073 40.5349 55.3159 38.4315 55.3052C35.9327 55.2924 34.4064 53.7527 34.4 51.2543C34.3957 48.6683 34.3915 46.0802 34.4 43.4942C34.4086 41.141 35.9455 39.5522 38.2819 39.5415C42.5976 39.5181 46.9155 39.5181 51.2313 39.5415C53.51 39.5544 55.0554 41.0748 55.0875 43.349C55.126 46.0695 55.126 48.79 55.0875 51.5106C55.0533 53.7826 53.5014 55.2838 51.2185 55.3052C49.0595 55.3265 46.9027 55.3095 44.7438 55.3116L44.7459 55.3073ZM49.7564 52.1063C50.1882 52.1063 50.5067 52.1063 50.8252 52.1063C51.8213 52.0978 51.9004 52.0231 51.9004 50.9938C51.9046 48.5658 51.8854 46.1357 51.9111 43.7077C51.9196 42.9881 51.6588 42.719 50.9278 42.7233C46.8215 42.7468 42.7152 42.7468 38.611 42.7233C37.8501 42.719 37.5722 42.9838 37.585 43.7505C37.6192 45.9649 37.5978 48.1793 37.5978 50.3959C37.5978 52.2067 37.6213 52.2281 39.434 52.0957C39.5088 52.0893 39.5815 52.0529 39.7354 52.006C39.7974 50.319 39.5088 48.5359 40.8576 47.1159C42.2236 45.6766 43.9614 45.7748 45.6992 45.8197C46.721 45.8453 47.6145 46.2062 48.3926 46.881C49.9958 48.2754 49.7585 50.1759 49.7564 52.1063ZM46.5521 52.0764C46.5521 51.3184 46.5735 50.6308 46.5457 49.9453C46.5201 49.3388 46.1353 48.963 45.5603 49.0377C44.6903 49.1531 43.4826 48.4548 43.0487 49.7189C42.8092 50.4172 43.0059 51.2671 43.0059 52.0764H46.5543H46.5521Z" fill="black"/>
+<path id="Vector_5" d="M39.1198 18.828C34.4556 18.828 29.7914 18.8323 25.1272 18.8259C23.9024 18.8259 23.2162 18.2664 23.1799 17.2927C23.1499 16.4577 23.6865 15.7915 24.5137 15.6719C24.8279 15.627 25.1507 15.6292 25.4714 15.6292C34.5881 15.6292 43.7027 15.6292 52.8195 15.6292C53.138 15.6292 53.4629 15.6292 53.775 15.6761C54.5381 15.7936 55.0576 16.3958 55.0853 17.1581C55.1153 17.9653 54.6194 18.6209 53.8284 18.7661C53.4907 18.828 53.1401 18.8259 52.7939 18.8259C48.2365 18.8302 43.6771 18.828 39.1198 18.8259V18.828Z" fill="#FD6F00"/>
+<path id="Vector_6" d="M16.7778 17.2243C16.7778 16.336 17.4533 15.6527 18.3383 15.6441C19.2147 15.6356 19.9329 16.321 19.9585 17.1838C19.9842 18.0678 19.2339 18.8216 18.3383 18.8109C17.464 18.8003 16.7778 18.1041 16.7778 17.2222V17.2243Z" fill="#FD6F00"/>
+<path id="Vector_7" d="M53.0568 4.15131C53.4287 4.15131 53.8049 4.12355 54.1747 4.15771C54.9678 4.22818 55.5556 4.84105 55.6176 5.61834C55.6753 6.35292 55.2157 7.12808 54.4633 7.2199C53.4971 7.33522 52.4967 7.34162 51.5306 7.22631C50.7332 7.13021 50.3057 6.37214 50.3784 5.55855C50.4468 4.78126 51.0325 4.2111 51.8576 4.15344C52.2552 4.12568 52.6571 4.14917 53.0568 4.14917V4.15344V4.15131Z" fill="#FD6F00"/>
+<path id="Vector_8" d="M24.2102 35.0699C23.5988 35.0699 22.9875 35.0955 22.3783 35.0635C21.4784 35.0144 20.8136 34.314 20.8179 33.4662C20.8221 32.6184 21.4869 31.9095 22.3911 31.8839C23.6373 31.8497 24.8878 31.8476 26.134 31.8839C27.051 31.9116 27.6859 32.6056 27.6816 33.4769C27.6773 34.346 27.0382 35.0165 26.1212 35.0614C25.4863 35.0934 24.8472 35.0678 24.2102 35.0678V35.0699Z" fill="black"/>
+<path id="Vector_9" d="M24.3149 42.6037C24.8728 42.6037 25.4308 42.5909 25.9887 42.6059C27.0147 42.6358 27.6923 43.2913 27.6816 44.2224C27.6709 45.1193 27.0062 45.777 26.0271 45.7962C24.8322 45.8197 23.6373 45.8218 22.4424 45.7962C21.4933 45.7727 20.8029 45.0595 20.8157 44.184C20.8286 43.3063 21.5211 42.6507 22.483 42.6059C22.5365 42.6037 22.5899 42.6059 22.6434 42.6059C23.2013 42.6059 23.7592 42.6059 24.3171 42.6059L24.3149 42.6037Z" fill="black"/>
+<path id="Vector_10" d="M24.3064 26.5261C24.9199 26.5261 25.5333 26.4984 26.1447 26.5325C27.0468 26.5838 27.6581 27.2159 27.6816 28.0594C27.7051 28.9071 27.1365 29.6204 26.2387 29.6673C24.937 29.7335 23.6266 29.7335 22.3248 29.6759C21.3929 29.6353 20.7751 28.89 20.8179 28.038C20.8585 27.2031 21.4848 26.5987 22.3868 26.5261C22.4403 26.5219 22.4937 26.5197 22.5472 26.5197C23.1328 26.5197 23.7207 26.5197 24.3064 26.5197C24.3064 26.5219 24.3064 26.524 24.3064 26.5261Z" fill="black"/>
+<path id="Vector_11" d="M24.2102 40.4277C23.5967 40.4277 22.9811 40.4662 22.3719 40.4192C21.4271 40.3445 20.8008 39.6718 20.8157 38.8155C20.8285 37.9549 21.4784 37.2887 22.4189 37.2631C23.6437 37.2289 24.8728 37.2289 26.0977 37.2631C27.0425 37.2887 27.6752 37.9507 27.6838 38.824C27.6923 39.6718 27.113 40.2975 26.2088 40.4192C26.1297 40.4299 26.0506 40.4427 25.9694 40.4427C25.3837 40.4427 24.7959 40.4427 24.2102 40.4427C24.2102 40.4384 24.2102 40.432 24.2102 40.4277Z" fill="black"/>
+<path id="Vector_12" d="M24.285 47.9849C24.8985 47.9849 25.512 47.9593 26.1233 47.9913C27.0297 48.0404 27.6474 48.6576 27.6795 49.4989C27.7158 50.3766 27.1237 51.092 26.1789 51.1368C24.9028 51.1966 23.6202 51.1966 22.3441 51.1389C21.4057 51.0962 20.7858 50.3723 20.8157 49.5182C20.8457 48.6576 21.4933 48.0298 22.4446 47.9892C23.0559 47.9614 23.6715 47.9849 24.2829 47.9871L24.285 47.9849Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_645_441">
+<rect width="72" height="82" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/app/_components/about-me/page.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+import React from "react";
+
+export default function AboutMe() {
+  return (
+    <div
+      className="flex flex-nowrap justify-between items-center"
+      id="about-me"
+    >
+      <div className="img-container">
+        <div className="top-half-circle">
+          <Image
+            src={"/images/profile.png"}
+            alt="profile picture"
+            width={538}
+            height={617}
+            className="bottom-0"
+          />
+        </div>
+        <div className="bottom-half-circle"></div>
+      </div>
+      <div className="flex flex-col items-start ms-[105px] w-[756px]">
+        <h2 className="text-black text-[65px] font-[600]">About Me</h2>
+        <p className="text-black text-[21px] font-[400]">
+          Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
+          lectus netus in. Aliquet donec morbi convallis pretium. Turpis tempus
+          pharetra
+        </p>
+        <ul className="flex flex-col gap-10 mt-10">
+          <li>
+            <h3 className="mb-2">UI</h3>
+            <div className="bg-[#EDECEC] h relative w-[753px] h-[12px] rounded-lg">
+              <span className="bg-[#FD6F00] w-[50%] h-[12px] absolute rounded-lg progress"></span>
+            </div>
+          </li>
+          <li>
+            <h3 className="mb-2">UX</h3>
+            <div className="bg-[#EDECEC] h relative w-[753px] h-[12px] rounded-lg">
+              <span className="bg-[#FD6F00] w-[80%] h-[12px] absolute rounded-lg progress"></span>
+            </div>
+          </li>
+          <li>
+            <h3 className="mb-2">Fronend</h3>
+            <div className="bg-[#EDECEC] h relative w-[753px] h-[12px] rounded-lg">
+              <span className="bg-[#FD6F00] w-[95%] h-[12px] absolute rounded-lg progress"></span>
+            </div>
+          </li>
+          <li>
+            <h3 className="mb-2">Backend</h3>
+            <div className="bg-[#EDECEC] h relative w-[753px] h-[12px] rounded-lg">
+              <span className="bg-[#FD6F00] w-[90%] h-[12px] absolute rounded-lg progress"></span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}

src/app/_components/contact/page.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function Contact() {
+  return (
+    <div className="flex flex-col max-w-[930px] mt-10 gap-[30px]" id="contact">
+      <h2 className="text-[#000] text-[65px] font-[600] text-center">
+        Lets Design Together
+      </h2>
+      <p className="text-[#000] text-[21px] font-[600] text-center">
+        Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
+        lectus netus in. Aliquet donec morbi convallis pretium
+      </p>
+      <div className="flex items-center gap-[25px] justify-center">
+        <input
+          type="text"
+          className="bg-[#F8F8F8] text-[#797979] text-[21px] font-[400] p-[22px] border border-[#AFAFAF] rounded-lg min-w-[400px]"
+          placeholder="Enter your Email address here..."
+          name="email"
+          id="email"
+        />
+        <button
+          type="button"
+          className="text-[#fff] text-[24px] font-[600] px-[35px] py-[20px] bg-[#FD6F00] rounded-lg"
+        >
+          Contact Me
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/_components/header/page.tsx

@@ -0,0 +1,108 @@
+import Image from "next/image";
+import React from "react";
+
+export default function Header() {
+  return (
+    <div className="flex flex-col items-center">
+      <h2 className="text-black text-[65px] font-[600] my-10">My Projects</h2>
+      <p className="text-black text-center text-[21px] font-[400] w-[930px]">
+        Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
+        est risus lectus. Phasellus consequat urna tellus
+      </p>
+      <ul className="flex items-center justify-center gap-5 mt-20 mb-10">
+        <li className="px-[20px] py-[10px] bg-[#F8F8F8] border border-[#545454] rounded-md text-[24px] text-[#000] font-[400] hover:cursor-pointer hover:border-[#FD6F00]">
+          All
+        </li>
+        <li className="px-[20px] py-[10px] bg-[#F8F8F8] border border-[#545454] rounded-md text-[24px] text-[#000] font-[400] hover:cursor-pointer hover:border-[#FD6F00]">
+          UI/UX
+        </li>
+        <li className="px-[20px] py-[10px] bg-[#FD6F00] border border-[#545454] rounded-md text-[24px] text-[#FFFFFF] font-[400] hover:cursor-pointer hover:border-[#FD6F00]">
+          Web Design
+        </li>
+        <li className="px-[20px] py-[10px] bg-[#F8F8F8] border border-[#545454] rounded-md text-[24px] text-[#000] font-[400] hover:cursor-pointer hover:border-[#FD6F00]">
+          App Design
+        </li>
+        <li className="px-[20px] py-[10px] bg-[#F8F8F8] border border-[#545454] rounded-md text-[24px] text-[#000] font-[400] hover:cursor-pointer hover:border-[#FD6F00]">
+          Graphic Design
+        </li>
+      </ul>
+      <div className="w-[1420px] flex gap-[30px] items-center justify-between">
+        <div className="flex flex-wrap w-[445px]">
+          <div className="my-5 w-full bg-[#FFEBDB] relative h-[490px] overflow-hidden">
+            <Image
+              src={"/images/web-design-11.png"}
+              width={270}
+              height={70}
+              alt="UI/UX Vector"
+              className="absolute bottom-[-5px] left-[-5px] z-20"
+            />
+            <Image
+              src={"/images/web-design-12.png"}
+              width={270}
+              height={70}
+              alt="UI/UX Vector"
+              className="absolute top-[-5px] right-[-5px] z-10"
+            />
+          </div>
+
+          <h5 className="text-[#FD6F00] text-[19px] font-[400] w-full">
+            Web Design
+          </h5>
+          <p className="text-black text-[24px] font-[700] hover:cursor-pointer">
+            AirCalling Landing Page Design
+          </p>
+        </div>
+        <div className="flex flex-wrap w-[445px]">
+          <div className="my-5 w-full bg-[#FFEBDB] relative h-[490px] overflow-hidden">
+            <Image
+              src={"/images/web-design-21.png"}
+              width={270}
+              height={70}
+              alt="UI/UX Vector"
+              className="absolute bottom-[-5px] left-[-5px] z-20"
+            />
+            <Image
+              src={"/images/web-design-22.png"}
+              width={270}
+              height={70}
+              alt="UI/UX Vector"
+              className="absolute top-[-5px] right-[-5px] z-10"
+            />
+          </div>
+
+          <h5 className="text-[#FD6F00] text-[19px] font-[400] w-full">
+            Web Design
+          </h5>
+          <p className="text-black text-[24px] font-[700] hover:cursor-pointer">
+            Business Landing Page Design
+          </p>
+        </div>
+        <div className="flex flex-wrap w-[445px]">
+          <div className="my-5 w-full bg-[#FFEBDB] relative h-[490px] overflow-hidden">
+            <Image
+              src={"/images/web-design-31.png"}
+              width={270}
+              height={70}
+              alt="UI/UX Vector"
+              className="absolute bottom-[-5px] left-[-5px] z-20"
+            />
+            <Image
+              src={"/images/web-design-32.png"}
+              width={270}
+              height={70}
+              alt="UI/UX Vector"
+              className="absolute top-[-5px] right-[-5px] z-10"
+            />
+          </div>
+
+          <h5 className="text-[#FD6F00] text-[19px] font-[400] w-full">
+            Web Design
+          </h5>
+          <p className="text-black text-[24px] font-[700] hover:cursor-pointer">
+            Ecom Web Page Design
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/_components/my-projects/page.tsx

@@ -0,0 +1,418 @@
+"use client";
+import Image from "next/image";
+import React, { useState } from "react";
+
+type Category = {
+  label: string;
+  active: boolean;
+};
+
+type Image = {
+  src: string;
+  position: string;
+  zIndex: number;
+};
+
+type Project = {
+  title: string;
+  category: string;
+  images: Image[];
+};
+
+const categories: Category[] = [
+  { label: "All", active: false },
+  { label: "UI/UX", active: false },
+  { label: "Web Design", active: true },
+  { label: "App Design", active: false },
+  { label: "Graphic Design", active: false },
+];
+
+const projects: Project[] = [
+  {
+    title: "AirCalling Landing Page Design",
+    category: "Web Design",
+    images: [
+      {
+        src: "/images/web-design-11.png",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/web-design-12.png",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Business Landing Page Design",
+    category: "Web Design",
+    images: [
+      {
+        src: "/images/web-design-21.png",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/web-design-22.png",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Ecom Web Page Design",
+    category: "Web Design",
+    images: [
+      {
+        src: "/images/web-design-31.png",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/web-design-32.png",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Creative Portfolio Design",
+    category: "Web Design",
+    images: [
+      {
+        src: "/images/web-design-11.png",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/web-design-12.png",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Personal Blog Design",
+    category: "Web Design",
+    images: [
+      {
+        src: "/images/web-design-21.png",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/web-design-22.png",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Mobile App Design",
+    category: "App Design",
+    images: [
+      {
+        src: "/images/app-design-11.jpg",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/app-design-12.jpg",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Task Management App Design",
+    category: "App Design",
+    images: [
+      {
+        src: "/images/app-design-21.png",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/app-design-22.png",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "E-Commerce App Design",
+    category: "App Design",
+    images: [
+      {
+        src: "/images/app-design-31.jpg",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/app-design-32.jpg",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Fitness Tracker App Design",
+    category: "App Design",
+    images: [
+      {
+        src: "/images/app-design-11.jpg",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/app-design-12.jpg",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Music Streaming App Design",
+    category: "App Design",
+    images: [
+      {
+        src: "/images/app-design-21.png",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/app-design-22.png",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Creative Poster Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-11.webp",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-12.webp",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Marketing Flyer Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-21.webp",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-22.webp",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Event Invitation Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-31.avif",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-33.jpeg",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Magazine Cover Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-21.webp",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-22.webp",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Magazine Cover Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-21.webp",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-22.webp",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Magazine Cover Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-21.webp",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-22.webp",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Magazine Cover Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-21.webp",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-22.webp",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+  {
+    title: "Brand Identity Design",
+    category: "Graphic Design",
+    images: [
+      {
+        src: "/images/graphic-design-11.webp",
+        position: "bottom-[-5px] left-[-5px]",
+        zIndex: 20,
+      },
+      {
+        src: "/images/graphic-design-12.webp",
+        position: "top-[-5px] right-[-5px]",
+        zIndex: 10,
+      },
+    ],
+  },
+];
+
+export default function MyProjects() {
+  const [selectedCategory, setSelectedCategory] = useState<string>("All");
+
+  // Group projects by category
+  const groupProjectsByCategory = (projects: Project[]) => {
+    return projects.reduce<Record<string, Project[]>>((acc, project) => {
+      const category = project.category;
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category].push(project);
+      return acc;
+    }, {});
+  };
+
+  const groupedProjects = groupProjectsByCategory(projects);
+
+  // Filter projects by selected category
+  const filteredProjects: Project[] =
+    selectedCategory === "All"
+      ? selectProjectsForAll(groupedProjects).slice(0, 6)
+      : projects.filter((project) => project.category === selectedCategory).slice(0, 6);
+
+  // Select 6 projects for the "All" category
+  function selectProjectsForAll(groupedProjects: Record<string, Project[]>): Project[] {
+    const selected: Project[] = [];
+    const remaining: Project[] = [];
+
+    // Select at least one project from each category
+    for (const category in groupedProjects) {
+      if (groupedProjects[category].length > 0) {
+        selected.push(groupedProjects[category][0]);
+        remaining.push(...groupedProjects[category].slice(1));
+      }
+    }
+
+    // Add remaining projects if less than 6
+    while (selected.length < 6 && remaining.length > 0) {
+      selected.push(remaining.shift()!);
+    }
+
+    return selected.slice(0, 6); // Maximum 6 projects
+  }
+
+  return (
+    <div className="flex flex-col items-center" id="projects">
+      <h2 className="text-black text-[65px] font-[600] my-10">My Projects</h2>
+      <p className="text-black text-center text-[21px] font-[400] w-[930px]">
+        Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
+        est risus lectus. Phasellus consequat urna tellus
+      </p>
+      <ul className="flex items-center justify-center gap-5 mt-20 mb-10">
+        {categories.map((category, index) => (
+          <li
+            key={index}
+            onClick={() => setSelectedCategory(category.label)}
+            className={`px-[20px] py-[10px] bg-[#F8F8F8] border border-[#545454] rounded-md text-[24px] font-[400] hover:cursor-pointer hover:border-[#FD6F00] ${
+              selectedCategory === category.label
+                ? "bg-[#FD6F00] text-[#FFFFFF]"
+                : "text-[#000]"
+            }`}
+          >
+            {category.label}
+          </li>
+        ))}
+      </ul>
+      <div className="w-[1420px] flex flex-wrap gap-[30px] items-center justify-between">
+        {filteredProjects.length > 0 ? (
+          filteredProjects.map((project, index) => (
+            <div key={index} className="flex flex-wrap w-[445px] project">
+              <div className="my-5 w-full bg-[#FFEBDB] relative h-[490px] overflow-hidden">
+                {project.images.map((image, idx) => (
+                  <img
+                    key={idx}
+                    src={image.src}
+                    alt="UI/UX Vector"
+                    className={`absolute ${image.position} z-${image.zIndex} max-w-[350px]`}
+                  />
+                ))}
+              </div>
+              <h5 className="text-[#FD6F00] text-[19px] font-[400] w-full">
+                {project.category}
+              </h5>
+              <p className="text-black text-[24px] font-[700] hover:cursor-pointer">
+                {project.title}
+              </p>
+            </div>
+          ))
+        ) : (
+          <p className="text-black text-[24px] font-[700] w-full text-center flex flex-col items-center py-5 gap-5">
+            <Image src={"/images/icons/no-data-illustration.jpg"} quality={90} alt="nothing fonded icon" width={250} height={250} />
+            Nothing found!
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/_components/services/page.tsx

@@ -0,0 +1,75 @@
+import Image from "next/image";
+import React from "react";
+
+// تعریف یک نوع برای سرویس‌ها
+type Service = {
+  title: string;
+  description: string;
+  imageSrc: string;
+  altText: string;
+};
+
+// لیست سرویس‌ها به عنوان یک آرایه از آبجکت‌ها
+const services: Service[] = [
+  {
+    title: "UI/UX",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
+    imageSrc: "/images/ui-ux-vector.svg",
+    altText: "UI/UX Vector",
+  },
+  {
+    title: "Web Design",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
+    imageSrc: "/images/web-design-vector.svg",
+    altText: "Web Design Vector",
+  },
+  {
+    title: "App Design",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
+    imageSrc: "/images/app-design-vector.svg",
+    altText: "App Design Vector",
+  },
+  {
+    title: "Graphic Design",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
+    imageSrc: "/images/graphic-design-vector.svg",
+    altText: "Graphic Design Vector",
+  },
+];
+
+export default function Services() {
+  return (
+    <div className="flex flex-col items-center" id="services">
+      <h2 className="text-black text-[65px] font-[600] my-10">Services</h2>
+      <p className="text-black text-center text-[21px] font-[400] w-[930px]">
+        Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
+        lectus netus in. Aliquet donec morbi convallis pretium
+      </p>
+      <div className="w-[1420px] flex gap-[30px] items-center justify-between mt-20 service">
+        {services.map((service, index) => (
+          <div
+            key={index}
+            className="flex flex-wrap items-center p-[22px] bg-[#F8F8F8] rounded-lg"
+          >
+            <div className="my-5 w-full">
+              <img
+                src={service.imageSrc}
+                alt={service.altText}
+              />
+            </div>
+            <h3 className="text-black text-[32px] font-[600]">
+              {service.title}
+            </h3>
+            <p className="text-black text-[19px] font-[400]">
+              {service.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/_components/testimonials/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+
+export default function Testimonials() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [autoSlideInterval, setAutoSlideInterval] = useState<any>(null);
+
+  const nextSlide = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  const prevSlide = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === 0 ? testimonials.length - 1 : prevIndex - 1
+    );
+  };
+  useEffect(() => {
+    const interval = setInterval(nextSlide, 5000); // Slide every 5 seconds
+    setAutoSlideInterval(interval);
+    return () => clearInterval(interval); // Clean up interval on component unmount
+  }, []);
+
+  const testimonials = [
+    {
+      name: "Sarah Johnson",
+      position: "Founder & CEO of Innovate Solutions",
+      image: "/images/user-1.svg",
+      quote:
+        "Lorem ipsum dolor sit amet consectetur. In enim cursus odio accumsan. Id leo urna velit neque mattis id tellus arcu ondimentum. Augue dictum dolor elementum convallis dignissim malesuada commodo ultrices.",
+    },
+    {
+      name: "Michael Lee",
+      position: "Chief Executive Officer at Tech Innovators",
+      image: "/images/user-1.svg",
+      quote:
+        "Lorem ipsum dolor sit amet consectetur. In enim cursus odio accumsan. Id leo urna velit neque mattis id tellus arcu ondimentum. Augue dictum dolor elementum convallis dignissim malesuada commodo ultrices.",
+    },
+    {
+      name: "Emma Davis",
+      position: "CEO & Lead Strategist at Visionary Ventures",
+      image: "/images/user-1.svg",
+      quote:
+        "Lorem ipsum dolor sit amet consectetur. In enim cursus odio accumsan. Id leo urna velit neque mattis id tellus arcu ondimentum. Augue dictum dolor elementum convallis dignissim malesuada commodo ultrices.",
+    },
+];
+
+  return (
+    <div className="flex flex-col items-center" id="testimonials">
+      <h2 className="text-black text-[65px] font-[600] my-10">Testominials</h2>
+      <p className="text-black text-center text-[21px] font-[400] w-[930px]">
+        Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
+        est risus lectus. Phasellus consequat urna tellus
+      </p>
+      <div className="max-w-[1800px] flex gap-[30px] items-center justify-center mt-10 overflow-hidden hover:cursor-grab select-none">
+        {testimonials.map((testimonial, index) => (
+          <div
+            className={`flex items-center justify-around min-w-[800px] bg-[#F8F8F8] rounded-lg gap-10 p-[25px] ${
+              currentIndex === index ? "" : " blur-[2px]"
+            }`}
+            key={index}
+          >
+            <Image
+              src={testimonial.image}
+              width={235}
+              height={235}
+              alt="user profile picture"
+            />
+            <div className="flex flex-wrap items-center">
+              <p className="text-black text-[21px] font-[400] w-full mb-5">
+                <span className="text-[#FD6F00] text-[21px] font-[700] me-2">
+                  “
+                </span>
+                {testimonial.quote}
+
+                <span className="text-[#FD6F00] text-[21px] font-[700] ms-2">
+                  “
+                </span>
+              </p>
+              <h5 className="text-[#000] text-[24px] font-[500] w-full">
+                {testimonial.name}
+              </h5>
+              <p className="text-[#000] text-[19px] font-[400] w-full">
+                {testimonial.position}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <ul className="flex w-full items-center justify-center gap-5 mt-10">
+        {testimonials.map((_, index) => (
+          <li
+            key={index}
+            className={`${
+              currentIndex === index ? "bg-[#FD6F00]" : "bg-[#D9D9D9]"
+            } rounded-lg h-[16px] w-[40px] hover:cursor-pointer`}
+            onClick={() => setCurrentIndex(index)}
+          ></li>
+        ))}
+      </ul>
+    </div>
+  );
+}