This commit is contained in:
2025-11-24 11:20:14 +05:00
24 changed files with 1010 additions and 67 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 945 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 830 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 747 KiB

After

Width:  |  Height:  |  Size: 554 KiB

+431
View File
@@ -0,0 +1,431 @@
<svg width="768" height="409" viewBox="0 0 768 409" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_8199_27165)">
<path d="M43.3135 50.7441C43.3135 50.7441 89.7312 129.674 150.644 145.886M898.907 50.7441C898.907 50.7441 864.228 109.713 815.485 136.18M574.658 151.971C613.867 105.073 641.371 50.7441 641.371 50.7441C641.371 50.7441 699.022 148.776 770.139 148.776C786.099 148.776 801.38 143.839 815.485 136.18M574.658 151.971C546.584 185.549 512.509 215.318 478.232 218.607C476.184 218.804 474.149 218.932 472.128 218.994M574.658 151.971C574.732 161.297 575.287 181.22 576.915 186.306M472.128 218.994C368.238 222.175 300.85 50.7441 300.85 50.7441C300.85 50.7441 280.613 85.1563 249.327 113.204M472.128 218.994L472.128 227.764M815.485 136.18L815.485 157.821M150.644 145.886C157.616 147.742 164.778 148.776 172.082 148.776C201.063 148.776 227.809 132.495 249.327 113.204M150.644 145.886C148.43 157.671 153.696 184.78 153.696 184.78M249.327 113.204C251.108 122.213 251.108 131.878 250.345 143.578" stroke="url(#paint0_linear_8199_27165)" stroke-width="2.00002"/>
<g filter="url(#filter1_f_8199_27165)">
<rect x="446.698" y="227.254" width="48.833" height="48.833" rx="16.2777" fill="white"/>
<path d="M486.35 250.663C486.332 250.717 486.222 250.861 486.002 250.861L471.931 250.861L471.931 238.03L477.526 238.03C478.517 238.03 479.416 238.552 479.911 239.379L486.35 250.339C486.442 250.483 486.405 250.591 486.35 250.663ZM470.28 265.311L464.648 265.311C463.675 265.311 462.758 264.789 462.263 263.961L455.824 253.02C455.328 252.192 455.328 251.149 455.824 250.321L462.263 239.379C462.758 238.552 463.675 238.03 464.648 238.03L470.28 238.03L470.28 265.311ZM487.818 249.511L481.379 238.57C480.59 237.238 479.122 236.41 477.563 236.41L464.666 236.41C463.088 236.41 461.639 237.238 460.85 238.57L454.411 249.511C453.622 250.843 453.622 252.498 454.411 253.83L460.85 264.771C461.639 266.103 463.107 266.931 464.666 266.931L471.949 266.931L471.949 252.48L486.02 252.48C486.24 252.48 486.46 252.444 486.662 252.372C486.607 252.588 486.515 252.804 486.387 253.02L484.351 256.493L484.259 256.637L479.948 263.961C479.856 264.123 479.727 264.285 479.599 264.411L478.113 266.895C479.471 266.715 480.681 265.941 481.379 264.771L487.818 253.83C488.606 252.516 488.606 250.861 487.818 249.511Z" fill="#111111"/>
</g>
<rect x="446.698" y="227.254" width="48.833" height="48.833" rx="16.2777" fill="white"/>
<path d="M486.35 250.663C486.332 250.717 486.222 250.861 486.002 250.861L471.931 250.861L471.931 238.03L477.526 238.03C478.517 238.03 479.416 238.552 479.911 239.379L486.35 250.339C486.442 250.483 486.405 250.591 486.35 250.663ZM470.28 265.311L464.648 265.311C463.675 265.311 462.758 264.789 462.263 263.961L455.824 253.02C455.328 252.192 455.328 251.149 455.824 250.321L462.263 239.379C462.758 238.552 463.675 238.03 464.648 238.03L470.28 238.03L470.28 265.311ZM487.818 249.511L481.379 238.57C480.59 237.238 479.122 236.41 477.563 236.41L464.666 236.41C463.088 236.41 461.639 237.238 460.85 238.57L454.411 249.511C453.622 250.843 453.622 252.498 454.411 253.83L460.85 264.771C461.639 266.103 463.107 266.931 464.666 266.931L471.949 266.931L471.949 252.48L486.02 252.48C486.24 252.48 486.46 252.444 486.662 252.372C486.607 252.588 486.515 252.804 486.387 253.02L484.351 256.493L484.259 256.637L479.948 263.961C479.856 264.123 479.727 264.285 479.599 264.411L478.113 266.895C479.471 266.715 480.681 265.941 481.379 264.771L487.818 253.83C488.606 252.516 488.606 250.861 487.818 249.511Z" fill="#111111"/>
<g filter="url(#filter2_f_8199_27165)">
<rect x="554.026" y="186.055" width="48.833" height="48.833" rx="16.2777" fill="#003776"/>
<path d="M582.399 216.285L589.322 216.285L589.322 210.212L577.936 210.212L582.387 216.272C582.391 216.277 582.395 216.281 582.399 216.285Z" fill="white"/>
<path d="M571.398 207.353L568.065 207.353L573.103 213.425L575.839 213.425C578.232 213.36 580.718 214.34 582.383 216.274L577.931 210.214L577.93 210.214C576.27 208.282 573.786 207.294 571.398 207.353Z" fill="white"/>
<path d="M584.419 219.056C582.756 216.819 580.146 215.655 577.574 215.719L575.011 215.719L577.974 219.289C579.373 220.804 581.233 221.688 583.166 221.885L583.166 221.894C585.043 222.096 586.971 222.949 588.348 224.394L584.419 219.056Z" fill="white"/>
<path d="M571.963 202.115C570.299 200.005 567.81 198.922 565.313 198.983L561.208 198.983L566.162 205.056L569.67 205.056C572.03 204.991 574.437 205.864 576.147 207.83L576.446 208.188L576.446 208.188L571.985 202.115L571.963 202.115Z" fill="white"/>
<path d="M596.396 202.113L571.983 202.113L576.444 208.186L596.396 208.186L596.396 202.113Z" fill="white"/>
</g>
<rect x="554.026" y="186.055" width="48.833" height="48.833" rx="16.2777" fill="#003776"/>
<path d="M582.399 216.285L589.322 216.285L589.322 210.212L577.936 210.212L582.387 216.272C582.391 216.277 582.395 216.281 582.399 216.285Z" fill="white"/>
<path d="M571.398 207.353L568.065 207.353L573.103 213.425L575.839 213.425C578.232 213.36 580.718 214.34 582.383 216.274L577.931 210.214L577.93 210.214C576.27 208.282 573.786 207.294 571.398 207.353Z" fill="white"/>
<path d="M584.419 219.056C582.756 216.819 580.146 215.655 577.574 215.719L575.011 215.719L577.974 219.289C579.373 220.804 581.233 221.688 583.166 221.885L583.166 221.894C585.043 222.096 586.971 222.949 588.348 224.394L584.419 219.056Z" fill="white"/>
<path d="M571.963 202.115C570.299 200.005 567.81 198.922 565.313 198.983L561.208 198.983L566.162 205.056L569.67 205.056C572.03 204.991 574.437 205.864 576.147 207.83L576.446 208.188L576.446 208.188L571.985 202.115L571.963 202.115Z" fill="white"/>
<path d="M596.396 202.113L571.983 202.113L576.444 208.186L596.396 208.186L596.396 202.113Z" fill="white"/>
<g filter="url(#filter3_f_8199_27165)">
<g clip-path="url(#clip0_8199_27165)">
<mask id="mask0_8199_27165" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="225" y="141" width="50" height="50">
<path d="M274.764 141.799L225.931 141.799L225.931 190.632L274.764 190.632L274.764 141.799Z" fill="white"/>
</mask>
<g mask="url(#mask0_8199_27165)">
<path d="M274.764 141.799L225.931 141.799L225.931 190.632L274.764 190.632L274.764 141.799Z" fill="#FAF8F5"/>
<path d="M250.337 59.9941L249.523 59.9941L249.523 271.604L250.337 271.604L250.337 59.9941Z" fill="#E13A30"/>
<path d="M268.26 149.521L231.601 149.521L231.601 182.077L268.26 182.077L268.26 149.521Z" fill="#FAF8F5"/>
<path d="M246.88 152.775L249.368 152.775L249.368 178.82L246.952 178.82L246.952 156.88L242.63 178.82L240.287 178.82L235.801 156.88L235.801 178.82L234.856 178.82L234.856 152.775L237.272 152.775L241.631 172.191L242.267 176.259L246.88 152.775Z" fill="#E13A30"/>
<path d="M265.005 152.775L265.005 178.82L262.589 178.82L262.589 153.447L256.996 153.447L256.996 178.82L254.58 178.82L254.58 152.775L265.005 152.775Z" fill="#E13A30"/>
</g>
</g>
</g>
<g clip-path="url(#clip1_8199_27165)">
<mask id="mask1_8199_27165" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="225" y="141" width="50" height="50">
<path d="M274.764 141.799L225.931 141.799L225.931 190.632L274.764 190.632L274.764 141.799Z" fill="white"/>
</mask>
<g mask="url(#mask1_8199_27165)">
<path d="M274.764 141.799L225.931 141.799L225.931 190.632L274.764 190.632L274.764 141.799Z" fill="#FAF8F5"/>
<path d="M250.337 59.9941L249.523 59.9941L249.523 271.604L250.337 271.604L250.337 59.9941Z" fill="#E13A30"/>
<path d="M268.26 149.521L231.601 149.521L231.601 182.077L268.26 182.077L268.26 149.521Z" fill="#FAF8F5"/>
<path d="M246.88 152.775L249.368 152.775L249.368 178.82L246.952 178.82L246.952 156.88L242.63 178.82L240.287 178.82L235.801 156.88L235.801 178.82L234.856 178.82L234.856 152.775L237.272 152.775L241.631 172.191L242.267 176.259L246.88 152.775Z" fill="#E13A30"/>
<path d="M265.005 152.775L265.005 178.82L262.589 178.82L262.589 153.447L256.996 153.447L256.996 178.82L254.58 178.82L254.58 152.775L265.005 152.775Z" fill="#E13A30"/>
</g>
</g>
<g filter="url(#filter4_f_8199_27165)">
<rect x="131.318" y="183.902" width="48.833" height="48.833" rx="16.2777" transform="rotate(-3.44749 131.318 183.902)" fill="#FF4607"/>
<path d="M143.664 210.217L162.125 201.637L170.456 201.135L170.856 207.779L162.525 208.281L143.888 213.938L143.664 210.217Z" fill="white"/>
<path d="M144.016 216.064L162.617 212.01L170.948 211.508L171.348 218.152L144.241 219.785L144.016 216.064Z" fill="white"/>
<path d="M143.344 204.902L161.509 191.406L169.839 190.904L170.239 197.548L161.909 198.05L143.568 208.623L143.344 204.902Z" fill="white"/>
</g>
<rect x="131.318" y="183.902" width="48.833" height="48.833" rx="16.2777" transform="rotate(-3.44749 131.318 183.902)" fill="#FF4607"/>
<path d="M143.664 210.217L162.125 201.637L170.456 201.135L170.856 207.779L162.525 208.281L143.888 213.938L143.664 210.217Z" fill="white"/>
<path d="M144.016 216.064L162.617 212.01L170.948 211.508L171.348 218.152L144.241 219.785L144.016 216.064Z" fill="white"/>
<path d="M143.344 204.902L161.509 191.406L169.839 190.904L170.239 197.548L161.909 198.05L143.568 208.623L143.344 204.902Z" fill="white"/>
<g filter="url(#filter5_f_8199_27165)">
<rect x="519.438" y="194.699" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="520.456" y="195.717" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter6_f_8199_27165)">
<rect x="397.356" y="190.631" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="398.372" y="191.646" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter7_f_8199_27165)">
<rect x="681.197" y="102.631" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="682.215" y="103.646" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter8_f_8199_27165)">
<rect x="751.903" y="142.307" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="752.922" y="143.322" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter9_f_8199_27165)">
<rect x="358.693" y="152.992" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="359.709" y="154.008" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter10_f_8199_27165)">
<rect x="284.428" y="62.9531" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="285.446" y="63.9688" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter11_f_8199_27165)">
<rect x="220.337" y="126.537" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="221.354" y="127.553" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter12_f_8199_27165)">
<rect x="134.369" y="137.219" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="135.388" y="138.238" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
</g>
<g filter="url(#filter13_f_8199_27165)">
<path d="M-525.508 109.752C-525.508 109.752 -479.09 188.681 -418.177 204.894M330.086 109.752C330.086 109.752 295.407 168.721 246.663 195.188C232.559 202.846 217.278 207.784 201.318 207.784C130.201 207.784 72.5495 109.752 72.5495 109.752C72.5495 109.752 45.046 164.081 5.83645 210.979M5.83645 210.979C-22.2373 244.557 -56.312 274.325 -90.5893 277.615C-92.6377 277.812 -94.6725 277.94 -96.6935 278.002M5.83645 210.979C5.91069 220.304 6.46612 240.227 8.09389 245.314M-96.6935 278.002C-200.583 281.183 -267.971 109.752 -267.971 109.752C-267.971 109.752 -288.209 144.164 -319.494 172.211M-96.6935 278.002V286.771M-418.177 204.894C-411.205 206.75 -404.043 207.784 -396.739 207.784C-367.758 207.784 -341.012 191.503 -319.494 172.211M-418.177 204.894C-420.392 216.679 -415.125 243.788 -415.125 243.788M-319.494 172.211C-317.713 181.221 -317.713 190.886 -318.476 202.585" stroke="url(#paint1_linear_8199_27165)" stroke-width="1.01735"/>
<g filter="url(#filter14_f_8199_27165)">
<rect x="-14.7988" y="245.059" width="48.833" height="48.833" rx="16.2777" fill="white"/>
<path d="M20.3589 283.089H1.6875L1.6875 257.236H8.14058V277.143H20.3589V283.089Z" fill="#213FDC"/>
</g>
<rect x="-14.7988" y="245.059" width="48.833" height="48.833" rx="16.2777" fill="white"/>
<path d="M20.3589 283.089H1.6875L1.6875 257.236H8.14058V277.143H20.3589V283.089Z" fill="#213FDC"/>
<g filter="url(#filter15_f_8199_27165)">
<rect x="112.373" y="161.633" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="113.389" y="162.652" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter16_f_8199_27165)">
<rect x="183.078" y="201.314" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="184.096" y="202.332" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
</g>
<g filter="url(#filter17_f_8199_27165)">
<path d="M446.919 174.658C446.919 174.658 493.337 253.588 554.25 269.8M1302.51 174.658C1302.51 174.658 1267.83 233.627 1219.09 260.094C1204.99 267.753 1189.7 272.69 1173.74 272.69C1102.63 272.69 1044.98 174.658 1044.98 174.658C1044.98 174.658 1017.47 228.987 978.263 275.885M978.263 275.885C950.189 309.463 916.115 339.232 881.837 342.521C879.789 342.718 877.754 342.846 875.733 342.908M978.263 275.885C978.337 285.211 978.893 305.134 980.521 310.221M875.733 342.908C771.844 346.089 704.456 174.658 704.456 174.658C704.456 174.658 684.218 209.07 652.933 237.118M875.733 342.908L875.733 351.678M554.25 269.8C561.222 271.656 568.383 272.69 575.687 272.69C604.669 272.69 631.414 256.409 652.933 237.118M554.25 269.8C552.035 281.585 557.302 308.694 557.302 308.694M652.933 237.118C654.713 246.127 654.713 255.792 653.95 267.492" stroke="url(#paint2_linear_8199_27165)" stroke-width="2.00002"/>
<g filter="url(#filter18_f_8199_27165)">
<rect x="629.534" y="265.709" width="48.833" height="48.833" rx="16.2777" fill="white"/>
<g clip-path="url(#clip2_8199_27165)">
<path d="M648.415 296.855C649.894 296.855 651.167 296.476 652.107 295.737C653.048 295.016 653.652 293.898 653.799 292.455L651.135 292.455C650.913 293.965 649.876 294.705 648.387 294.705C646.386 294.705 645.266 293.307 645.266 290.868L645.266 290.733C645.266 288.29 646.469 286.865 648.364 286.865C649.894 286.865 650.678 287.605 650.881 289.029L653.666 289.029C653.532 287.587 652.905 286.518 651.988 285.815C651.047 285.107 649.775 284.765 648.345 284.765C646.653 284.765 645.16 285.373 644.104 286.424C643.03 287.469 642.393 288.975 642.393 290.751L642.393 290.882C642.393 292.703 642.914 294.177 643.938 295.209C644.943 296.255 646.455 296.85 648.415 296.85M661.25 296.85C663.043 296.85 664.459 296.327 665.408 295.408C666.363 294.506 666.884 293.208 666.884 291.635L666.884 290.39L661.499 290.39L661.499 292.324L664.2 292.324C664.182 293.001 663.965 293.623 663.5 294.064C663.029 294.524 662.324 294.804 661.319 294.804C660.129 294.804 659.304 294.412 658.774 293.704C658.235 293.032 657.981 292.049 657.981 290.918L657.981 290.787C657.981 288.38 659.189 286.87 661.287 286.87C662.744 286.87 663.633 287.492 663.887 288.867L666.589 288.867C666.455 287.424 665.768 286.392 664.809 285.716C663.855 285.062 662.601 284.765 661.254 284.765C659.493 284.765 657.949 285.387 656.879 286.437C655.787 287.483 655.15 288.975 655.15 290.751L655.15 290.882C655.15 292.635 655.685 294.11 656.741 295.164C657.769 296.228 659.295 296.85 661.254 296.85M636.326 302.003L672.951 302.003L672.951 279.621L636.326 279.621L636.326 302.003ZM670.664 299.762L638.618 299.762L638.618 281.857L670.664 281.857L670.664 299.762Z" fill="#0F1011"/>
</g>
</g>
<rect x="629.534" y="265.709" width="48.833" height="48.833" rx="16.2777" fill="white"/>
<g clip-path="url(#clip3_8199_27165)">
<path d="M648.415 296.855C649.894 296.855 651.167 296.476 652.107 295.737C653.048 295.016 653.652 293.898 653.799 292.455L651.135 292.455C650.913 293.965 649.876 294.705 648.387 294.705C646.386 294.705 645.266 293.307 645.266 290.868L645.266 290.733C645.266 288.29 646.469 286.865 648.364 286.865C649.894 286.865 650.678 287.605 650.881 289.029L653.666 289.029C653.532 287.587 652.905 286.518 651.988 285.815C651.047 285.107 649.775 284.765 648.345 284.765C646.653 284.765 645.16 285.373 644.104 286.424C643.03 287.469 642.393 288.975 642.393 290.751L642.393 290.882C642.393 292.703 642.914 294.177 643.938 295.209C644.943 296.255 646.455 296.85 648.415 296.85M661.25 296.85C663.043 296.85 664.459 296.327 665.408 295.408C666.363 294.506 666.884 293.208 666.884 291.635L666.884 290.39L661.499 290.39L661.499 292.324L664.2 292.324C664.182 293.001 663.965 293.623 663.5 294.064C663.029 294.524 662.324 294.804 661.319 294.804C660.129 294.804 659.304 294.412 658.774 293.704C658.235 293.032 657.981 292.049 657.981 290.918L657.981 290.787C657.981 288.38 659.189 286.87 661.287 286.87C662.744 286.87 663.633 287.492 663.887 288.867L666.589 288.867C666.455 287.424 665.768 286.392 664.809 285.716C663.855 285.062 662.601 284.765 661.254 284.765C659.493 284.765 657.949 285.387 656.879 286.437C655.787 287.483 655.15 288.975 655.15 290.751L655.15 290.882C655.15 292.635 655.685 294.11 656.741 295.164C657.769 296.228 659.295 296.85 661.254 296.85M636.326 302.003L672.951 302.003L672.951 279.621L636.326 279.621L636.326 302.003ZM670.664 299.762L638.618 299.762L638.618 281.857L670.664 281.857L670.664 299.762Z" fill="#0F1011"/>
</g>
<g filter="url(#filter19_f_8199_27165)">
<rect x="534.922" y="307.814" width="48.833" height="48.833" rx="16.2777" transform="rotate(-3.44749 534.922 307.814)" fill="#754CEA"/>
<path d="M573.357 331.895L571.015 332.036C572.377 331.791 573.523 331.26 574.464 330.451C575.683 329.399 576.236 328.155 576.15 326.715C576.063 325.276 575.364 324.107 574.029 323.232C572.718 322.332 571.136 321.939 569.257 322.052L559.94 322.613L555.04 334.676L548.584 323.298L544.024 323.572L545.003 339.82L546.631 339.722L545.83 326.43L553.15 339.33L554.952 339.221L560.459 325.663L561.253 338.842L565.086 338.611L564.713 332.416L569.174 332.147L573.268 338.118L577.5 337.863L573.357 331.895ZM568.493 330.674L564.622 330.908L564.202 323.938L568.074 323.704C570.139 323.58 571.591 324.87 571.718 326.982C571.845 329.094 570.559 330.55 568.493 330.674Z" fill="white"/>
</g>
<rect x="534.922" y="307.814" width="48.833" height="48.833" rx="16.2777" transform="rotate(-3.44749 534.922 307.814)" fill="#754CEA"/>
<path d="M573.357 331.895L571.015 332.036C572.377 331.791 573.523 331.26 574.464 330.451C575.683 329.399 576.236 328.155 576.15 326.715C576.063 325.276 575.364 324.107 574.029 323.232C572.718 322.332 571.136 321.939 569.257 322.052L559.94 322.613L555.04 334.676L548.584 323.298L544.024 323.572L545.003 339.82L546.631 339.722L545.83 326.43L553.15 339.33L554.952 339.221L560.459 325.663L561.253 338.842L565.086 338.611L564.713 332.416L569.174 332.147L573.268 338.118L577.5 337.863L573.357 331.895ZM568.493 330.674L564.622 330.908L564.202 323.938L568.074 323.704C570.139 323.58 571.591 324.87 571.718 326.982C571.845 329.094 570.559 330.55 568.493 330.674Z" fill="white"/>
<g filter="url(#filter20_f_8199_27165)">
<rect x="762.299" y="276.9" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="763.316" y="277.916" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter21_f_8199_27165)">
<rect x="688.033" y="186.863" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="689.051" y="187.879" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter22_f_8199_27165)">
<rect x="623.938" y="250.449" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="624.956" y="251.465" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
<g filter="url(#filter23_f_8199_27165)">
<rect x="537.972" y="261.133" width="10.6822" height="10.6822" rx="5.3411" fill="#F9FF57"/>
</g>
<rect x="538.99" y="262.148" width="8.6475" height="8.6475" rx="4.32375" fill="#F9FF57"/>
</g>
<path d="M-202.742 0C-202.742 0 -148.898 91.5582 -78.2385 110.365M789.747 -9.25892e-07C789.747 -9.25892e-07 749.519 68.4041 692.976 99.106M413.617 117.423C459.1 63.0217 491.004 -6.47196e-07 491.004 -6.47196e-07C491.004 -6.47196e-07 557.88 113.717 640.376 113.717C658.889 113.717 676.616 107.99 692.976 99.106M413.617 117.423C381.052 156.374 341.525 190.905 301.763 194.721C299.387 194.949 297.027 195.098 294.682 195.17M413.617 117.423C413.703 128.241 414.348 151.352 416.236 157.252M294.682 195.17C174.171 198.86 96.0003 -2.78697e-07 96.0003 -2.78697e-07C96.0003 -2.78697e-07 72.5249 39.9181 36.2341 72.453M294.682 195.17L294.682 205.343M692.976 99.106L692.976 124.209M-78.2385 110.365C-70.1511 112.517 -61.8434 113.717 -53.3709 113.717C-19.7523 113.717 11.2724 94.8313 36.2341 72.453M-78.2385 110.365C-80.8075 124.035 -74.6981 155.482 -74.6981 155.482M36.2341 72.453C38.2993 82.9041 38.2993 94.1153 37.4142 107.687" stroke="url(#paint3_linear_8199_27165)" stroke-width="2.00002"/>
<g filter="url(#filter24_f_8199_27165)">
<rect x="265.181" y="204.752" width="56.6462" height="56.6462" rx="18.8821" fill="#EF3B24"/>
<path d="M293.309 214.748C283.295 214.748 275.177 222.874 275.177 232.898C275.177 242.921 283.295 251.047 293.309 251.047C303.322 251.047 311.441 242.921 311.441 232.898C311.441 222.874 303.324 214.748 293.309 214.748ZM293.309 221.209C299.748 221.209 304.986 226.452 304.986 232.898C304.986 239.343 299.748 244.586 293.309 244.586C286.87 244.586 281.631 239.343 281.631 232.898C281.631 226.452 286.87 221.209 293.309 221.209Z" fill="white"/>
<path d="M300.246 228.5C300.246 230.968 298.248 232.967 295.783 232.967C293.318 232.967 291.321 230.968 291.321 228.5C291.321 226.033 293.318 224.033 295.783 224.033C298.248 224.033 300.246 226.033 300.246 228.5Z" fill="white"/>
</g>
<rect x="265.181" y="204.752" width="56.6462" height="56.6462" rx="18.8821" fill="#EF3B24"/>
<path d="M293.309 214.748C283.295 214.748 275.177 222.874 275.177 232.898C275.177 242.921 283.295 251.047 293.309 251.047C303.322 251.047 311.441 242.921 311.441 232.898C311.441 222.874 303.324 214.748 293.309 214.748ZM293.309 221.209C299.748 221.209 304.986 226.452 304.986 232.898C304.986 239.343 299.748 244.586 293.309 244.586C286.87 244.586 281.631 239.343 281.631 232.898C281.631 226.452 286.87 221.209 293.309 221.209Z" fill="white"/>
<path d="M300.246 228.5C300.246 230.968 298.248 232.967 295.783 232.967C293.318 232.967 291.321 230.968 291.321 228.5C291.321 226.033 293.318 224.033 295.783 224.033C298.248 224.033 300.246 226.033 300.246 228.5Z" fill="white"/>
<g filter="url(#filter25_f_8199_27165)">
<rect x="389.685" y="156.957" width="56.6462" height="56.6462" rx="18.8821" fill="#EEFD4E"/>
<g clip-path="url(#clip4_8199_27165)">
<path d="M417.904 165.84C402.835 165.84 397.999 170.676 397.999 185.745C397.999 200.813 402.835 205.649 417.904 205.649C432.972 205.649 437.808 200.813 437.808 185.745C437.808 170.676 432.972 165.84 417.904 165.84ZM417.904 207.299C409.604 207.299 404.428 205.826 401.125 202.523C397.822 199.22 396.349 194.046 396.349 185.745C396.349 177.445 397.822 172.269 401.125 168.966C404.428 165.665 409.602 164.191 417.904 164.191C426.196 164.191 431.372 165.67 434.682 168.989C437.985 172.3 439.458 177.466 439.458 185.746C439.458 194.046 437.985 199.222 434.682 202.525C431.377 205.828 426.203 207.299 417.904 207.299Z" fill="#1E1F27"/>
<path d="M430.299 174.83L430.299 173L419.066 173L419.066 184.232L430.299 184.232L430.299 182.404L420.896 182.404L420.896 179.532L430.299 179.532L430.299 177.702L420.896 177.702L420.896 174.83L430.299 174.83Z" fill="#1E1F27"/>
<path d="M404.889 186.943L404.889 198.177L406.718 198.177L406.718 188.773L409.589 188.773L409.589 198.177L411.419 198.177L411.419 188.773L414.291 188.773L414.291 198.177L416.121 198.177L416.121 186.943L404.889 186.943Z" fill="#1E1F27"/>
<path d="M424.683 188.511C422.45 188.511 420.635 190.328 420.635 192.559C420.635 194.792 422.452 196.607 424.683 196.607C426.916 196.607 428.731 194.79 428.731 192.559C428.731 190.326 426.914 188.511 424.683 188.511ZM424.683 198.436C421.441 198.436 418.806 195.8 418.806 192.559C418.806 189.317 421.443 186.682 424.683 186.682C427.924 186.682 430.56 189.317 430.56 192.559C430.56 195.8 427.923 198.436 424.683 198.436Z" fill="#1E1F27"/>
<path d="M404.928 173C404.916 173 404.901 173 404.889 173L404.889 174.83C406.977 174.83 408.676 176.529 408.676 178.617C408.676 180.705 406.977 182.404 404.889 182.404L404.889 184.234C407.986 184.234 410.504 181.714 410.504 178.619C410.504 177.162 409.945 175.831 409.03 174.831L414.3 174.831L414.3 184.234L416.13 184.234L416.13 173L404.928 173Z" fill="#1E1F27"/>
<path d="M437.61 166.095C437.751 166.095 437.862 166.068 437.943 166.015C438.024 165.963 438.066 165.892 438.066 165.805C438.066 165.71 438.026 165.635 437.947 165.585C437.867 165.534 437.755 165.509 437.61 165.509L437.037 165.509L437.037 166.096L437.61 166.096L437.61 166.095ZM436.616 165.088L437.609 165.088C437.883 165.088 438.1 165.144 438.258 165.258C438.415 165.371 438.493 165.554 438.493 165.805C438.493 165.964 438.456 166.091 438.384 166.181C438.312 166.274 438.193 166.34 438.028 166.384L438.368 167.029L437.934 167.029L437.681 166.435L437.035 166.442L437.035 167.029L436.614 167.029L436.614 165.088L436.616 165.088ZM437.551 167.725C437.854 167.725 438.133 167.653 438.384 167.508C438.635 167.364 438.832 167.165 438.979 166.914C439.124 166.662 439.196 166.384 439.196 166.08C439.196 165.776 439.124 165.498 438.979 165.247C438.834 164.995 438.635 164.797 438.384 164.652C438.133 164.507 437.854 164.435 437.551 164.435C437.242 164.435 436.963 164.507 436.714 164.652C436.464 164.797 436.267 164.994 436.123 165.243C435.978 165.493 435.906 165.771 435.906 166.08C435.906 166.384 435.978 166.662 436.123 166.914C436.267 167.165 436.466 167.364 436.717 167.508C436.969 167.653 437.247 167.725 437.551 167.725ZM437.551 168.19C437.155 168.19 436.795 168.098 436.471 167.915C436.148 167.731 435.895 167.479 435.71 167.158C435.526 166.836 435.436 166.478 435.436 166.082C435.436 165.686 435.528 165.326 435.71 165.003C435.895 164.679 436.148 164.426 436.471 164.242C436.795 164.059 437.155 163.967 437.551 163.967C437.932 163.967 438.285 164.059 438.608 164.245C438.932 164.431 439.189 164.685 439.38 165.006C439.572 165.328 439.666 165.686 439.666 166.082C439.666 166.478 439.574 166.838 439.387 167.158C439.201 167.479 438.946 167.731 438.623 167.915C438.301 168.098 437.943 168.19 437.551 168.19Z" fill="#1E1F27"/>
</g>
</g>
<rect x="389.685" y="156.957" width="56.6462" height="56.6462" rx="18.8821" fill="#EEFD4E"/>
<g clip-path="url(#clip5_8199_27165)">
<path d="M417.904 165.84C402.835 165.84 397.999 170.676 397.999 185.745C397.999 200.813 402.835 205.649 417.904 205.649C432.972 205.649 437.808 200.813 437.808 185.745C437.808 170.676 432.972 165.84 417.904 165.84ZM417.904 207.299C409.604 207.299 404.428 205.826 401.125 202.523C397.822 199.22 396.349 194.046 396.349 185.745C396.349 177.445 397.822 172.269 401.125 168.966C404.428 165.665 409.602 164.191 417.904 164.191C426.196 164.191 431.372 165.67 434.682 168.989C437.985 172.3 439.458 177.466 439.458 185.746C439.458 194.046 437.985 199.222 434.682 202.525C431.377 205.828 426.203 207.299 417.904 207.299Z" fill="#1E1F27"/>
<path d="M430.299 174.83L430.299 173L419.066 173L419.066 184.232L430.299 184.232L430.299 182.404L420.896 182.404L420.896 179.532L430.299 179.532L430.299 177.702L420.896 177.702L420.896 174.83L430.299 174.83Z" fill="#1E1F27"/>
<path d="M404.889 186.943L404.889 198.177L406.718 198.177L406.718 188.773L409.589 188.773L409.589 198.177L411.419 198.177L411.419 188.773L414.291 188.773L414.291 198.177L416.121 198.177L416.121 186.943L404.889 186.943Z" fill="#1E1F27"/>
<path d="M424.683 188.511C422.45 188.511 420.635 190.328 420.635 192.559C420.635 194.792 422.452 196.607 424.683 196.607C426.916 196.607 428.731 194.79 428.731 192.559C428.731 190.326 426.914 188.511 424.683 188.511ZM424.683 198.436C421.441 198.436 418.806 195.8 418.806 192.559C418.806 189.317 421.443 186.682 424.683 186.682C427.924 186.682 430.56 189.317 430.56 192.559C430.56 195.8 427.923 198.436 424.683 198.436Z" fill="#1E1F27"/>
<path d="M404.928 173C404.916 173 404.901 173 404.889 173L404.889 174.83C406.977 174.83 408.676 176.529 408.676 178.617C408.676 180.705 406.977 182.404 404.889 182.404L404.889 184.234C407.986 184.234 410.504 181.714 410.504 178.619C410.504 177.162 409.945 175.831 409.03 174.831L414.3 174.831L414.3 184.234L416.13 184.234L416.13 173L404.928 173Z" fill="#1E1F27"/>
<path d="M437.61 166.095C437.751 166.095 437.862 166.068 437.943 166.015C438.024 165.963 438.066 165.892 438.066 165.805C438.066 165.71 438.026 165.635 437.947 165.585C437.867 165.534 437.755 165.509 437.61 165.509L437.037 165.509L437.037 166.096L437.61 166.096L437.61 166.095ZM436.616 165.088L437.609 165.088C437.883 165.088 438.1 165.144 438.258 165.258C438.415 165.371 438.493 165.554 438.493 165.805C438.493 165.964 438.456 166.091 438.384 166.181C438.312 166.274 438.193 166.34 438.028 166.384L438.368 167.029L437.934 167.029L437.681 166.435L437.035 166.442L437.035 167.029L436.614 167.029L436.614 165.088L436.616 165.088ZM437.551 167.725C437.854 167.725 438.133 167.653 438.384 167.508C438.635 167.364 438.832 167.165 438.979 166.914C439.124 166.662 439.196 166.384 439.196 166.08C439.196 165.776 439.124 165.498 438.979 165.247C438.834 164.995 438.635 164.797 438.384 164.652C438.133 164.507 437.854 164.435 437.551 164.435C437.242 164.435 436.963 164.507 436.714 164.652C436.464 164.797 436.267 164.994 436.123 165.243C435.978 165.493 435.906 165.771 435.906 166.08C435.906 166.384 435.978 166.662 436.123 166.914C436.267 167.165 436.466 167.364 436.717 167.508C436.969 167.653 437.247 167.725 437.551 167.725ZM437.551 168.19C437.155 168.19 436.795 168.098 436.471 167.915C436.148 167.731 435.895 167.479 435.71 167.158C435.526 166.836 435.436 166.478 435.436 166.082C435.436 165.686 435.528 165.326 435.71 165.003C435.895 164.679 436.148 164.426 436.471 164.242C436.795 164.059 437.155 163.967 437.551 163.967C437.932 163.967 438.285 164.059 438.608 164.245C438.932 164.431 439.189 164.685 439.38 165.006C439.572 165.328 439.666 165.686 439.666 166.082C439.666 166.478 439.574 166.838 439.387 167.158C439.201 167.479 438.946 167.731 438.623 167.915C438.301 168.098 437.943 168.19 437.551 168.19Z" fill="#1E1F27"/>
</g>
<g filter="url(#filter26_f_8199_27165)">
<rect x="664.655" y="122.732" width="56.6462" height="56.6462" rx="18.8821" fill="#EC1515"/>
<path d="M685.986 148.288L684.772 145.832L689.241 143.23C690.335 142.593 691.697 143.398 691.697 144.681L691.697 159.317L688.663 159.317L688.663 146.878L685.986 148.288Z" fill="white"/>
<path d="M709.689 148.288L708.475 145.832L712.944 143.23C714.039 142.593 715.401 143.398 715.401 144.681L715.401 159.317L712.366 159.317L712.366 146.878L709.689 148.288Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M686.334 159.317L683.1 159.317L681.61 155.82L675.259 155.82L673.829 159.317L670.556 159.317L677.212 143.653C677.668 142.579 679.162 142.577 679.621 143.649L686.334 159.317ZM680.475 153.106L676.398 153.106L678.413 148.136L680.475 153.106Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M700.847 159.317C704.395 159.317 707.271 155.618 707.271 151.056C707.271 146.493 704.395 142.795 700.847 142.795C697.3 142.795 694.424 146.493 694.424 151.056C694.424 155.618 697.3 159.317 700.847 159.317ZM700.848 156.064C702.73 156.064 704.256 153.703 704.256 150.791C704.256 147.879 702.73 145.518 700.848 145.518C698.965 145.518 697.439 147.879 697.439 150.791C697.439 153.703 698.965 156.064 700.848 156.064Z" fill="white"/>
</g>
<rect x="664.655" y="122.732" width="56.6462" height="56.6462" rx="18.8821" fill="#EC1515"/>
<path d="M685.986 148.288L684.772 145.832L689.241 143.23C690.335 142.593 691.697 143.398 691.697 144.681L691.697 159.317L688.663 159.317L688.663 146.878L685.986 148.288Z" fill="white"/>
<path d="M709.689 148.288L708.475 145.832L712.944 143.23C714.039 142.593 715.401 143.398 715.401 144.681L715.401 159.317L712.366 159.317L712.366 146.878L709.689 148.288Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M686.334 159.317L683.1 159.317L681.61 155.82L675.259 155.82L673.829 159.317L670.556 159.317L677.212 143.653C677.668 142.579 679.162 142.577 679.621 143.649L686.334 159.317ZM680.475 153.106L676.398 153.106L678.413 148.136L680.475 153.106Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M700.847 159.317C704.395 159.317 707.271 155.618 707.271 151.056C707.271 146.493 704.395 142.795 700.847 142.795C697.3 142.795 694.424 146.493 694.424 151.056C694.424 155.618 697.3 159.317 700.847 159.317ZM700.848 156.064C702.73 156.064 704.256 153.703 704.256 150.791C704.256 147.879 702.73 145.518 700.848 145.518C698.965 145.518 697.439 147.879 697.439 150.791C697.439 153.703 698.965 156.064 700.848 156.064Z" fill="white"/>
<g filter="url(#filter27_f_8199_27165)">
<rect x="9.09277" y="105.621" width="56.6462" height="56.6462" rx="18.8821" fill="#754CEA"/>
<path d="M51.9183 136.187L49.1964 136.187C50.7908 135.998 52.1546 135.463 53.3004 134.592C54.785 133.459 55.5129 132.057 55.5129 130.384C55.5129 128.712 54.785 127.309 53.3004 126.203C51.8455 125.07 50.0403 124.504 47.8575 124.504L37.0293 124.504L30.5144 138.129L23.8323 124.504L18.5342 124.504L18.5342 143.386L20.4256 143.386L20.4256 127.939L28.001 143.386L30.0956 143.386L37.4184 128.071L37.4184 143.386L41.8722 143.386L41.8722 136.187L47.0563 136.187L51.3802 143.386L56.2983 143.386L51.9183 136.187ZM46.3715 134.434L41.8722 134.434L41.8722 126.334L46.3715 126.334C48.7719 126.334 50.3628 127.93 50.3628 130.384C50.3628 132.839 48.7714 134.434 46.3715 134.434Z" fill="white"/>
</g>
<rect x="9.09277" y="105.621" width="56.6462" height="56.6462" rx="18.8821" fill="#754CEA"/>
<path d="M51.9183 136.187L49.1964 136.187C50.7908 135.998 52.1546 135.463 53.3004 134.592C54.785 133.459 55.5129 132.057 55.5129 130.384C55.5129 128.712 54.785 127.309 53.3004 126.203C51.8455 125.07 50.0403 124.504 47.8575 124.504L37.0293 124.504L30.5144 138.129L23.8323 124.504L18.5342 124.504L18.5342 143.386L20.4256 143.386L20.4256 127.939L28.001 143.386L30.0956 143.386L37.4184 128.071L37.4184 143.386L41.8722 143.386L41.8722 136.187L47.0563 136.187L51.3802 143.386L56.2983 143.386L51.9183 136.187ZM46.3715 134.434L41.8722 134.434L41.8722 126.334L46.3715 126.334C48.7719 126.334 50.3628 127.93 50.3628 130.384C50.3628 132.839 48.7714 134.434 46.3715 134.434Z" fill="white"/>
<g filter="url(#filter28_f_8199_27165)">
<rect x="349.559" y="166.988" width="12.3914" height="12.3914" rx="6.19568" fill="#F9FF57"/>
</g>
<rect x="350.739" y="168.168" width="10.0311" height="10.0311" rx="5.01555" fill="#F9FF57"/>
<g filter="url(#filter29_f_8199_27165)">
<rect x="207.946" y="162.268" width="12.3914" height="12.3914" rx="6.19568" fill="#F9FF57"/>
</g>
<rect x="209.126" y="163.447" width="10.0311" height="10.0311" rx="5.01555" fill="#F9FF57"/>
<g filter="url(#filter30_f_8199_27165)">
<rect x="537.201" y="60.1855" width="12.3914" height="12.3914" rx="6.19568" fill="#F9FF57"/>
</g>
<rect x="538.38" y="61.3652" width="10.0311" height="10.0311" rx="5.01555" fill="#F9FF57"/>
<g filter="url(#filter31_f_8199_27165)">
<rect x="619.22" y="106.211" width="12.3914" height="12.3914" rx="6.19568" fill="#F9FF57"/>
</g>
<rect x="620.396" y="107.393" width="10.0311" height="10.0311" rx="5.01555" fill="#F9FF57"/>
<g filter="url(#filter32_f_8199_27165)">
<rect x="163.099" y="118.604" width="12.3914" height="12.3914" rx="6.19568" fill="#F9FF57"/>
</g>
<rect x="164.278" y="119.781" width="10.0311" height="10.0311" rx="5.01555" fill="#F9FF57"/>
<g filter="url(#filter33_f_8199_27165)">
<rect x="76.9502" y="14.1621" width="12.3914" height="12.3914" rx="6.19568" fill="#F9FF57"/>
</g>
<rect x="78.1318" y="15.3379" width="10.0311" height="10.0311" rx="5.01555" fill="#F9FF57"/>
<g filter="url(#filter34_f_8199_27165)">
<rect x="2.60059" y="87.9199" width="12.3914" height="12.3914" rx="6.19568" fill="#F9FF57"/>
</g>
<rect x="3.78027" y="89.0996" width="10.0311" height="10.0311" rx="5.01555" fill="#F9FF57"/>
<defs>
<filter id="filter0_f_8199_27165" x="40.0919" y="46.1065" width="862.037" height="232.34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="1.18013" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter1_f_8199_27165" x="438.559" y="219.115" width="65.1107" height="65.1097" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.06941" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter2_f_8199_27165" x="545.888" y="177.916" width="65.1107" height="65.1097" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.06941" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter3_f_8199_27165" x="217.792" y="133.66" width="65.1107" height="65.1097" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.06941" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter4_f_8199_27165" x="123.18" y="172.828" width="67.9583" height="67.9573" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.06941" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter5_f_8199_27165" x="512.775" y="188.036" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter6_f_8199_27165" x="390.693" y="183.967" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter7_f_8199_27165" x="674.534" y="95.9672" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter8_f_8199_27165" x="745.24" y="135.643" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter9_f_8199_27165" x="352.03" y="146.329" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter10_f_8199_27165" x="277.764" y="56.2895" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter11_f_8199_27165" x="213.673" y="119.873" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter12_f_8199_27165" x="127.705" y="130.555" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter13_f_8199_27165" x="-528.306" y="106.233" width="861.19" height="231.222" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="1.18013" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter14_f_8199_27165" x="-22.9377" y="236.92" width="65.1107" height="65.1097" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.06941" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter15_f_8199_27165" x="105.709" y="154.969" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter16_f_8199_27165" x="176.414" y="194.651" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter17_f_8199_27165" x="443.697" y="170.021" width="862.037" height="232.34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="1.18013" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter18_f_8199_27165" x="621.395" y="257.57" width="65.1107" height="65.1097" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.06941" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter19_f_8199_27165" x="526.783" y="296.74" width="67.9583" height="67.9573" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.06941" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter20_f_8199_27165" x="755.635" y="270.237" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter21_f_8199_27165" x="681.37" y="180.2" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter22_f_8199_27165" x="617.275" y="243.786" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter23_f_8199_27165" x="531.308" y="254.469" width="24.0099" height="24.009" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.33183" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter24_f_8199_27165" x="255.74" y="195.311" width="75.5286" height="75.5286" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.72052" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter25_f_8199_27165" x="380.244" y="147.516" width="75.5286" height="75.5286" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.72052" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter26_f_8199_27165" x="655.214" y="113.291" width="75.5286" height="75.5286" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.72052" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter27_f_8199_27165" x="-0.348264" y="96.1801" width="75.5286" height="75.5286" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="4.72052" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter28_f_8199_27165" x="341.829" y="159.258" width="27.8513" height="27.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.86492" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter29_f_8199_27165" x="200.216" y="154.538" width="27.8513" height="27.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.86492" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter30_f_8199_27165" x="529.471" y="52.4557" width="27.8513" height="27.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.86492" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter31_f_8199_27165" x="611.49" y="98.4811" width="27.8513" height="27.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.86492" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter32_f_8199_27165" x="155.369" y="110.874" width="27.8513" height="27.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.86492" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter33_f_8199_27165" x="69.2203" y="6.43226" width="27.8513" height="27.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.86492" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<filter id="filter34_f_8199_27165" x="-5.12926" y="80.1901" width="27.8513" height="27.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.86492" result="effect1_foregroundBlur_8199_27165"/>
</filter>
<linearGradient id="paint0_linear_8199_27165" x1="43.3135" y1="50.7441" x2="674.704" y2="497.394" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.2"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint1_linear_8199_27165" x1="-525.508" y1="109.752" x2="105.882" y2="556.402" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.2"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint2_linear_8199_27165" x1="446.919" y1="174.658" x2="1078.31" y2="621.308" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.2"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint3_linear_8199_27165" x1="-202.742" y1="0" x2="529.67" y2="518.114" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.2"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<clipPath id="clip0_8199_27165">
<rect x="225.931" y="141.799" width="48.833" height="48.833" rx="16.2777" fill="white"/>
</clipPath>
<clipPath id="clip1_8199_27165">
<rect x="225.931" y="141.799" width="48.833" height="48.833" rx="16.2777" fill="white"/>
</clipPath>
<clipPath id="clip2_8199_27165">
<rect width="37.3428" height="37.3428" fill="white" transform="translate(635.279 271.453)"/>
</clipPath>
<clipPath id="clip3_8199_27165">
<rect width="37.3428" height="37.3428" fill="white" transform="translate(635.279 271.453)"/>
</clipPath>
<clipPath id="clip4_8199_27165">
<rect width="43.3177" height="43.3177" fill="white" transform="translate(396.349 163.621)"/>
</clipPath>
<clipPath id="clip5_8199_27165">
<rect width="43.3177" height="43.3177" fill="white" transform="translate(396.349 163.621)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1017 KiB

@@ -6,10 +6,12 @@ export default function DisplacementCard({
children,
className,
index = 0,
onClick,
}: {
children: React.ReactNode;
className?: string;
index?: number;
onClick?: () => void;
}) {
const cardRef = useRef<HTMLDivElement>(null);
const { isLg } = useMediaQueries();
@@ -75,6 +77,7 @@ export default function DisplacementCard({
`w-[15.486vw] aspect-[223/240] rounded-[16px] bg-[radial-gradient(circle,rgba(0,0,0,1)_-70%,rgba(34,36,37,1)_100%);] flex flex-col items-center justify-between p-[1.111vw] lg:absolute max-lg:relative max-lg:w-full max-lg:h-full overflow-hidden md:max-lg:p-[2.083vw] max-md:p-[4.444vw] max-md:aspect-[165/240] ` +
className
}
onClick={onClick}
>
{children}
</motion.div>
@@ -0,0 +1,283 @@
/* eslint-disable @next/next/no-img-element */
import React, { useState, useEffect, useRef } from "react";
import { useModalStore } from "@/stores/useModalStore";
import ArrowLeftIcon from "../icons/ArrowLeftIcon";
import ArrowRightIcon from "../icons/ArrowRightIcon";
import CloseIcon from "../icons/CloseIcon";
interface AchievmentsSliderModalProps {
title: string;
subtitle: string;
images: string[];
year: number;
}
export default function AchievmentsSliderModal({
title,
subtitle,
images,
year,
}: AchievmentsSliderModalProps) {
const { setModal } = useModalStore();
function handleClose() {
setModal(null);
}
return (
<div
className="fixed inset-0 flex items-center justify-center z-10 "
onClick={handleClose}
>
<div
className="flex flex-col absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[1.944vw] lg:p-[3.333vw] md:p-[5.208vw] p-[4.444vw] lg:w-[66.25vw] md:w-[89.583vw] w-[94.444vw] lg:h-max md:h-[calc(100%-(5.208vw*2))] h-[calc(100%-8.888vw)] bg-[#37393B99] backdrop-blur-[120px] "
onClick={(e) => e.stopPropagation()}
>
<div className="max-lg:flex hidden justify-between items-center md:mb-[5.208vw] mb-[6.667vw]">
<h1 className="line2 md:text-[8.333vw] text-[8.889vw]">Награды</h1>
<button
onClick={handleClose}
className="bg-[#37393B99] md:rounded-[2.083vw] rounded-[4.444vw] md:p-[2.344vw] p-[4.444vw]"
>
<div className="md:size-[2.604vw] size-[4.444vw]">
<CloseIcon />
</div>
</button>
</div>
<ImageSlider images={images} className="lg:mb-[1.667vw]" year={year} />
<h2 className="headline2 font-medium lg:pb-[1.111vw] md:pb-[1.563vw] pb-[3.333vw]">
{title}
</h2>
<p className="text1">{subtitle}</p>
<YearTag
year={year}
className="mt-auto w-max lg:absolute lg:top-[4.444vw] lg:left-[4.444vw]"
/>
</div>
</div>
);
}
function ImageSlider({
images,
className,
year,
}: {
images: string[];
className?: string;
year: number;
}) {
const multipleImages = images.length > 1;
// начинаем с индекса 1 (реальное первое изображение)
const [slideIndex, setSlideIndex] = useState(multipleImages ? 1 : 0);
const [isTransitioning, setIsTransitioning] = useState(true);
const [isDragging, setIsDragging] = useState(false);
const [startX, setStartX] = useState(0);
const [dragOffset, setDragOffset] = useState(0);
const extendedImages = multipleImages
? [images[images.length - 1], ...images, images[0]]
: images;
const containerRef = useRef<HTMLDivElement>(null);
const handlePrevSlide = () => {
if (!isTransitioning || isDragging) return;
setSlideIndex((prev) => prev - 1);
};
const handleNextSlide = () => {
if (!isTransitioning || isDragging) return;
setSlideIndex((prev) => prev + 1);
};
const handleIndicatorClick = (index: number) => {
if (!isTransitioning || isDragging) return;
// +1 потому что реальные изображения начинаются с индекса 1
setSlideIndex(index + 1);
};
const handleDragStart = (clientX: number) => {
if (!multipleImages) return;
setIsDragging(true);
setStartX(clientX);
};
const handleDragMove = (clientX: number) => {
if (!isDragging || !multipleImages) return;
const currentPosition = clientX;
const diff = currentPosition - startX;
const containerWidth = containerRef.current?.clientWidth || 0;
const movePercentage = (diff / containerWidth) * 100;
setDragOffset(movePercentage);
};
const handleDragEnd = () => {
if (!isDragging || !multipleImages) return;
setIsDragging(false);
const threshold = 30;
if (dragOffset > threshold) {
setSlideIndex((prev) => prev - 1);
} else if (dragOffset < -threshold) {
setSlideIndex((prev) => prev + 1);
}
setDragOffset(0);
};
const handleMouseDown = (e: React.MouseEvent) => {
e.preventDefault();
handleDragStart(e.clientX);
};
const handleMouseMove = (e: React.MouseEvent) => {
handleDragMove(e.clientX);
};
const handleMouseUp = () => {
handleDragEnd();
};
const handleMouseLeave = () => {
if (isDragging) {
handleDragEnd();
}
};
const handleTouchStart = (e: React.TouchEvent) => {
handleDragStart(e.touches[0].clientX);
};
const handleTouchMove = (e: React.TouchEvent) => {
handleDragMove(e.touches[0].clientX);
};
const handleTouchEnd = () => {
handleDragEnd();
};
// Эффект для мгновенного переноса на противоположный конец после анимации
useEffect(() => {
if (!multipleImages) return;
// Если мы на клоне последнего изображения (индекс 0)
if (slideIndex === 0) {
const timeout = setTimeout(() => {
setIsTransitioning(false);
setSlideIndex(images.length);
}, 500);
return () => clearTimeout(timeout);
}
// Если мы на клоне первого изображения (индекс length + 1)
if (slideIndex === images.length + 1) {
const timeout = setTimeout(() => {
setIsTransitioning(false);
setSlideIndex(1);
}, 500);
return () => clearTimeout(timeout);
}
}, [slideIndex, images.length, multipleImages]);
useEffect(() => {
if (!isTransitioning) {
const timeout = setTimeout(() => {
setIsTransitioning(true);
}, 50);
return () => clearTimeout(timeout);
}
}, [isTransitioning]);
const getRealIndex = () => {
if (!multipleImages) return 0;
if (slideIndex === 0) return images.length - 1;
if (slideIndex === images.length + 1) return 0;
return slideIndex - 1;
};
return (
<>
<div
ref={containerRef}
className={`relative lg:w-[59.583vw] overflow-hidden lg:rounded-[1.111vw] md:rounded-[2.083vw] rounded-[4.444vw] ${className}`}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseLeave}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
>
<div
className={`flex h-full ${
isTransitioning && !isDragging
? "transition-transform duration-500 ease-in-out"
: ""
}`}
style={{
transform: `translateX(${-slideIndex * 100 + dragOffset}%)`,
}}
>
{extendedImages.map((image, index) => (
<img
key={index}
src={image}
alt=""
className="w-full h-full lg:aspect-[858/501] md:aspect-[608/400] aspect-[308/197] object-contain flex-shrink-0 pointer-events-none select-none"
draggable={false}
/>
))}
</div>
{multipleImages && (
<button
onClick={handlePrevSlide}
className="max-lg:hidden absolute top-1/2 -translate-y-1/2 left-[1.111vw] flex items-center justify-center lg:p-[1.111vw] p-4 lg:rounded-[1.111vw] rounded-lg bg-[#37393B99] hover:bg-[#37393BCC] transition-colors z-10"
>
<div className="text-white lg:size-[1.111vw] size-4">
<ArrowLeftIcon />
</div>
</button>
)}
{multipleImages && (
<button
onClick={handleNextSlide}
className="max-lg:hidden absolute top-1/2 -translate-y-1/2 right-[1.111vw] flex items-center justify-center lg:p-[1.111vw] p-4 lg:rounded-[1.111vw] rounded-lg bg-[#37393B99] hover:bg-[#37393BCC] transition-colors z-10"
>
<div className="text-white lg:size-[1.111vw] size-4">
<ArrowRightIcon />
</div>
</button>
)}
</div>
{multipleImages && (
<div className="lg:absolute lg:top-[34.5vw] relative left-1/2 -translate-x-1/2 flex justify-center md:mt-[2.083vw] mt-[4.444vw] md:mb-[5.208vw] mb-[6.667vw] gap-[0.556vw] z-20">
{images.map((_, index) => (
<button
key={index}
onClick={() => handleIndicatorClick(index)}
className={`lg:size-[0.556vw] md:size-[1.042vw] size-[2.222vw] rounded-full transition-colors ${
index === getRealIndex() ? "bg-white" : "bg-white/40"
} hover:bg-white/70`}
/>
))}
</div>
)}
</>
);
}
function YearTag({ year, className }: { year: number; className?: string }) {
return (
<div
className={` lg:px-[0.556vw] lg:py-[0.386vw] md:px-[1.042vw] md:py-[0.772vw] px-[4.444vw] py-[2.222vw] bg-gradient btns lg:rounded-[1.111vw] md:rounded-[2.083vw] rounded-full bg-[#37393B99] border-[1px] border-[#FFFFFF1A] flex-col gap-[1.667vw] z-20 ${className}`}
>
<p className="text1">{year}</p>
</div>
);
}
@@ -11,6 +11,8 @@ import DisplacementCard from "../../displacement/DisplacementCard";
import DisplacementCardsWrapper from "../../displacement/DisplacementCardsWrapper";
import { ArticleCard } from "../BlogPage/ArticleCard";
import AboutEvents from "./AboutEvents";
import AchievmentsSliderModal from "@/components/modals/AchievmentsSliderModal";
import { useModalStore } from "@/stores/useModalStore";
function YearsLabel({
years,
@@ -39,6 +41,7 @@ export default function AboutExperience() {
const searchParams = useSearchParams();
const { data: articles } = useGetArticlesQuery(searchParams.getAll("tags"));
const { data: projectsCount } = useGetProjectsCountQuery();
const { setModal } = useModalStore();
return (
<>
@@ -126,7 +129,7 @@ export default function AboutExperience() {
<img
src={"/img/pages/about/experience/sites.png"}
alt=""
className="max-lg:top-0 max-md:w-full absolute bottom-0 h-full"
className="max-lg:top-0 max-md:w-full absolute bottom-0 h-full object-cover"
/>
</motion.div>
<motion.div
@@ -262,6 +265,19 @@ export default function AboutExperience() {
<DisplacementCard
index={2}
className="lg:bottom-0 lg:right-[16.389vw] "
onClick={() =>
setModal(
<AchievmentsSliderModal
title="В 2023 году мы участвовали в акселераторе технологических стартапов BuildUp в категории IT"
subtitle="После 5 этапов, десятка часов работы с кураторами и сотни часов разработки пилотного проекта мы одержали победу, тем самым получив заслуженный статус резидента фонда Сколково!"
images={[
"/img/components/modals/BuildUP/1.png",
"/img/components/modals/BuildUP/2.png",
]}
year={2023}
/>
)
}
>
<YearsLabel years={[2024, 2025]} className="lg:hidden" />
<img
@@ -277,6 +293,21 @@ export default function AboutExperience() {
<DisplacementCard
index={4}
className="lg:bottom-[7.708vw] lg:right-0 md:max-lg:!translate-y-[3.125vw]"
onClick={() =>
setModal(
<AchievmentsSliderModal
title="Кейс разработки интерактивного двойника сверхквартала «Upside Towers» получил признание от членов жюри Dprofile"
subtitle="В нем мы показали как выглядит и работает приложение, а также подсветили тонкости создания интерфейса. Как итог: кейс забрал звание «Лучшее» и награду за UI дизайн"
images={[
"/img/components/modals/Dropfile/1.png",
"/img/components/modals/Dropfile/2.png",
"/img/components/modals/Dropfile/3.png",
"/img/components/modals/Dropfile/4.png",
]}
year={2023}
/>
)
}
>
<YearsLabel years={[2024, 2025]} className="lg:hidden" />
<img
@@ -1,3 +1,5 @@
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
import { motion, useScroll, useTransform } from "framer-motion";
import React, { useRef } from "react";
@@ -102,12 +104,12 @@ export default function ResultsAchievements() {
Запустили новый продукт
<br /> GRAFF.estate View
</h2>
<div className="p-[2.222vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] max-h-[18.611vw] w-[42.431vw]">
<div className="p-[2.222vw] pr-[0] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] w-[42.431vw]">
<p className="headline2 mb-[1.667vw]">
Показываем виды из любой квартиры <br /> еще не построенного
жилого комплекса.
</p>
<div className="flex flex-wrap gap-x-[0.556vw] gap-y-[0.556vw] w-[85%]">
<div className="flex flex-wrap gap-x-[0.556vw] gap-y-[0.556vw] w-[100%]">
<span className="btnm bg-[#FFFFFF29] py-[0.694vw] px-[1.389vw] rounded-full">
Динамическое изменение перспективы
</span>
@@ -155,8 +157,10 @@ export default function ResultsAchievements() {
</h2>
<div className="grid grid-cols-3 grid-rows-[20.833vw_20.833vw] gap-[0.833vw] ">
<div className="w-[31.806vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw] relative overflow-clip">
<div className="headline2 mb-[0.556vw]">Цифровой город</div>
<div className="text1">
<div className="headline2 mb-[0.556vw] !text-[1.667vw]">
Цифровой город
</div>
<div className="text1 !text-[0.972vw]">
Маршруты до значимых точек города <br /> в режиме онлайн
</div>
<img
@@ -165,9 +169,11 @@ export default function ResultsAchievements() {
className="absolute bottom-[-0.736vw] right-[3.264vw] w-[15.556vw] object-cover rounded-t-[1.111vw]"
/>
</div>
<div className="w-[31.806vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw] relative">
<div className="headline2 mb-[0.556vw]">Сценарии жизни</div>
<div className="text1">
<div className="w-[31.806vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw] pr-[0] relative">
<div className="headline2 mb-[0.556vw] !text-[1.667vw]">
Сценарии жизни
</div>
<div className="text1 !text-[0.972vw]">
Визуализация подстраивается под конкретного
<br /> пользователя. Приложение показывает интересные ему
<br /> локации в ЖК, подходящие типы планировок
@@ -185,8 +191,10 @@ export default function ResultsAchievements() {
</div>
</div>
<div className="w-[31.806vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw]">
<div className="headline2 mb-[0.556vw]">Инженерные системы</div>
<div className="text1">
<div className="headline2 mb-[0.556vw] !text-[1.667vw]">
Инженерные системы
</div>
<div className="text1 !text-[0.972vw]">
Покажем клиенту все внутренние составляющие <br /> и
технологичность проекта
</div>
@@ -197,13 +205,13 @@ export default function ResultsAchievements() {
/>
</div>
<div className="w-[31.806vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw] overflow-clip bg-[url('/img/pages/results/reels/modules/5.png')] bg-cover bg-center bg-no-repeat">
<div className="headline2 mb-[0.556vw] z-[20] relative">
<div className="headline2 mb-[0.556vw] z-[20] relative !text-[1.667vw]">
Смена сезонов
</div>
<div className="bg-[linear-gradient(to_bottom,#00000050,#FFFFFF00)] absolute bottom-0 left-0 w-full h-full z-[10]" />
</div>
<div className="w-[31.806vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw]">
<div className="headline2 mb-[0.556vw]">
<div className="headline2 mb-[0.556vw] !text-[1.667vw]">
Покупка парковочных мест и<br /> локеров
</div>
<img
@@ -235,8 +243,10 @@ export default function ResultsAchievements() {
</h2>
<div className="grid grid-cols-3 grid-rows-[30.417vw] gap-[0.833vw] ">
<div className="w-[31.944vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw] overflow-clip relative">
<div className="headline2 mb-[0.556vw]">Облака по расписанию</div>
<div className="text1">
<div className="headline2 mb-[0.556vw] !text-[1.667vw]">
Облака по расписанию
</div>
<div className="text1 !text-[0.972vw]">
Интегрировали API, передающее направление и скорость
<br /> ветра в реальном времени именно в той локации, где
<br /> находится проект
@@ -253,10 +263,10 @@ export default function ResultsAchievements() {
/>
</div>
<div className="w-[31.944vw] bg-[#FFFFFF1A] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw] relative">
<div className="headline2 mb-[0.556vw] z-[20] relative">
<div className="headline2 mb-[0.556vw] z-[20] relative !text-[1.667vw]">
Добавили в приложения птиц
</div>
<div className="text1">
<div className="text1 !text-[0.972vw]">
Они не только летают в небе, но и садятся на землю или
<br /> деревья вокруг ЖК
</div>
@@ -270,10 +280,12 @@ export default function ResultsAchievements() {
/>
</div>
<div className="w-[31.944vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw] relative">
<div className="headline2 mb-[0.556vw]">
Новая модель интерактивного стола
<div className="headline2 mb-[0.556vw] !text-[1.667vw]">
Новая модель <br /> интерактивного стола
</div>
<div className="text1 !text-[0.972vw]">
Более тонкая и изящная
</div>
<div className="text1">Более тонкая и изящная</div>
<img
src="/img/pages/results/reels/details/table.png"
alt=""
@@ -294,7 +306,7 @@ export default function ResultsAchievements() {
[0, 1, 1, 0]
),
}}
className="flex flex-col justify-between mt-[5.722vw]"
className="flex flex-col justify-between mt-[5.722vw] relative"
>
<h2 className="line2 text-medium mb-[1.944vw]">
Наш штат расширился на 30% <br /> Теперь в команде более 70 человек
@@ -304,6 +316,9 @@ export default function ResultsAchievements() {
src="/img/pages/results/reels/team.png"
alt=""
/>
<button className="btnl bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)] lg:px-[2.222vw] lg:py-[1.389vw] lg:rounded-[1.111vw] absolute bottom-[3.472vw] left-1/2 -translate-x-1/2">
Оставить заявку
</button>
</motion.div>
</>
);
@@ -1,3 +1,4 @@
/* eslint-disable @next/next/no-img-element */
import { motion, MotionValue, useScroll, useTransform } from "framer-motion";
import React, { useRef } from "react";
@@ -77,11 +78,15 @@ function Events({ scrollYProgress }: { scrollYProgress: MotionValue<number> }) {
Взяли первую строчку рейтинга RACA за экспертизу в категории
Production
</p>
<img src="/img/pages/results/reels/RACA_logo.png" alt="raca" />
<img
src="/img/pages/results/reels/RACA_logo.png"
alt="raca"
className="size-[4.028vw]"
/>
</motion.div>
</div>
<div className="flex relative items-center gap-[1.389vw] w-[57.361vw]">
<div className="flex relative items-center gap-[1.389vw] w-[65.625vw]">
<motion.img
style={{
scale: useTransform(scrollYProgress, [0.1, 0.33], [1, 1.2]),
@@ -47,16 +47,40 @@ function DynamicBG({
style={{
scale: useTransform(
scrollYProgress,
[0, 0.3, 0.6, 1],
[1.15, 1.2, 1.25, 1.3]
[0.2, 0.45, 0.5],
[1.15, 1.2, 1.5]
),
opacity: useTransform(
scrollYProgress,
[0, 0.7, 0.9, 1],
[1, 1, 0.7, 0.5]
),
background: useTransform(
scrollYProgress,
[0, 0.35, 0.45, 0.55, 0.6, 0.7],
[
"radial-gradient(circle,#9305F0,#9305F0)",
"radial-gradient(circle,#9305F0,#9305F0)",
"radial-gradient(circle,#8E09C2,#BB06F7)",
"radial-gradient(circle,#8E09C2,#BB06F7)",
"radial-gradient(circle,#A608C3,#D906F8)",
"radial-gradient(circle,#8F0AC2,#B908F7)",
]
),
boxShadow: useTransform(
scrollYProgress,
[0, 0.35, 0.45, 0.55, 0.6, 0.7],
[
"0px 0px 180px 0px #9305F0",
"0px 0px 180px 0px #9305F0",
"0px 0px 180px 0px #8E09C2",
"0px 0px 180px 0px #8E09C2",
"0px 0px 180px 0px #A608C3",
"0px 0px 180px 0px #8F0AC2",
]
),
}}
className="size-[100vw] bg-[radial-gradient(ellipse_25vw_6.7vw_at_left_top,#9305F0,#9305F0)] shadow-[0px_0px_80px_0px_#4B047B] rounded-full absolute top-[-5vw] -right-[80vw]"
className="size-[100vw] blur-[1px] rounded-full absolute top-[-5vw] -right-[80vw]"
/>
<div className="absolute bottom-0 w-full h-[20vw] bg-transparent [mask:linear-gradient(transparent,black,black)] backdrop-blur-[10px]" />
</motion.div>
@@ -1,3 +1,4 @@
/* eslint-disable @next/next/no-img-element */
import HearthIcon from "@/components/icons/HearthIcon";
import PlayIcon from "@/components/icons/PlayIcon";
import { motion, MotionValue, useScroll, useTransform } from "framer-motion";
@@ -18,7 +19,11 @@ export default function ResultsGeneral() {
transform: useTransform(
scrollYProgress,
[0.1, 0.6, 0.65],
["translate(0%, 0%)", "translate(0%, 0%)", "translate(0%, -400%)"]
[
"translate(0%, 0%)",
"translate(0%, 0%)",
"translate(0%, -6.944vw)",
]
),
}}
className="text-center space-y-[1.528vw] absolute top-[18.056vw] z-10"
@@ -72,7 +77,7 @@ export default function ResultsGeneral() {
),
x: "-50%",
}}
className="line2 font-medium lg:w-[65.222vw] absolute left-1/2"
className="line2 font-medium lg:w-[75.5vw] absolute left-1/2"
>
4500 часов люди провели выбирая <br />
одну из них для себя в качестве <br />
@@ -113,7 +118,7 @@ export default function ResultsGeneral() {
),
x: "-50%",
}}
className="line2 font-medium lg:w-[65.222vw] absolute left-1/2"
className="line2 font-medium lg:w-[72.5vw] absolute left-1/2"
>
Общая сумма броней превысила <br />
30 миллиардов рублей
@@ -126,7 +131,7 @@ export default function ResultsGeneral() {
<Reservations scrollYProgress={scrollYProgress} />
<ReservationsTotal scrollYProgress={scrollYProgress} />
{/* Градиентный фон */}
{/* Основной фон */}
<motion.div
style={{
opacity: useTransform(scrollYProgress, [0.2, 0.3], [0, 1]),
@@ -134,25 +139,62 @@ export default function ResultsGeneral() {
scrollYProgress,
[0.2, 0.25, 0.55, 0.6],
[
"linear-gradient(90deg, #0D124C, #30044A)",
"linear-gradient(90deg, #0D124C, #30044A)",
"linear-gradient(90deg, #0D124C, #30044A)",
"linear-gradient(90deg, #2431CA, #2D1164)",
"linear-gradient(45deg, #1B2497, #2E043E)",
"linear-gradient(45deg, #1B2495, #360753)",
"linear-gradient(45deg, #0D124C, #30044A)",
"linear-gradient(45deg, #2431CA, #2D1164)",
]
),
}}
className="absolute inset-0 bg-gradient-to-r from-[#0D124C] to-[#30044A] overflow-hidden z-[-1]"
>
<div className="absolute inset-0 bg-[linear-gradient(to_bottom,#000000_0%,#1a1b1c00_50%)]" />
{/* Затемнение сверху */}
<motion.div
style={{
background: useTransform(
scrollYProgress,
[0, 0.3, 0.4, 0.55],
[
"linear-gradient(180deg ,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)",
"linear-gradient(180deg ,rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 100%)",
"linear-gradient(180deg ,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%)",
"linear-gradient(180deg ,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 50%)",
]
),
}}
className="absolute inset-0"
/>
{/* Круг */}
<motion.div
style={{
scale: useTransform(
scrollYProgress,
[0.2, 0.25, 0.35, 0.4],
[0.7, 0.8, 0.8, 0.9]
[0.2, 0.25, 0.5, 0.6, 0.7],
[0.8, 0.8, 0.8, 1.2, 1.2]
),
right: useTransform(
scrollYProgress,
[0.2, 0.25, 0.4, 0.5, 0.6],
["-70vw", "-70vw", "-70vw", "-70vw", "-80vw"]
),
top: useTransform(
scrollYProgress,
[0.2, 0.25, 0.5, 0.65],
["0", "0", "0", "0"]
),
background: useTransform(
scrollYProgress,
[0, 0.35, 0.4, 0.5],
[
"radial-gradient(circle,#44026C,#4B037B)",
"radial-gradient(circle,#44026C2,#4B037B)",
"radial-gradient(circle,#7E08D2,#9405F4)",
"radial-gradient(circle,#7E08D2,#9405F4)",
]
),
}}
className="size-[100vw] bg-[radial-gradient(ellipse_25vw_6.7vw_at_left_top,#43026B,#4B027C)] shadow-[0px_0px_80px_0px_#4B047B] rounded-full absolute top-[-5vw] -right-[75vw]"
className="size-[100vw] shadow-[0px_0px_80px_0px_#4B047B] rounded-full absolute "
/>
<div className="absolute bottom-0 w-full h-[20vw] bg-transparent [mask:linear-gradient(transparent,black,black)] backdrop-blur-[10px]" />
</motion.div>
@@ -282,11 +324,11 @@ function Appartaments({
<div className="size-[0.903vw] rotate-180">
<PlayIcon />
</div>
<div className="w-[11.111vw] h-[3.611vw] rounded-full bg-white flex items-center gap-[0.556vw] p-[0.139vw] pr-[1.111vw]">
<div className="size-[3.264vw] rounded-full bg-[#7A55FF] flex items-center justify-center btnm">
<div className="w-[13.111vw] h-[3.611vw] rounded-full bg-white flex items-center gap-[0.556vw] p-[0.139vw] pr-[1.111vw]">
<div className="size-[3.264vw] rounded-full bg-[#7A55FF] flex items-center justify-center btnm !text-[32px]">
{floor}
</div>
<span className="leading-none text-black caption tracking-[-0.02em]">
<span className=" text-black caption tracking-[-0.02em] !text-[24px] !leading-[133%]">
{appartamentsCount} квартир
</span>
</div>
@@ -336,12 +378,12 @@ function Appartaments({
]
),
}}
className="absolute bottom-[6.597vw] right-[20.917vw] flex flex-col gap-[0.556vw]"
className="absolute bottom-[70px] left-[67.917vw] flex flex-col gap-[0.556vw]"
>
<FloorIndicator
floor={32}
appartamentsCount={8}
className="mb-[12.083vw]"
className="mb-[17.083vw]"
/>
<FloorIndicator floor={25} appartamentsCount={12} />
<FloorIndicator floor={24} appartamentsCount={11} />
@@ -449,7 +491,7 @@ function Reservations({
}}
src="/img/pages/results/general/booking.png"
alt=""
className="absolute bottom-0 left-1/2 w-[21.528vw] h-[18.056vw] object-cover z-[10]"
className="absolute bottom-0 left-1/2 w-[27.778vw] h-[23.1vw] object-cover z-[10]"
/>
<motion.img
style={{
@@ -471,7 +513,7 @@ function Reservations({
}}
src="/img/pages/results/general/booking.png"
alt=""
className="absolute bottom-0 left-1/2 w-[21.528vw] h-[18.056vw] object-cover z-[9]"
className="absolute bottom-0 left-1/2 w-[27.778vw] h-[23.1vw] object-cover z-[9]"
/>
<motion.img
style={{
@@ -493,7 +535,7 @@ function Reservations({
}}
src="/img/pages/results/general/booking.png"
alt=""
className="absolute bottom-0 left-1/2 w-[21.528vw] h-[18.056vw] object-cover z-[8]"
className="absolute bottom-0 left-1/2 w-[27.778vw] h-[23.1vw] object-cover z-[8]"
/>
</>
);
@@ -532,7 +574,7 @@ function ReservationsTotal({
]
),
}}
className={`absolute size-[24.306vw] rounded-[1.111vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] flex items-center justify-center ${className}`}
className={`absolute size-[24.306vw] p-[1.667vw] rounded-[1.111vw] bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] flex items-center justify-center ${className}`}
>
<img src={src} alt="" className={` object-cover ${imageClassName}`} />
</motion.div>
@@ -543,7 +585,6 @@ function ReservationsTotal({
<BookingCard
src="/img/pages/results/general/booking_1.png"
className="bottom-[4.861vw] left-[20.833vw] "
imageClassName=""
/>
<BookingCard
src="/img/pages/results/general/booking_3.png"
@@ -552,8 +593,7 @@ function ReservationsTotal({
/>
<BookingCard
src="/img/pages/results/general/booking_2.png"
className="bottom-[2.431vw] left-[37.542vw] !items-end"
imageClassName=""
className="bottom-[2.431vw] left-[37.542vw] pb-[0] !items-end"
topCard={true}
/>
</>
@@ -87,7 +87,7 @@ export default function ResultsProjects() {
);
}
function ResultsProjectsItem({
export function ResultsProjectsItem({
src,
className,
}: {
@@ -99,7 +99,7 @@ function ResultsProjectsItem({
src={src}
alt=""
className={
"lg:rounded-[1.111vw] lg:h-full lg:aspect-[465/263] object-cover"
"lg:rounded-[1.111vw] md:w-[60.547vw] md:rounded-[2.083vw] lg:h-full lg:aspect-[465/263] object-cover"
}
/>
);
@@ -1,12 +1,16 @@
"use client";
import { motion, useScroll, useTransform } from "framer-motion";
import ResultsGarland from "./ResultsGarland";
import ResultsGarland from "./Desktop/ResultsGarland";
import { useRef } from "react";
import ResultsProjects from "./ResultsProjects";
import ResultsGeneral from "./ResultsGeneral";
import ResultsEventsReelsWithAchievements from "./ResultsEventsReelsWithAchievements";
import ResultsProjects from "./Desktop/ResultsProjects";
import ResultsGeneral from "./Desktop/ResultsGeneral";
import ResultsEventsReelsWithAchievements from "./Desktop/ResultsEventsReelsWithAchievements";
import ResultsMap from "./ResultsMap";
import { useMediaQuery } from "usehooks-ts";
import ResultsGarlandMobile from "./Tablet&Mobile/ResultsGarlandMobile";
import ResultsGeneralMobile from "./Tablet&Mobile/ResultsGeneralMobile";
import ResultsProjectsMobile from "./Tablet&Mobile/ResultsProjectsMobile";
export function Results2025() {
const containerRef = useRef<HTMLDivElement>(null);
@@ -15,28 +19,26 @@ export function Results2025() {
offset: ["start start", "end start"],
});
const isLg = useMediaQuery("(min-width: 1440px)");
return (
<div
ref={containerRef}
className="relative md:-mx-4 lg:-mx-[1.389vw] -mx-[10px] flex flex-col"
>
<ResultsGarland />
<ResultsProjects />
<ResultsGeneral />
<ResultsMap />
<ResultsEventsReelsWithAchievements />
{isLg ? <ResultsGarland /> : <ResultsGarlandMobile />}
{isLg ? <ResultsProjects /> : <ResultsProjectsMobile />}
{isLg ? <ResultsGeneral /> : null}
{isLg ? <ResultsMap /> : null}
{isLg ? <ResultsEventsReelsWithAchievements /> : null}
<motion.button
style={{
x: "-50%",
y: useTransform(
scrollYProgress,
[0, 0.05, 0.1],
["400%", "400%", "0%"]
),
opacity: useTransform(scrollYProgress, [0.5, 0.55, 1], [1, 0, 0]),
y: useTransform(scrollYProgress, [0, 0.03], ["400%", "0%"]),
opacity: useTransform(scrollYProgress, [0.62, 0.63, 1], [1, 0, 0]),
}}
className="btnl bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)] lg:px-[2.222vw] lg:py-[1.389vw] lg:rounded-[1.111vw] fixed bottom-[3.472vw] left-1/2"
className="max-lg:hidden btnl bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)] lg:px-[2.222vw] lg:py-[1.389vw] lg:rounded-[1.111vw] fixed bottom-[3.472vw] left-1/2"
>
Стать первыми в 2026
</motion.button>
@@ -0,0 +1,55 @@
/* eslint-disable @next/next/no-img-element */
"use client";
import React, { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
export default function ResultsGarlandMobile() {
return (
<div className="relative flex flex-col items-center">
<img
src="/img/pages/results/garland_tablet.svg"
alt="garland"
draggable={false}
className="absolute inset-0 w-full z-10"
/>
<h1 className="text-[6.25vw] mb-[3.125vw] text-white text-center mt-[57.292vw] leading-[95%] tracking-[-0.02em]">
Подводим итоги 2025 года <br /> в GRAFF.estate
</h1>
<button
className="btnl mb-[58.854vw]
bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)]
md:px-[4.167vw] md:py-[2.604vw] md:rounded-[2.083vw] mx-auto"
>
Стать первыми в 2026
</button>
<BgGradient />
</div>
);
}
function BgGradient() {
return (
<div className="absolute inset-0 overflow-hidden z-[-1]">
<div
className="
absolute
left-[-15vw] top-[-50%]
w-[130vw] h-[180vw]
rounded-[100%]
bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))]
from-[#3330C9]
via-[#291867]
to-transparent
blur-3xl
transform-gpu
opacity-80
"
/>
{/* <div className="absolute inset-0 bg-gradient-to-b from-[#0f101190] to-[#1a1b1c00]" />
<div className="size-[100vw] bg-[radial-gradient(ellipse_25vw_16.7vw_at_left_top,#9006F0,#8206D6)] shadow-[0px_0px_80px_0px_#720AC7] rounded-full absolute -top-[10vw] -right-[70vw]" />
<div className="absolute bottom-0 w-full h-[20vw] bg-transparent [mask:linear-gradient(transparent,black,black)] backdrop-blur-[10px]" /> */}
</div>
);
}
@@ -0,0 +1,14 @@
/* eslint-disable @next/next/no-img-element */
"use client";
import React, { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
export default function ResultsGeneralMobile() {
return (
<div className="relative flex flex-col">
<h2 className="text-[6.25vw] text-white text-center font-medium leading-[95%] tracking-[-0.02em]">
Закончили разработку <br />и сдали 24 проекта
</h2>
</div>
);
}
@@ -0,0 +1,40 @@
/* eslint-disable @next/next/no-img-element */
"use client";
import React, { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { ResultsProjectsItem } from "../Desktop/ResultsProjects";
export default function ResultsGeneralMobile() {
return (
<div className="relative flex flex-col items-center">
<h2 className="text-[5.208vw] mb-[6.25vw] text-white text-center leading-[95%] tracking-[-0.02em]">
Закончили разработку <br />и сдали 24 проекта
</h2>
<div className="w-full h-full grid grid-rows-3 md:gap-[1.563vw] gap-4 origin-center">
<div className="flex gap-[1.563vw] justify-center">
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
<ResultsProjectsItem src="/img/pages/results/projects/3.png" />
</div>
<div className="flex gap-[1.563vw] justify-center">
<ResultsProjectsItem src="/img/pages/results/projects/6.png" />
<ResultsProjectsItem src="/img/pages/results/projects/main.png" />
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
</div>
<div className="flex gap-[1.563vw] justify-center">
<ResultsProjectsItem src="/img/pages/results/projects/10.png" />
<ResultsProjectsItem src="/img/pages/results/projects/11.png" />
</div>
</div>
<h2 className="text-[5.208vw] mt-[13.021vw] mb-[6.25vw] text-white text-center leading-[95%] tracking-[-0.02em]">
Последними <br /> из которых стали
</h2>
<div className="flex flex-col gap-[1.042vw] px-[4.818vw]">
<img src="/img/pages/results/projects/badaevsky.png" alt="" />
<img src="/img/pages/results/projects/rozhdestvenka.png" alt="" />
</div>
</div>
);
}