fakz9/landing-page-2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: change layout and styles according to new design

Browse Source
This commit is contained in:
Daniil034
2024-05-17 18:27:03 +03:00
parent bff4d7da5b
commit df8e4a0f63
25 changed files with 1325 additions and 874 deletions
Download Patch File Download Diff File Expand all files Collapse all files

531
package-lock.json generated
View File

@@ -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",

4
src/app/page.tsx
View File

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

41
src/sections/CooperationPlanSection/CooperationPlanConfig.ts Normal file
View File

@@ -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
}
]

140
src/sections/CooperationPlanSection/CooperationPlanSection.module.css
View File

@@ -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;
}
}

67
src/sections/CooperationPlanSection/CooperationPlanSection.tsx
View File

@@ -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.block1}>
<div className={styles.image1Block}>
<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 className={styles.list}>
{cooperationPlanConfig.map(item => (
<CooperationPlanItem key={item.digit} digit={item.digit} text={item.text} imgSrc={item.imgSrc}/>
))}
</div>
</Container>
</section>

43
src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.module.css Normal file
View File

@@ -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;
}
}

30
src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.tsx Normal file
View File

@@ -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>
);
};

40
src/sections/FooterSection/FooterSection.module.css
View File

@@ -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;

37
src/sections/FooterSection/FooterSection.tsx
View File

@@ -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 (
<footer>
<footer className={styles.root}>
<Container className={styles.container}>
<h3 className={styles.heading}>Зарабатывайте вместе с нами!</h3>
<Link href={'https://t.me/dencofulfillmant_manager'}
className={styles.joinButton}>Стать
партнёром</Link>
<Link href={'https://t.me/dencofulfillmant_manager'} 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>
);
};
}

3
src/sections/TestimonialsSection/TestimonialsSection.module.css
View File

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

35
src/sections/TestimonialsSection/TestimonialsSection.tsx
View File

@@ -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"}/>
<video controls src={"drop/videos/2.mp4"}/>
<video controls src={"drop/videos/3.mp4"}/>
<video controls src={"drop/videos/4.mp4"}/>
{testimonialsSrc.map(item => (
<TestimonialItem key={item.src} src={item.src} keyPhrase={item.keyPhrase} clientName={item.clientName}/>
))}
</Carousel>
</Container>
</section>

35
src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.module.css Normal file
View File

@@ -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;
}
}

22
src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.tsx Normal file
View File

@@ -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>
);
};

3
src/sections/WhyDencoSection/WhyDencoSection.module.css
View File

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

16
src/sections/WhyDencoSection/WhyDencoSection.tsx
View File

@@ -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.certificate}>
<Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
</div>
<div className={styles.certificate}>
<Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
</div>
</div>
{/*<div className={styles.certificates}>*/}
{/* <div className={styles.certificate}>*/}
{/* <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>*/}
{/* </div>*/}
{/* <div className={styles.certificate}>*/}
{/* <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>*/}
{/* </div>*/}
{/*</div>*/}
</Container>
<div className={styles.forgetEverything}>
<Container>

1
src/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem.module.css
View File

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

31
src/sections/WideChoiceSection/WideChoiceSection.module.css
View File

@@ -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 {

66
src/sections/WideChoiceSection/WideChoiceSection.tsx
View File

@@ -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 home from '@/shared/assets/images/home.png'
import healthAndBeauty from '@/shared/assets/images/health and beauty.png'
import huntingAndFishing from '@/shared/assets/images/huntingAndFishing.png'
import feast from '@/shared/assets/images/feast.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 sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";
import Slider, {Settings} from "react-slick";
import textile from '@/shared/assets/images/textile.png'
import Link from "next/link";
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}
name={'Сад и огород'}
alt={'Сад и огород'}/>
imgSrc={huntingAndFishing}
name={'Охота и рыбалка'}
alt={'Охота и рыбалка'}/>
<WideChoiceItem
href={"https://denco.store/tovaryi-dlya-doma"}
imgSrc={home}
name={'Товары для дома'}
alt={'Товары для дома'}/>
</Slider>
imgSrc={feast}
name={'Праздник'}
alt={'Праздник'}/>
<WideChoiceItem
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>

76
src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.module.css
View File

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

6
src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.tsx
View File

@@ -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>

0
src/shared/assets/images/health and beauty.png → src/shared/assets/images/healthAndBeauty.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

0
src/shared/assets/images/hunting and fishing.png → src/shared/assets/images/huntingAndFishing.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/shared/assets/images/textile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

1
src/shared/components/Carousel/Carousel.tsx
View File

@@ -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) {

971
yarn.lock
View File

File diff suppressed because it is too large Load Diff