wip

public/uploads/images/bg-leaves-mob.svg

+<svg width="360" height="265" viewBox="0 0 360 265" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M329.807 329.887C329.807 329.887 316.255 330.848 300.661 323.755C285.068 316.661 273.81 303.79 266.634 291.409C259.522 279.051 260.435 262.714 262.731 252.988C265.027 243.263 274.411 221.898 290 215.225C305.589 208.552 317.767 213.702 323.81 217.951C329.787 222.176 334.846 228.972 331.551 244.379C328.281 259.714 317.503 263.596 311.667 261.031C305.832 258.466 306.806 252.856 307.083 251.668C307.361 250.479 307.859 251.139 307.859 251.139C307.859 251.139 307.043 255.276 311.187 255.386C315.265 255.472 315.582 250.675 314.75 248.688C313.919 246.701 308.513 244.37 305.575 249.519C302.637 254.669 306.573 264.204 316.447 263.058C326.322 261.913 336.92 247.019 333.499 229.458C330.104 211.825 306.832 207.949 292.646 212.95C278.461 217.95 260.131 235.801 260.197 267.7C260.302 299.695 284.586 322.124 293.438 328.986C302.291 335.847 305.503 336.51 305.503 336.51C305.503 336.51 315.618 332.633 321.715 331.589C327.721 330.592 329.807 329.887 329.807 329.887Z" fill="#E0E0E0"/>
+<path d="M303.752 215.141C305.612 215.482 307.46 214.21 307.887 212.189C308.315 210.168 307.211 208.325 305.377 207.912C303.518 207.571 301.67 208.843 301.242 210.864C300.749 212.862 301.893 214.799 303.752 215.141Z" fill="#E0E0E0"/>
+<path d="M81.567 246.789C81.567 246.789 77.025 239.776 67.5662 242.84C58.1074 245.905 54.1815 250.944 51.5187 245.245C48.8814 239.474 56.1836 236.284 56.1836 236.284C56.1836 236.284 42.8391 237.077 31.8148 244.735C19.5113 253.305 10.8557 263.579 12.4313 273.559C14.007 283.539 19.5515 281.573 20.3808 281.306C21.2101 281.038 21.8158 280.369 21.8158 280.369C21.8158 280.369 19.4271 280.482 19.3282 277.469C19.2294 274.455 24.5164 272.8 25.6169 277.942C26.825 283.605 17.9802 289.062 12.6117 282.72C7.24333 276.377 10.5501 262.584 22.4208 251.526C34.3171 240.395 45.1854 236.465 53.8572 236.017C62.4639 235.546 65.9563 237.275 71.7551 240.149C77.5795 242.952 81.9774 246.05 81.9774 246.05L81.567 246.789Z" fill="#E0E0E0"/>
+<path d="M264.158 288.271C264.158 288.271 258.06 270.399 264.027 256.348C270.059 242.321 276.544 239.161 280.444 239.747C284.318 240.405 285.874 243.858 285.028 245.408C284.182 246.957 283.386 246.512 283.386 246.512C283.386 246.512 284.366 245.413 283.129 244.972C282.022 244.577 280.525 247.745 283.245 248.555C286.706 249.548 289.395 244.068 286.33 240.318C283.082 236.261 278.114 237.226 275.955 238.548C273.73 239.847 271.749 242.521 271.749 242.521C271.749 242.521 277.15 232.937 288.02 234.964C297.799 236.763 297.161 245.953 294.393 247.542C291.625 249.13 290.77 247.617 290.77 247.617C290.77 247.617 293.943 250.037 296.428 246.98C300.06 242.56 297.391 234.203 286.869 233.668C276.567 233.132 268.899 241.665 263.563 254.975C257.652 269.69 264.158 288.271 264.158 288.271Z" fill="#E0E0E0"/>
+<path d="M-25.3143 257.597C-25.3143 257.597 -36.5032 271.475 -35.9524 285.355C-35.3365 299.26 -30.6953 303.733 -27.1208 304.203C-23.5462 304.674 -21.0187 302.114 -21.2506 300.502C-21.4826 298.89 -22.3118 299.157 -22.3118 299.157C-22.3118 299.157 -21.8619 300.364 -23.0563 300.421C-24.1601 300.43 -24.4287 297.275 -21.74 297.349C-18.389 297.418 -17.8574 302.92 -21.7491 305.395C-25.9381 308.087 -29.9143 305.863 -31.4198 304.118C-32.9254 302.374 -33.828 299.556 -33.828 299.556C-33.828 299.556 -32.2665 309.37 -22.1939 310.549C-13.109 311.618 -10.6461 303.481 -12.5308 301.359C-14.4156 299.238 -15.6808 300.316 -15.6808 300.316C-15.6808 300.316 -12.157 299.078 -10.9262 302.415C-9.19162 307.22 -14.3148 313.763 -23.6685 311.392C-32.8269 309.09 -36.6724 299.507 -36.8921 286.55C-37.0834 272.072 -25.3143 257.597 -25.3143 257.597Z" fill="#E0E0E0"/>
+<path d="M-4.95834 206.098C-4.95834 206.098 -10.6175 189.67 -22.4191 184.493C-34.2206 179.316 -40.3199 181.809 -42.6353 185.007C-44.8856 188.229 -43.9915 191.688 -42.5991 192.104C-41.1415 192.544 -40.9009 191.663 -40.9009 191.663C-40.9009 191.663 -42.2 191.602 -41.5716 190.458C-41.0337 189.362 -38.2857 190.504 -39.684 192.983C-41.4673 196.13 -46.2587 194.34 -46.3432 189.641C-46.3655 184.562 -42.502 181.755 -40.3255 181.002C-38.0839 180.272 -35.2764 180.63 -35.2764 180.63C-35.2764 180.63 -44.1772 178.018 -50.4384 187.134C-56.0824 195.343 -50.5498 201.02 -47.8158 200.144C-45.0817 199.268 -45.3533 197.561 -45.3533 197.561C-45.3533 197.561 -46.1574 201.46 -49.5621 201.131C-54.4215 200.765 -57.2143 193.168 -50.4637 185.354C-43.8291 177.659 -33.9573 177.961 -23.0388 183.145C-10.7787 188.888 -4.95834 206.098 -4.95834 206.098Z" fill="#E0E0E0"/>
+<path d="M112.006 207.341C112.006 207.341 118.635 196.988 138.574 186.554C158.54 176.049 171.749 165.146 173.329 157.016C174.948 148.98 172.407 145.82 172.407 145.82C172.407 145.82 174.057 149.628 169.438 152.086C164.793 154.614 159.515 146.372 166.079 141.55C174.154 135.576 177.903 148.103 175.938 155.049C174.039 162.018 166.125 170.625 155.783 177.4C145.415 184.245 123.35 195.289 118.051 200.885C112.753 206.481 112.501 207.598 112.501 207.598L112.006 207.341Z" fill="#E0E0E0"/>
+<path d="M220.201 331.672C220.201 331.672 216.975 323.438 222.772 309.246C228.595 294.983 245.048 281.776 243.004 252.953C240.96 224.131 229.326 216.84 229.326 216.84C229.326 216.84 214.195 224.079 205.66 217.975C197.124 211.871 197.657 206.265 197.641 189.033C197.622 180.655 196.006 177.986 196.006 177.986C196.006 177.986 197.57 188.203 203.142 195.826C208.715 203.449 219.37 206.285 225.463 210.391C231.582 214.425 230.116 216.478 230.116 216.478C230.116 216.478 242.922 226.038 243.831 252.282C244.74 278.526 232.402 295.214 228.55 301.487C224.762 307.783 220.714 319.54 220.892 320.891L221.07 322.243L220.201 331.672Z" fill="#E0E0E0"/>
+<path d="M-10.0317 191.73C-10.0317 191.73 -22.3318 155.867 3.24367 134.163C26.1727 114.733 52.0914 120.037 60.923 138.885C69.7291 157.804 63.9964 177.573 47.3541 185.963C30.7118 194.354 16.7232 180.911 17.4685 168.539C18.1883 156.238 26.4327 155.96 29.0843 160.045C31.7359 164.131 29.3809 167.235 27.244 168.082C25.1072 168.93 23.2707 164.411 25.9001 163.417C28.5039 162.494 28.7697 165.246 28.7697 165.246C28.7697 165.246 29.192 158.715 24.0919 159.23C18.1739 159.775 14.7568 172.642 23.0769 181.407C31.3971 190.171 52.72 188.2 59.3244 168.661C65.9939 149.146 56.8798 123.275 34.3995 123.142C11.8937 123.081 -9.11073 141.024 -10.9579 164.916C-12.8305 188.88 -6.6505 203.642 -6.6505 203.642L-10.0317 191.73Z" fill="#E0E0E0"/>
+<path d="M166.513 307.124C173.36 307.474 178.383 305.322 178.383 305.322C178.383 305.322 173.45 307.426 166.757 306.647C153.461 305.043 131.278 299.14 116.367 278.204C93.9543 246.622 101.123 207.402 131.448 192.543C161.772 177.685 182.558 201.281 182.16 222.551C181.873 239.192 170.735 247.373 163.832 244.507C156.93 241.642 157.887 237.315 158.413 234.605C159.005 231.918 162.622 231.035 162.622 231.035C162.622 231.035 160.853 232.497 162.676 234.999C164.498 237.5 168.495 233.291 166.734 230.41C164.974 227.528 159.362 229.067 157.227 234.021C155.093 238.974 157.988 244.434 164.659 245.688C171.329 246.941 182.996 240.156 183.351 220.239C183.707 200.322 165.804 187.978 148.956 187.279C132.107 186.581 113.571 199.045 105.405 219.877C97.1473 240.758 99.1382 260.063 109.682 276.785C120.226 293.507 134.08 302.394 149.592 305.192C155.937 306.329 161.824 306.9 166.513 307.124Z" fill="#E0E0E0"/>
+<path d="M109.717 272.369C109.717 272.369 81.7379 230.269 33.31 231.906C-15.1178 233.544 -47.8918 271.516 -38.6998 314.239C-29.5078 356.962 9.76968 359.787 30.2872 342.798C46.3497 329.451 45.6294 311.727 37.4787 306.806C29.3026 301.957 25.7617 306.328 23.5596 309.004C21.3575 311.68 23.3751 316.102 23.3751 316.102C23.3751 316.102 23.4064 313.135 27.315 313.081C31.2235 313.026 30.2097 320.392 26.0181 320.829C21.8265 321.265 18.9601 314.286 22.1389 308.256C25.3177 302.226 32.9056 300.908 39.3354 306.744C45.7397 312.652 48.2487 329.887 28.9964 345.799C9.74407 361.71 -16.2762 352.99 -30.0665 336.317C-43.9219 319.621 -46.2122 290.871 -32.1894 266.172C-18.2317 241.448 2.27421 228.399 26.8802 226.07C51.5259 223.836 71.017 231.112 85.8773 244.786C100.531 258.627 109.717 272.369 109.717 272.369Z" fill="#E0E0E0"/>
+<path d="M165.249 233.34C167.043 233.659 168.8 232.434 169.203 230.485C169.605 228.535 168.566 226.716 166.772 226.398C164.977 226.079 163.22 227.304 162.818 229.253C162.351 231.179 163.454 233.022 165.249 233.34Z" fill="#E0E0E0"/>
+<path d="M103.763 224.684C103.763 224.684 106.708 212.935 102.683 207.555C98.6847 202.104 93.3583 201.813 90.9468 204.253C88.5353 206.693 89.2 210.794 90.7368 211.423C92.2735 212.052 92.766 211.905 92.766 211.905C92.766 211.905 90.8302 211.778 91.3313 209.14C91.923 206.453 96.839 207.482 95.4236 211.244C94.3536 214.243 91.5178 213.553 89.5424 211.48C87.5275 209.312 86.6931 203.218 94.315 201.189C101.872 199.136 105.961 208.242 106.442 212.036C106.922 215.829 106.214 220.487 106.214 220.487L103.763 224.684Z" fill="#E0E0E0"/>
+<path d="M39.5053 228.322C47.2715 226.504 56.5968 230.395 56.5968 230.395C56.5968 230.395 47.0763 226.435 39.2449 228.229C26.8625 231.055 8.85388 231.553 -1.42701 215.327C-18.1685 188.827 -17.3017 143.415 13.9685 117.06C45.2387 90.7063 78.8122 108.078 91.7169 120.652C108.295 136.71 108.941 160.606 98.8447 176.564C88.7226 192.594 74.3196 194.297 64.9945 188.555C55.6694 182.813 58.2115 174.865 61.4891 171.849C64.7667 168.833 69.1872 173.308 67.4803 176.24C65.7735 179.173 62.8274 177.559 63.436 175.441C64.0192 173.396 66.2551 173.71 66.2551 173.71C66.2551 173.71 63.8241 171.475 61.7239 173.865C59.6237 176.255 57.3901 183.749 67.5303 189.057C77.6054 194.342 92.2465 189.504 101.483 169.375C110.654 149.223 100.241 125.142 81.9362 114.747C63.6057 104.424 39.9033 96.6108 14.0533 118.057C-11.8221 139.574 -12.334 170.624 -9.02968 188.305C-5.66028 206.008 4.95181 221.306 14.3903 224.673C22.9175 227.716 32.3872 229.968 39.5053 228.322Z" fill="#E0E0E0"/>
+<path d="M129.722 291.984C129.722 291.984 110.506 277.561 115.587 263.114C120.669 248.667 131.794 248.129 138.132 242.501C145.669 235.772 145.887 229.813 144.583 223.391C143.279 216.969 144.083 211.219 144.083 211.219C144.083 211.219 143.35 217.799 138.784 220.517C134.219 223.235 133.338 227.348 133.604 230.099L133.87 232.851C133.87 232.851 129.441 230.868 129.027 236.757C128.614 242.647 137.005 241.133 137.005 241.133C137.005 241.133 135.429 244.113 128.158 248.039C120.886 251.964 116.293 256.202 113.799 265.454C110.277 278.204 129.722 291.984 129.722 291.984Z" fill="#E0E0E0"/>
+<path d="M222.852 309.435C222.852 309.435 229.619 304.042 227.07 294.116C224.521 284.191 219.936 280.382 225.433 277.111C230.929 273.84 233.657 281.414 233.657 281.414C233.657 281.414 233.324 267.128 226.532 255.93C218.965 243.41 209.595 234.915 200.21 237.362C190.825 239.809 192.423 245.612 192.689 246.512C192.955 247.412 193.504 247.929 193.504 247.929C193.504 247.929 193.538 245.366 196.315 244.988C199.157 244.633 200.546 250.2 195.635 251.829C190.323 253.556 185.481 244.503 191.606 238.237C197.731 231.97 210.501 234.433 220.57 246.317C230.574 258.177 233.847 269.568 234.002 278.8C234.157 288.032 232.34 291.892 229.54 298.298C226.65 304.753 223.698 309.737 223.698 309.737L222.852 309.435Z" fill="#E0E0E0"/>
+<path d="M143.011 283.121C143.784 278.487 142.609 273.963 143.125 269.639C143.773 263.914 151.322 258.799 153.68 257.949C152.794 259.404 151.908 260.859 151.871 263.019C151.865 265.915 152.96 270.25 151.983 273.604C150.944 277.339 146.594 281.1 143.803 283.163C144.42 282.256 145.589 280.419 146.382 278.609C147.109 276.776 147.5 275.064 147.599 272.523C145.077 281.444 143.687 281.431 143.011 283.121Z" fill="#E0E0E0"/>
+<path d="M114.535 113.257C114.535 113.257 113.306 117.729 113.213 119.225C113.108 120.959 113.869 122.116 112.338 124.145C110.407 126.676 107.294 127.176 107.294 127.176L108.324 127.785C108.324 127.785 110.489 127.269 112.496 124.524C114.503 121.779 113.459 121.003 113.575 119.033C113.601 117.11 114.535 113.257 114.535 113.257Z" fill="#E0E0E0"/>
+<path d="M112.502 119.776C112.401 114.508 110.225 109.706 109.905 104.843C109.51 98.3428 116.9 90.9981 119.422 89.483C118.694 91.3164 117.992 93.0783 118.385 95.4725C118.914 98.7201 121.127 103.212 120.674 107.156C120.224 111.503 116.182 116.662 113.371 119.603C113.844 118.484 114.88 116.197 115.319 113.939C115.823 111.704 115.848 109.781 115.478 106.912C114.512 117.434 112.93 117.755 112.502 119.776Z" fill="#E0E0E0"/>
+<path d="M124.889 130.716C124.889 130.716 121.618 128.985 120.639 128.233C119.58 127.292 119.351 126.084 117.299 126.076C114.766 125.977 112.573 128.012 112.573 128.012L112.825 126.894C112.825 126.894 114.361 125.672 117.141 125.697C119.894 125.794 119.747 127.03 120.91 128.089C122.164 129.1 124.889 130.716 124.889 130.716Z" fill="#E0E0E0"/>
+<path d="M119.733 128.716C123.409 132.603 125.225 138 128.485 141.82C132.858 146.841 143.406 145.453 146.268 144.22C144.445 143.57 142.622 142.92 141.244 140.818C139.328 137.961 137.656 132.776 134.574 130.308C131.153 127.558 124.53 127.61 120.454 127.927C121.626 128.345 123.955 129.015 125.885 130.186C127.816 131.358 129.228 132.747 130.971 135.06C122.874 128.548 121.493 129.746 119.733 128.716Z" fill="#E0E0E0"/>
+<path d="M123.257 123.775C129.797 121.279 136.762 121.913 142.969 119.941C151.171 117.314 156.57 103.624 157.229 99.5121C155.308 101.402 153.476 103.244 150.312 103.886C146.058 104.703 139.404 104.019 134.76 106.548C129.597 109.294 125.238 117.398 122.962 122.543C124.123 121.347 126.469 118.884 128.937 117.108C131.47 115.356 133.879 114.364 137.496 113.481C125.074 119.916 125.493 122.238 123.257 123.775Z" fill="#E0E0E0"/>
+<path d="M128.694 119.436C128.553 119.627 128.502 119.769 128.502 119.769C128.502 119.769 125.346 123.473 113.64 126.461C101.908 129.519 93.1522 121.566 93.1522 121.566L97.4029 125.9C97.4029 125.9 100.431 128.107 109.573 127.988C118.208 127.849 127.341 120.965 128.349 120.198L128.694 119.436Z" fill="#E0E0E0"/>
+<path d="M52.4813 134.986C54.9521 135.465 57.355 133.666 57.9468 130.979C58.513 128.364 57.0019 125.812 54.5311 125.333C52.0604 124.854 49.6574 126.653 49.0657 129.34C48.474 132.027 50.0106 134.507 52.4813 134.986Z" fill="#E0E0E0"/>
+<path d="M59.0947 142.981C60.8891 143.299 62.7373 142.027 63.1648 140.006C63.5669 138.056 62.4887 136.142 60.6293 135.801C58.7699 135.459 56.9867 136.755 56.5592 138.776C56.1317 140.797 57.2353 142.639 59.0947 142.981Z" fill="#E0E0E0"/>
+<path d="M61.8731 150.412C63.1212 150.616 64.4005 149.704 64.6638 148.349C64.9271 146.994 64.1518 145.671 62.9037 145.467C61.6555 145.263 60.3762 146.175 60.1129 147.53C59.8496 148.885 60.625 150.208 61.8731 150.412Z" fill="#E0E0E0"/>
+</g>
+</svg>

src/core/data/store/Store.js

@@ -217,5 +217,12 @@ Store.OR = Store.AGGREGATE(function(values, length) {
   }
   return result;
 });
-
+Store.IF = function(cfg, children){
+  return function( update ){
+    if( 'condition' in cfg )
+      cfg.condition( function( cond ){
+        update( cond ? children : null );
+      } );
+  }
+};
 typeof module === 'object' && (module.exports = Store);
\ No newline at end of file

src/global-styles/base.scss

@@ -11,6 +11,10 @@ body {
 	background-color: $bg-main;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+
+	@media (max-width: $mobile) {
+		font-family: $font-mobile;
+	}
 }
 
 img {
@@ -26,6 +30,10 @@ img {
 	padding-top: 90px;
 	min-height: 100vh;
 	min-height: calc(var(--vh, 1vh) * 100);
+
+	@media (max-width: $mobile) {
+		padding-top: 50px;
+	}
 }
 
 .page-content__inner {

src/global-styles/fonts.scss

@@ -69,3 +69,29 @@
 	src: url("/fonts/SFProText-BoldItalic.woff2") format("woff2"),
 	url("/fonts/SFProText-BoldItalic.woff") format("woff");
 }
+
+@font-face {
+	font-family: "Helvetica Neue";
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("/fonts/HelveticaNeueCyrRoman.woff2") format("woff2"),
+	url("/fonts/HelveticaNeueCyrRoman.woff") format("woff");
+}
+
+@font-face {
+	font-family: "Helvetica Neue";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url("/fonts/HelveticaNeueCyrMedium.woff") format("woff");
+}
+
+@font-face {
+	font-family: "Helvetica Neue";
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url("/fonts/HelveticaNeueCyrBold.woff2") format("woff2"),
+	url("/fonts/HelveticaNeueCyrBold.woff") format("woff");
+}

src/global-styles/typography.scss

@@ -15,6 +15,11 @@
 	font-weight: 700;
 	font-size: 24px;
 	line-height: 32px;
+
+	@media (max-width: $mobile) {
+		font-size: 20px;
+		line-height: 25px;
+	}
 }
 
 @mixin lesserHeadline {
@@ -40,6 +45,13 @@
 	font-size: 18px;
 	line-height: 23px;
 	color: $gray-dark;
+
+	@media (max-width: $mobile) {
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 19px;
+		letter-spacing: 0.25px;
+	}
 }
 
 @mixin bodyText {

src/global-styles/variables.scss

@@ -20,3 +20,6 @@ $brick: #C94C0A;
 $sienna: #D8960D;
 
 $font: 'SF Pro Text', Arial, sans-serif;
+$font-mobile: 'Helvetica Neue', Arial, sans-serif;
+
+$mobile: 767px;

src/svg/logo_vkusvill.svg

 <svg width="300" height="147" viewBox="0 0 300 147" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M88.9062 142.516H78.3438V136.203H88.3281V132.922H78.3438V126.938H88.9062V123.453H74.3125V146H88.9062V142.516Z" fill="#006C43"/>
-<path d="M99.6875 146.281C102.062 146.281 104.031 145.172 105 143.297H105.266V146H109.016V122.297H105.141V131.625H104.875C103.969 129.75 102.031 128.625 99.6875 128.625C95.375 128.625 92.6562 132.031 92.6562 137.438C92.6562 142.875 95.3594 146.281 99.6875 146.281ZM100.891 131.922C103.547 131.922 105.188 134.047 105.188 137.453C105.188 140.891 103.562 142.984 100.891 142.984C98.2344 142.984 96.625 140.906 96.625 137.453C96.625 134.016 98.25 131.922 100.891 131.922Z" fill="#006C43"/>
-<path d="M128.781 128.906H124.906V138.859C124.906 141.391 123.531 142.938 121.016 142.938C118.703 142.938 117.625 141.656 117.625 139.047V128.906H113.75V140.016C113.75 144.016 115.938 146.344 119.672 146.344C122.281 146.344 123.953 145.234 124.781 143.281H125.047V146H128.781V128.906Z" fill="#006C43"/>
-<path d="M148.297 134.656C147.891 131.062 145.234 128.562 140.844 128.562C135.703 128.562 132.688 131.859 132.688 137.406C132.688 143.031 135.719 146.344 140.859 146.344C145.188 146.344 147.875 143.938 148.297 140.359H144.609C144.203 142.141 142.859 143.094 140.844 143.094C138.203 143.094 136.609 141 136.609 137.406C136.609 133.859 138.188 131.812 140.844 131.812C142.969 131.812 144.25 133 144.609 134.656H148.297Z" fill="#006C43"/>
-<path d="M157.844 143.234C156.125 143.234 154.891 142.375 154.891 140.938C154.891 139.547 155.906 138.766 158.078 138.625L161.938 138.375V139.734C161.938 141.719 160.188 143.234 157.844 143.234ZM156.703 146.281C158.938 146.281 160.812 145.312 161.766 143.656H162.031V146H165.766V134.328C165.766 130.703 163.297 128.562 158.906 128.562C154.844 128.562 152.016 130.484 151.703 133.5H155.359C155.719 132.344 156.938 131.719 158.719 131.719C160.812 131.719 161.938 132.656 161.938 134.328V135.766L157.531 136.031C153.375 136.281 151.047 138.062 151.047 141.156C151.047 144.281 153.406 146.281 156.703 146.281Z" fill="#006C43"/>
-<path d="M171.672 124.719V129.016H168.969V132.109H171.672V141.438C171.672 144.75 173.234 146.078 177.156 146.078C177.906 146.078 178.625 146 179.188 145.891V142.859C178.719 142.906 178.422 142.938 177.875 142.938C176.25 142.938 175.531 142.188 175.531 140.5V132.109H179.188V129.016H175.531V124.719H171.672Z" fill="#006C43"/>
-<path d="M183.109 146H186.969V128.906H183.109V146ZM185.031 126.125C186.453 126.125 187.422 125.219 187.422 123.984C187.422 122.75 186.453 121.844 185.031 121.844C183.625 121.844 182.641 122.75 182.641 123.984C182.641 125.219 183.625 126.125 185.031 126.125Z" fill="#006C43"/>
-<path d="M199.156 146.344C204.266 146.344 207.375 143 207.375 137.453C207.375 131.922 204.25 128.562 199.156 128.562C194.078 128.562 190.938 131.938 190.938 137.453C190.938 143 194.031 146.344 199.156 146.344ZM199.156 143.094C196.453 143.094 194.906 141.031 194.906 137.453C194.906 133.891 196.453 131.812 199.156 131.812C201.844 131.812 203.391 133.891 203.391 137.453C203.391 141.031 201.859 143.094 199.156 143.094Z" fill="#006C43"/>
-<path d="M211.281 146H215.156V136.047C215.156 133.531 216.609 131.938 218.922 131.938C221.281 131.938 222.375 133.25 222.375 135.859V146H226.25V134.938C226.25 130.859 224.172 128.562 220.359 128.562C217.812 128.562 216.094 129.734 215.281 131.641H215.016V128.906H211.281V146Z" fill="#006C43"/>
+<path d="M88.9062 142.516H78.3438V136.203H88.3281V132.922H78.3438V126.938H88.9062V123.453H74.3125V146H88.9062V142.516Z" fill="currentColor"/>
+<path d="M99.6875 146.281C102.062 146.281 104.031 145.172 105 143.297H105.266V146H109.016V122.297H105.141V131.625H104.875C103.969 129.75 102.031 128.625 99.6875 128.625C95.375 128.625 92.6562 132.031 92.6562 137.438C92.6562 142.875 95.3594 146.281 99.6875 146.281ZM100.891 131.922C103.547 131.922 105.188 134.047 105.188 137.453C105.188 140.891 103.562 142.984 100.891 142.984C98.2344 142.984 96.625 140.906 96.625 137.453C96.625 134.016 98.25 131.922 100.891 131.922Z" fill="currentColor"/>
+<path d="M128.781 128.906H124.906V138.859C124.906 141.391 123.531 142.938 121.016 142.938C118.703 142.938 117.625 141.656 117.625 139.047V128.906H113.75V140.016C113.75 144.016 115.938 146.344 119.672 146.344C122.281 146.344 123.953 145.234 124.781 143.281H125.047V146H128.781V128.906Z" fill="currentColor"/>
+<path d="M148.297 134.656C147.891 131.062 145.234 128.562 140.844 128.562C135.703 128.562 132.688 131.859 132.688 137.406C132.688 143.031 135.719 146.344 140.859 146.344C145.188 146.344 147.875 143.938 148.297 140.359H144.609C144.203 142.141 142.859 143.094 140.844 143.094C138.203 143.094 136.609 141 136.609 137.406C136.609 133.859 138.188 131.812 140.844 131.812C142.969 131.812 144.25 133 144.609 134.656H148.297Z" fill="currentColor"/>
+<path d="M157.844 143.234C156.125 143.234 154.891 142.375 154.891 140.938C154.891 139.547 155.906 138.766 158.078 138.625L161.938 138.375V139.734C161.938 141.719 160.188 143.234 157.844 143.234ZM156.703 146.281C158.938 146.281 160.812 145.312 161.766 143.656H162.031V146H165.766V134.328C165.766 130.703 163.297 128.562 158.906 128.562C154.844 128.562 152.016 130.484 151.703 133.5H155.359C155.719 132.344 156.938 131.719 158.719 131.719C160.812 131.719 161.938 132.656 161.938 134.328V135.766L157.531 136.031C153.375 136.281 151.047 138.062 151.047 141.156C151.047 144.281 153.406 146.281 156.703 146.281Z" fill="currentColor"/>
+<path d="M171.672 124.719V129.016H168.969V132.109H171.672V141.438C171.672 144.75 173.234 146.078 177.156 146.078C177.906 146.078 178.625 146 179.188 145.891V142.859C178.719 142.906 178.422 142.938 177.875 142.938C176.25 142.938 175.531 142.188 175.531 140.5V132.109H179.188V129.016H175.531V124.719H171.672Z" fill="currentColor"/>
+<path d="M183.109 146H186.969V128.906H183.109V146ZM185.031 126.125C186.453 126.125 187.422 125.219 187.422 123.984C187.422 122.75 186.453 121.844 185.031 121.844C183.625 121.844 182.641 122.75 182.641 123.984C182.641 125.219 183.625 126.125 185.031 126.125Z" fill="currentColor"/>
+<path d="M199.156 146.344C204.266 146.344 207.375 143 207.375 137.453C207.375 131.922 204.25 128.562 199.156 128.562C194.078 128.562 190.938 131.938 190.938 137.453C190.938 143 194.031 146.344 199.156 146.344ZM199.156 143.094C196.453 143.094 194.906 141.031 194.906 137.453C194.906 133.891 196.453 131.812 199.156 131.812C201.844 131.812 203.391 133.891 203.391 137.453C203.391 141.031 201.859 143.094 199.156 143.094Z" fill="currentColor"/>
+<path d="M211.281 146H215.156V136.047C215.156 133.531 216.609 131.938 218.922 131.938C221.281 131.938 222.375 133.25 222.375 135.859V146H226.25V134.938C226.25 130.859 224.172 128.562 220.359 128.562C217.812 128.562 216.094 129.734 215.281 131.641H215.016V128.906H211.281V146Z" fill="currentColor"/>
 <path d="M34.1832 58.6275H43.0505V71.6072L55.2347 58.6275H65.9973L50.2933 75.5344L66.2004 93.3067H54.4901L43.9982 81.0592L43.0505 82.1907V93.3067H34.1832V58.6275Z" fill="#006C43"/>
 <path d="M69.2464 58.6275H78.2491L87.3872 80.3935L97.5406 58.6275H106.543L84.4765 105.954H75.3384L82.6489 90.7108L69.2464 58.6275Z" fill="#006C43"/>
 <path d="M192.983 93.3067H188.312V58.6275H196.909V78.9957L214.982 58.6275H219.246V93.3067H210.582V73.4044L192.983 93.3067Z" fill="#006C43"/>

src/view/block/header/Header.scss

@@ -7,4 +7,10 @@
 	background-color: $bg-main;
 	box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
 	z-index: 10;
+
+	@media (max-width: $mobile) {
+		min-height: 50px;
+		background-color: transparent;
+		box-shadow: none;
+	}
 }

src/view/cmp/button/Button.jsx

 import './button.scss';
 
 export default D.declare('view.cmp.Button', function(cfg, children) {
-  return <button type={cfg.type} class={'button'} {...cfg}>{children}</button>
+  return <button type={'button' || cfg.type} class={'button'} {...cfg}>{children}</button>
 });

src/view/cmp/button/button.scss

@@ -3,7 +3,7 @@
   box-sizing: border-box;
   padding: 0 32px;
   text-align: center;
-  font-family: inherit;
+  font-family: $font;
   font-weight: 500;
   font-size: 17px;
   line-height: 36px;
@@ -15,6 +15,11 @@
   border-radius: 25px;
   cursor: pointer;
 
+  @media (max-width: $mobile) {
+    font-family: $font-mobile;
+    font-size: 14px;
+  }
+
   &:active {
     color: $accent-medium;
   }
@@ -51,6 +56,10 @@
   background-color: $accent-main;
   border-color: $accent-main;
 
+  @media (max-width: $mobile) {
+    font-size: 16px;
+  }
+
   &:active {
     color: $bg-main;
     background-color: $accent-medium;
@@ -79,6 +88,10 @@
   border-color: $bg-main;
   box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
 
+  @media (max-width: $mobile) {
+    font-size: 16px;
+  }
+
   &:active {
     color: #030303;
     background-color: $bg-accent;
@@ -110,6 +123,10 @@
   background-color: $bg-main;
   border-color: $accent-dark;
 
+  @media (max-width: $mobile) {
+    font-size: 16px;
+  }
+
   &:active {
     color: $bg-main;
     background-color: $accent-dark;

src/view/cmp/field/LabeledField.scss

@@ -12,14 +12,26 @@
 .labeled-field__label-text {
   @include mainBodyText;
   margin-bottom: 25px;
+
+  @media (max-width: $mobile) {
+    margin-bottom: 20px;
+  }
+
+  .login-page & {
+    @media (max-width: $mobile) {
+      min-height: 38px;
+    }
+  }
 }
 
 .labeled-field__input {
   display: block;
   box-sizing: border-box;
   width: 300px;
+  max-width: 100%;
   height: 50px;
   font-family: inherit;
+  font-weight: 500;
   text-align: center;
   font-size: 17px;
   line-height: 36px;
@@ -28,6 +40,11 @@
   border: 1px solid rgba(208, 209, 209, 0.8);
   border-radius: 25px;
 
+  @media (max-width: $mobile) {
+    font-weight: 400;
+    font-size: 16px;
+  }
+
   &::placeholder {
     color: $gray-medium;
   }
@@ -67,4 +84,11 @@
   font-size: 16px;
   line-height: 30px;
   color: $red;
+
+  @media (max-width: $mobile) {
+    transform: translate(-50%, 9px);
+    font-size: 12px;
+    line-height: 17px;
+    letter-spacing: 0.01em;
+  }
 }

src/view/page/login/Login.jsx

@@ -8,7 +8,7 @@ import ArrB  from '../../../svg/arr-back.svg';
 /*import {AsyncAjax} from '/core/Ajax.jsx';
 import {API} from '/dict/Consts.jsx';*/
 
-const {AND, OR} = Store;
+const {AND, OR, IF} = Store;
 export default D.declare('view.page.Login', () => {
     const loginStore = new Store({
         phone: '7123456789',
@@ -53,15 +53,16 @@ export default D.declare('view.page.Login', () => {
         <div class="login-page__big-logo">
             <Logo width="660" height="300"/>
         </div>
-        <h1 class="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
         <Switch store={loginStore} key='authHelp'>
             <Switch.Item id={false}>
+                <h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
                 <form action="#" method="post" className="authorization-form">
                     <Switch store={loginStore} key='active'>
                         <Switch.Item id='enterPhone'>
                             <view.cmp.field.LabeledField required label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>
                             <Button
                                 class={"button button--primary authorization-form__button"}
+                                type={"button"}
                                 onclick={checkPhone}
                                 disabled={OR(
                                     loginStore.valFalse('phoneValid'),
@@ -71,19 +72,22 @@ export default D.declare('view.page.Login', () => {
                         </Switch.Item>
                         <Switch.Item id='enterCode'>
                             <button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
-                            <view.cmp.field.LabeledField required label={'Введите код из СМС'} placeholder={'Код'} type={'number'} bind={loginStore.bind('code')}
-                                invalid={loginStore.valTrue('codeError')}
+                            <view.cmp.field.LabeledField
+                              required
+                              label={'Введите код из СМС'}
+                              placeholder={'Код'}
+                              type={'number'}
+                              bind={loginStore.bind('code')}
+                              invalid={loginStore.valTrue('codeError')}
                             >
-                                    { _ =>loginStore.sub( 'codeError', codeError =>
-                                    _( codeError
-                                    ? <span class={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
-                                    : null )
-                                    )
-                                    }
+                                <IF condition={loginStore.valTrue('codeError')}>
+                                    <span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
+                                </IF>
                             </view.cmp.field.LabeledField>
 
                             <Button
                                 class={"button button--primary authorization-form__button"}
+                                type={"button"}
                                 onclick={checkCode}
                                 disabled={OR(
                                     loginStore.valFalse('codeValid'),
@@ -91,14 +95,18 @@ export default D.declare('view.page.Login', () => {
                                 )}><span>Далее</span><Arr width="17" height="11"/></Button>
                         </Switch.Item>
                     </Switch>
-                    <Button onClick={() => loginStore.set('authHelp', true)}>Проблемы с авторизацией?</Button>
+                    <Button onClick={() => loginStore.set('authHelp', true)} type={"button"}>Проблемы с авторизацией?</Button>
                 </form>
             </Switch.Item>
             <Switch.Item id={true}>
                 <div class={"login-page__back-link"}>
-                    <Button onClick={() => loginStore.set('authHelp', false)}><ArrB width="17" height="11"/><span>Вернуться к авторизации</span></Button>
+                    <Button onClick={() => loginStore.set('authHelp', false)} type={"button"}><ArrB width="17" height="11"/><span>Вернуться к авторизации</span></Button>
                 </div>
                 <h2 class="login-page__headline">Проблемы с авторизацией?</h2>
+                <div class="login-page__text">
+                    <p>Текст про&nbsp;то, куда писать и&nbsp;звонить Текст про&nbsp;то, куда писать и&nbsp;звонить, текст про&nbsp;то, куда писать и&nbsp;звонить</p>
+                </div>
+                <a href="tel:88000000000" className="login-page__support">8 800 000 00 00</a>
             </Switch.Item>
         </Switch>
     </div>

src/view/page/login/loginPage.scss

@@ -10,12 +10,27 @@
 	background-repeat: no-repeat;
 	background-size: 100% auto;
 	background-position: bottom center;
+
+	@media (max-width: $mobile) {
+		margin: 0;
+		padding: 0 30px 30px;
+		background-image: url("/uploads/images/bg-leaves-mob.svg");
+	}
 }
 
 .login-page__big-logo {
 	margin-bottom: 35px;
 	width: 300px;
 	height: 147px;
+	color: $accent-dark;
+
+	@media (max-width: $mobile) {
+		margin-top: -16px;
+		margin-bottom: 31px;
+		width: 150px;
+		height: 80px;
+		color: #353535;
+	}
 }
 
 .login-page__big-logo svg {
@@ -28,6 +43,10 @@
 	@include headline;
 	margin: 0 auto 14px;
 	max-width: 800px;
+
+	@media (max-width: $mobile) {
+		margin-bottom: 22px;
+	}
 }
 
 .authorization-form__button {
@@ -40,3 +59,35 @@
 	left: 37px;
 	z-index: 11;
 }
+
+.login-page__headline {
+	@include headline;
+	margin: 0;
+}
+
+.login-page__text {
+	@include mainBodyText;
+	margin: 22px auto 25px;
+	max-width: 385px;
+}
+
+.login-page__text p {
+	margin: 0 0 23px;
+}
+
+.login-page__text p:last-child {
+	margin-bottom: 0;
+}
+
+.login-page__support {
+	@include mainBodyText;
+	text-decoration: none;
+	color: $accent-dark;
+
+	&:hover,
+		&:active,
+	&:focus {
+		color: $accent-medium;
+		outline: none;
+	}
+}