From df8e4a0f633c4acab069a2b12279d3a3e23fab4f Mon Sep 17 00:00:00 2001 From: Daniil034 Date: Fri, 17 May 2024 18:27:03 +0300 Subject: [PATCH] feat: change layout and styles according to new design --- package-lock.json | 531 +++++++++- src/app/page.tsx | 4 +- .../CooperationPlanConfig.ts | 41 + .../CooperationPlanSection.module.css | 140 +-- .../CooperationPlanSection.tsx | 67 +- .../CooperationPlanItem.module.css | 43 + .../CooperationPlanItem.tsx | 30 + .../FooterSection/FooterSection.module.css | 40 +- src/sections/FooterSection/FooterSection.tsx | 37 +- .../TestimonialsSection.module.css | 3 - .../TestimonialsSection.tsx | 35 +- .../TestimonialItem.module.css | 35 + .../TestimonialItem/TestimonialItem.tsx | 22 + .../WhyDencoSection.module.css | 3 +- .../WhyDencoSection/WhyDencoSection.tsx | 16 +- .../WhyDencoItem/WhyDencoItem.module.css | 1 - .../WideChoiceSection.module.css | 31 +- .../WideChoiceSection/WideChoiceSection.tsx | 66 +- .../WideChoiceItem/WideChoiceItem.module.css | 76 +- .../WideChoiceItem/WideChoiceItem.tsx | 6 +- ...lth and beauty.png => healthAndBeauty.png} | Bin ... and fishing.png => huntingAndFishing.png} | Bin src/shared/assets/images/textile.png | Bin 0 -> 46890 bytes src/shared/components/Carousel/Carousel.tsx | 1 + yarn.lock | 971 ++++++++---------- 25 files changed, 1325 insertions(+), 874 deletions(-) create mode 100644 src/sections/CooperationPlanSection/CooperationPlanConfig.ts create mode 100644 src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.module.css create mode 100644 src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.tsx create mode 100644 src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.module.css create mode 100644 src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.tsx rename src/shared/assets/images/{health and beauty.png => healthAndBeauty.png} (100%) rename src/shared/assets/images/{hunting and fishing.png => huntingAndFishing.png} (100%) create mode 100644 src/shared/assets/images/textile.png diff --git a/package-lock.json b/package-lock.json index c858d32..264a36a 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "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==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/yocto-queue": { "version": "0.1.0", diff --git a/src/app/page.tsx b/src/app/page.tsx index 51a9a43..1105913 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -19,10 +19,10 @@ export default function Home() {
+ - - + {/**/} diff --git a/src/sections/CooperationPlanSection/CooperationPlanConfig.ts b/src/sections/CooperationPlanSection/CooperationPlanConfig.ts new file mode 100644 index 0000000..03bd49a --- /dev/null +++ b/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 + } +] \ No newline at end of file diff --git a/src/sections/CooperationPlanSection/CooperationPlanSection.module.css b/src/sections/CooperationPlanSection/CooperationPlanSection.module.css index 5f67eec..65223f5 100644 --- a/src/sections/CooperationPlanSection/CooperationPlanSection.module.css +++ b/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 { - position: relative; - overflow: hidden; - margin: 0 -3rem; -} - -.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; - } +.list { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 12rem 12rem 12rem; } @media screen and (min-width: 641px) { - .innerContainer { - margin: 0 -6rem; - } - - .number { - font-size: 8.4rem; - } - - .block1, .block2 { - height: 18rem; - } - - .block1 { - margin-bottom: -7.2rem; - } - - .textBlock { - width: 85%; - gap: 1rem; + .list { + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 13rem 13rem; } } -@media screen and (min-width: 992px) { - .innerContainer { - margin: 0; +@media screen and (min-width: 768px) { + .list { + grid-template-rows: 16.6rem 16.6rem; } } \ No newline at end of file diff --git a/src/sections/CooperationPlanSection/CooperationPlanSection.tsx b/src/sections/CooperationPlanSection/CooperationPlanSection.tsx index edc367d..45416d1 100644 --- a/src/sections/CooperationPlanSection/CooperationPlanSection.tsx +++ b/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 (

Схема нашего сотрудничества

-
-
-
-
-
-

1

-

Выбираете любые товары с нашего склада

-
- {''}/ -
-
-
-
-

4

-

Мы собираем и упаковываем ваши заказы

-
- {''}/ -
-
-
-
-

5

-

Доставляем заказы на сортировочные центры МП

-
- {''}/ -
-
-
-
-
-
-

2

-

Добавляете товары на МП по системе FBS

-
- {''}/ -
-
-
-
-

3

-

Получайте заказы в личном кабинете

-
- {''}/ -
-
-
-
-

6

-

Маркетплейс переводит вам деньги

-
- {''}/ -
-
+
+ {cooperationPlanConfig.map(item => ( + + ))}
diff --git a/src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.module.css b/src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.module.css new file mode 100644 index 0000000..e6989fc --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.tsx b/src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.tsx new file mode 100644 index 0000000..d44cd2e --- /dev/null +++ b/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 ( +
+
+
+

{props.digit}

+

{props.text}

+
+ {''} +
+ ); +}; \ No newline at end of file diff --git a/src/sections/FooterSection/FooterSection.module.css b/src/sections/FooterSection/FooterSection.module.css index ff83d8c..5f04da3 100644 --- a/src/sections/FooterSection/FooterSection.module.css +++ b/src/sections/FooterSection/FooterSection.module.css @@ -1,24 +1,25 @@ -.container { - border-radius: 5px; +.root { 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; - padding: 1.5rem 2rem; - margin-bottom: 3.5rem; + border-radius: 5px; + padding: 1rem; + margin-bottom: 2rem; } .bottom { @@ -40,22 +41,13 @@ } .instruction { - font-family: var(--HelveticaNeueCyr); - font-size: 2rem; + text-decoration: underline; } .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; - border-radius: 10px; - } - - .contactUs { - font-weight: 700; + padding: 3rem 5rem; } .whatsAppLogo, .telegramLogo { @@ -87,9 +74,6 @@ } @media screen and (min-width: 992px) { - .container { - border-radius: 15px; - } .whatsAppLogo, .telegramLogo { width: 40px; diff --git a/src/sections/FooterSection/FooterSection.tsx b/src/sections/FooterSection/FooterSection.tsx index 556d2c3..77ea82b 100644 --- a/src/sections/FooterSection/FooterSection.tsx +++ b/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 telegramLogo from '@/shared/assets/icons/телеграм.svg'; +import whatsAppLogo from '@/shared/assets/icons/ватсап.svg' +import telegramLogo from '@/shared/assets/icons/телеграм.svg' export function FooterSection() { return ( -