diff --git a/package-lock.json b/package-lock.json
index 2fdb52cf..067b4e03 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,20 +20,32 @@
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
+ "@types/react-dnd": "^3.0.2",
"@types/react-dom": "^18.0.0",
+ "emoji-mart": "^5.5.2",
"file-saver": "^2.0.5",
+ "html-to-image": "^1.11.11",
"jszip": "^3.10.1",
"notistack": "^3.0.1",
"react": "^18.2.0",
+ "react-beautiful-dnd": "^13.1.1",
+ "react-dnd": "^16.0.1",
+ "react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
+ "react-easy-crop": "^5.0.0",
+ "react-image-crop": "^10.1.5",
"react-image-file-resizer": "^0.4.8",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"typescript": "^4.4.2",
+ "use-debounce": "^9.0.4",
"web-vitals": "^2.1.0",
"zustand": "^4.3.8"
},
"devDependencies": {
+ "@emoji-mart/data": "^1.1.2",
+ "@emoji-mart/react": "^1.1.1",
+ "@types/react-beautiful-dnd": "^13.1.4",
"craco-alias": "^3.0.1"
}
},
@@ -2178,6 +2190,22 @@
"postcss-selector-parser": "^6.0.10"
}
},
+ "node_modules/@emoji-mart/data": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz",
+ "integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==",
+ "dev": true
+ },
+ "node_modules/@emoji-mart/react": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
+ "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==",
+ "dev": true,
+ "peerDependencies": {
+ "emoji-mart": "^5.2",
+ "react": "^16.8 || ^17 || ^18"
+ }
+ },
"node_modules/@emotion/babel-plugin": {
"version": "11.10.5",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
@@ -3523,6 +3551,21 @@
"url": "https://opencollective.com/popperjs"
}
},
+ "node_modules/@react-dnd/asap": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+ "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+ },
+ "node_modules/@react-dnd/invariant": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+ "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+ },
+ "node_modules/@react-dnd/shallowequal": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+ "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+ },
"node_modules/@remix-run/router": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.1.tgz",
@@ -4214,6 +4257,15 @@
"@types/node": "*"
}
},
+ "node_modules/@types/hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-YIQtIg4PKr7ZyqNPZObpxfHsHEmuB8dXCxd6qVcGuQVDK2bpsF7bYNnBJ4Nn7giuACZg+WewExgrtAJ3XnA4Xw==",
+ "dependencies": {
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0"
+ }
+ },
"node_modules/@types/html-minifier-terser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -4317,6 +4369,24 @@
"csstype": "^3.0.2"
}
},
+ "node_modules/@types/react-beautiful-dnd": {
+ "version": "13.1.5",
+ "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.5.tgz",
+ "integrity": "sha512-mzohmMtV48b0bXF2dP8188LzUv9HAGHKucOORYsd5Sqq830pJ4gseFyDDAH0TR4TeD1ceG9DxTQ0FOFbtCSy4Q==",
+ "dev": true,
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
+ "node_modules/@types/react-dnd": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz",
+ "integrity": "sha512-Z1BqHYGFtfSPfWs+kgX4b6wQmwwtqq4/pLo4zdO9xcDUB1ZQP8iWTAYNf3EJ2f0WiVQpSLN8UytP+ILzZHDLYw==",
+ "deprecated": "This is a stub types definition. react-dnd provides its own type definitions, so you don't need this installed.",
+ "dependencies": {
+ "react-dnd": "*"
+ }
+ },
"node_modules/@types/react-dom": {
"version": "18.0.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz",
@@ -4333,6 +4403,17 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-redux": {
+ "version": "7.1.27",
+ "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.27.tgz",
+ "integrity": "sha512-xj7d9z32p1K/eBmO+OEy+qfaWXtcPlN8f1Xk3Ne0p/ZRQ867RI5bQ/bpBtxbqU1AHNhKJSgGvld/P2myU2uYkg==",
+ "dependencies": {
+ "@types/hoist-non-react-statics": "^3.3.0",
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0",
+ "redux": "^4.0.0"
+ }
+ },
"node_modules/@types/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6319,6 +6400,14 @@
"postcss": "^8.4"
}
},
+ "node_modules/css-box-model": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+ "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+ "dependencies": {
+ "tiny-invariant": "^1.0.6"
+ }
+ },
"node_modules/css-declaration-sorter": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -6965,6 +7054,16 @@
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
},
+ "node_modules/dnd-core": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+ "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+ "dependencies": {
+ "@react-dnd/asap": "^5.0.1",
+ "@react-dnd/invariant": "^4.0.1",
+ "redux": "^4.2.0"
+ }
+ },
"node_modules/dns-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -7146,6 +7245,11 @@
"url": "https://github.com/sindresorhus/emittery?sponsor=1"
}
},
+ "node_modules/emoji-mart": {
+ "version": "5.5.2",
+ "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
+ "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
+ },
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -9110,6 +9214,11 @@
"node": ">=12"
}
},
+ "node_modules/html-to-image": {
+ "version": "1.11.11",
+ "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+ "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+ },
"node_modules/html-webpack-plugin": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -12291,6 +12400,11 @@
"node": ">= 4.0.0"
}
},
+ "node_modules/memoize-one": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+ "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+ },
"node_modules/merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -12582,6 +12696,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/normalize-wheel": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+ "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+ },
"node_modules/notistack": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
@@ -14553,6 +14672,11 @@
"performance-now": "^2.1.0"
}
},
+ "node_modules/raf-schd": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+ "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+ },
"node_modules/randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -14629,6 +14753,24 @@
"node": ">=14"
}
},
+ "node_modules/react-beautiful-dnd": {
+ "version": "13.1.1",
+ "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
+ "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.9.2",
+ "css-box-model": "^1.2.0",
+ "memoize-one": "^5.1.1",
+ "raf-schd": "^4.0.2",
+ "react-redux": "^7.2.0",
+ "redux": "^4.0.4",
+ "use-memo-one": "^1.1.1"
+ },
+ "peerDependencies": {
+ "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -14735,6 +14877,43 @@
"node": ">=8"
}
},
+ "node_modules/react-dnd": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+ "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+ "dependencies": {
+ "@react-dnd/invariant": "^4.0.1",
+ "@react-dnd/shallowequal": "^4.0.1",
+ "dnd-core": "^16.0.1",
+ "fast-deep-equal": "^3.1.3",
+ "hoist-non-react-statics": "^3.3.2"
+ },
+ "peerDependencies": {
+ "@types/hoist-non-react-statics": ">= 3.3.1",
+ "@types/node": ">= 12",
+ "@types/react": ">= 16",
+ "react": ">= 16.14"
+ },
+ "peerDependenciesMeta": {
+ "@types/hoist-non-react-statics": {
+ "optional": true
+ },
+ "@types/node": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-dnd-html5-backend": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+ "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+ "dependencies": {
+ "dnd-core": "^16.0.1"
+ }
+ },
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -14747,11 +14926,37 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-easy-crop": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.2.tgz",
+ "integrity": "sha512-j4A/0s0v/Gx5YGXvw3SOFIMmRk5YCdob2ABL5cD00Q9HQPKIz6tkCYLdj0RMO0REPtCAOsZ2ZZLI6fUofiDP6w==",
+ "dependencies": {
+ "normalize-wheel": "^1.0.1",
+ "tslib": "2.0.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.4.0",
+ "react-dom": ">=16.4.0"
+ }
+ },
+ "node_modules/react-easy-crop/node_modules/tslib": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+ "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+ },
"node_modules/react-error-overlay": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
+ "node_modules/react-image-crop": {
+ "version": "10.1.8",
+ "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz",
+ "integrity": "sha512-4rb8XtXNx7ZaOZarKKnckgz4xLMvds/YrU6mpJfGhGAsy2Mg4mIw1x+DCCGngVGq2soTBVVOxx2s/C6mTX9+pA==",
+ "peerDependencies": {
+ "react": ">=16.13.1"
+ }
+ },
"node_modules/react-image-file-resizer": {
"version": "0.4.8",
"resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz",
@@ -14762,6 +14967,35 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
+ "node_modules/react-redux": {
+ "version": "7.2.9",
+ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+ "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@types/react-redux": "^7.1.20",
+ "hoist-non-react-statics": "^3.3.2",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ },
+ "peerDependencies": {
+ "react": "^16.8.3 || ^17 || ^18"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-redux/node_modules/react-is": {
+ "version": "17.0.2",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+ },
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14972,6 +15206,14 @@
"node": ">=8"
}
},
+ "node_modules/redux": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+ "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+ "dependencies": {
+ "@babel/runtime": "^7.9.2"
+ }
+ },
"node_modules/regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -16366,6 +16608,11 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
+ "node_modules/tiny-invariant": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+ "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+ },
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -16740,6 +16987,25 @@
"requires-port": "^1.0.0"
}
},
+ "node_modules/use-debounce": {
+ "version": "9.0.4",
+ "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
+ "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0"
+ }
+ },
+ "node_modules/use-memo-one": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+ "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -19209,6 +19475,19 @@
"integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
"requires": {}
},
+ "@emoji-mart/data": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz",
+ "integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==",
+ "dev": true
+ },
+ "@emoji-mart/react": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
+ "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==",
+ "dev": true,
+ "requires": {}
+ },
"@emotion/babel-plugin": {
"version": "11.10.5",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
@@ -20115,6 +20394,21 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
},
+ "@react-dnd/asap": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+ "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+ },
+ "@react-dnd/invariant": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+ "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+ },
+ "@react-dnd/shallowequal": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+ "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+ },
"@remix-run/router": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.1.tgz",
@@ -20616,6 +20910,15 @@
"@types/node": "*"
}
},
+ "@types/hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-YIQtIg4PKr7ZyqNPZObpxfHsHEmuB8dXCxd6qVcGuQVDK2bpsF7bYNnBJ4Nn7giuACZg+WewExgrtAJ3XnA4Xw==",
+ "requires": {
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0"
+ }
+ },
"@types/html-minifier-terser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -20719,6 +21022,23 @@
"csstype": "^3.0.2"
}
},
+ "@types/react-beautiful-dnd": {
+ "version": "13.1.5",
+ "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.5.tgz",
+ "integrity": "sha512-mzohmMtV48b0bXF2dP8188LzUv9HAGHKucOORYsd5Sqq830pJ4gseFyDDAH0TR4TeD1ceG9DxTQ0FOFbtCSy4Q==",
+ "dev": true,
+ "requires": {
+ "@types/react": "*"
+ }
+ },
+ "@types/react-dnd": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz",
+ "integrity": "sha512-Z1BqHYGFtfSPfWs+kgX4b6wQmwwtqq4/pLo4zdO9xcDUB1ZQP8iWTAYNf3EJ2f0WiVQpSLN8UytP+ILzZHDLYw==",
+ "requires": {
+ "react-dnd": "*"
+ }
+ },
"@types/react-dom": {
"version": "18.0.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz",
@@ -20735,6 +21055,17 @@
"@types/react": "*"
}
},
+ "@types/react-redux": {
+ "version": "7.1.27",
+ "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.27.tgz",
+ "integrity": "sha512-xj7d9z32p1K/eBmO+OEy+qfaWXtcPlN8f1Xk3Ne0p/ZRQ867RI5bQ/bpBtxbqU1AHNhKJSgGvld/P2myU2uYkg==",
+ "requires": {
+ "@types/hoist-non-react-statics": "^3.3.0",
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0",
+ "redux": "^4.0.0"
+ }
+ },
"@types/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -22218,6 +22549,14 @@
"postcss-selector-parser": "^6.0.9"
}
},
+ "css-box-model": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+ "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+ "requires": {
+ "tiny-invariant": "^1.0.6"
+ }
+ },
"css-declaration-sorter": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -22669,6 +23008,16 @@
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
},
+ "dnd-core": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+ "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+ "requires": {
+ "@react-dnd/asap": "^5.0.1",
+ "@react-dnd/invariant": "^4.0.1",
+ "redux": "^4.2.0"
+ }
+ },
"dns-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -22807,6 +23156,11 @@
"resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
"integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg=="
},
+ "emoji-mart": {
+ "version": "5.5.2",
+ "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
+ "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
+ },
"emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -24261,6 +24615,11 @@
"terser": "^5.10.0"
}
},
+ "html-to-image": {
+ "version": "1.11.11",
+ "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+ "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+ },
"html-webpack-plugin": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -26566,6 +26925,11 @@
"fs-monkey": "^1.0.3"
}
},
+ "memoize-one": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+ "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+ },
"merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -26772,6 +27136,11 @@
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
},
+ "normalize-wheel": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+ "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+ },
"notistack": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
@@ -27995,6 +28364,11 @@
"performance-now": "^2.1.0"
}
},
+ "raf-schd": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+ "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+ },
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -28055,6 +28429,20 @@
"whatwg-fetch": "^3.6.2"
}
},
+ "react-beautiful-dnd": {
+ "version": "13.1.1",
+ "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
+ "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
+ "requires": {
+ "@babel/runtime": "^7.9.2",
+ "css-box-model": "^1.2.0",
+ "memoize-one": "^5.1.1",
+ "raf-schd": "^4.0.2",
+ "react-redux": "^7.2.0",
+ "redux": "^4.0.4",
+ "use-memo-one": "^1.1.1"
+ }
+ },
"react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -28136,6 +28524,26 @@
}
}
},
+ "react-dnd": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+ "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+ "requires": {
+ "@react-dnd/invariant": "^4.0.1",
+ "@react-dnd/shallowequal": "^4.0.1",
+ "dnd-core": "^16.0.1",
+ "fast-deep-equal": "^3.1.3",
+ "hoist-non-react-statics": "^3.3.2"
+ }
+ },
+ "react-dnd-html5-backend": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+ "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+ "requires": {
+ "dnd-core": "^16.0.1"
+ }
+ },
"react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -28145,11 +28553,33 @@
"scheduler": "^0.23.0"
}
},
+ "react-easy-crop": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.2.tgz",
+ "integrity": "sha512-j4A/0s0v/Gx5YGXvw3SOFIMmRk5YCdob2ABL5cD00Q9HQPKIz6tkCYLdj0RMO0REPtCAOsZ2ZZLI6fUofiDP6w==",
+ "requires": {
+ "normalize-wheel": "^1.0.1",
+ "tslib": "2.0.1"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+ "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+ }
+ }
+ },
"react-error-overlay": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
+ "react-image-crop": {
+ "version": "10.1.8",
+ "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz",
+ "integrity": "sha512-4rb8XtXNx7ZaOZarKKnckgz4xLMvds/YrU6mpJfGhGAsy2Mg4mIw1x+DCCGngVGq2soTBVVOxx2s/C6mTX9+pA==",
+ "requires": {}
+ },
"react-image-file-resizer": {
"version": "0.4.8",
"resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz",
@@ -28160,6 +28590,26 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
+ "react-redux": {
+ "version": "7.2.9",
+ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+ "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@types/react-redux": "^7.1.20",
+ "hoist-non-react-statics": "^3.3.2",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "17.0.2",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+ }
+ }
+ },
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -28314,6 +28764,14 @@
"strip-indent": "^3.0.0"
}
},
+ "redux": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+ "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+ "requires": {
+ "@babel/runtime": "^7.9.2"
+ }
+ },
"regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -29339,6 +29797,11 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
+ "tiny-invariant": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+ "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+ },
"tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -29600,6 +30063,18 @@
"requires-port": "^1.0.0"
}
},
+ "use-debounce": {
+ "version": "9.0.4",
+ "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
+ "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
+ "requires": {}
+ },
+ "use-memo-one": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+ "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+ "requires": {}
+ },
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/src/assets/LandingPict/Desktop.png b/src/assets/LandingPict/Desktop.png
new file mode 100644
index 00000000..167d67b2
Binary files /dev/null and b/src/assets/LandingPict/Desktop.png differ
diff --git a/src/assets/LandingPict/calendarIcon.tsx b/src/assets/LandingPict/calendarIcon.tsx
new file mode 100644
index 00000000..19653871
--- /dev/null
+++ b/src/assets/LandingPict/calendarIcon.tsx
@@ -0,0 +1,35 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+ color?: string;
+}
+
+export default function CalendarIcon({color}:Props) {
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/assets/LandingPict/notebook.tsx b/src/assets/LandingPict/notebook.tsx
new file mode 100644
index 00000000..10083733
--- /dev/null
+++ b/src/assets/LandingPict/notebook.tsx
@@ -0,0 +1,192 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+ color?: string;
+}
+
+export default function Notebook({color}:Props) {
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/assets/LandingPict/titleIcon.tsx b/src/assets/LandingPict/titleIcon.tsx
new file mode 100644
index 00000000..29039e92
--- /dev/null
+++ b/src/assets/LandingPict/titleIcon.tsx
@@ -0,0 +1,25 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+ color?: string;
+}
+
+export default function TitleIcon({color}:Props) {
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/assets/LandingPict/youtobeIcon.tsx b/src/assets/LandingPict/youtobeIcon.tsx
new file mode 100644
index 00000000..01694bf5
--- /dev/null
+++ b/src/assets/LandingPict/youtobeIcon.tsx
@@ -0,0 +1,56 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+ color?: string;
+}
+
+export default function YoutobeIcon({color}:Props) {
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/assets/Quiz-main.png b/src/assets/Quiz-main.png
new file mode 100644
index 00000000..815a6964
Binary files /dev/null and b/src/assets/Quiz-main.png differ
diff --git a/src/index.tsx b/src/index.tsx
index eb2ac964..20191ecb 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -16,6 +16,7 @@ import { Result } from "./pages/Result/Result";
import { Setting } from "./pages/Result/Setting";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import ImageCrop from "@ui_kit/Modal/ImageCrop";
+import Landing from "./pages/Landing/Landing";
const routeslink: {
path: string;
@@ -23,13 +24,8 @@ const routeslink: {
header: boolean;
sidebar: boolean;
}[] = [
- { path: "/", page: , header: false, sidebar: false },
- {
- path: "/questions/:quizId",
- page: ,
- header: true,
- sidebar: true,
- },
+ { path: "/list", page: , header: false, sidebar: false },
+ { path: "/questions/:quizId", page: , header: true, sidebar: true,},
{ path: "/contacts", page: , header: true, sidebar: true },
{ path: "/result", page: , header: true, sidebar: true },
{ path: "/settings", page: , header: true, sidebar: true },
@@ -48,6 +44,7 @@ root.render(
))}
} />
} />
+ }/>
diff --git a/src/pages/Landing/Blog.tsx b/src/pages/Landing/Blog.tsx
new file mode 100644
index 00000000..faa5c0a7
--- /dev/null
+++ b/src/pages/Landing/Blog.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import SectionStyled from './SectionStyled';
+import {styled} from "@mui/material/styles";
+
+const BoxCardBlog = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ width: '100%',
+ maxWidth: 'none',
+ },
+}));
+
+function CardBlog () {
+ return(
+
+
+
+
+
+ 01.09.2022
+ Как продвигать квиз за 10 000 ₽ в месяц
+
+
+ )
+}
+
+export default function Component() {
+ return(
+
+
+ Блог
+
+
+ Кейсы, дайджесты и отборные рекомендации
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/BusinessPluses.tsx b/src/pages/Landing/BusinessPluses.tsx
new file mode 100644
index 00000000..faf86013
--- /dev/null
+++ b/src/pages/Landing/BusinessPluses.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import SectionStyled from './SectionStyled';
+import {styled} from "@mui/material/styles";
+
+const BoxPluses = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ flexDirection: 'column',
+ alignItems: 'center',
+ textAlign: 'center',
+ width: '100%',
+ },
+}));
+const BoxCard = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ alignItems: 'center',
+ },
+}));
+
+const BoxText = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ textAlign: 'center',
+ marginBottom: '40px',
+ },
+}));
+
+function Square () {
+ return(
+
+ )
+}
+export default function Component () {
+ return(
+
+
+ В чем плюсы для бизнеса
+
+
+
+
+
+ Человек ощущает заботу и склоняется к выбору вашей компании
+
+
+
+
+ Получаете заинтересованного, квалифицированного клиента
+
+
+
+
+ Увеличиваете качество цифрового общения и конверсию в продажи
+
+
+
+ )}
\ No newline at end of file
diff --git a/src/pages/Landing/Counter.tsx b/src/pages/Landing/Counter.tsx
new file mode 100644
index 00000000..ec37ccfa
--- /dev/null
+++ b/src/pages/Landing/Counter.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import { styled } from '@mui/material/styles';
+
+const Root = styled('section')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ height: 'auto',
+ },
+}));
+
+export default function Counter() {
+ return(
+
+
+
+ 14 дней
+ бесплатно, полный функционал
+
+
+ 10 мин
+
+ для создания квиза
+
+
+
+ 482 800
+
+ квизов создано клиентами
+
+
+
+ 76
+ готовых шаблонов для разных ниш
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/FooterLanding.tsx b/src/pages/Landing/FooterLanding.tsx
new file mode 100644
index 00000000..bfb92823
--- /dev/null
+++ b/src/pages/Landing/FooterLanding.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import Box from "@mui/material/Box";
+import Typography from '@mui/material/Typography';
+import Button from "@mui/material/Button";
+import PenaLogo from "../../ui_kit/PenaLogo";
+import SectionStyled from './SectionStyled';
+import {styled} from "@mui/material/styles";
+
+const RootBox = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('sm')]: {
+ justifyContent: 'center',
+ },
+}));
+
+const BoxServis = styled('div')(({ theme}) => ({
+ [theme.breakpoints.down('lg')]: {
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'center',
+ textAlign: 'center',
+ alignItems: 'center',
+ }
+}));
+
+const BoxMenu = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('xs')]: {
+ width: '100%',
+ },
+}));
+
+export default function Component() {
+ return(
+
+
+
+
+ (с) 2023 Examplelink.com
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/HeaderLanding.tsx b/src/pages/Landing/HeaderLanding.tsx
new file mode 100644
index 00000000..ac90f373
--- /dev/null
+++ b/src/pages/Landing/HeaderLanding.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import SectionStyled from './SectionStyled';
+import PenaLogo from "../../ui_kit/PenaLogo";
+import NavMenuItem from "@ui_kit/Header/NavMenuItem";
+
+const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
+
+export default function Component() {
+ const [select, setSelect] = React.useState(0)
+ return (
+
+
+
+ {buttonMenu.map( (element, index) => (
+ {
+ setSelect(index);
+ }}
+ isActive={select === index}
+ />
+ ))}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/Hero.tsx b/src/pages/Landing/Hero.tsx
new file mode 100644
index 00000000..65edb2a3
--- /dev/null
+++ b/src/pages/Landing/Hero.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+// import logotip from "./image/black_logo_PenaHab.svg";
+import {Typography} from "@mui/material";
+import abstraction from '../../assets/Quiz-main.png'
+import SectionStyled from './SectionStyled';
+import {styled} from "@mui/material/styles";
+
+
+export default function Component() {
+ return(
+
+
+
+ Опросник
+
+
+
+ Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети.
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/HowItWorks.tsx b/src/pages/Landing/HowItWorks.tsx
new file mode 100644
index 00000000..8e95f376
--- /dev/null
+++ b/src/pages/Landing/HowItWorks.tsx
@@ -0,0 +1,443 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import SectionStyled from './SectionStyled';
+import {styled} from "@mui/material/styles";
+import YoutobeIcon from "../../assets/LandingPict/youtobeIcon";
+import OneIconBorder from "@icons/OneIconBorder";
+import CalendarIcon from "../../assets/LandingPict/calendarIcon";
+
+
+function OnSite() {
+ return(
+
+
+ на сайте
+
+ )
+}
+
+export default function HowItWorks () {
+ return(
+
+
+
+ Как это работает
+ Квиз как диалог
+
+
+
+ Видео о квизах 2 мин
+
+
+
+
+
+
+
+
+
+
+ Начало диалога
+ Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог
+
+
+
+ квиз можно использовать
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Задаем вопросы
+
+
+ Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор
+
+
+
+
+ 10 форматов вопроса
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Показываем рекомендацию
+ На основе ответов мы подбираем наиболее подходящие товары или услуги
+
+
+
+ точный показ результатов
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Узнаем контакт
+ Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку
+
+
+
+ что можно делать на последнем шаге
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
\ No newline at end of file
diff --git a/src/pages/Landing/HowToUse.tsx b/src/pages/Landing/HowToUse.tsx
new file mode 100644
index 00000000..43583644
--- /dev/null
+++ b/src/pages/Landing/HowToUse.tsx
@@ -0,0 +1,381 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import SectionStyled from './SectionStyled';
+import Button from "@mui/material/Button";
+// import Note from './image/note.png'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import Link from '@mui/material/Link';
+// import CalendarW from './image/calendar-W.svg'
+// import CalendarP from './image/calendar-P.svg'
+import {styled} from "@mui/material/styles";
+import Notebook from "../../assets/LandingPict/notebook";
+import CalendarIcon from "../../assets/LandingPict/calendarIcon";
+
+const BoxUse = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ justifyContent: 'center',
+ },
+}));
+
+const BoxButtons = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ flexDirection: 'column',
+ alignItems: 'center',
+ height: '100px',
+ width: '260px'
+ },
+}));
+
+const BoxQuiz = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ maxWidth: '530px',
+ },
+}));
+
+function Quiz () {
+ return(
+
+
+
+
+
+ Обучение английскому
+ Квиз в сторис для блогера преподавателя английского языка.
+
+
+
+ период:
+ трафик:
+ результат:
+
+
+
+ 24 часа
+ Сторисы
+ 386 заявок
+
+
+
+
+
+ Подробнее →
+
+
+
+ )
+}
+
+export default function Component () {
+ return (
+
+
+
+
+ Как используют квиз
+ В крупном и малом бизнесе
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Что еще можно делать
+ с Опросником
+
+
+ Изящное решение исследовательских и бизнес-задач
+
+
+
+
+
+
+
+
+
+
+
+ Исследуйте аудиторию и проверяйте гипотезы
+
+
+ Марквиз помогает проверять гипотезы
+ и принимать грамотные решения основанные
+ на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы
+ в удобной аналитике в личном кабинете.
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx
new file mode 100644
index 00000000..0eff582c
--- /dev/null
+++ b/src/pages/Landing/Landing.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Header from './HeaderLanding';
+import Footer from './FooterLanding';
+import Hero from './Hero';
+import Questions from './Questions';
+import Counter from './Counter';
+import Blog from './Blog';
+import HowItWorks from './HowItWorks';
+import BusinessPluses from './BusinessPluses';
+import HowToUse from './HowToUse';
+import WhatTheySay from './WhatTheySay';
+import StartWithTemplates from './StartWithTemplates';
+import WhatTheFeatures from './WhatTheFeatures';
+
+export default function Landing() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+
+ )
+}
+
+
diff --git a/src/pages/Landing/Questions.tsx b/src/pages/Landing/Questions.tsx
new file mode 100644
index 00000000..1e5c0022
--- /dev/null
+++ b/src/pages/Landing/Questions.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import Box from "@mui/material/Box";
+import Typography from '@mui/material/Typography';
+import Button from "@mui/material/Button";
+import SectionStyled from './SectionStyled';
+import {styled} from "@mui/material/styles";
+
+const BoxQuestions = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('lg')]: {
+ alignItems: 'center',
+ width: '100%',
+ },
+}));
+
+const BoxSpan = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('lg')]: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: 'center',
+ paddingTop: '20px',
+ width: '100%',
+ },
+}));
+
+const BoxButtons = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('xs')]: {
+ justifyContent: 'center',
+ }
+}));
+
+export default function Component() {
+ return(
+
+
+
+ Остались вопросы?
+
+
+
+
+
+
+
+
+
+ Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/SectionStyled.tsx b/src/pages/Landing/SectionStyled.tsx
new file mode 100644
index 00000000..c082e167
--- /dev/null
+++ b/src/pages/Landing/SectionStyled.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { SxProps, Theme, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+interface Props {
+ sxsect?: SxProps;
+ mwidth: string;
+ padding?: string;
+ tag: React.ElementType;
+ bg: string;
+ children: React.ReactNode;
+ sxcont?: SxProps;
+}
+export default function Section (props: Props) {
+
+ return (
+
+
+ {props.children}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Landing/StartWithTemplates.tsx b/src/pages/Landing/StartWithTemplates.tsx
new file mode 100644
index 00000000..e84fe7f5
--- /dev/null
+++ b/src/pages/Landing/StartWithTemplates.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import Button from "@mui/material/Button";
+import SectionStyled from './SectionStyled';
+import {styled} from "@mui/material/styles";
+
+const BoxServies = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ textAlign: 'center',
+ width: '100%',
+ },
+}));
+
+const buttonTemplates = ['Услуги', 'Развлечения', 'Строительство и ремонт', 'E-commerce']
+
+function Servises () {
+ return (
+
+
+
+ Вдохновляющие фото и видео для свадьбы
+
+
+ )
+}
+
+export default function Component () {
+ const [select, setSelect] = React.useState(0)
+ return (
+
+
+ Начните с готового шаблона
+ 73 готовых шаблонов разных ниш, постоянно пополняем
+
+
+ {buttonTemplates.map( (element, index) => (
+
+ ))}
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/WhatTheFeatures.tsx b/src/pages/Landing/WhatTheFeatures.tsx
new file mode 100644
index 00000000..b15535ae
--- /dev/null
+++ b/src/pages/Landing/WhatTheFeatures.tsx
@@ -0,0 +1,388 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import SectionStyled from './SectionStyled';
+import Button from "@mui/material/Button";
+import Desktop from '../../assets/LandingPict/Desktop.png';
+import {styled} from "@mui/material/styles";
+//
+// const BoxCard = styled('div')(({ theme }) => ({
+// [theme.breakpoints.down('xl')]: {
+// alignItems: 'center',
+// width: '100%',
+// },
+// }));
+const BoxCardHead = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('xs')]: {
+ flexDirection: 'column',
+ },
+}));
+interface Props {
+ children: React.ReactNode;
+}
+
+function BoxFich(props: Props) {
+ return(
+
+
+ {props.children}
+
+
+
+
+
+ )
+}
+
+export default function Component () {
+ return (
+
+ {/*левая колонка*/}
+
+
+
+ Что по фичам?
+
+
+ Самый функциональный конструктор квизов
+
+
+
+
+
+ 01
+
+ Landing Page с привязкой домена
+
+
+
+ Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
+ Отдельный сайт для квиза больше не нужен —
+
+
+
+
+
+ 03
+ Аналитика
+
+
+
+ Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
+ Отдельный сайт для квиза больше не нужен —
+
+
+
+
+
+ 05
+ Режим анкетирования
+
+
+
+ Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
+ Отдельный сайт для квиза больше не нужен —
+
+
+
+
+
+ 07
+ Интерактивные тесты
+
+
+
+ Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
+ Отдельный сайт для квиза больше не нужен —
+
+
+
+
+ {/*правая колонка*/}
+
+
+
+ 02
+ Повышение конверсии
+
+
+
+ Конверсию можно увеличить, добавив тающую скидку,
+ консультанта с подсказками или бонус, который пользователь получит в конце квиза
+
+
+
+
+
+ 04
+ Расширенеие настройки дизайна
+
+
+
+ Конверсию можно увеличить, добавив тающую скидку,
+ консультанта с подсказками или бонус, который пользователь получит в конце квиза
+
+
+
+
+
+ 06
+ А/Б тестирование
+
+
+
+ Конверсию можно увеличить, добавив тающую скидку,
+ консультанта с подсказками или бонус, который пользователь получит в конце квиза
+
+
+
+
+ 70 бесплатных заявок на баланс
+ Создайте простой Landing Page на Marquiz и привяжите к собственному домену. Отдельный сайт для квиза больше не нужен —
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Landing/WhatTheySay.tsx b/src/pages/Landing/WhatTheySay.tsx
new file mode 100644
index 00000000..0690d313
--- /dev/null
+++ b/src/pages/Landing/WhatTheySay.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Typography} from "@mui/material";
+import Button from "@mui/material/Button";
+import SectionStyled from './SectionStyled';
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+// import Quotes from './image/quotes.svg';
+import {styled} from "@mui/material/styles";
+import TitleIcon from "../../assets/LandingPict/titleIcon";
+
+const BoxCard = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ justifyContent: 'center',
+ width: '100%',
+ },
+}));
+
+const BoxText = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ width: '100%',
+ },
+}));
+
+const BoxButtons = styled('div')(({ theme }) => ({
+ [theme.breakpoints.down('md')]: {
+ justifyContent: 'space-evenly',
+ width: '100%',
+ marginTop: '20px',
+ },
+}));
+
+export default function Component () {
+ return(
+
+
+
+ Что говорят
+ Более 80 000 предпринимателей, маркетологов и команд с нами
+
+
+
+
+
+
+
+
+
+ Пожалуй самый комфортный и удобный.
+
+ Пользуюсь марквизом более 2 лет в разных направлениях.
+ Тестировал моклиентс и енвибокс.
+ Но на этапе тестирования примуществом овладел марквиз.
+ Удобное расположение кнопок, класный редактор, интуитивно понятный интерфейс.
+ Море удобных функций, до которых схожим сервисам еще расти и расти! А главное, это супер тех.
+ поддержка!!! Отвечают в течении минуты, решают любой вопрос очень быстро и как никто лояльны.
+ Всем рекомендую!!!
+
+ Полина К.
+ 03.06.2022
+
+
+
+ Marquiz – отличный инструмент для привлечения реальных клиентов
+
+ До Marquiz использовал другой онлайн-конструктор,
+ в сравнении с которым Marquiz набирает 100 баллов из 100!
+ Нравится тут расположение кнопок, простой интерфейс, широкие возможности кастомизации,
+ отзывчивость техподдержки. И самое главное, что работает все четко и без сбоев!
+ С задачей своей сервис справляется на ура - позволяет найти потенциального клиента и превратить
+ его в покупателя!
+ Полина К.
+ 03.06.2022
+
+
+
+ Пожалуй самый комфортный и удобный.
+
+ Пользуюсь марквизом более 2 лет в разных направлениях.
+ Тестировал моклиентс и енвибокс.
+ Но на этапе тестирования примуществом овладел марквиз.
+ Удобное расположение кнопок, класный редактор, интуитивно понятный интерфейс.
+ Море удобных функций, до которых схожим сервисам еще расти и расти! А главное, это супер тех.
+ поддержка!!! Отвечают в течении минуты, решают любой вопрос очень быстро и как никто лояльны.
+ Всем рекомендую!!!
+
+ Полина К.
+ 03.06.2022
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/ui_kit/Header/NavMenuItem.tsx b/src/ui_kit/Header/NavMenuItem.tsx
index 782f6e3b..45a844b1 100755
--- a/src/ui_kit/Header/NavMenuItem.tsx
+++ b/src/ui_kit/Header/NavMenuItem.tsx
@@ -4,15 +4,18 @@ import { Link, Typography, useTheme } from "@mui/material";
interface Props {
text: string;
isActive?: boolean;
+ onClick?: () => void;
+ href?: string
}
-export default function NavMenuItem({ text, isActive = false }: Props) {
+export default function NavMenuItem({ href, onClick, text, isActive = false }: Props) {
const theme = useTheme();
return (