feat: change layout and styles according to new design

package-lock.json

@@ -13,6 +13,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-slick": "^0.30.2",
+        "sharp": "^0.33.3",
         "slick-carousel": "^1.8.1"
       },
       "devDependencies": {
@@ -46,6 +47,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.1.1.tgz",
+      "integrity": "sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -135,6 +145,437 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz",
+      "integrity": "sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz",
+      "integrity": "sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=11",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=10.13",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz",
+      "integrity": "sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz",
+      "integrity": "sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz",
+      "integrity": "sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.31",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz",
+      "integrity": "sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz",
+      "integrity": "sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz",
+      "integrity": "sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz",
+      "integrity": "sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz",
+      "integrity": "sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz",
+      "integrity": "sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -970,11 +1411,22 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -985,8 +1437,16 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-      "dev": true
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
@@ -1137,6 +1597,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2295,6 +2763,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -3567,7 +4040,6 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
       "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -3582,7 +4054,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -3622,6 +4093,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/sharp": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz",
+      "integrity": "sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
+      },
+      "engines": {
+        "libvips": ">=8.15.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.4",
+        "@img/sharp-darwin-x64": "0.33.4",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.4",
+        "@img/sharp-linux-arm64": "0.33.4",
+        "@img/sharp-linux-s390x": "0.33.4",
+        "@img/sharp-linux-x64": "0.33.4",
+        "@img/sharp-linuxmusl-arm64": "0.33.4",
+        "@img/sharp-linuxmusl-x64": "0.33.4",
+        "@img/sharp-wasm32": "0.33.4",
+        "@img/sharp-win32-ia32": "0.33.4",
+        "@img/sharp-win32-x64": "0.33.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3673,6 +4183,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4336,8 +4854,7 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-      "dev": true
     },
     "node_modules/yocto-queue": {
       "version": "0.1.0",

src/app/page.tsx

@@ -19,10 +19,10 @@ export default function Home() {
         <main>
             <HeaderSection/>
             <HeroSection/>
+            <CooperationPlanSection/>
             <WhyDencoSection/>
             <WideChoiceSection/>
-            <FboFbsSection/>
+            {/*<FboFbsSection/>*/}
-            <CooperationPlanSection/>
             <DencoHelpsSection/>
             <PlanDescriptionSection/>
             <AccountSection/>

src/sections/CooperationPlanSection/CooperationPlanConfig.ts

@@ -0,0 +1,41 @@
+import cooperation1 from "@/shared/assets/images/cooperation1.png";
+import cooperation2 from "@/shared/assets/images/cooperation2.png";
+import cooperation3 from "@/shared/assets/images/cooperation3.png";
+import cooperation4 from "@/shared/assets/images/cooperation4.png";
+import cooperation5 from "@/shared/assets/images/cooperation5.png";
+import cooperation6 from "@/shared/assets/images/cooperation6.png";
+import {CooperationPlanItemProps} from "@/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem";
+
+
+export const cooperationPlanConfig: CooperationPlanItemProps[] = [
+    {
+        digit: 1,
+        text: 'Выбираете любые товары с нашего склада',
+        imgSrc: cooperation1
+    },
+    {
+        digit: 2,
+        text: 'Добавляете товары на МП по системе FBS',
+        imgSrc: cooperation2
+    },
+    {
+        digit: 3,
+        text: 'Получайте заказы в личном кабинете',
+        imgSrc: cooperation3
+    },
+    {
+        digit: 4,
+        text: 'Мы собираем и упаковываем ваши заказы',
+        imgSrc: cooperation4
+    },
+    {
+        digit: 5,
+        text: 'Доставляем заказы на сортировочные центры МП',
+        imgSrc: cooperation5
+    },
+    {
+        digit: 6,
+        text: 'Маркетплейс переводит вам деньги',
+        imgSrc: cooperation6
+    }
+]

src/sections/CooperationPlanSection/CooperationPlanSection.module.css

@@ -1,5 +1,5 @@
 .root {
-    margin-bottom: 4rem;
+    margin: 3rem 0 0;
 }
 
 .heading {
@@ -9,139 +9,21 @@
     margin-bottom: 2rem;
 }
 
-.innerContainer {
+.list {
-    position: relative;
+    display: grid;
-    overflow: hidden;
+    grid-template-columns: 1fr 1fr;
-    margin: 0 -3rem;
+    grid-template-rows: 12rem 12rem 12rem;
-}
-
-.mask {
-    z-index: 10;
-    position: absolute;
-    inset: 0;
-    background: var(--black);
-    opacity: 0.4;
-}
-
-.block1, .block2 {
-    display: flex;
-    height: 12rem;
-}
-
-.block1 {
-    margin-bottom: -4.8rem;
-}
-
-.textBlock {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--white);
-    z-index: 11;
-    width: 70%;
-    position: absolute;
-    top: 0;
-    height: 80%;
-    justify-content: center;
-}
-
-.textBlockBottom {
-    top: unset;
-    bottom: 0;
-}
-
-.number {
-    font-family: var(--HelveticaNeueCyr);
-    font-size: 6.4rem;
-    position: relative;
-}
-
-.image {
-    object-fit: cover;
-    position: absolute;
-    height: 100%;
-    width: auto;
-    inset: 0;
-}
-
-.image1Block, .image2Block, .image3Block, .image4Block, .image5Block, .image6Block {
-    position: relative;
-    display: flex;
-    justify-content: center;
-}
-
-.image1Block {
-    clip-path: polygon(0 0, 100% 0, 100% 80%, 40% 80%, 30% 100%, 20% 80%, 0 80%);
-    flex: 1 1 30%;
-    z-index: 6;
-}
-
-.image2Block {
-    clip-path: polygon(0 0, 90% 0, 90% 40%, 100% 50%, 90% 60%, 90% 80%, 0 80%);
-    z-index: 3;
-    flex: 1 1 36%;
-    margin-right: -4%;
-}
-
-.image3Block {
-    clip-path: polygon(0 0, 100% 0, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0 80%);
-    flex: 1 1 34%;
-    z-index: 2;
-}
-
-.image4Block {
-    clip-path: polygon(0 20%, 90% 20%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 0 100%);
-    flex: 1 1 35%;
-    margin-right: -4%;
-    z-index: 5;
-}
-
-.image5Block {
-    clip-path: polygon(0 20%, 40% 20%, 50% 0, 60% 20%, 100% 20%, 100% 20%, 100% 100%, 0 100%);
-    flex: 1 1 32%;
-    z-index: 4;
-}
-
-.image6Block {
-    clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0% 100%);
-    flex: 1 1 33%;
-}
-
-@media screen and (min-width: 480px) {
-    .block1, .block2 {
-        height: 14rem;
-    }
-
-    .block1 {
-        margin-bottom: -5.6rem;
-    }
 }
 
 @media screen and (min-width: 641px) {
-    .innerContainer {
+    .list {
-        margin: 0 -6rem;
+        grid-template-columns: 1fr 1fr 1fr;
-    }
+        grid-template-rows: 13rem 13rem;
-
-    .number {
-        font-size: 8.4rem;
-    }
-
-    .block1, .block2 {
-        height: 18rem;
-    }
-
-    .block1 {
-        margin-bottom: -7.2rem;
-    }
-
-    .textBlock {
-        width: 85%;
-        gap: 1rem;
     }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 768px) {
-    .innerContainer {
+    .list {
-        margin: 0;
+        grid-template-rows: 16.6rem 16.6rem;
     }
 }

src/sections/CooperationPlanSection/CooperationPlanSection.tsx

@@ -1,72 +1,17 @@
-import Image from "next/image";
 import {Container} from "@/shared/components/Container/Container";
-import cooperation1 from "@/shared/assets/images/cooperation1.png";
-import cooperation2 from "@/shared/assets/images/cooperation2.png";
-import cooperation3 from "@/shared/assets/images/cooperation3.png";
-import cooperation4 from "@/shared/assets/images/cooperation4.png";
-import cooperation5 from "@/shared/assets/images/cooperation5.png";
-import cooperation6 from "@/shared/assets/images/cooperation6.png";
 import styles from './CooperationPlanSection.module.css';
-import classNames from "classnames";
+import {cooperationPlanConfig} from "@/sections/CooperationPlanSection/CooperationPlanConfig";
+import {CooperationPlanItem} from "@/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem";
 
 export function CooperationPlanSection() {
     return (
         <section className={styles.root}>
             <Container>
                 <h3 className={styles.heading}>Схема нашего сотрудничества</h3>
-                <div className={styles.innerContainer}>
+                <div className={styles.list}>
-                    <div className={styles.block1}>
+                    {cooperationPlanConfig.map(item => (
-                        <div className={styles.image1Block}>
+                        <CooperationPlanItem key={item.digit} digit={item.digit} text={item.text} imgSrc={item.imgSrc}/>
-                            <div className={styles.mask}></div>
+                    ))}
-                            <div className={styles.textBlock}>
-                                <p className={styles.number}>1</p>
-                                <p>Выбираете любые товары с нашего склада</p>
-                            </div>
-                            <Image className={classNames(styles.image)} placeholder={'blur'} fill src={cooperation1} sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image2Block}>
-                            <div className={styles.mask}></div>
-                            <div className={styles.textBlock}>
-                                <p className={styles.number}>4</p>
-                                <p>Мы собираем и упаковываем ваши заказы</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation4} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image3Block}>
-                            <div className={styles.mask}></div>
-                            <div className={styles.textBlock}>
-                                <p className={styles.number}>5</p>
-                                <p>Доставляем заказы на сортировочные центры МП</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation5} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                    </div>
-                    <div className={styles.block2}>
-                        <div className={styles.image4Block}>
-                            <div className={styles.mask}></div>
-                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
-                                <p className={styles.number}>2</p>
-                                <p>Добавляете товары на МП по системе FBS</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation2} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image5Block}>
-                            <div className={styles.mask}></div>
-                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
-                                <p className={styles.number}>3</p>
-                                <p>Получайте заказы в личном кабинете</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation3} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image6Block}>
-                            <div className={styles.mask}></div>
-                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
-                                <p className={styles.number}>6</p>
-                                <p>Маркетплейс переводит вам деньги</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation6} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                    </div>
                 </div>
             </Container>
         </section>

src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.module.css

@@ -0,0 +1,43 @@
+.root {
+    position: relative;
+}
+
+.mask {
+    z-index: 10;
+    position: absolute;
+    inset: 0;
+    background: var(--black);
+    opacity: 0.6;
+}
+
+.textBlock {
+    display: flex;
+    gap: 0.5rem;
+    color: var(--white);
+    z-index: 11;
+    position: absolute;
+    justify-content: center;
+    height: 100%;
+    align-items: center;
+    padding: 1rem;
+}
+
+.number {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 6.4rem;
+    position: relative;
+}
+
+.image {
+    object-fit: cover;
+}
+
+@media screen and (min-width: 641px) {
+    .number {
+        font-size: 8.4rem;
+    }
+
+    .textBlock {
+        gap: 1rem;
+    }
+}

src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.tsx

@@ -0,0 +1,30 @@
+import {StaticImageData} from "next/image";
+import Image from "next/image";
+import styles from './CooperationPlanItem.module.css'
+import classNames from "classnames";
+
+export type CooperationPlanItemProps = {
+    digit: number,
+    text: string,
+    imgSrc: StaticImageData
+};
+
+export function CooperationPlanItem(props: CooperationPlanItemProps) {
+    return (
+        <div className={styles.root}>
+            <div className={styles.mask}></div>
+            <div className={styles.textBlock}>
+                <p className={styles.number}>{props.digit}</p>
+                <p>{props.text}</p>
+            </div>
+            <Image
+                className={classNames(styles.image)}
+                placeholder={'blur'}
+                fill
+                src={props.imgSrc}
+                sizes={'33vw'}
+                alt={''}
+            />
+        </div>
+    );
+};

src/sections/FooterSection/FooterSection.module.css

@@ -1,24 +1,25 @@
-.container {
+.root {
-    border-radius: 5px;
     background-color: var(--grey2);
-    padding: 2rem 2.5rem;
+}
+
+.container {
+    padding: 3rem 2.5rem;
     color: var(--white);
-    margin-bottom: 5rem;
 }
 
 .heading {
     font-family: var(--HelveticaNeueCyr);
-    font-size: 3.2rem;
+    font-size: 2rem;
     margin-bottom: 1rem;
 }
 
 .joinButton {
-    font-size: 2rem;
+    font-size: 1.4rem;
     color: var(--white);
     background-color: var(--blue);
-    border-radius: 10px;
+    border-radius: 5px;
-    padding: 1.5rem 2rem;
+    padding: 1rem;
-    margin-bottom: 3.5rem;
+    margin-bottom: 2rem;
 }
 
 .bottom {
@@ -40,22 +41,13 @@
 }
 
 .instruction {
-    font-family: var(--HelveticaNeueCyr);
+    text-decoration: underline;
-    font-size: 2rem;
 }
 
 .logo {
     width: 6rem;
 }
 
-.logoContainer {
-
-}
-
-.contactUs {
-    font-size: 1.6rem;
-}
-
 .socialButtons {
     display: flex;
     gap: 1rem;
@@ -73,12 +65,7 @@
 
 @media screen and (min-width: 641px) {
     .container {
-        padding: 3.7rem 6.2rem 6.2rem;
+        padding: 3rem 5rem;
-        border-radius: 10px;
-    }
-
-    .contactUs {
-        font-weight: 700;
     }
 
     .whatsAppLogo, .telegramLogo {
@@ -87,9 +74,6 @@
 }
 
 @media screen and (min-width: 992px) {
-    .container {
-        border-radius: 15px;
-    }
 
     .whatsAppLogo, .telegramLogo {
         width: 40px;

src/sections/FooterSection/FooterSection.tsx

@@ -3,38 +3,39 @@ import {Container} from "@/shared/components/Container/Container";
 import Link from "next/link";
 import Image from "next/image";
 import dencoLogo from "@/shared/assets/icons/DENCO 2024.svg";
-import whatsAppLogo from '@/shared/assets/icons/ватсап.svg';
+import whatsAppLogo from '@/shared/assets/icons/ватсап.svg'
-import telegramLogo from '@/shared/assets/icons/телеграм.svg';
+import telegramLogo from '@/shared/assets/icons/телеграм.svg'
 
 export function FooterSection() {
     return (
-        <footer>
+        <footer className={styles.root}>
             <Container className={styles.container}>
                 <h3 className={styles.heading}>Зарабатывайте вместе с нами!</h3>
-                <Link href={'https://t.me/dencofulfillmant_manager'}
+                <Link href={'https://t.me/dencofulfillmant_manager'} className={styles.joinButton}>Стать партнёром</Link>
-                      className={styles.joinButton}>Стать
-                    партнёром</Link>
-
                 <div className={styles.bottom}>
-
+                    <div className={styles.bottomLeft}>
+                        <Link href={''} className={styles.instruction}>Инструкция к подключению</Link>
+                        <Image className={styles.logo} src={dencoLogo} alt={'Логотип'}/>
+                        <p>Все права защищены</p>
+                        <p>© 2017-2023 DENCO</p>
+                    </div>
                     <div className={styles.bottomRight}>
                         <p className={styles.contactUs}>Свяжитесь с нами!</p>
+                        <div className={styles.socialButtons}>
+                            <Link href={''}>
+                                <Image className={styles.whatsAppLogo} src={whatsAppLogo} alt={'логотип Ватсап'}/>
+                            </Link>
+                            <Link href={''}>
+                                <Image className={styles.telegramLogo} src={telegramLogo} alt={'логотип Ватсап'}/>
+                            </Link>
+                        </div>
                         <div className={styles.contactDetails}>
                             <Link href={'tel:+79951541493'}>+7 (995) 154-14-93</Link>
                             <Link href={'mailto:info@denco.store'}>info@denco.store</Link>
                         </div>
-
-                    </div>
-                    <div className={styles.bottomLeft}>
-                        {/*<p className={styles.instruction}>Инструкция к подключению</p>*/}
-                        <div className={styles.logoContainer}>
-                            <Image className={styles.logo} src={dencoLogo} alt={'Логотип'}/>
-                            <p>Все права защищены</p>
-                        </div>
-
                     </div>
                 </div>
             </Container>
         </footer>
     );
-};
+}

src/sections/TestimonialsSection/TestimonialsSection.module.css

@@ -9,9 +9,6 @@
     font-size: 2rem;
 }
 
-.container {
-    max-width: 30rem;
-}
 @media screen and (min-width: 641px) {
     .title {
         font-size: 2.8rem;

src/sections/TestimonialsSection/TestimonialsSection.tsx

@@ -1,19 +1,40 @@
 import {Container} from "@/shared/components/Container/Container";
-import chpok from '@/shared/assets/images/chpok.png';
 import styles from './TestimonialsSection.module.css';
-import Image from "next/image";
 import {Carousel} from "@/shared/components/Carousel/Carousel";
+import {TestimonialItem, TestimonialItemProps} from "@/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem";
+
+const testimonialsSrc: TestimonialItemProps[] = [
+    {
+        src: "drop/videos/1.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    },
+    {
+        src: "drop/videos/2.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    },
+    {
+        src: "drop/videos/3.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    },
+    {
+        src: "drop/videos/4.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    }
+]
 
 export function TestimonialsSection() {
     return (
         <section className={styles.root}>
-            <Container className={styles.container}>
+            <Container>
                 <h3 className={styles.title}>Посмотрите отзывы от наших клиентов</h3>
                 <Carousel>
-                    <video  controls src={"drop/videos/1.mp4"}/>
+                    {testimonialsSrc.map(item => (
-                    <video  controls src={"drop/videos/2.mp4"}/>
+                        <TestimonialItem key={item.src} src={item.src} keyPhrase={item.keyPhrase} clientName={item.clientName}/>
-                    <video  controls src={"drop/videos/3.mp4"}/>
+                    ))}
-                    <video  controls src={"drop/videos/4.mp4"}/>
                 </Carousel>
             </Container>
         </section>

src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.module.css

@@ -0,0 +1,35 @@
+.innerContainer {
+    display: flex;
+    height: 30rem;
+}
+
+.video {
+    flex: 60% 1 1;
+    object-fit: cover;
+}
+
+.description {
+    flex: 40% 1 1;
+    background-color: var(--black);
+    color: var(--white);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.keyPhrase {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+}
+
+.clientName {
+    font-size: 1.6rem;
+}
+
+@media screen and (min-width: 480px) {
+    .innerContainer {
+        height: 40rem;
+    }
+}

src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.tsx

@@ -0,0 +1,22 @@
+import styles from './TestimonialItem.module.css'
+
+export type TestimonialItemProps = {
+    src: string,
+    keyPhrase: string,
+    clientName: string
+};
+
+export function TestimonialItem(props: TestimonialItemProps) {
+    const {src, keyPhrase, clientName, ...otherProps} = props;
+    return (
+        <div {...otherProps}>
+            <div className={styles.innerContainer}>
+                <video className={styles.video} controls src={src}/>
+                <div className={styles.description}>
+                    <p className={styles.keyPhrase}>{keyPhrase}</p>
+                    <p className={styles.clientName}>{clientName}</p>
+                </div>
+            </div>
+        </div>
+    );
+};

src/sections/WhyDencoSection/WhyDencoSection.module.css

@@ -6,7 +6,8 @@
 .heading {
     font-family: var(--HelveticaNeueCyr);
     font-size: 2rem;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
 }
 
 .itemList {

src/sections/WhyDencoSection/WhyDencoSection.tsx

@@ -39,14 +39,14 @@ export function WhyDencoSection() {
                 <div className={styles.itemList}>
                     {items.map((item, i) => <WhyDencoItem key={i} position={item.position} body={item.body}/>)}
                 </div>
-                <div className={styles.certificates}>
+                {/*<div className={styles.certificates}>*/}
-                    <div className={styles.certificate}>
+                {/*    <div className={styles.certificate}>*/}
-                        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
+                {/*        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>*/}
-                    </div>
+                {/*    </div>*/}
-                    <div className={styles.certificate}>
+                {/*    <div className={styles.certificate}>*/}
-                        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
+                {/*        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>*/}
-                    </div>
+                {/*    </div>*/}
-                </div>
+                {/*</div>*/}
             </Container>
             <div className={styles.forgetEverything}>
                 <Container>

src/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem.module.css

@@ -22,7 +22,6 @@
     position: relative;
     z-index: 2;
     flex:1;
-    text-align: center;
 }
 
 @media screen and (min-width: 641px) {

src/sections/WideChoiceSection/WideChoiceSection.module.css

@@ -1,6 +1,6 @@
 .innerContainer {
     background-color: var(--grey);
-    padding: 1rem 3rem 4rem;
+    padding: 1rem 3rem 2rem;
     margin: 0 -3rem;
 }
 
@@ -14,9 +14,38 @@
     margin-bottom: 1.5rem;
 }
 
+.list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-auto-rows: min-content;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.joinButton {
+    font-size: 1.4rem;
+    color: var(--white);
+    background-color: var(--blue);
+    border-radius: 5px;
+    padding: 1rem;
+    width: 100%;
+    text-align: center;
+}
+
+@media screen and (min-width: 480px) {
+    .innerContainer {
+        padding: 1rem 5rem 2rem;
+    }
+
+    .list {
+        gap: 2rem;
+    }
+}
+
 @media screen and (min-width: 641px) {
     .innerContainer {
         margin: 0 -6rem;
+        padding: 1rem 7rem 2rem;
     }
 
     .heading {

src/sections/WideChoiceSection/WideChoiceSection.tsx

@@ -1,6 +1,3 @@
-'use client'
-
-import Image from "next/image";
 import {Container} from "@/shared/components/Container/Container";
 import styles from './WideChoiceSection.module.css';
 import {WideChoiceItem} from "@/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem";
@@ -8,34 +5,14 @@ import bear from '@/shared/assets/images/bear.png'
 import tools from '@/shared/assets/images/tools.png'
 import ball from '@/shared/assets/images/ball.png'
 import stationery from '@/shared/assets/images/stationery.png'
-import garden from '@/shared/assets/images/garden.png'
+import huntingAndFishing from '@/shared/assets/images/huntingAndFishing.png'
-import home from '@/shared/assets/images/home.png'
+import feast from '@/shared/assets/images/feast.png'
-import healthAndBeauty from '@/shared/assets/images/health and beauty.png'
+import healthAndBeauty from '@/shared/assets/images/healthAndBeauty.png'
 import electronics from '@/shared/assets/images/electronics.png'
-import sliderArrowLeft from "@/shared/assets/icons/sliderArrowLeft.svg";
+import textile from '@/shared/assets/images/textile.png'
-import sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";
+import Link from "next/link";
-import Slider, {Settings} from "react-slick";
 
 export function WideChoiceSection() {
-    const settings: Settings = {
-        dots: true,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 4,
-        slidesToScroll: 4,
-        lazyLoad: 'progressive',
-        prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
-        nextArrow: <Image src={sliderArrowRight} alt={''}/>,
-        responsive: [
-            {
-                breakpoint: 480,
-                settings: {
-                    slidesToShow: 3,
-                    slidesToScroll: 3,
-                }
-            }
-        ]
-    };
 
     return (
         <section>
@@ -43,7 +20,7 @@ export function WideChoiceSection() {
                 <div className={styles.innerContainer}>
                     <h3 className={styles.heading}>Обширный выбор товаров из различных категорий.</h3>
                     <p className={styles.subHeading}>Более миллиона товаров - ассортимент обновляется ежедневно</p>
-                    <Slider {...settings}>
+                    <div className={styles.list}>
                         <WideChoiceItem
                             href={"https://denco.store/toy"}
                             imgSrc={bear}
@@ -66,16 +43,31 @@ export function WideChoiceSection() {
                             alt={'Канцтовары'}/>
                         <WideChoiceItem
                             href={"https://denco.store/sad-i-ogorod"}
-                            imgSrc={garden}
+                            imgSrc={huntingAndFishing}
-                            name={'Сад и огород'}
+                            name={'Охота и рыбалка'}
-                            alt={'Сад и огород'}/>
+                            alt={'Охота и рыбалка'}/>
                         <WideChoiceItem
                             href={"https://denco.store/tovaryi-dlya-doma"}
-                            imgSrc={home}
+                            imgSrc={feast}
-                            name={'Товары для дома'}
+                            name={'Праздник'}
-                            alt={'Товары для дома'}/>
+                            alt={'Праздник'}/>
-
+                        <WideChoiceItem
-                    </Slider>
+                            href={"https://denco.store/tovaryi-dlya-doma"}
+                            imgSrc={healthAndBeauty}
+                            name={'Красота'}
+                            alt={'Красота'}/>
+                        <WideChoiceItem
+                            href={"https://denco.store/tovaryi-dlya-doma"}
+                            imgSrc={electronics}
+                            name={'Электроника'}
+                            alt={'Электроника'}/>
+                        <WideChoiceItem
+                            href={"https://denco.store/tovaryi-dlya-doma"}
+                            imgSrc={textile}
+                            name={'Текстиль'}
+                            alt={'Текстиль'}/>
+                    </div>
+                    <Link href={''} className={styles.joinButton}>Больше товаров</Link>
                 </div>
             </Container>
         </section>

src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.module.css

@@ -1,30 +1,70 @@
 .root {
-    width: 100%;
+    /*width: 12rem;*/
+    /*height: 12rem;*/
+    background-color: var(--white);
+    position: relative;
 }
 
 .container {
-    width: 10rem;
+    /*height: 100%;*/
-    height: 14rem;
+    /*display: block;*/
-    border: 1px solid var(--grey2);
+    height: 12rem;
-    margin: 0 auto;
+    /*width: 8rem;*/
-    display: block;
+    padding: 1rem;
-}
-
-.imageContainer {
-    height: 75%;
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    justify-content: center;
-    border-bottom: 1px solid var(--grey2);
 }
 
 .name {
-    position: relative;
+    height: 30%;
-    padding: 0.3rem 0;
-    width: 100%;
     text-align: center;
-    height: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.name > p {
+    /*position: absolute;*/
+}
+
+.imageContainer {
+    /*height: 75%;*/
+    height: 70%;
     display: flex;
     justify-content: center;
-    align-items: center;
 }
+
+.img {
+    width: auto;
+}
+
+/*.root {*/
+/*    width: 100%;*/
+/*}*/
+
+/*.container {*/
+/*    width: 10rem;*/
+/*    height: 14rem;*/
+/*    border: 1px solid var(--grey2);*/
+/*    margin: 0 auto;*/
+/*    display: block;*/
+/*}*/
+
+/*.imageContainer {*/
+/*    height: 75%;*/
+/*    display: flex;*/
+/*    align-items: center;*/
+/*    justify-content: center;*/
+/*    border-bottom: 1px solid var(--grey2);*/
+/*}*/
+
+/*.name {*/
+/*    position: relative;*/
+/*    padding: 0.3rem 0;*/
+/*    width: 100%;*/
+/*    text-align: center;*/
+/*    height: 25%;*/
+/*    display: flex;*/
+/*    justify-content: center;*/
+/*    align-items: center;*/
+/*}*/

src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.tsx

@@ -8,12 +8,12 @@ export type WideChoiceItemProps = {
     href: string,
 };
 
-export function WideChoiceItem({imgSrc, name, alt,href , ...otherProps}: WideChoiceItemProps) {
+export function WideChoiceItem({imgSrc, name, alt, href}: WideChoiceItemProps) {
     return (
-        <div className={styles.root} {...otherProps}>
+        <div className={styles.root}>
             <a href={href} className={styles.container}>
                 <div className={styles.imageContainer}>
-                    <Image src={imgSrc} alt={alt} sizes='100vw' placeholder={'blur'}/>
+                    <Image className={styles.img} src={imgSrc} alt={alt} sizes='30vw' placeholder={'blur'}/>
                 </div>
                 <div className={styles.name}>
                     <p>{name}</p>

src/shared/components/Carousel/Carousel.tsx

@@ -19,6 +19,7 @@ const settings: ComponentProps<typeof Slider> = {
     lazyLoad: 'progressive',
     prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
     nextArrow: <Image src={sliderArrowRight} alt={''}/>,
+    dots: true
 };
 
 export function Carousel({children}: Props) {