upd (first 3 screens)

2026-05-06 17:54:08 +05:00
parent 7f3c994147
commit 11500a9ec3
95 changed files with 1979 additions and 81 deletions
@@ -4,14 +4,20 @@
    "": {
      "name": "dyagilev",
      "dependencies": {
+        "@number-flow/react": "^0.6.0",
+        "clsx": "^2.1.1",
+        "motion": "^12.38.0",
        "next": "16.2.4",
        "react": "19.2.4",
        "react-dom": "19.2.4",
+        "react-pageflip": "^2.0.3",
+        "zustand": "^5.0.13",
      },
      "devDependencies": {
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
+        "autoprefixer": "^10.5.0",
        "eslint": "^9",
        "eslint-config-next": "16.2.4",
        "tailwindcss": "3",
@@ -178,6 +184,8 @@

    "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],

+    "@number-flow/react": ["@number-flow/react@0.6.0", "", { "dependencies": { "esm-env": "^1.1.4", "number-flow": "0.6.0" }, "peerDependencies": { "react": "^18 || ^19", "react-dom": "^18 || ^19" } }, "sha512-77Yfc9+zkV2UDSP8phhZzxJGuwxi/Tt1TikmipL+1r3e9GFKEYDZ1XwInj67NoSt3OnOB0KLvvcl3lfPZgBHVQ=="],
+
    "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],

    "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
@@ -292,6 +300,8 @@

    "async-function": ["async-function@1.0.0", "", {}, "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="],

+    "autoprefixer": ["autoprefixer@10.5.0", "", { "dependencies": { "browserslist": "^4.28.2", "caniuse-lite": "^1.0.30001787", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong=="],
+
    "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],

    "axe-core": ["axe-core@4.11.4", "", {}, "sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA=="],
@@ -328,6 +338,8 @@

    "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],

+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],

    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
@@ -416,6 +428,8 @@

    "eslint-visitor-keys": ["eslint-visitor-keys@4.2.1", "", {}, "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ=="],

+    "esm-env": ["esm-env@1.2.2", "", {}, "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="],
+
    "espree": ["espree@10.4.0", "", { "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.1" } }, "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ=="],

    "esquery": ["esquery@1.7.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g=="],
@@ -450,6 +464,10 @@

    "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],

+    "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
+
+    "framer-motion": ["framer-motion@12.38.0", "", { "dependencies": { "motion-dom": "^12.38.0", "motion-utils": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g=="],
+
    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],

    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
@@ -612,6 +630,12 @@

    "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],

+    "motion": ["motion@12.38.0", "", { "dependencies": { "framer-motion": "^12.38.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w=="],
+
+    "motion-dom": ["motion-dom@12.38.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA=="],
+
+    "motion-utils": ["motion-utils@12.36.0", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
+
    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],

    "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
@@ -630,6 +654,8 @@

    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],

+    "number-flow": ["number-flow@0.6.0", "", { "dependencies": { "esm-env": "^1.1.4" } }, "sha512-K8flNq2Wqus53vjp/btVo3qXFkagF8dIdYavreBfE7hlvFFG/b1HMGEH6nZL+mlrJ+4lbLP9OmPv3t2rmRkpSQ=="],
+
    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],

    "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
@@ -656,6 +682,8 @@

    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],

+    "page-flip": ["page-flip@2.0.7", "", {}, "sha512-96lQFUUz7r/LZzEUZJ3yBIMEKU9+m8HMFDzTvTdD6P7Ag/wXINjp9n0W7b4wanwnDbQETo4uNUoL3zMqpFxwGA=="],
+
    "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],

    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
@@ -702,6 +730,8 @@

    "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],

+    "react-pageflip": ["react-pageflip@2.0.3", "", { "dependencies": { "page-flip": "latest" } }, "sha512-k81mHhRvUM52y8jyzTCh5t4O0lepkLhp+XGSUzq2C3uD+iW99Cv0jfRlqFCjZbD5N3jKkIFr7/3giucoXKDP3Q=="],
+
    "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],

    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
@@ -844,6 +874,8 @@

    "zod-validation-error": ["zod-validation-error@4.0.2", "", { "peerDependencies": { "zod": "^3.25.0 || ^4.0.0" } }, "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ=="],

+    "zustand": ["zustand@5.0.13", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-efI2tVaVQPqtOh114loML/Z80Y4NP3yc+Ff0fYiZJPauNeWZeIp/bRFD7I9bfmCOYBh/PHxlglQ9+wvlwnPikQ=="],
+
    "@babel/core/json5": ["json5@2.2.3", "", { "bin": "lib/cli.js" }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],

    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
-  /* config options here */
+  devIndicators: false
 };

 export default nextConfig;
@@ -9,9 +9,14 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@number-flow/react": "^0.6.0",
+    "clsx": "^2.1.1",
+    "motion": "^12.38.0",
    "next": "16.2.4",
    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-pageflip": "^2.0.3",
+    "zustand": "^5.0.13"
  },
  "devDependencies": {
    "@types/node": "^20",
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
@@ -17,5 +17,55 @@
 body {
  background: var(--background);
  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  /* Typography */
+  .line-xl {
+    @apply lg:text-[7.778vw] md:text-[14.583vw] text-[31.111vw] leading-[100%] tracking-[-2%];
+  }
+  .title-l {
+    @apply lg:text-[2.778vw] md:text-[5.208vw] text-[11.111vw] leading-[120%] tracking-[-2%];
+  }
+  .title-m {
+    @apply lg:text-[1.389vw] md:text-[2.604vw] text-[5.556vw] leading-[110%] tracking-[-2%];
+  }
+  .title-s {
+    @apply lg:text-[1.25vw] md:text-[2.344vw] text-[5vw] leading-[110%] tracking-[-2%];
+  }
+  .text-m {
+    @apply lg:text-[1.111vw] md:text-[2.083vw] text-[4.444vw] leading-[120%] tracking-[-2%];
+  }
+  .text-s {
+    @apply lg:text-[0.972vw] md:text-[1.875vw] text-[3.889vw] leading-[110%] tracking-[-2%];
+  }
+  .text-xs {
+    @apply lg:text-[0.833vw] md:text-[1.563vw] text-[3.333vw] leading-[110%] tracking-[-2%];
+  }
+  .button-l {
+    @apply lg:text-[0.972vw] md:text-[1.875vw] text-[3.889vw] leading-[115%] tracking-[-2%];
+  }
+  .button-m {
+    @apply lg:text-[0.972vw] md:text-[1.875vw] text-[3.889vw] leading-[110%] tracking-[-2%];
+  }
+  .button-s {
+    @apply lg:text-[0.833vw] md:text-[1.563vw] text-[3.333vw] leading-[110%] tracking-[-2%];
+  }
+  .caption-m{
+    @apply lg:text-[0.833vw] md:text-[1.563vw] text-[3.333vw] leading-[120%] tracking-[-2%];
+  }
+  .caption-s{
+    @apply lg:text-[0.694vw] md:text-[1.302vw] text-[2.778vw] leading-[120%] tracking-[-2%];
+  }
+
+  /* Gradients */
+  .gradient-1 {
+    @apply bg-[linear-gradient(to_right,#3D514B,#F051A0_32%,#CF8D42_71%,#72F9B3)];
+  }
+  .gradient-2 {
+    @apply bg-[linear-gradient(to_right,#CF8D42_4%,#3D514B_36%,#72F9B3_67%,#F051A0)];
+  }
+  .gradient-3 {
+    @apply bg-[linear-gradient(to_right,#CF8D42_4%,#72F9B3_32%,#F051A0_58%,#3D514B)];
+  }
 }
@@ -1,20 +1,15 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Manrope } from "next/font/google";
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const manrope = Manrope({
  subsets: ["latin"],
+  weight: ["200", "400", "600"],
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Дягилев",
+  description: "Авторский дом Дягилев",
 };

 export default function RootLayout({
@@ -25,9 +20,9 @@ export default function RootLayout({
  return (
    <html
      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`h-full antialiased scroll-smooth text-white ${manrope.className}`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full">{children}</body>
    </html>
  );
 }
@@ -1,65 +1,27 @@
-import Image from "next/image";
+"use client";

-export default function Home() {
+import LoadingScreen from "@/components/LoadingScreen";
+import Hero from "@/components/pages/Hero";
+import Header from "@/components/ui/Header";
+import MenuSidebar from "@/components/ui/MenuSidebar";
+import Overview from "@/components/pages/Overview";
+import ScreenOverlay from "@/components/ui/ScreenOverlay";
+import Premiere from "@/components/pages/Premiere";
+
+export default function Root() {
  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <main className="relative overflow-hidden ">
+      <LoadingScreen />
+
+      {/* Основной UI */}
+      <Header />
+      <MenuSidebar />
+      <ScreenOverlay />
+
+      {/* Страницы */}
+      <Hero />
+      <Overview />
+      <Premiere />
+    </main>
  );
 }
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import LogoHorizontal from "./icons/LogoHorizontal";
+import Logo from "./icons/Logo";
+import NumberFlow from "@number-flow/react";
+import { AnimatePresence, motion } from "motion/react";
+import { useAppStateStore } from "@/stores/useAppStateStore";
+
+export default function LoadingScreen() {
+  const setIsLoading = useAppStateStore((state) => state.setIsLoading);
+  const isLoading = useAppStateStore((state) => state.isLoading);
+  const [progress, setProgress] = useState(1);
+
+  useEffect(() => {
+    setIsLoading(true);
+    const timeout = setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+      setIsLoading(false);
+    };
+  }, [progress, setIsLoading]);
+
+  return (
+    <AnimatePresence mode="wait">
+      {isLoading && (
+        <motion.div
+          initial={{ translateY: 0 }}
+          animate={{ translateY: 0 }}
+          exit={{ translateY: "-100%" }}
+          transition={{ duration: 1, ease: "easeInOut" }}
+          className="fixed inset-0 bg-[#0D261E] overflow-hidden z-[100]"
+        >
+          <div className=" lg:block hidden absolute text-white lg:left-[2.083vw] lg:bottom-[1.667vw] lg:w-[34.167vw] lg:h-[5.069vw]">
+            <LogoHorizontal />
+          </div>
+
+          <div
+            className=" lg:hidden block absolute text-white left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+        md:w-[21.615vw] md:h-[6.25vw] w-[46.111vw] h-[13.333vw]"
+          >
+            <Logo />
+          </div>
+
+          <div className="absolute lg:text-[7.778vw] lg:right-[2.083vw] lg:bottom-0 leading-[100%]">
+            <NumberFlow
+              prefix={progress < 10 ? "(00" : progress < 100 ? "(0" : "("}
+              suffix=")"
+              value={progress}
+            />
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Add = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m10.655 3.334-.007 6.04h6.02v1.25h-6.022l-.008 6.044-1.25-.002.008-6.042H3.334v-1.25h6.063l.008-6.041z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Add;
@@ -0,0 +1,103 @@
+import * as React from "react";
+type ArrowProps = React.SVGProps<SVGSVGElement> & {
+  direction: "left" | "right" | "up" | "down" | "more" | "less";
+};
+
+const Arrow: React.FC<ArrowProps> = ({ direction, ...props }) => {
+  switch (direction) {
+    case "left":
+      return (
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.616 5a.625.625 0 0 1 .884.884l-3.491 3.49h12.866a.626.626 0 0 1 0 1.25H4.009l3.49 3.492a.625.625 0 0 1-.883.884l-4.411-4.41a.834.834 0 0 1 0-1.179z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case "right":
+      return (
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.5 5a.625.625 0 0 1 .884 0l4.41 4.411a.834.834 0 0 1 0 1.179L13.385 15a.625.625 0 1 1-.884-.884l3.491-3.491H3.125a.625.625 0 1 1 0-1.25h12.866L12.5 5.884a.625.625 0 0 1 0-.884"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case "up":
+      return (
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.41 2.206a.834.834 0 0 1 1.18 0L15 6.616a.625.625 0 1 1-.885.884l-3.49-3.49v12.865a.625.625 0 0 1-1.25 0V4.01L5.882 7.5a.625.625 0 0 1-.884-.883z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case "down":
+      return (
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 2.5c.344 0 .624.28.624.625v12.866l3.491-3.491a.625.625 0 0 1 .884.884l-4.41 4.41a.834.834 0 0 1-1.179 0L5 13.385a.625.625 0 0 1 .883-.884l3.491 3.491V3.125c0-.345.28-.625.625-.625"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case "more":
+      return (
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            d="M16.97 12.562h-1.25V4.937L3.87 16.787l-.884-.884 11.85-11.85H7.212v-1.25h9.758z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case "less":
+      return (
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            d="M15.72 14.837V7.213h1.25v9.758H7.21v-1.25h7.626L2.986 3.87l.884-.884z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+  }
+};
+
+export default Arrow;
@@ -0,0 +1,19 @@
+import * as React from "react";
+const Baby = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.78 10.334c.206 0 .372-.17.372-.38s-.166-.38-.372-.38a.376.376 0 0 0-.372.38c0 .21.167.38.372.38m4.836 0c.205 0 .371-.17.371-.38s-.166-.38-.371-.38a.376.376 0 0 0-.372.38c0 .21.166.38.372.38"
+      fill="currentColor"
+    />
+    <path
+      d="M10.03 2.866q.515 0 1.01.08l-.196 1.234a5 5 0 0 0-.814-.064c-2.838 0-5.05 2.561-5.26 5.47a.625.625 0 0 1-.624.579.67.67 0 0 0-.583.287c-.14.193-.224.481-.208.8.017.317.129.61.312.814.172.191.433.337.836.337h.356l.087.006c.2.028.376.151.47.333.946 1.84 2.516 3.067 4.43 3.05 2.192-.019 4.216-1.086 5.164-3.037l.02-.04a.63.63 0 0 1 .542-.312c.447 0 .74-.154.933-.354.203-.21.33-.509.363-.828.033-.325-.036-.616-.154-.805-.106-.17-.242-.251-.43-.251a.625.625 0 0 1-.624-.625 5.5 5.5 0 0 0-1.141-3.385l.989-.765a6.73 6.73 0 0 1 1.381 3.63c.381.14.68.407.885.734.29.465.393 1.046.337 1.594a2.65 2.65 0 0 1-.707 1.57 2.4 2.4 0 0 1-1.441.71c-1.25 2.24-3.649 3.393-6.106 3.414-2.391.021-4.252-1.44-5.369-3.389-.742-.004-1.339-.293-1.751-.752a2.57 2.57 0 0 1-.63-1.585c-.028-.553.109-1.137.444-1.599.248-.34.595-.6 1.025-.723.453-3.198 2.979-6.128 6.454-6.128M8.555 12.11c.473.587 1.063.86 1.61.868.54.007 1.117-.243 1.582-.855l.995.756c-.682.898-1.62 1.362-2.594 1.348-.966-.013-1.891-.495-2.566-1.334zm4.06-2.4a.25.25 0 0 0-.253.244c0 .122.1.245.253.245a.25.25 0 0 0 .253-.245.25.25 0 0 0-.253-.245m-4.582.244a.25.25 0 0 0-.253-.245.25.25 0 0 0-.253.245c0 .122.1.245.253.245a.25.25 0 0 0 .253-.245m4.9-7.887c1.159.999 1.137 2.496.49 3.517a2.7 2.7 0 0 1-1.441 1.134c-.63.201-1.343.157-2.06-.194l.551-1.123c.447.22.827.222 1.128.126.31-.099.58-.318.767-.612.377-.595.355-1.38-.25-1.901zM8.778 9.954a1 1 0 0 1-.997 1.005c-.563 0-.997-.463-.997-1.005s.434-1.005.997-1.005l.104.005c.512.053.893.492.893 1m4.835 0a1 1 0 0 1-.997 1.005c-.563 0-.997-.463-.997-1.005s.434-1.005.997-1.005l.104.005c.512.053.893.492.893 1"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Baby;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Basket = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.02 2.813a.626.626 0 0 1 .868.175l3.09 4.64a2.206 2.206 0 0 1 1.82 2.551l-.826 4.793a2.29 2.29 0 0 1-2.259 1.903h-9.43a2.29 2.29 0 0 1-2.258-1.903L2.2 10.18a2.207 2.207 0 0 1 1.796-2.548l2.702-4.613a.625.625 0 0 1 1.079.63L5.464 7.6h8.993l-2.61-3.92a.626.626 0 0 1 .174-.867M4.375 8.85a.955.955 0 0 0-.941 1.117l.824 4.793c.086.5.52.865 1.026.865h9.43c.507 0 .94-.365 1.027-.865l.825-4.794a.954.954 0 0 0-.94-1.116zm8.388 4.23a.625.625 0 0 1 0 1.25H7.236a.625.625 0 0 1 0-1.25zm.79-2.74a.626.626 0 0 1 0 1.25H6.447a.625.625 0 0 1 0-1.25z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Basket;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Beauty = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.042 2.392c.419-.08.806.065 1.078.318.281.262.445.642.445 1.04v5.376q-.001.136-.025.266a1.46 1.46 0 0 1 1.055 1.401v5.04a1.46 1.46 0 0 1-1.458 1.46H4.999a1.46 1.46 0 0 1-1.458-1.46v-5.04c0-.665.445-1.226 1.054-1.401a1.5 1.5 0 0 1-.025-.266V5.417c0-.375.126-.986.471-1.568.356-.6.961-1.192 1.917-1.439zm7.957 6.942a1.46 1.46 0 0 1 1.458 1.46v5.04c0 .805-.653 1.458-1.458 1.458h-2.451a1.46 1.46 0 0 1-1.458-1.459v-5.04c0-.805.652-1.459 1.458-1.459zm-10.208 6.5c0 .114.093.208.208.208h3.138a.21.21 0 0 0 .208-.209v-2.565H4.79zm7.757-5.25a.21.21 0 0 0-.208.21v5.04c0 .114.093.208.208.208h2.451a.21.21 0 0 0 .208-.209v-5.04a.21.21 0 0 0-.208-.209zm-7.549 0a.21.21 0 0 0-.208.21v1.224h3.554v-1.225a.21.21 0 0 0-.208-.209zm2.267-6.962c-.578.15-.931.496-1.15.864-.23.388-.296.78-.296.931v3.71c0 .114.093.207.208.207h1.078a.21.21 0 0 0 .21-.208V3.75a.18.18 0 0 0-.047-.125z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Beauty;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Bicycle = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.958 12.56c0-.785-.4-1.471-1.001-1.87l-.43 1.449a.625.625 0 1 1-1.199-.357l.433-1.454H5.75a2.22 2.22 0 0 0-2.208 2.231 2.22 2.22 0 0 0 2.208 2.233 2.22 2.22 0 0 0 2.209-2.233m8.5 0a2.22 2.22 0 0 0-2.335-2.229l.507 1.43a.625.625 0 1 1-1.179.418l-.503-1.423a2.23 2.23 0 0 0-.907 1.803 2.22 2.22 0 0 0 2.208 2.233 2.22 2.22 0 0 0 2.209-2.233M2.999 6.487a1.7 1.7 0 0 1 .493-1.198 1.68 1.68 0 0 1 1.195-.498h2.908c.557 0 .958.536.799 1.07l-.319 1.072h4.256c.353 0 .668.223.786.555l.578 1.633q.271-.044.554-.044c1.915 0 3.459 1.563 3.459 3.481s-1.544 3.483-3.459 3.483-3.458-1.564-3.458-3.483c0-1.285.694-2.411 1.727-3.014l-.481-1.36H7.703l-.38 1.274a3.49 3.49 0 0 1 1.885 3.1c0 1.919-1.544 3.483-3.459 3.483s-3.458-1.565-3.458-3.483 1.543-3.481 3.458-3.481q.192 0 .378.02l.91-3.056h-2.35a.43.43 0 0 0-.308.129.45.45 0 0 0 0 .634.43.43 0 0 0 .308.13c.195 0 .354.158.354.353v.542a.354.354 0 0 1-.354.354c-.45 0-.88-.18-1.195-.498a1.7 1.7 0 0 1-.493-1.198m10.625-1.696a.625.625 0 1 1 0 1.25h-.875a.625.625 0 1 1 0-1.25z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Bicycle;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Bus = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.042 2.708V17.5h-1.25v-1.651H5.21V17.5H3.96V2.708zM5.21 14.598h9.583v-3.343H5.21zm2.986-2.327v1.25H6.39v-1.25zm5.417 0v1.25h-1.806v-1.25zM5.21 10.005h9.583V3.958H5.21z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Bus;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const BusStop = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15.286 2.917a3.88 3.88 0 0 1 3.881 3.88V7c0 .345-.28.624-.625.625h-1.21v9.25a.625.625 0 0 1-1.25 0v-9.25H4.335v9.25a.625.625 0 1 1-1.25 0v-9.25h-1.21A.625.625 0 0 1 1.25 7v-.203a3.88 3.88 0 0 1 3.88-3.88zm-.732 10.785a.625.625 0 0 1 0 1.25h-.769v1.923a.625.625 0 0 1-1.25 0v-1.923H7.881v1.923a.625.625 0 1 1-1.25 0v-1.923h-.793a.625.625 0 1 1 0-1.25zM5.13 4.167a2.63 2.63 0 0 0-2.597 2.208h15.349a2.63 2.63 0 0 0-2.597-2.208z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default BusStop;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Car = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.73 3.125c1.032 0 1.937.69 2.21 1.687l1.33 4.857q.023.082.023.165v8.083a.626.626 0 0 1-1.25 0v-2.053H3.959v2.053a.625.625 0 0 1-1.25 0V9.834q0-.084.022-.165l1.332-4.857a2.29 2.29 0 0 1 2.21-1.687zm-9.771 11.49h12.084v-4.156H3.959zm3.959-2.74a.625.625 0 0 1 0 1.25H5.834a.625.625 0 0 1 0-1.25zm6.25 0a.625.625 0 0 1 0 1.25h-2.084a.625.625 0 0 1 0-1.25zm-7.896-7.5c-.469 0-.88.314-1.004.767L4.153 9.209H15.85l-1.115-4.067a1.04 1.04 0 0 0-1.005-.767z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Car;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Cart = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3.287 2.708c.982 0 1.842.624 2.161 1.529h8.916c1.71 0 2.819 1.805 2.043 3.33l-1.413 2.778a2.29 2.29 0 0 1-2.042 1.252H6.46l-1.6 1.572a.13.13 0 0 0-.04.07.15.15 0 0 0 .06.14.15.15 0 0 0 .092.024h9.003c1.193 0 2.179.953 2.18 2.152 0 1.199-.987 2.153-2.18 2.153s-2.18-.954-2.18-2.153c.001-.323.073-.629.201-.902H8.183c.128.273.2.579.2.902 0 1.199-.987 2.153-2.18 2.153s-2.179-.954-2.179-2.153c0-.39.104-.752.286-1.065-.77-.41-1.05-1.501-.327-2.212l1.54-1.514-1.215-5.972a1.04 1.04 0 0 0-1.02-.834H1.665a.625.625 0 1 1 0-1.25zm2.916 11.945a.916.916 0 0 0-.929.902c0 .488.406.903.93.903a.917.917 0 0 0 .929-.903.917.917 0 0 0-.93-.902m7.77 0a.916.916 0 0 0-.928.902c0 .488.406.903.929.903s.93-.414.93-.903a.917.917 0 0 0-.93-.902m-7.26-4.306h6.24c.391 0 .75-.22.928-.57L15.293 7a1.042 1.042 0 0 0-.929-1.513h-8.64z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Cart;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Check = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.28 6.044a.834.834 0 0 1 1.108 1.245l-7.5 6.667a.833.833 0 0 1-1.143-.033L3.578 9.756a.834.834 0 0 1 1.179-1.179l3.611 3.612z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Check;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const ChevronDown = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.531 5.998a.797.797 0 1 1 1.127 1.128l-6.851 6.851a.834.834 0 0 1-1.179 0L2.776 7.126a.798.798 0 0 1 1.127-1.128l6.314 6.313z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default ChevronDown;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const ChevronRight = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.218 2.56a.797.797 0 0 1 1.127 0l6.852 6.85a.834.834 0 0 1 0 1.18l-6.852 6.85a.797.797 0 1 1-1.127-1.127L12.531 10 6.218 3.685a.797.797 0 0 1 0-1.127"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default ChevronRight;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const ChevronUp = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.628 6.024a.834.834 0 0 1 1.179 0l6.851 6.851a.798.798 0 0 1-1.127 1.128L10.217 7.69l-6.314 6.313a.797.797 0 1 1-1.127-1.128z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default ChevronUp;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Chevronleft = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.652 2.564A.797.797 0 0 1 13.78 3.69L7.47 10l6.31 6.31a.796.796 0 1 1-1.127 1.127L5.805 10.59a.834.834 0 0 1 0-1.179z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Chevronleft;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Coffee = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.758 6.041a3.76 3.76 0 0 1 2.678 1.125 3.86 3.86 0 0 1 1.105 2.705 3.86 3.86 0 0 1-1.105 2.705 3.76 3.76 0 0 1-2.678 1.125h-.164v.177a3.86 3.86 0 0 1-1.106 2.705 3.76 3.76 0 0 1-2.677 1.125H6.072a3.76 3.76 0 0 1-2.677-1.125 3.86 3.86 0 0 1-1.105-2.705v-6.41c0-.375.146-.737.41-1.005a1.4 1.4 0 0 1 1.004-.422zM3.705 7.291a.16.16 0 0 0-.113.05.18.18 0 0 0-.051.127v6.41c0 .688.27 1.345.745 1.828a2.5 2.5 0 0 0 1.787.752h4.737a2.5 2.5 0 0 0 1.789-.752c.476-.483.745-1.14.745-1.828v-6.41q-.002-.077-.052-.128a.16.16 0 0 0-.083-.046l-.03-.003zm10.889.177v4.983h.164a2.5 2.5 0 0 0 1.788-.751 2.6 2.6 0 0 0 .745-1.829c0-.687-.27-1.344-.745-1.827a2.5 2.5 0 0 0-1.788-.753h-.176q.011.089.012.177m-9.178-6.01c.345 0 .625.28.625.625V3.75a.626.626 0 0 1-1.25 0V2.083c0-.345.28-.625.625-.625m2.916 0c.345 0 .625.28.625.625V3.75a.625.625 0 0 1-1.25 0V2.083c0-.345.28-.624.625-.625m3.334 0c.345 0 .625.28.625.625V3.75a.626.626 0 0 1-1.25 0V2.083c0-.345.28-.625.625-.625"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Coffee;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Cookie = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 2.292a.625.625 0 0 1 .597.808 2.21 2.21 0 0 0 .549 2.212 2.21 2.21 0 0 0 2.21.549.626.626 0 0 1 .782.781 2.209 2.209 0 0 0 2.76 2.761.625.625 0 0 1 .81.597 7.71 7.71 0 0 1-9.213 7.56A7.708 7.708 0 0 1 10 2.292m-.747 1.294a6.458 6.458 0 1 0 7.16 7.16 3.46 3.46 0 0 1-2.61-1.008 3.46 3.46 0 0 1-1.012-2.53 3.46 3.46 0 0 1-3.538-3.622m.33 9.123a.834.834 0 1 1 0 1.667.834.834 0 0 1 0-1.667m3.541-1.042a.833.833 0 1 1 0 1.666.833.833 0 0 1 0-1.666m-6.875-.833a.833.833 0 1 1 0 1.665.833.833 0 0 1 0-1.665M10 9.374a.834.834 0 1 1 0 1.668.834.834 0 0 1 0-1.667M7.291 6.668a.833.833 0 1 1 0 1.666.833.833 0 0 1 0-1.666"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Cookie;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Datacentre = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.36 3.963a1.98 1.98 0 0 1 1.632 1.092l2.194 4.379q.105.21.157.437l.006.033q.045.205.046.417v3.742a1.98 1.98 0 0 1-1.979 1.978H4.582a1.98 1.98 0 0 1-1.978-1.978V10.32c0-.308.072-.612.21-.887l2.19-4.379a1.98 1.98 0 0 1 1.772-1.097h6.446zm-9.506 10.1a.73.73 0 0 0 .728.728h10.834a.73.73 0 0 0 .729-.728v-3.429H3.854zm2.09-1.98a.625.625 0 0 1 0 1.25h-.007a.625.625 0 1 1 0-1.25zm2.707 0a.625.625 0 0 1 0 1.25h-.006a.625.625 0 0 1 0-1.25zM6.726 5.21a.73.73 0 0 0-.602.404l-1.889 3.77h11.528l-1.889-3.77a.73.73 0 0 0-.601-.404l-.051-.002H6.776z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Datacentre;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Dentist = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.958 6.975q0-.199-.015-.39h-8.21a13 13 0 0 0-.108 1.745c0 2.043.4 4.092.917 5.62.26.767.54 1.378.798 1.784.122.192.227.317.306.39a.7.7 0 0 0 .034-.18v-5.92c0-.604.244-1.094.647-1.417.386-.31.87-.43 1.32-.415.859.028 1.926.608 1.926 1.831v3.726c0 1.164.491 1.91.995 2.298.259.199.51.296.695.321a.4.4 0 0 0 .21-.01 1.6 1.6 0 0 0-.157-.279c-.103-.157-.28-.407-.412-.659a2.1 2.1 0 0 1-.268-.994c0-.506.1-.972.231-1.431.065-.229.141-.464.218-.702.078-.241.159-.488.239-.756.316-1.054.634-2.432.634-4.562m-7.124-3.1c-.174.133-.438.426-.678 1.01a5 5 0 0 0-.16.45h7.69c-.2-.6-.48-1.1-.735-1.46zm8.374 3.1c0 2.273-.342 3.774-.687 4.922q-.13.424-.247.78c-.077.241-.146.456-.205.661-.117.408-.183.747-.183 1.088 0 .116.037.246.125.414.096.182.207.334.353.558.12.186.294.462.35.776.067.381-.044.752-.344 1.06-.354.362-.855.43-1.276.373-.434-.06-.885-.26-1.287-.569-.818-.628-1.484-1.744-1.484-3.29v-3.725c0-.3-.254-.567-.716-.582a.77.77 0 0 0-.499.142c-.092.074-.179.197-.179.44v5.927h-.625.625v.026l-.002.045a2 2 0 0 1-.123.58 1.35 1.35 0 0 1-.372.539 1.2 1.2 0 0 1-.788.282c-.345 0-.623-.179-.813-.348a3.2 3.2 0 0 1-.546-.67c-.33-.52-.65-1.232-.927-2.053a19.5 19.5 0 0 1-.983-6.02c0-1.751.256-3.022.625-3.921.366-.89.862-1.457 1.367-1.716l.134-.069h7.058l.187.23c.612.753 1.462 2.243 1.462 4.12"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Dentist;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Dot = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.001 6.802a3.198 3.198 0 1 1 0 6.397 3.198 3.198 0 0 1 0-6.397"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Dot;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Dots = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5.5 11.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m9 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m-9-7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m9 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Dots;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Education = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.707 6.69v6.21h-1.25V8.096l-.986.507v5.196c0 .852-.62 1.535-1.39 1.733-.796.204-2.004.583-3.174 1.21a1.93 1.93 0 0 1-1.816 0c-1.17-.627-2.378-1.006-3.173-1.21-.77-.198-1.39-.881-1.39-1.733V8.603L1.547 7.07 10 2.725zm-7.708 4.728L5.777 9.246V13.8c0 .215.167.449.452.522.85.219 2.162.627 3.453 1.319a.68.68 0 0 0 .634 0c1.29-.692 2.603-1.1 3.453-1.319.285-.073.452-.307.452-.522V9.246zM4.282 7.071 10 10.011l5.717-2.94L9.999 4.13z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Education;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Food = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M18.332 14.583a.625.625 0 0 1 0 1.25H1.666a.625.625 0 0 1 0-1.25zM9.999 5.542c4.034 0 7.292 3.31 7.292 7.375 0 .345-.28.625-.625.625H3.332a.626.626 0 0 1-.625-.625c0-4.066 3.258-7.375 7.292-7.375m0 1.25c-3.122 0-5.702 2.405-6.01 5.5h12.02c-.308-3.095-2.888-5.5-6.01-5.5m0-4.292a1.042 1.042 0 1 1 0 2.084 1.042 1.042 0 0 1 0-2.084"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Food;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Groceries = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.611 2.204a8.95 8.95 0 0 1 5.121-.108l.168.048.05.016a1.8 1.8 0 0 1 .826.656c.138.198.232.421.284.655.805.086 1.573.372 2.18.842.739.572 1.2 1.388 1.2 2.284 0 .607-.234 1.193-.655 1.628a2.24 2.24 0 0 1-1.605.684l-.255.004a7.3 7.3 0 0 0-3.046.783l.29.526a2.17 2.17 0 0 1-2.948 2.948l-.526-.29a7.3 7.3 0 0 0-.786 3.3l-.003.115a2.24 2.24 0 0 1-.682 1.49 2.34 2.34 0 0 1-1.628.656c-.896 0-1.711-.462-2.284-1.2-.47-.608-.755-1.375-.842-2.18a1.8 1.8 0 0 1-1.327-1.16 8.95 8.95 0 0 1 .06-5.288 1.78 1.78 0 0 1-.363-1.636A8.35 8.35 0 0 1 6.976 1.84l.062-.018a1.78 1.78 0 0 1 1.573.382M4.735 15.107a3 3 0 0 0 .566 1.369c.377.486.849.715 1.295.715.288 0 .56-.112.758-.303a1 1 0 0 0 .3-.61l.005-.097q0-.542.07-1.074zM3.292 9.339a7.7 7.7 0 0 0 .04 4.172c.04.092.106.176.195.238a.6.6 0 0 0 .325.108H7.98a8.6 8.6 0 0 1 .621-1.582zm4.06-6.306a7.1 7.1 0 0 0-4.32 4.319.53.53 0 0 0 .238.547l6.265 3.462a.62.62 0 0 1 .446.248l.845.466.066.034a.922.922 0 0 0 1.29-.71.92.92 0 0 0-.107-.573l-.468-.845a.6.6 0 0 1-.157-.17.6.6 0 0 1-.089-.276L7.9 3.27a.53.53 0 0 0-.548-.237m6.16.3a7.7 7.7 0 0 0-4.173-.04L12.273 8.6a8.6 8.6 0 0 1 1.583-.62V3.853a.6.6 0 0 0-.107-.325.56.56 0 0 0-.237-.195m1.594 4.394a9 9 0 0 1 1.074-.068l.098-.005a1 1 0 0 0 .61-.3c.19-.197.302-.47.302-.757 0-.446-.228-.919-.715-1.296a3 3 0 0 0-1.369-.566z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Groceries;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Gym = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.668 9.438h4.663V6.067h4.206v1.349h2.421v5.169h-2.42v1.348H12.33v-3.371H7.668v3.371H3.462v-1.348H1.04v-5.17h2.42V6.068h4.207zm-2.956 3.371h1.706V7.191H4.712zm8.87 0h1.705V7.191h-1.706zM2.29 11.461h1.17V8.54H2.29zm14.246 0h1.171V8.54h-1.17z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Gym;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Health = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.273 2.708c.805 0 1.457.653 1.457 1.458v2.895a.21.21 0 0 0 .21.209h2.894c.805 0 1.458.653 1.458 1.458v2.544c0 .805-.653 1.458-1.458 1.458H12.94a.21.21 0 0 0-.21.209v2.894c0 .806-.652 1.458-1.457 1.458H8.729a1.46 1.46 0 0 1-1.458-1.458V12.94a.21.21 0 0 0-.208-.21H4.167a1.46 1.46 0 0 1-1.458-1.457V8.728c0-.805.653-1.458 1.458-1.458h2.896a.21.21 0 0 0 .208-.21V4.167c0-.805.652-1.457 1.458-1.458zm-2.544 1.25a.21.21 0 0 0-.208.208v2.895A1.46 1.46 0 0 1 7.062 8.52H4.168a.21.21 0 0 0-.208.208v2.544c0 .115.093.208.208.208h2.896c.805 0 1.458.653 1.458 1.459v2.894c0 .115.093.208.208.208h2.544a.21.21 0 0 0 .207-.208V12.94a1.46 1.46 0 0 1 1.46-1.46h2.894a.21.21 0 0 0 .208-.207V8.728a.21.21 0 0 0-.208-.208H12.94a1.46 1.46 0 0 1-1.46-1.46V4.167a.21.21 0 0 0-.207-.208z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Health;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const HeartFilled = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.935 5.965a3.404 3.404 0 0 1 4.749 0 3.25 3.25 0 0 1 0 4.66L10 16.667l-5.682-6.042a3.25 3.25 0 0 1 0-4.66 3.404 3.404 0 0 1 4.749 0l.933.917z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default HeartFilled;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Kindergarten = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M17.708 6.066v2.852l-3.205-.992c-.39.665-.514 1.473-.514 2.206a7 7 0 0 0 .157 1.468l.001.002.196.778h-1.278l1.258 2.992q.456-.16.818-.326a7 7 0 0 0 1.17-.664c.123-.088.211-.16.266-.206l.058-.051.009-.008c0 .001.017.02.439.444l.44.445h-.002l-.004.005-.01.009-.026.025q-.035.033-.095.083-.12.106-.35.271a8.4 8.4 0 0 1-1.376.784c-1.23.562-3.09 1.109-5.66 1.109s-4.43-.547-5.661-1.11a8.4 8.4 0 0 1-1.377-.783 5 5 0 0 1-.471-.38l-.01-.008-.004-.004c0-.001 0-.002.439-.446l.44-.444.008.008.057.05c.055.047.144.119.267.207.247.176.633.418 1.17.664q.361.166.817.326l1.258-2.992h-.827l-.183-.302v-.001l-.006-.008-.011-.02-.04-.07a9 9 0 0 1-.524-1.144c-.282-.744-.572-1.787-.572-2.94 0-.49-.201-.835-.513-1.075-.329-.253-.806-.404-1.341-.404v-1.25c.751 0 1.513.21 2.102.663.458.351.795.839.933 1.44h4.544q.032-.209.092-.464c.148-.61.448-1.413 1.065-2.126a9 9 0 0 1 1.57-1.437 7 7 0 0 1 .683-.433l.045-.024.014-.008.005-.002.002-.001.414-.205zm-10.822 9.65c.863.194 1.896.326 3.113.326s2.25-.132 3.114-.326L11.71 12.38H8.29zm7.254-11.59a7.8 7.8 0 0 0-1.543 1.37c-.446.516-.677 1.116-.795 1.603a4.4 4.4 0 0 0-.114.754l-.001.037v.63H6.054a7.6 7.6 0 0 0 .457 1.873c.116.306.231.557.32.737h5.97a8 8 0 0 1-.062-.998c0-.98.185-2.292 1.024-3.332l.266-.33 2.429.752v-.657z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Kindergarten;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Mask = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M6.758 16.208a5.79 5.79 0 0 1-3.667-4.25L1.666 4.167l1.375-.292 8.208-1.792 1.042-.208.523 2.433 4.202.884h.025l1.5.433-1.625 8.05a5.826 5.826 0 0 1-6.917 4.483 5.75 5.75 0 0 1-3.241-1.95M17.29 6.292 8.124 4.583l-1.457 7.042c-.475 2.233 1.299 4.983 3.54 5.458s5.15-1.508 5.626-3.75zm-3.957 7.458a2.47 2.47 0 0 1-2.642 1.158 2.475 2.475 0 0 1-1.942-2.125c1.586 1.036 2.575 1.241 4.584.967M7.058 4.308l-4.142.884L4.299 11.7c.125.592.492 1.633 1.325 2.258-.083-.641-.25-2.041-.108-2.708l.358-1.667c-.375-.066-.7-.275-.875-.575.05-.508.467-.958 1.042-1.091h.208l.65-3.175c.034-.159.084-.3.159-.434m5.466 5.884c.267-.442.834-.675 1.409-.55.575.116.991.558 1.066 1.075-.275.433-.833.666-1.416.533-.575-.108-.992-.55-1.059-1.058m-4.066-.867c.266-.442.825-.675 1.4-.55.558.117 1 .567 1.066 1.075-.275.433-.833.675-1.408.567-.575-.142-.992-.584-1.058-1.092m1.516-5.633 1.634.35-.134-.667z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Mask;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Menu = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 28 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M26 14.7H2v-1h24zm0-4.2H2v-1h24zm0-4.2H2v-1h24z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Menu;
@@ -0,0 +1,12 @@
+import * as React from "react";
+const MenuClosed = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 28 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M26 10.5H2v-1h24z" fill="currentColor" />
+  </svg>
+);
+export default MenuClosed;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Museum = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15.959 4.31v2.982h-.667v6.75h1v2h1v1.25H2.71v-1.25h1v-2h1v-6.75h-.667V4.31l5.959-1.625zm-11 11.732h10.083v-.75H4.96zm8-2h1.083v-6.75H12.96zm-2.333 0h1.083v-6.75h-1.083zM5.292 5.265v.777h9.417v-.777L10 3.981zm.667 8.777h1.083v-6.75H5.96zm2.333 0h1.084v-6.75H8.292z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Museum;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Park = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.003 1.875c1.061.006 2.141.363 2.964 1.096.742.66 1.244 1.602 1.347 2.789 1.737.7 2.39 2.471 2.061 4.053-.35 1.682-1.789 3.187-4.136 3.28l-.229.004h-1.384v2.945h2.424a.625.625 0 0 1 0 1.25H6.948a.625.625 0 0 1 0-1.25h2.428v-2.944H7.99c-2.482 0-4.004-1.548-4.365-3.284-.329-1.582.324-3.354 2.062-4.054.102-1.186.604-2.128 1.345-2.79.823-.732 1.903-1.089 2.964-1.095zM10 3.125c-.796.006-1.57.275-2.136.78-.555.494-.947 1.248-.947 2.31 0 .282-.19.529-.462.602-1.31.356-1.853 1.553-1.606 2.743.242 1.164 1.26 2.287 3.141 2.288h1.386V6.915a.625.625 0 0 1 1.25 0v1.458l.982-.571a.625.625 0 0 1 .628 1.08l-1.61.937v2.028h1.384c1.882 0 2.9-1.123 3.142-2.287.247-1.19-.296-2.387-1.607-2.743a.625.625 0 0 1-.46-.603c0-1.062-.394-1.815-.95-2.31-.565-.504-1.339-.773-2.135-.779"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Park;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const PingPong = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.551 4.267c2.673-2.673 7.085-2.883 9.638-.33s2.342 6.965-.33 9.638c-1.814 1.813-4.35 1.921-6.315 1.922l-2.275-.002a.2.2 0 0 0-.148.061l-2.014 2.015a1.46 1.46 0 0 1-2.063 0l-.48-.48a1.46 1.46 0 0 1 0-2.063l2.013-2.014a.2.2 0 0 0 .06-.147l-.009-2.283v-.003c0-1.964.11-4.5 1.923-6.314m-.663 8.594c.002.388-.152.762-.427 1.037l-2.014 2.014a.21.21 0 0 0 0 .294l.481.48a.21.21 0 0 0 .295 0l2.015-2.014a1.46 1.46 0 0 1 1.032-.427h.763l-2.148-2.148zm9.417-8.04c-2.004-2.004-5.622-1.918-7.87.33-1.35 1.349-1.54 3.262-1.555 5.173l3.921 3.922c1.91-.015 3.825-.207 5.174-1.556 2.248-2.248 2.333-5.866.33-7.87M11.458 5a1.041 1.041 0 1 1 0 2.081 1.041 1.041 0 0 1 0-2.082"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default PingPong;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Play = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 6.00428C5.00025 4.15135 6.90109 2.98937 8.42871 3.90858L15.0693 7.90565C16.6087 8.83224 16.6087 11.1705 15.0693 12.0971L8.42871 16.0931C6.90099 17.0125 5.00004 15.8506 5 13.9974V6.00428ZM7.80859 5.05213C7.11428 4.63438 6.25025 5.16217 6.25 6.00428V13.9974C6.25004 14.8397 7.1142 15.3684 7.80859 14.9506L14.4492 10.9535C15.1487 10.5322 15.1489 9.46933 14.4492 9.04822L7.80859 5.05213Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Play;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Pumped = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M2.709 13.472c0-1.106.223-2.586.507-3.963.283-1.373.638-2.695.926-3.519.483-1.662 1.605-2.865 3.051-2.865 2.885 0 4.276 1.02 4.477 2.261l.052.318-.23.226-2.205 2.183-.44-.458c-.517-.54-.872-.814-1.094-.946a18.7 18.7 0 0 0-.088 3.593c.811-.461 1.552-.587 2.217-.512.616.07 1.127.315 1.485.512 1.366-.919 2.522-1.111 3.492-.964.51.077.937.243 1.282.404.17.079.326.16.453.225a5 5 0 0 0 .308.149l-.47 1.158a5 5 0 0 1-.408-.194c-.135-.07-.268-.138-.412-.206a3.4 3.4 0 0 0-.94-.3c-.666-.101-1.602.01-2.895.97l-.323.24-.352-.196c-.417-.23-.817-.494-1.361-.556-.499-.056-1.203.058-2.15.839l-.765.631-.239-.963c-.273-1.1-.313-3.448-.011-5.452l.011-.077.03-.072a.95.95 0 0 1 .511-.512c.265-.11.546-.089.802-.007.382.122.828.418 1.369.924l1.026-1.016c-.25-.381-1.001-.952-3.132-.952-.654 0-1.45.57-1.855 1.978l-.005.017-.006.018c-.264.752-.608 2.025-.887 3.374-.279 1.354-.481 2.733-.481 3.71 0 .105.368 1.458 3.586 1.458.693 0 2.63.075 5.008-.987l.353-.158 2.405 1.983-.796.964-1.812-1.494c-2.475 1.016-4.48.942-5.158.942-3.45 0-4.836-1.53-4.836-2.708"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Pumped;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const RC = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.312 5.317c0-1.516 1.707-2.405 2.95-1.536l1.042.73c.5.35.8.924.8 1.536v3.31c0 .201.097.39.261.508l1.432 1.024c.492.352.786.92.786 1.525v3.42q-.002.33-.107.625h1.606a.625.625 0 0 1 0 1.25H2.916a.625.625 0 0 1 0-1.25H4.77V9.234c0-.611.298-1.185.8-1.536l2.742-1.92zM6.286 8.723a.63.63 0 0 0-.266.511v7.225h2.292V7.305zm4.259-3.917a.625.625 0 0 0-.983.511V16.46h4.146c.345 0 .625-.28.625-.625v-3.42a.63.63 0 0 0-.263-.509l-1.431-1.022a1.88 1.88 0 0 1-.785-1.527v-3.31c0-.203-.1-.394-.267-.51z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default RC;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Rest = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.718 1.074a.626.626 0 0 1 .79.395l2.676 8.028a1.04 1.04 0 0 0 .989.712h8.243a.625.625 0 0 1 0 1.25h-1.49l2.351 4.7c.436-.248.86-.522 1.264-.825a.625.625 0 0 1 .75 1c-.626.47-1.292.876-1.984 1.224l-.022.015-.027.01a13.1 13.1 0 0 1-5.842 1.376c-2.04 0-4.038-.478-5.845-1.376l-.025-.01-.022-.015a13 13 0 0 1-1.983-1.224.625.625 0 0 1 .75-1q.607.454 1.263.825l2.358-4.718a2.29 2.29 0 0 1-1.914-1.549L2.323 1.865a.625.625 0 0 1 .395-.791m2.954 15.643c1.488.649 3.101.992 4.744.992a11.9 11.9 0 0 0 4.743-.992l-2.63-5.258H8.302z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Rest;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Rewind = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.504 4.492C15.74 3.438 17.5 4.447 17.5 6.21v7.162c0 1.763-1.76 2.773-2.996 1.718l-4.046-3.45v1.732c0 1.763-1.76 2.773-2.996 1.718l-4.2-3.582c-1.006-.857-1.005-2.578 0-3.435l4.2-3.582c1.237-1.054 2.996-.045 2.996 1.719v1.731zM9.208 6.21c0-.588-.587-.925-.999-.574l-4.2 3.581c-.335.286-.335.86 0 1.146l4.2 3.582c.412.351.999.014.999-.573zm7.042 0c0-.588-.587-.925-.999-.574l-4.2 3.581c-.335.286-.335.86 0 1.146l4.201 3.582c.412.35.998.014.998-.573z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Rewind;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const RewindForward = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.542 6.21c0-1.763 1.76-2.772 2.996-1.718l4.2 3.582c1.006.857 1.006 2.579 0 3.436l-4.2 3.582c-1.237 1.054-2.996.044-2.996-1.72v-1.73l-4.046 3.45c-1.237 1.054-2.996.044-2.996-1.72v-7.16c0-1.764 1.76-2.773 2.996-1.719l4.046 3.45zm-4.793-.572c-.412-.352-.999-.015-.999.573v7.162c0 .588.586.924.998.572l4.201-3.58c.335-.287.335-.86 0-1.146zm7.042 0c-.412-.352-.999-.015-.999.573v7.162c0 .588.587.924.999.572l4.2-3.58c.335-.287.335-.86 0-1.146z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default RewindForward;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Road = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.786 2.692a.72.72 0 0 1 .607.817l-1.92 12.96a.72.72 0 0 1-1.424-.21l1.92-12.96a.72.72 0 0 1 .817-.607m8.428 0a.72.72 0 0 1 .817.606l1.92 12.96a.72.72 0 0 1-1.424.211l-1.92-12.96a.72.72 0 0 1 .607-.817M10 15.282a.72.72 0 0 1 .72.72v.36a.72.72 0 0 1-1.44 0v-.36a.72.72 0 0 1 .72-.72m0-4.32a.72.72 0 0 1 .72.72v.72a.72.72 0 0 1-1.44 0v-.72a.72.72 0 0 1 .72-.72m0-4.319a.72.72 0 0 1 .72.72v.72a.72.72 0 0 1-1.44 0v-.72a.72.72 0 0 1 .72-.72m0-3.96a.72.72 0 0 1 .72.72v.36a.72.72 0 0 1-1.44 0v-.36a.72.72 0 0 1 .72-.72"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Road;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Sale = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5.328 16.577a.831.831 0 0 1-1.198-1.153l11.542-12a.831.831 0 1 1 1.198 1.152zm9.215.923q-.95 0-1.738-.48a3.7 3.7 0 0 1-1.249-1.3 3.6 3.6 0 0 1-.47-1.82q0-.98.48-1.8t1.268-1.31a3.2 3.2 0 0 1 1.709-.49q.95 0 1.738.49.787.48 1.249 1.3.47.81.47 1.81t-.47 1.82q-.462.81-1.249 1.3-.787.48-1.738.48m0-1.57q.528 0 .97-.28.451-.28.71-.74.27-.46.27-1.01t-.27-1.01a1.93 1.93 0 0 0-.71-.74 1.8 1.8 0 0 0-.97-.28q-.528 0-.97.28-.442.27-.71.74-.27.46-.27 1.01t.27 1.01.71.74.97.28M6.457 9.7q-.95 0-1.738-.48a3.7 3.7 0 0 1-1.258-1.3A3.65 3.65 0 0 1 3 6.1q0-.98.48-1.8t1.268-1.31a3.2 3.2 0 0 1 1.71-.49q.95 0 1.728.49.787.48 1.258 1.3.47.81.47 1.81t-.47 1.82a3.7 3.7 0 0 1-1.258 1.3q-.778.48-1.729.48m0-1.57q.529 0 .97-.28.451-.28.71-.74.27-.46.27-1.01t-.27-1.01a1.93 1.93 0 0 0-.71-.74 1.8 1.8 0 0 0-.97-.28q-.528 0-.97.28-.441.27-.71.74-.27.46-.27 1.01t.27 1.01.71.74q.442.28.97.28"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Sale;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Salon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M17.292 3.542v12.916h-4.484v-1.25h3.234v-1.666h-3.234v-1.25h3.234v-1.667h-3.234v-1.25h3.234V7.708h-3.234v-1.25h3.234V4.792h-3.234v-1.25zm-11.087 9.42c0-.322-.128-.61-.333-.819a1.1 1.1 0 0 0-.79-.333c-.61 0-1.123.506-1.123 1.152s.512 1.152 1.123 1.152c.61 0 1.123-.505 1.123-1.152m5.294-.29-.891.877-1.823-1.854.891-.876zM6.205 7.038c0-.647-.513-1.153-1.123-1.153s-1.123.506-1.123 1.153c0 .646.512 1.152 1.123 1.152.306 0 .585-.125.79-.334a1.16 1.16 0 0 0 .333-.818m1.25 0c0 .436-.117.845-.318 1.198l.858.872 2.613-2.657.89.877-4.361 4.435c.201.354.318.763.318 1.2 0 1.316-1.053 2.402-2.373 2.402s-2.373-1.086-2.373-2.403 1.052-2.402 2.373-2.402c.428 0 .829.115 1.175.315l.86-.875-.86-.876a2.34 2.34 0 0 1-1.175.316c-1.32 0-2.373-1.085-2.373-2.402s1.052-2.403 2.373-2.403c1.32 0 2.373 1.086 2.373 2.403"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Salon;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Save = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.668 10.301c.345 0 .625.28.625.625V15a2.29 2.29 0 0 1-2.292 2.292h-10A2.29 2.29 0 0 1 2.709 15v-4.074a.626.626 0 0 1 1.25 0V15c0 .576.467 1.042 1.042 1.042h10c.575 0 1.042-.466 1.042-1.042v-4.074c0-.345.28-.625.625-.625m-6.67-7.593c.345 0 .625.28.625.625l.002 8.122 2.268-2.267a.625.625 0 0 1 .883.884l-3.334 3.334a.625.625 0 0 1-.883 0l-3.333-3.334a.625.625 0 0 1 .883-.884l2.266 2.265-.002-8.12c0-.345.28-.625.625-.625"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Save;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Science = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.271 2.292a1.354 1.354 0 0 1 1.354 1.354V5.21h.209c.345 0 .625.28.625.625v.625h.052c1.434 0 2.801.6 3.804 1.659a5.77 5.77 0 0 1 1.56 3.966 5.77 5.77 0 0 1-1.56 3.965 6 6 0 0 1-.434.41h1.369a.625.625 0 1 1 0 1.25H3.75a.626.626 0 0 1 0-1.25h7.76a4 4 0 0 0 2.9-1.27 4.52 4.52 0 0 0 1.215-3.105c0-1.17-.44-2.288-1.216-3.106a4 4 0 0 0-2.898-1.27h-.052v.903c0 .554-.243 1.072-.652 1.444-.408.37-.949.57-1.501.57H7.778a2.23 2.23 0 0 1-1.5-.57 1.95 1.95 0 0 1-.653-1.444V5.834c0-.345.28-.625.625-.625h.209V3.646a1.355 1.355 0 0 1 1.354-1.354zm2.396 12.083a.625.625 0 0 1 0 1.25H5.834a.625.625 0 1 1 0-1.25zm-2.5-3.333a.625.625 0 0 1 0 1.25h-1.25a.625.625 0 0 1 0-1.25zM6.875 8.61c0 .182.08.37.243.52a1 1 0 0 0 .66.244h1.528a1 1 0 0 0 .66-.245.7.7 0 0 0 .243-.519V6.459H6.875zm.938-5.07a.1.1 0 0 0-.074.03.1.1 0 0 0-.03.075V5.21h1.666V3.646a.104.104 0 0 0-.104-.104z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Science;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Scooter = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.713 3.409a.625.625 0 0 1 0 1.25H14.85l1.268 7.01a2.49 2.49 0 1 1-1.26.053l-.31-1.712a4.22 4.22 0 0 0-2.996 2.865l-.081.306c-.136.613-.669 1.173-1.403 1.173H6.884a2.49 2.49 0 1 1-.197-1.25h3.382c.028 0 .06-.01.096-.042a.3.3 0 0 0 .087-.151v-.001a5.47 5.47 0 0 1 4.073-4.134l-.838-4.63a.626.626 0 0 1 .615-.737zM4.407 12.862a1.24 1.24 0 1 0 .002 2.48 1.24 1.24 0 0 0-.002-2.48m11.298.027a.6.6 0 0 1-.277-.014 1.239 1.239 0 1 0 .329-.001c-.017.004-.034.012-.052.015"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Scooter;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const SeaWaves = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.924 6.042a.597.597 0 0 0-.907 0l-.002.002-.01.012-.05.054q-.068.074-.204.206a7 7 0 0 1-.778.639c-.67.47-1.56.904-2.542.904a.597.597 0 0 0 0 1.194c1.326 0 2.456-.579 3.228-1.12.33-.233.604-.464.811-.654.207.19.48.421.81.653.773.542 1.903 1.121 3.229 1.121 1.312 0 2.577-.569 3.475-1.094a12 12 0 0 0 1.136-.76l.024.019c.254.198.613.463 1.029.729.8.51 1.938 1.106 2.99 1.106a.597.597 0 0 0 0-1.194c-.68 0-1.561-.417-2.347-.92A12 12 0 0 1 14.539 6l-.017-.014-.004-.003a.6.6 0 0 0-.788 0l-.003.002-.016.014-.07.058q-.093.077-.273.214c-.238.18-.58.419-.988.658-.832.487-1.875.93-2.871.93-.982 0-1.872-.433-2.542-.903a6.7 6.7 0 0 1-.982-.845l-.05-.054-.01-.012zm8.594 4.666.004.003.017.015.07.059c.062.051.154.127.27.217.233.182.56.423.937.664.786.502 1.668.919 2.347.919a.597.597 0 0 1 0 1.194c-1.052 0-2.19-.595-2.99-1.106a14 14 0 0 1-1.053-.748l-.034.025a12 12 0 0 1-1.102.735c-.898.525-2.163 1.094-3.475 1.094-1.326 0-2.456-.579-3.228-1.12a8 8 0 0 1-.811-.655c-.207.19-.48.422-.81.654-.773.542-1.903 1.121-3.229 1.121a.597.597 0 0 1 0-1.194c.982 0 1.872-.434 2.542-.905a6.7 6.7 0 0 0 .982-.844l.05-.054.01-.012.001-.002a.597.597 0 0 1 .908 0l.001.002.01.012.05.053q.068.075.205.207c.181.174.446.406.777.639.67.47 1.56.904 2.542.904.996 0 2.039-.444 2.871-.931a10.4 10.4 0 0 0 1.33-.93l.017-.014.003-.002a.6.6 0 0 1 .788 0"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SeaWaves;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Search = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.18 2.003a7.178 7.178 0 0 1 5.507 11.78l2.859 2.86a.639.639 0 0 1-.902.903l-2.86-2.86A7.177 7.177 0 1 1 9.18 2.003m0 1.277a5.9 5.9 0 1 0 0 11.8 5.9 5.9 0 0 0 0-11.8"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Search;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Send = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M2.709 15v-4.074a.625.625 0 0 1 1.25 0V15c0 .575.466 1.042 1.042 1.042h10c.575 0 1.041-.467 1.041-1.042v-4.074a.625.625 0 0 1 1.25 0V15a2.29 2.29 0 0 1-2.291 2.292H5A2.29 2.29 0 0 1 2.709 15m6.663-2.037a.625.625 0 0 0 1.25 0l.003-8.121 2.267 2.267a.625.625 0 1 0 .884-.884L10.443 2.89a.625.625 0 0 0-.884 0L6.225 6.225a.625.625 0 0 0 .884.884l2.266-2.266z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Send;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Shop = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10 2.292c2.457 0 4.406 1.992 4.69 4.474h3.133l-1.777 10.526H3.955L2.178 6.765h3.134C5.595 4.284 7.544 2.292 10 2.292m-4.989 13.75h9.978l1.355-8.027H3.656zm4.99-12.5c-1.687 0-3.158 1.359-3.43 3.224h6.86C13.158 4.9 11.687 3.542 10 3.542"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Shop;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const SportsGround = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M17.708 3.958v12.084H2.29V3.958zM4.77 10a.806.806 0 0 0-.792-.82h-.437v1.64h.437A.806.806 0 0 0 4.77 10m1.25 0c0 1.131-.903 2.07-2.042 2.07h-.437v2.722h5.833V11.97A2.07 2.07 0 0 1 7.958 10c0-.914.59-1.702 1.416-1.971v-2.82H3.541V7.93h.437c1.14 0 2.042.938 2.042 2.069m3.188 0c0 .464.366.82.791.82a.806.806 0 0 0 .792-.82.806.806 0 0 0-.792-.82.806.806 0 0 0-.791.82m2.833 0a2.07 2.07 0 0 1-1.417 1.97v2.822h5.834V12.07h-.438c-1.139 0-2.042-.938-2.042-2.07s.903-2.07 2.042-2.07h.438V5.209h-5.834V8.03A2.07 2.07 0 0 1 12.041 10m3.187 0c0 .464.366.82.792.82h.438V9.18h-.438a.806.806 0 0 0-.792.82"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SportsGround;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Stylobate = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.458 13.218H3.54v2.708c0 .06.05.116.12.116h12.676c.07 0 .12-.056.12-.116zM12.357 9.63a2.35 2.35 0 0 0-2.358-2.338A2.35 2.35 0 0 0 7.642 9.63v.625h-1.25V9.63c0-1.986 1.619-3.588 3.607-3.588s3.608 1.602 3.608 3.588v.625h-1.25zm-5.42-4.294-.881.886-1.414-1.404.88-.887zm8.202-.518-1.414 1.404-.881-.886 1.414-1.405zm-5.765-2.11h1.25v1.99h-1.25zm8.334 13.218c0 .758-.618 1.366-1.37 1.366H3.66c-.752 0-1.37-.608-1.37-1.366V9.375h1.25v2.593h12.917V9.375h1.25z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Stylobate;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Subway = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M17.026 13.845 13.22 4.167 10 9.824 6.794 4.167l-3.82 9.678h-1.12v1.467h5.76v-1.467h-.86l.835-2.41L10 15.417l2.411-3.982.835 2.41h-.86v1.467h5.76v-1.467z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Subway;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Surroundings = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12.998 9.496c.111-.41.538-.655.937-.508 2.218.818 3.565 2.278 3.565 3.922 0 2.573-3.295 4.59-7.5 4.59s-7.5-2.017-7.5-4.59c0-1.644 1.347-3.104 3.566-3.922.4-.147.825.097.936.507.11.404-.128.817-.52.967C4.952 11.046 4 11.967 4 12.91c0 1.447 2.464 3.06 6 3.06s6-1.613 6-3.06c0-.943-.953-1.863-2.481-2.447-.392-.15-.63-.563-.521-.967M10 2.5c1.608 0 2.917 1.346 2.917 3 0 1.393-.933 2.558-2.187 2.894v3.856l-.73 1.5-.73-1.5V8.394c-1.254-.336-2.187-1.5-2.187-2.894 0-1.654 1.308-3 2.917-3M10 4c-.804 0-1.458.673-1.458 1.5S9.196 7 10 7s1.458-.673 1.458-1.5S10.804 4 10 4"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Surroundings;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Tennis = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.183 2.71a7.292 7.292 0 1 1-.37 14.58 7.292 7.292 0 0 1 .37-14.58M10.698 4q-.06.331-.143.658l-.001.002a8.2 8.2 0 0 1-2.998 4.468 8.2 8.2 0 0 1-3.564 1.526 6.04 6.04 0 0 0 5.57 5.372c.284-1.895 1.05-3.73 2.618-5.013a8.24 8.24 0 0 1 3.588-1.703 2 2 0 0 1 .23-.03 6.044 6.044 0 0 0-5.3-5.28m5.318 6.534a7 7 0 0 0-3.044 1.446c-1.198.982-1.859 2.403-2.136 4.004a6.045 6.045 0 0 0 5.168-5.315zM9.429 3.985a6.04 6.04 0 0 0-5.44 5.398 6.91 6.91 0 0 0 5.356-5.04l.043-.176q.021-.09.04-.182"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Tennis;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Theater = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.856 2.723a.625.625 0 0 1 .74.465l.485 2.03 4.143.965c.331.077.54.405.47.737l-1.372 6.512-.001.005c-.756 3.451-3.767 4.705-6.333 4.14-1.08-.239-2.1-.8-2.856-1.664-1.548-.591-2.86-1.962-3.36-4.183L2.307 5.435a.625.625 0 0 1 .477-.753zm-4.574 8.415-.001.004c-.343 1.529-.067 2.715.499 3.565.573.86 1.477 1.428 2.478 1.649 1.994.44 4.256-.509 4.842-3.186l1.245-5.909-7.826-1.823zm1.693 1.536a.63.63 0 0 1 .58.01c.846.461 1.564.76 3.09.76a.625.625 0 0 1 .572.875c-.521 1.197-1.827 1.406-2.773 1.166-.936-.239-1.993-1.048-1.808-2.341l.016-.075a.63.63 0 0 1 .323-.395M3.668 5.77l1.323 5.682v.003c.205.906.561 1.614 1.006 2.15-.168-.816-.16-1.732.063-2.733l.193-.884a1.4 1.4 0 0 1-.47-.087 1.7 1.7 0 0 1-.284-.136l-.022-.014-.008-.005-.003-.002-.002-.001a.625.625 0 0 1-.208-.814v-.003l.003-.004.004-.008.013-.021a1.3 1.3 0 0 1 .174-.238c.113-.127.313-.31.604-.396l.107-.026c.177-.036.342-.027.474-.007l.705-3.25zm9.995 3.95.11.02.106.029c.239.077.416.215.523.314a2 2 0 0 1 .195.217l.015.02.005.006.004.004v.002a.625.625 0 0 1-.123.842l-.002.002-.003.002-.008.006-.02.016a1.4 1.4 0 0 1-.273.16 1.24 1.24 0 0 1-.787.103 1.26 1.26 0 0 1-.668-.422 2 2 0 0 1-.143-.191q-.025-.039-.04-.066l-.012-.022-.006-.012h-.001v-.002a.626.626 0 0 1 .214-.812l.34.524a32 32 0 0 1-.34-.525h.002v-.001l.004-.002.008-.005.02-.013a1.4 1.4 0 0 1 .27-.123c.14-.049.359-.103.61-.07m-3.834-.766.11.019.106.03c.239.076.416.216.523.315a2 2 0 0 1 .196.216l.015.02.005.007.002.003v.002l-.513.354.515-.353a.625.625 0 0 1-.078.8l-.045.04-.002.002-.004.003-.008.006q-.009.008-.02.015l-.063.044a2 2 0 0 1-.209.117 1.24 1.24 0 0 1-.787.103 1.26 1.26 0 0 1-.669-.422 1.7 1.7 0 0 1-.183-.257l-.011-.022-.005-.008-.002-.005-.001-.001a.625.625 0 0 1 .214-.812l.002-.002h.002l.003-.002.007-.005.022-.013q.025-.015.063-.034a1.36 1.36 0 0 1 .814-.16M9.784 4.45l1.935.45-.197-.825z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Theater;
@@ -0,0 +1,21 @@
+import * as React from "react";
+const Tour3D = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.333 13.334c1.204 0 1.946-.909 1.946-2.145S8.56 9.485 7.827 9.335l1.172-1.357a.82.82 0 0 0 .195-.537c0-.427-.312-.774-.696-.774H6.097c-.307 0-.556.277-.556.618s.249.618.556.618h1.568L6.6 9.202a.77.77 0 0 0-.152.636l.004.019c.064.314.314.537.603.537.664 0 1.058.3 1.058.833 0 .505-.317.814-.765.814-.32 0-.584-.095-.823-.275-.294-.222-.699-.26-.945.024-.204.236-.227.61-.008.829.435.434 1.008.715 1.76.715m2.272-1.363c0 .69.502 1.25 1.123 1.25h.985c1.698 0 2.872-1.432 2.872-3.277 0-1.863-1.174-3.277-2.872-3.277h-.985c-.62 0-1.123.56-1.123 1.25zm1.563-.051c-.207 0-.374-.187-.374-.417V8.385c0-.23.167-.417.374-.417h.545c.973 0 1.629.815 1.629 1.976 0 1.18-.656 1.976-1.63 1.976z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.084 9.167c.345 0 .625.28.625.625v.347a7.153 7.153 0 0 0 6.594 7.131l-.266-.266a.833.833 0 0 1 0-1.179l.294-.294 2.3 2.3a.417.417 0 0 1-.294.711H9.862a8.403 8.403 0 0 1-8.403-8.403v-.347c0-.345.28-.625.625-.625m15.833 1.667a.625.625 0 0 1-.625-.625V9.86a7.153 7.153 0 0 0-6.594-7.13l.266.266a.833.833 0 0 1 0 1.178l-.294.295-2.3-2.3a.417.417 0 0 1 .294-.711h1.476a8.403 8.403 0 0 1 8.402 8.402v.348c0 .345-.28.625-.625.625"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Tour3D;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Train = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12.5 16.25a.625.625 0 1 1 0 1.25h-5a.625.625 0 1 1 0-1.25zM10.574 1.875c.332 0 .65.132.884.366l.518.518c.234.234.553.366.884.366h1.176a1.25 1.25 0 0 1 1.24 1.085l.76 5.707.009.07-.006.07-.365 4.014a1.25 1.25 0 0 1-1.244 1.137H5.57a1.25 1.25 0 0 1-1.244-1.137l-.365-4.014-.006-.07.009-.07.808-6.068a.834.834 0 0 1 .827-.724h1.54c.332 0 .651-.132.885-.366l.518-.518a1.25 1.25 0 0 1 .884-.366zM5.571 13.958h8.858l.303-3.333H5.268zM7.5 11.667a.625.625 0 1 1 0 1.25h-.417a.626.626 0 0 1 0-1.25zm5.417 0a.625.625 0 0 1 0 1.25H12.5a.625.625 0 0 1 0-1.25zm-7.62-2.292h9.405l-.666-5H5.964z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Train;
@@ -0,0 +1,15 @@
+import * as React from "react";
+const Tram = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.237 2.292v1.25h-2.44l-.168.874h4.413v13.292H3.96V4.416h4.413l-.16-.874H5.764v-1.25zM5.209 16.458h9.583v-3.495H5.21zm2.986-2.479v1.25H6.39v-1.25zm5.416 0v1.25h-1.805v-1.25zM5.21 11.713h9.583V5.666H5.21zm4.434-7.297h.712l.17-.874H9.481z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Tram;
@@ -0,0 +1,19 @@
+import * as React from "react";
+const WalkStreet = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.459 2.083v2.084h-1.042V2.083zm0 4.567v2.084h-1.042V6.651zm0 8.975v2.083h-1.042v-2.083zm0-4.713v2.084h-1.042v-2.084zM4.376 15.625v2.083H3.334v-2.083zm0-4.713v2.084H3.334v-2.084zm0-4.262v2.084H3.334V6.651zm0-4.567v2.084H3.334V2.083zm7.219 6.18-.409 1.442 2.053 1.677.511-1.006zm-3.003 3.953 1.043.888-1.342 3.607-1.232-.37z"
+      fill="currentColor"
+    />
+    <path
+      d="m10.929 17.077 1.326.006v-3.98c-.481-.494-1.91-1.894-1.91-1.894l1.011-3.888c.075-.31.036-.656-.29-.659-.523-.003-1.408-.008-1.4.003l-1.529.566c-.773.366-.932.959-1.187 1.492l-.7 1.951 1.022.503.828-2.202c.146-.381.548-.802.97-.712l-.777 2.914s2.043 1.84 2.636 2.348zm1.079-12.323c0 .785-.64 1.421-1.432 1.421a1.427 1.427 0 0 1-1.432-1.42c0-.785.64-1.422 1.432-1.422s1.432.636 1.432 1.421"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default WalkStreet;
@@ -0,0 +1,17 @@
+import * as React from "react";
+const Work = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.112 2.708A2.29 2.29 0 0 1 13.404 5v.088q1.002.093 1.995.242c1.113.167 1.894 1.135 1.894 2.23v2.798l-.003.12a2.24 2.24 0 0 1-.553 1.37v2.893c0 1.108-.8 2.084-1.93 2.234a36.5 36.5 0 0 1-9.613 0c-1.13-.15-1.93-1.126-1.93-2.235v-2.89a2.24 2.24 0 0 1-.555-1.491V7.56c0-1.095.781-2.063 1.894-2.23q.994-.149 1.995-.242V5A2.294 2.294 0 0 1 8.89 2.708zm4.375 9.863a18.4 18.4 0 0 1-5.486.832l-.714-.014a18.4 18.4 0 0 1-4.772-.818v2.17a.99.99 0 0 0 .843.995 35.3 35.3 0 0 0 9.286 0 .99.99 0 0 0 .843-.995zM12.73 6.285a35.4 35.4 0 0 0-7.942.282.99.99 0 0 0-.829.993v2.807a1 1 0 0 0 .338.751.9.9 0 0 0 .289.162l.32.104c1.61.5 3.32.769 5.096.769 1.84.002 3.667-.293 5.413-.872a.9.9 0 0 0 .29-.164 1 1 0 0 0 .338-.75V7.56a.99.99 0 0 0-.83-.993 35 35 0 0 0-2.482-.282M10.008 9.93c.345 0 .625.28.625.625v.007c0 .345-.28.625-.625.625H10a.625.625 0 0 1-.625-.625v-.007c0-.345.28-.625.625-.625zM8.89 3.958a1.04 1.04 0 0 0-1.042 1.035 37 37 0 0 1 4.305 0 1.043 1.043 0 0 0-1.04-1.035z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default Work;
@@ -0,0 +1,24 @@
+/* eslint-disable @next/next/no-img-element */
+import React from "react";
+
+export default function Hero() {
+  return (
+    <section
+      id="hero"
+      className="relative w-full h-screen bg-[url('/img/bg/sky.png')] bg-cover bg-center 
+      lg:px-[1.667vw] lg:pt-[7.986vw]"
+    >
+      <h1 className="text-[7.778vw] leading-[0.7] w-full font-light flex flex-col gap-[0.556vw] select-none">
+        <span className="block">Жизнь на высоте</span>
+        <span className="block ml-auto">с видом на залив</span>
+      </h1>
+
+      <img
+        src="/img/mocks/building.png"
+        alt="Hero"
+        draggable={false}
+        className="object-cover absolute bottom-0 left-1/2 -translate-x-1/2 w-[75%] select-none"
+      />
+    </section>
+  );
+}
@@ -0,0 +1,61 @@
+import React from "react";
+import BookSlider from "../ui/BookSlider";
+
+export default function Overview() {
+  return (
+    <section
+      id="overview"
+      className="relative w-full h-screen bg-[url('/img/bg/building.png')] bg-cover bg-center 
+      lg:px-[1.667vw]"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 lg:w-[55.556vw] lg:h-[33.889vw]">
+        <BookSlider>
+          <div className="bg-white p-[1.111vw] flex flex-col">
+            <div className="text-black caption-s">
+              {"(1) Концепция проекта"}
+            </div>
+            <div className="text-black block text-m mt-[24.131vw] ">
+              Центр города. Берег залива. Место, где архитектура становится
+              искусством, а дом — вашей личной сценой. Мы продумали каждую
+              деталь, чтобы вы могли жить, не идя на компромиссы
+            </div>
+          </div>
+          <div className="bg-[url('/img/mocks/bookPage.png')] bg-cover bg-center" />
+          <div className="bg-white p-[1.111vw] flex flex-col">
+            <div className="text-black caption-s">
+              {"(1) Концепция проекта"}
+            </div>
+            <div className="text-black block text-m mt-[24.131vw] ">
+              Центр города. Берег залива. Место, где архитектура становится
+              искусством, а дом — вашей личной сценой. Мы продумали каждую
+              деталь, чтобы вы могли жить, не идя на компромиссы
+            </div>
+          </div>
+          <div className="bg-[url('/img/mocks/bookPage.png')] bg-cover bg-center" />
+          <div className="bg-white p-[1.111vw] flex flex-col">
+            <div className="text-black caption-s">
+              {"(1) Концепция проекта"}
+            </div>
+            <div className="text-black block text-m mt-[24.131vw] ">
+              Центр города. Берег залива. Место, где архитектура становится
+              искусством, а дом — вашей личной сценой. Мы продумали каждую
+              деталь, чтобы вы могли жить, не идя на компромиссы
+            </div>
+          </div>
+          <div className="bg-[url('/img/mocks/bookPage.png')] bg-cover bg-center" />
+          <div className="bg-white p-[1.111vw] flex flex-col">
+            <div className="text-black caption-s">
+              {"(1) Концепция проекта"}
+            </div>
+            <div className="text-black block text-m mt-[24.131vw] ">
+              Центр города. Берег залива. Место, где архитектура становится
+              искусством, а дом — вашей личной сценой. Мы продумали каждую
+              деталь, чтобы вы могли жить, не идя на компромиссы
+            </div>
+          </div>
+          <div className="bg-[url('/img/mocks/bookPage.png')] bg-cover bg-center" />
+        </BookSlider>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,100 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect, useRef } from "react";
+import { useAppStateStore } from "@/stores/useAppStateStore";
+
+export default function Premiere() {
+  const ref = useRef<HTMLDivElement>(null);
+  const { setHeaderColorScheme } = useAppStateStore();
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setHeaderColorScheme("Dark");
+      } else {
+        setHeaderColorScheme("Light");
+      }
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [setHeaderColorScheme]);
+
+  return (
+    <section
+      id="premiere"
+      className="relative w-full min-h-screen text-black bg-white bg-cover bg-center 
+  lg:px-[1.667vw] lg:pt-[7.778vw] lg:pb-[9.444vw]"
+    >
+      <div
+        ref={ref}
+        className="absolute top-[95dvh] left-0 w-full h-[calc(100%-95dvh)]"
+      />
+
+      <h2 className="text-[5.556vw] lg:px-[calc(7.153vw-1.667vw)] leading-[1] w-full font-light flex flex-col gap-[0.556vw] select-none">
+        <span className="block">Дягилев — премьера,</span>
+        <span className="block ml-auto">которая вдохновляет</span>
+      </h2>
+
+      <div className="w-full lg:mt-[4.444vw] flex lg:gap-[1.389vw] lg:h-[30.556vw]">
+        <img
+          className="h-full object-cover"
+          src="/img/premiere/1.png"
+          alt="Premiere"
+        />
+
+        <div className="flex flex-col justify-end">
+          <span className="lg:text-[7.778vw] lg:leading-[1] text-black">
+            124
+          </span>
+          <span className="lg:title-m text-[#262626]/25 ">
+            продуманных планировки
+          </span>
+        </div>
+      </div>
+
+      <div className="w-full lg:-mt-[14.444vw] flex justify-between lg:gap-[4.444vw] lg:h-[37.5vw]">
+        <div className="flex flex-col justify-end lg:ml-[8.333vw]">
+          <span className="lg:text-[7.778vw] lg:leading-[1] text-black">
+            8-12
+          </span>
+          <span className="lg:title-s text-[#262626]/25 ">
+            переменная этажность
+          </span>
+        </div>
+
+        <img
+          className="h-full object-cover"
+          src="/img/premiere/2.png"
+          alt="Premiere"
+        />
+      </div>
+
+      <div className="w-full lg:mt-[4.444vw] flex justify-between lg:gap-[4.583vw] lg:h-[38.889vw]">
+        <div className="flex flex-col justify-end lg:ml-[16.667vw]">
+          <span className="lg:text-[7.778vw] lg:leading-[1] text-black">
+            145
+          </span>
+          <span className="lg:title-m text-[#262626]/25 ">
+            парковочных мест
+          </span>
+        </div>
+
+        <img
+          className="h-full object-cover"
+          src="/img/premiere/3.png"
+          alt="Premiere"
+        />
+
+        <div className="flex flex-col justify-center">
+          <span className="lg:text-[7.778vw] lg:leading-[1] text-black">
+            3-3,9м
+          </span>
+          <span className="lg:title-m text-[#262626]/25 ">высота потолков</span>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,177 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from "react";
+import Arrow from "@/components/icons/Arrow";
+import clsx from "clsx";
+import { motion, AnimatePresence } from "motion/react";
+import HTMLFlipBook from "react-pageflip";
+
+const FLIPPING_TIME = 500;
+
+export default function BookSlider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [cursorOnRightSide, setCursorOnRightSide] = useState(false);
+  const [bookWidth, setBookWidth] = useState(0);
+  const [bookHeight, setBookHeight] = useState(0);
+  const flipBookRef = useRef(null);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const rectRef = useRef<DOMRect | null>(null);
+  const frameRef = useRef<number | null>(null);
+  const isFlipping = useRef(false);
+  const lastMouseEvent = useRef<MouseEvent | null>(null);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    if (sliderRef.current) {
+      rectRef.current = sliderRef.current.getBoundingClientRect();
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+
+    if (frameRef.current) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    if (sliderRef.current) {
+      setBookWidth(sliderRef.current.getBoundingClientRect().width);
+      setBookHeight(sliderRef.current.getBoundingClientRect().height);
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      lastMouseEvent.current = e;
+
+      if (!rectRef.current) return;
+
+      const x = e.clientX - rectRef.current.left;
+      const y = e.clientY - rectRef.current.top;
+
+      const inside =
+        e.clientX >= rectRef.current.left &&
+        e.clientX <= rectRef.current.right &&
+        e.clientY >= rectRef.current.top &&
+        e.clientY <= rectRef.current.bottom;
+
+      if (!inside) {
+        setIsHovered(false);
+        return;
+      }
+
+      setIsHovered(true);
+
+      if (frameRef.current) return;
+      frameRef.current = requestAnimationFrame(() => {
+        setCursorPosition({ x, y });
+        setCursorOnRightSide(x > rectRef.current!.width / 2);
+        frameRef.current = null;
+      });
+    };
+
+    const handleScroll = () => {
+      if (!sliderRef.current || !lastMouseEvent.current) return;
+      rectRef.current = sliderRef.current.getBoundingClientRect();
+      handleMove(lastMouseEvent.current);
+    };
+
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("scroll", handleScroll, true);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, []);
+
+  const handleClick = () => {
+    if (flipBookRef.current && !isFlipping.current) {
+      isFlipping.current = true;
+      if (cursorOnRightSide) (flipBookRef.current as any).pageFlip().flipNext();
+      else (flipBookRef.current as any).pageFlip().flipPrev();
+      setTimeout(() => {
+        isFlipping.current = false;
+      }, FLIPPING_TIME);
+    }
+  };
+
+  return (
+    <div
+      ref={sliderRef}
+      className="w-full relative h-full hover:cursor-none"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+    >
+      <AnimatePresence mode="wait">
+        {isHovered && (
+          <CursorButton
+            x={cursorPosition.x}
+            y={cursorPosition.y}
+            rightSide={cursorOnRightSide}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* @ts-expect-error Почему то хочет чтобы были вообще все пропсы (даже необязательные), хотя работает только и без них */}
+      <HTMLFlipBook
+        key={`${bookWidth}-${bookHeight}`}
+        ref={flipBookRef}
+        width={bookWidth / 2}
+        height={bookHeight}
+        flippingTime={FLIPPING_TIME}
+        size="stretch"
+        minWidth={315}
+        maxWidth={2140}
+        maxShadowOpacity={0.5}
+        useMouseEvents={false}
+      >
+        {children}
+      </HTMLFlipBook>
+    </div>
+  );
+}
+
+function CursorButton({
+  x,
+  y,
+  rightSide,
+}: {
+  x: number;
+  y: number;
+  rightSide: boolean;
+}) {
+  const [width, setWidth] = useState(0);
+  return (
+    <motion.div
+      ref={(el) => {
+        if (el) setWidth(el.getBoundingClientRect().width);
+      }}
+      style={{
+        transform: `translate3d(${x - width / 2}px, ${y - width / 2}px, 0)`,
+      }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3 }}
+      className="absolute z-10 lg:size-[6.944vw] border border-[#FFFFFF]/25 backdrop-blur-[16px] flex items-center justify-center rounded-full bg-[#262626]/25 pointer-events-none"
+    >
+      <div
+        className={clsx(
+          "lg:size-[1.736vw] transition-transform duration-300 ease-out",
+          rightSide ? "rotate-180" : ""
+        )}
+      >
+        <Arrow direction="left" />
+      </div>
+    </motion.div>
+  );
+}
@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import clsx from "clsx";
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick: () => void;
+  type?: "Primary" | "PrimaryInverse" | "Tertiary";
+  size?: "L" | "M" | "S";
+  className?: string;
+  disabled?: boolean;
+}
+
+export default function Button({
+  children,
+  onClick,
+  className,
+  disabled,
+  type = "Primary",
+  size = "M",
+}: ButtonProps) {
+  const baseStyles = clsx(
+    size === "L" &&
+      "button-l lg:p-[1.111vw] md:p-[2.083vw] p-[4.444vw] lg:rounded-[1.111vw] md:rounded-[2.083vw] rounded-[4.444vw]",
+    size === "M" &&
+      "button-m lg:p-[0.833vw] md:p-[1.563vw] p-[3.333vw] lg:rounded-[0.972vw] md:rounded-[1.823vw] rounded-[3.889vw]",
+    size === "S" &&
+      "button-s lg:p-[0.625vw] md:p-[1.172vw] p-[2.5vw] lg:rounded-[0.833vw] md:rounded-[1.563vw] rounded-[3.333vw]"
+  );
+
+  const colorStyles = clsx(
+    type === "Primary" &&
+      (disabled
+        ? "bg-[#262626]/6 text-[#262626]/6 backdrop-blur-[16px]"
+        : "bg-[#262626]/6 text-[#262626] hover:bg-[#262626]/25 active:bg-[#262626] active:text-white"),
+    type === "PrimaryInverse" &&
+      (disabled
+        ? "bg-[#FFFFFF]/20 text-[#262626]/6 backdrop-blur-[16px]"
+        : "bg-[#3D514B] text-white hover:bg-[#3D514B] hover:text-[#FFFFFF]/80 active:bg-[#0D261E] active:text-white "),
+    type === "Tertiary" &&
+      (disabled
+        ? "bg-[#FFFFFF]/20 text-[#262626]/6 backdrop-blur-[16px]"
+        : "bg-[#FFFFFF] text-[#262626] hover:bg-[#FFFFFF]/80 active:bg-[#FFFFFF] active:text-[#262626]/60")
+  );
+
+  return (
+    <button
+      className={clsx(baseStyles, colorStyles, className)}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
@@ -0,0 +1,48 @@
+import clsx from "clsx";
+import React from "react";
+
+interface ButtonRoundProps {
+  type: "White" | "Dark";
+  text: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export default function ButtonRound({
+  type = "White",
+  text,
+  icon,
+  onClick,
+  className,
+}: ButtonRoundProps) {
+  const typeStyles = clsx(
+    type === "White" && "bg-[#262626]/25 text-white",
+    type === "Dark" && "bg-[#FFFFFF]/20 text-black"
+  );
+  return (
+    <button
+      className={clsx(
+        "lg:h-[2.778vw] md:h-[5.208vw] h-[11.111vw] lg:p-[0.278vw] md:p-[0.521vw] p-[1.111vw] lg:pr-[0.833vw] md:pr-[1.563vw] pr-[3.333vw] rounded-full flex items-center lg:gap-[0.556vw] md:gap-[1.042vw] gap-[2.222vw] justify-center backdrop-blur-[16px] relative",
+        typeStyles,
+        className
+      )}
+      onClick={onClick}
+    >
+      <div className="h-full relative aspect-square rounded-full bg-white flex items-center justify-center z-[2]">
+        <div className="lg:size-[0.833vw] md:size-[1.563vw] size-[3.333vw] text-black">
+          {icon}
+        </div>
+      </div>
+
+      <div
+        className={`absolute top-1/2 -translate-y-1/2 lg:left-[0.139vw] md:left-[0.26vw] left-[0.556vw] aspect-square h-[90%] rounded-full gradient-1 blur-[2px] z-[1] ${
+          type === "White" ? "opacity-80" : "opacity-40"
+        }`}
+      ></div>
+
+      <p className="button-s">{text}</p>
+    </button>
+  );
+}
@@ -0,0 +1,29 @@
+import clsx from "clsx";
+
+interface RadioButtonProps {
+  onChange: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  checked: boolean;
+}
+
+export default function RadioButton({ onChange, checked }: RadioButtonProps) {
+  const bgStyles = clsx(
+    checked
+      ? "lg:border-[0.347vw] md:border-[0.651vw] border-[1.389vw] border-[#3D514B] hover:border-[#0D261E] "
+      : "lg:border-[0.139vw] md:border-[0.26vw] border-[0.556vw] border-[#EBEBEB]"
+  );
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    onChange(e);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={clsx(
+        "bg-white lg:size-[1.389vw] md:size-[2.604vw] size-[5.556vw] rounded-full flex items-center justify-center relative hover:cursor-pointer",
+        bgStyles
+      )}
+    ></button>
+  );
+}
@@ -0,0 +1,101 @@
+import Logo from "../icons/Logo";
+import clsx from "clsx";
+import HeartFilled from "../icons/HeartFilled";
+import { useAppStateStore } from "@/stores/useAppStateStore";
+
+export default function Header() {
+  const headerColorScheme = useAppStateStore(
+    (state) => state.headerColorScheme
+  );
+  const setMenuOpen = useAppStateStore((state) => state.setMenuOpen);
+  const menuOpen = useAppStateStore((state) => state.menuOpen);
+
+  const colorSchemeStyles = clsx(
+    headerColorScheme === "Light" && "text-white",
+    headerColorScheme === "Dark" && "text-[#262626]"
+  );
+  return (
+    <header
+      className={clsx(
+        "fixed top-0 left-0 w-full z-[99] flex justify-between items-center lg:h-[5vw] lg:py-[0.833vw] lg:px-[1.667vw] transition-colors duration-300",
+        colorSchemeStyles
+      )}
+    >
+      <div className="flex lg:gap-[1.994vw] ">
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className="flex lg:gap-[0.694vw] items-center"
+        >
+          <div
+            className={clsx(
+              "lg:w-[1.944vw] flex flex-col transition-gap duration-300",
+              menuOpen ? "gap-[0]" : "gap-[0.25vw]"
+            )}
+          >
+            <div
+              className={clsx(
+                "w-full lg:h-[0.069vw] bg-white",
+                headerColorScheme === "Light" || menuOpen
+                  ? "bg-white"
+                  : "bg-[#262626]"
+              )}
+            />
+            <div
+              className={clsx(
+                "w-full lg:h-[0.069vw] bg-white",
+                headerColorScheme === "Light" || menuOpen
+                  ? "bg-white"
+                  : "bg-[#262626]"
+              )}
+            />
+            <div
+              className={clsx(
+                "w-full lg:h-[0.069vw] bg-white",
+                headerColorScheme === "Light" || menuOpen
+                  ? "bg-white"
+                  : "bg-[#262626]"
+              )}
+            />
+          </div>
+          <div
+            className={clsx(
+              "button-s text-start lg:w-[2.681vw] !leading-[100%] transition-colors duration-300",
+              headerColorScheme === "Light" || menuOpen
+                ? "text-white"
+                : "text-[#262626]"
+            )}
+          >
+            {menuOpen ? "ЗАКРЫТЬ" : "МЕНЮ"}
+          </div>
+        </button>
+
+        <a
+          href="tel:#"
+          className={clsx(
+            "flex lg:gap-[0.694vw] items-center button-s transition-opacity duration-300",
+            menuOpen
+              ? "opacity-0 pointer-events-none"
+              : "opacity-100 pointer-events-auto"
+          )}
+        >
+          {"+7 (900) 000-00-00"}
+        </a>
+      </div>
+      <a
+        href="#hero"
+        className={clsx(
+          "lg:w-[12.361vw]  absolute left-1/2 -translate-x-1/2 transition-opacity duration-300",
+          menuOpen ? "opacity-0" : "opacity-100"
+        )}
+      >
+        <Logo />
+      </a>
+      <button className="flex lg:gap-[1.389vw] items-center">
+        <div className="lg:size-[0.972vw] lg:translate-y-[-0.04vw]">
+          <HeartFilled />
+        </div>
+        <div className="button-s">ВЫБРАТЬ КВАРТИРУ</div>
+      </button>
+    </header>
+  );
+}
@@ -0,0 +1,71 @@
+import { useAppStateStore } from "@/stores/useAppStateStore";
+import clsx from "clsx";
+
+export default function MenuSidebar() {
+  const menuOpen = useAppStateStore((state) => state.menuOpen);
+
+  const menuOpenStyles = clsx(
+    menuOpen && "translate-x-0",
+    !menuOpen && "-translate-x-full"
+  );
+
+  return (
+    <nav
+      className={clsx(
+        "fixed top-0 left-0 lg:w-1/2 h-full z-[98] lg:p-[1.667vw] transition-transform ease-in-out duration-300 bg-[#3D514B] flex justify-between",
+        menuOpenStyles
+      )}
+    >
+      <ul className="title-l mt-auto flex flex-col gap-[0.833vw]">
+        <li>
+          <a href="#hero">
+            <span>Главная</span>
+          </a>
+        </li>
+        <li>
+          <a href="#hero">
+            <span>Локация</span>
+          </a>
+        </li>
+        <li>
+          <a href="#hero">
+            <span>О проекте</span>
+          </a>
+        </li>
+        <li>
+          <a href="#hero">
+            <span>Пространства резидентов</span>
+          </a>
+        </li>
+        <li>
+          <a href="#hero">
+            <span>Новости</span>
+          </a>
+        </li>
+        <li>
+          <a href="#hero">
+            <span>Галерея</span>
+          </a>
+        </li>
+        <li>
+          <a href="#hero">
+            <span>Выбрать квартиру</span>
+          </a>
+        </li>
+      </ul>
+
+      <div className="mt-auto">
+        <span className="caption-s block lg:mb-[0.556vw]">Офис продаж</span>
+        <p className="button-m lg:mb-[0.556vw]">
+          Чебоксары, <br /> ул. Ленина, д. 45
+        </p>
+        <p className="button-m lg:mb-[2.778vw]">Пн - Вс 09:00 - 21:00</p>
+
+        <span className="caption-s block lg:mb-[0.556vw]">Телефон</span>
+        <a href="tel:#" className="button-m">
+          + 7 (000) 000-00-00
+        </a>
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,17 @@
+import { useAppStateStore } from "@/stores/useAppStateStore";
+import clsx from "clsx";
+
+export default function ScreenOverlay() {
+  const menuOpen = useAppStateStore((state) => state.menuOpen);
+  const setMenuOpen = useAppStateStore((state) => state.setMenuOpen);
+
+  return (
+    <div
+      onClick={() => setMenuOpen(false)}
+      className={clsx(
+        "fixed inset-0 bg-black/50 z-[97] transition-opacity duration-300",
+        menuOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+      )}
+    />
+  );
+}
@@ -0,0 +1,19 @@
+import { create } from "zustand";
+
+interface AppStateStore {
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+  headerColorScheme: "Light" | "Dark";
+  setHeaderColorScheme: (headerColorScheme: "Light" | "Dark") => void;
+  menuOpen: boolean;
+  setMenuOpen: (menuOpen: boolean) => void;
+}
+
+export const useAppStateStore = create<AppStateStore>((set) => ({
+  isLoading: true,
+  setIsLoading: (isLoading) => set({ isLoading }),
+  menuOpen: false,
+  setMenuOpen: (menuOpen) => set({ menuOpen }),
+  headerColorScheme: "Light",
+  setHeaderColorScheme: (headerColorScheme) => set({ headerColorScheme }),
+}));
@@ -2,6 +2,13 @@
 module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
+    screens: {
+      xs: "360px",
+      sm: "640px",
+      md: "768px",
+      lg: "1440px",
+      "2xl": "1536px",
+    },
    extend: {},
  },
  plugins: [],
				`@@ -1 +0,0 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -1 +0,0 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -1 +0,0 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`