diff --git a/package-lock.json b/package-lock.json index eb0596b..7c0350a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,10 +16,12 @@ "json-server": "^0.17.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-elastic-carousel": "^0.11.5", "react-icons": "^4.3.1", "react-modal": "^3.15.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", + "styled-components": "^5.3.5", "uuid": "^8.3.2", "web-vitals": "^2.1.4" } @@ -1993,6 +1995,29 @@ "postcss": "^8.3" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz", + "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==", + "dependencies": { + "@emotion/memoize": "^0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz", @@ -4763,6 +4788,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -5218,6 +5263,11 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5341,6 +5391,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "node_modules/clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -5747,6 +5802,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", @@ -5904,6 +5967,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -14268,6 +14341,52 @@ "react": "^18.0.0" } }, + "node_modules/react-elastic-carousel": { + "version": "0.11.5", + "resolved": "https://registry.npmjs.org/react-elastic-carousel/-/react-elastic-carousel-0.11.5.tgz", + "integrity": "sha512-//k1IWUiUNXXNE8LHw4bLdP+8YCXLQHbeSOPiZo/+sTkUBp/YB/hjGKWH4RqSJ59AjF8PoxB+SUbqhdPTcwAuw==", + "dependencies": { + "classnames": "^2.2.6", + "react-only-when": "^1.0.2", + "react-swipeable": "^5.5.1", + "resize-observer-polyfill": "1.5.0" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "prop-types": "^15.5.4", + "react": "15 - 17", + "react-dom": "15 - 17", + "styled-components": "^5.1.0" + } + }, + "node_modules/react-elastic-carousel/node_modules/react-only-when": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-only-when/-/react-only-when-1.0.2.tgz", + "integrity": "sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "prop-types": "^15.5.4", + "react": "^15.0.0 || ^16.0.0", + "react-dom": "^15.0.0 || ^16.0.0" + } + }, + "node_modules/react-elastic-carousel/node_modules/react-swipeable": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz", + "integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==", + "dependencies": { + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.0.0-0" + } + }, "node_modules/react-error-overlay": { "version": "6.0.10", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", @@ -14713,6 +14832,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz", + "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==" + }, "node_modules/resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", @@ -15251,6 +15375,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15649,6 +15778,36 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "hasInstallScript": true, + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -18657,6 +18816,29 @@ "postcss-value-parser": "^4.2.0" } }, + "@emotion/is-prop-valid": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz", + "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@eslint/eslintrc": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz", @@ -20693,6 +20875,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -21044,6 +21243,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -21130,6 +21334,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -21444,6 +21653,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", @@ -21534,6 +21748,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -27516,6 +27740,33 @@ "scheduler": "^0.21.0" } }, + "react-elastic-carousel": { + "version": "0.11.5", + "resolved": "https://registry.npmjs.org/react-elastic-carousel/-/react-elastic-carousel-0.11.5.tgz", + "integrity": "sha512-//k1IWUiUNXXNE8LHw4bLdP+8YCXLQHbeSOPiZo/+sTkUBp/YB/hjGKWH4RqSJ59AjF8PoxB+SUbqhdPTcwAuw==", + "requires": { + "classnames": "^2.2.6", + "react-only-when": "^1.0.2", + "react-swipeable": "^5.5.1", + "resize-observer-polyfill": "1.5.0" + }, + "dependencies": { + "react-only-when": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-only-when/-/react-only-when-1.0.2.tgz", + "integrity": "sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==", + "requires": {} + }, + "react-swipeable": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz", + "integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==", + "requires": { + "prop-types": "^15.6.2" + } + } + } + }, "react-error-overlay": { "version": "6.0.10", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", @@ -27853,6 +28104,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "resize-observer-polyfill": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz", + "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==" + }, "resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", @@ -28248,6 +28504,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -28558,6 +28819,23 @@ "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", "requires": {} }, + "styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", diff --git a/package.json b/package.json index 2d7cff7..1449053 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "json-server": "^0.17.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-elastic-carousel": "^0.11.5", "react-icons": "^4.3.1", "react-modal": "^3.15.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", + "styled-components": "^5.3.5", "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, diff --git a/src/assets/images/foto1.jpg b/src/assets/images/foto1.jpg new file mode 100644 index 0000000..0501616 Binary files /dev/null and b/src/assets/images/foto1.jpg differ diff --git a/src/assets/images/foto2.png b/src/assets/images/foto2.png new file mode 100644 index 0000000..2d0e9a1 Binary files /dev/null and b/src/assets/images/foto2.png differ diff --git a/src/assets/images/foto3.jpg b/src/assets/images/foto3.jpg new file mode 100644 index 0000000..76b15c1 Binary files /dev/null and b/src/assets/images/foto3.jpg differ diff --git a/src/componentes/components/produto/avaliacao/Avaliacao.css b/src/componentes/components/produto/avaliacao/Avaliacao.css index 3a5b095..77ec50b 100644 --- a/src/componentes/components/produto/avaliacao/Avaliacao.css +++ b/src/componentes/components/produto/avaliacao/Avaliacao.css @@ -1,41 +1,51 @@ -.review .box-container{ +.review .box-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); - gap:1.5rem; + gap: 1.5rem; margin-bottom: 5%; } -.review .box-container .box{ - border:var(--border); +.review .box-container .box { + border: var(--border); text-align: center; - padding:3rem 2rem; + padding: 3rem 2rem; } -.review .box-container .box p{ +.review .box-container .box p i{ font-size: 1.5rem; + text-transform: none; line-height: 1.8; - color:#ccc; - padding:2rem 0; + color: #ccc; + padding: 2rem 0; } -.review .box-container .box .user{ +.review .box-container .box .user { height: 7rem; width: 7rem; border-radius: 50%; object-fit: cover; } -.review .box-container .box h3{ - padding:1rem 0; +.review .box-container .box h3 { + padding: 1rem 0; font-size: 2rem; - color:#fff; + color: #fff; } -.review .box-container .box .stars i{ +.review .box-container .box .stars i { font-size: 1.5rem; - color:var(--main-color); + color: var(--main-color); } .review .box img { width: 15%; +} + +.review { + display: flex; + gap: 2%; +} +.ft img{ + object-fit: cover; + border-radius: 180px; } \ No newline at end of file diff --git a/src/componentes/components/produto/avaliacao/Avaliacao.js b/src/componentes/components/produto/avaliacao/Avaliacao.js index a7df5dc..36108d4 100644 --- a/src/componentes/components/produto/avaliacao/Avaliacao.js +++ b/src/componentes/components/produto/avaliacao/Avaliacao.js @@ -1,34 +1,105 @@ import "./Avaliacao.css"; -import Bee from "../../../../assets/images/bee_redondo_pequeno.png"; import Aspas from "../../../../assets/images/aspas_pequena.png"; - +import foto1 from "../../../../assets/images/foto1.jpg"; +import foto2 from "../../../../assets/images/foto2.png"; +import foto3 from "../../../../assets/images/foto3.jpg"; function Avaliacao() { - return( + return ( +
+
-
-
-
- -
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.

- -
- -
- -

Pessoa 1

- -
- - - - - -
-
+ +
+
+
+ +
+

+ + Depois que começei a anunciar no UTFOME minhas vendas cresceram bastante, + consegui expandir meus negócios e aumentar minha renda! O UTFOME é um ótimo + aplicativo para conseguir visibilidade comercial no ramo alimentício. + +

+ +
+ +
+ +

Thomas Shelby

+ +
+ + + + + +
-
+
+ +
+
+
+ +
+

+ + Muito bom o aplicativo, me ajudou a encontrar diversas comidas que eu + não conseguiria achar em outro lugar. Além de fomentar o nicho dos comerciantes + do ambiente acadêmico. Parabéns aos idealizadores! Amei! + +

+ +
+ +
+ +

Letícia Espíndola

- ); +
+ + + + + +
+
+
+ +
+
+
+ +
+

+ + Aplicativo muito bom, com bastante variedades de anúncios além de + ser fácil de usar, conta uma ótima equipe de divulgação. + Graças ao UTFOME consegui me manter estudando com o dinheiro das vendas + que anunciei aqui. + +

+ +
+ +
+ +

Márcia Cristina

+ +
+ + + + + +
+
+
+ +
+
+
+ ); } -export default Avaliacao; \ No newline at end of file +export default Avaliacao; diff --git a/src/componentes/components/produto/item/Item.css b/src/componentes/components/produto/item/Item.css new file mode 100644 index 0000000..e69de29 diff --git a/src/componentes/components/produto/item/Item.js b/src/componentes/components/produto/item/Item.js new file mode 100644 index 0000000..0098c9d --- /dev/null +++ b/src/componentes/components/produto/item/Item.js @@ -0,0 +1,13 @@ +import styled from "styled-components"; + +export default styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 90vh; + width: 100%; + background-color: #683bb7; + color: #fff; + margin: 15px; + font-size: 4em; +`; \ No newline at end of file diff --git a/src/componentes/layout/footer/Footer.js b/src/componentes/layout/footer/Footer.js index f46d3bc..b9ecbb2 100644 --- a/src/componentes/layout/footer/Footer.js +++ b/src/componentes/layout/footer/Footer.js @@ -25,7 +25,6 @@ function Footer() { Anunciar Sobre Contato - Avaliações Perfil diff --git a/src/componentes/layout/header/Header.css b/src/componentes/layout/header/Header.css index 648e0f1..5bf60ce 100644 --- a/src/componentes/layout/header/Header.css +++ b/src/componentes/layout/header/Header.css @@ -13,6 +13,10 @@ .header .logo img{ height: 6rem; } +.logout-botao{ + background-color: #000; + color: #fff; +} .header .navbar a{ margin:0 1rem; diff --git a/src/componentes/layout/header/Header.js b/src/componentes/layout/header/Header.js index 3c964b2..84b29f3 100644 --- a/src/componentes/layout/header/Header.js +++ b/src/componentes/layout/header/Header.js @@ -8,7 +8,11 @@ import { Link } from 'react-router-dom'; function Header(){ - const { authenticated } = useContext(AuthContext); + const handleLogout = () => { + logout(); + }; + + const { authenticated, logout } = useContext(AuthContext); function openMenu(){ let navbar = document.querySelector('.navbar'); @@ -33,7 +37,6 @@ function Header(){ ANUNCIAR SOBRE CONTATO - AVALIAÇÕES PERFIL @@ -42,6 +45,12 @@ function Header(){ + {/* */} + + ENTRE + ); diff --git a/src/componentes/pages/about/About.js b/src/componentes/pages/about/About.js index 4d72e70..40ab82d 100644 --- a/src/componentes/pages/about/About.js +++ b/src/componentes/pages/about/About.js @@ -14,7 +14,7 @@ function About(){ <>
-

about us

+

sobre nós

diff --git a/src/componentes/pages/contact/Contact.css b/src/componentes/pages/contact/Contact.css index 49e4129..72dd83b 100644 --- a/src/componentes/pages/contact/Contact.css +++ b/src/componentes/pages/contact/Contact.css @@ -1,5 +1,6 @@ .contact{ - margin-top: 10rem; + margin-top: 2rem; + margin-bottom: 3rem; } .contact .row{ @@ -13,6 +14,7 @@ flex:1 1 45rem; width: 100%; object-fit: cover; + height: 45rem; } .contact .row form{ @@ -59,4 +61,8 @@ color:#fff; text-transform: none; background:none; -} \ No newline at end of file +} + +.contact .row form .input .descricao{ + height: 20rem; +} diff --git a/src/componentes/pages/contact/Contact.js b/src/componentes/pages/contact/Contact.js index ff030ec..58d39ab 100644 --- a/src/componentes/pages/contact/Contact.js +++ b/src/componentes/pages/contact/Contact.js @@ -1,34 +1,41 @@ -import Footer from '../../layout/footer/Footer'; -import Header from '../../layout/header/Header'; -import './Contact.css'; - -function Contact(){ - return ( - <> -
-
- -

contate nos

- -
- - - - -
-

Email para contato

-
- - -
-
- -
- -
-
- - ); +import Footer from "../../layout/footer/Footer"; +import Header from "../../layout/header/Header"; +import "./Contact.css"; + +function Contact() { + return ( + <> +
+
+

+ {" "} + contate-nos{" "} +

+ +
+ + +
+

Email para contato

+
+ + +
+
+ +
+
+
+
+
+ + ); } -export default Contact; \ No newline at end of file +export default Contact; diff --git a/src/componentes/pages/main/Main.css b/src/componentes/pages/main/Main.css index 2a7bdcc..25824bd 100644 --- a/src/componentes/pages/main/Main.css +++ b/src/componentes/pages/main/Main.css @@ -1,37 +1,51 @@ -.banner { - background-color: #fff; - height: 100vh; - color: #fff; - font-size: 1.2em; -} - -.home-main { +.banner-food { + background: url(../../../assets/images/comida3.jpg) no-repeat; min-height: 100vh; - display: flex; - align-items: center; - background:url(../../../assets/images/comida3.jpg) no-repeat; background-size: cover; background-position: center; - margin-bottom: 5%; + width: 100%; +} + +.banner-comida { + width: 100%; +} + +.subtitulo{ + text-transform: none; + line-height: 1.5 !important; + color: #000 !important; + font-weight: bold !important; + margin-left: 5%; + width: 60%; +} + +.titulo{ + font-size: 5rem !important; + color: #fff; + text-align: left; + margin-top: 25%; + margin-left: 5%; } + .home-main .content { max-width: 60rem; } -.home-main .content h3{ +/* .home-main .content h3{ font-size: 6rem; text-transform: uppercase; color:#fff; } .home-main .content p { + margin-left: 5%; font-size: 2rem; font-weight: lighter; line-height: 1.8; - padding:1rem 0; + padding: 1rem 0; color:#eee; -} +} */ .menu .box-container{ display: grid; @@ -88,8 +102,12 @@ cursor: pointer; } +.icons .modal-button { + background-color: #000; +} + .icons .a:hover{ - background:#000; + background:#513538; } .menu .box .icons .modal-topo h2{ @@ -175,15 +193,3 @@ font-size: 2.5rem; padding-bottom: 2.5rem; } -.subtitulo{ - text-transform: none; - line-height: 1.5 !important; - color: #000 !important; - font-weight: bold !important; -} - -.titulo{ - font-size: 5rem !important; - color: #fff; - width: 113% !important; -} diff --git a/src/componentes/pages/main/Main.js b/src/componentes/pages/main/Main.js index eb50999..8b9268f 100644 --- a/src/componentes/pages/main/Main.js +++ b/src/componentes/pages/main/Main.js @@ -4,182 +4,232 @@ import Header from "../../layout/header/Header"; import Footer from "../../layout/footer/Footer"; import Review from "../review/Review"; import Produto1 from "../../../assets/images/bee_redondo_pequeno.png"; -import Produto2 from "../../../assets/images/bee_redondo_pequeno.png"; -import Produto3 from "../../../assets/images/bee_redondo_pequeno.png"; +import Banner1 from "../../../assets/images/comida3.jpg"; +import Banner2 from "../../../assets/images/comida4.jpg"; import ProdutoModal1 from "../../../assets/images/comida2.jpg"; import Modal from "react-modal"; import { useState } from "react"; import { listProducts } from "../../../services/api"; +import ReactElasticCarousel from "react-elastic-carousel"; +import Item from "../../components/produto/item/Item"; Modal.setAppElement("#root"); function Main() { - const [modalIsOpen, setIsOpen] = useState(false); - const [products, setVal] = useState([]); + const [modalIsOpen, setIsOpen] = useState(false); + const [products, setVal] = useState([]); - const getProducts = async () => { - const { data } = await listProducts(); - console.log(data); - setVal(data); - }; + /******** Carousel ********/ + const breakPoints = [ + { width: 1, itemToShow: 1 }, + { width: 550, itemToShow: 2, itemScroll: 2 }, + { width: 768, itemToShow: 3 }, + { width: 1200, itemToShow: 4 }, + ]; + const [items, setItems] = useState([ +
+

Qual será a sua escolha?

+

+ Você não precisa ir longe e nem esperar horas por uma comida, + escolha uma opção pertinho de você +

+
, + , + , + , + ]); - function handleOpenModal() { - setIsOpen(true); - } - function handleCloseModal() { - setIsOpen(false); - } + const addItem = () => { + const nextItem = Math.max(1, items.length + 1); + setItems([...items, nextItem]); + }; + const removeItem = () => { + const endRange = Math.max(0, items.length - 1); + setItems(items.slice(0, endRange)); + }; + /***************************/ - const customStyles = { - content: { - top: "50%", - left: "50%", - right: "auto", - }, - }; - // const renderProduct = (product) => { - return ( -
-
+ const getProducts = async () => { + const { data } = await listProducts(); + console.log(data); + setVal(data); + }; -
-
-

Qual será a sua escolha?

-

- Você não precisa ir longe e nem esperar horas por uma comida, escolha uma opção pertinho de você -

+ function handleOpenModal() { + setIsOpen(true); + } + function handleCloseModal() { + setIsOpen(false); + } + + const customStyles = { + content: { + top: "50%", + left: "50%", + right: "auto", + }, + }; + // const renderProduct = (product) => { + return ( +
+
+ {/* +
+ + +
*/} + +
+ + {items.map((item) => ( + // + {item} + ))} +
-
-

Alguns Produtos

- + +
- {/* { products.map(renderProduct) } */} -
- {/* */} -
- - ); + ); // } } export default Main; diff --git a/src/componentes/pages/profile/Profile.css b/src/componentes/pages/profile/Profile.css index a1c41a2..c1974bd 100644 --- a/src/componentes/pages/profile/Profile.css +++ b/src/componentes/pages/profile/Profile.css @@ -8,4 +8,37 @@ h2 { .logout-botao { font-size: 2rem; +} +.teste{ + background-color: #000; +} +.banner-perfil{ + min-height: 50vh; + display: flex; + align-items: center; + background:url(../../../assets/images/comida3.jpg) no-repeat; + background-size: cover; + background-position: center; + margin-bottom: 5%; +} +.botaofechar{ + top: -40%; + position: relative; + right: 35%; +} +.foto-perfil{ + text-align: center; + position: relative; + margin-top: -10%; +} +.nome-perfil{ + color: #fff; + font-size: 3rem; +} +.foto{ + position: relative; + width: 10%; + align-items: center; + border-radius: 80px; + } \ No newline at end of file diff --git a/src/componentes/pages/profile/Profile.js b/src/componentes/pages/profile/Profile.js index 000b262..3d017f0 100644 --- a/src/componentes/pages/profile/Profile.js +++ b/src/componentes/pages/profile/Profile.js @@ -1,35 +1,94 @@ +import Footer from "../../layout/footer/Footer"; +import Header from "../../layout/header/Header"; +import "./Profile.css"; +import Modal from "react-modal"; +import Produto1 from "../../../assets/images/bee_redondo_pequeno.png"; +import reginaldo from "../../../assets/images/about-reginaldo.jpg"; +import ProdutoModal1 from "../../../assets/images/comida2.jpg"; +import React, { useContext } from "react"; +import { AuthContext } from "../../../contexts/auth"; +import { BiBlock } from "react-icons/bi"; +import { BsCheckLg } from "react-icons/bs"; +import { Link } from "react-router-dom"; -import Footer from '../../layout/footer/Footer'; -import Header from '../../layout/header/Header'; -import './Profile.css'; +function Profile() { + const { authenticated, logout } = useContext(AuthContext); -import React, { useContext } from 'react'; -import { AuthContext } from '../../../contexts/auth'; + const handleLogout = () => { + logout(); + }; -function Profile(){ - - const { authenticated, logout } = useContext(AuthContext); - - - const handleLogout = () => { - logout(); - } - - - return ( - <> -
-

{String(authenticated)}

-

USUÁRIO BEE

-

HOME

-

PERFIL

-

PRODUTOS

-

CONFIGURAÇÕES

- -
- - ) + + return ( + <> +
+
+
+
+
+ +
Reginaldo Neto
+
+

Meus Produtos

+ + + +
+
+ + ); } export default Profile; - diff --git a/src/componentes/pages/review/Review.css b/src/componentes/pages/review/Review.css index 2807d38..e69de29 100644 --- a/src/componentes/pages/review/Review.css +++ b/src/componentes/pages/review/Review.css @@ -1,46 +0,0 @@ -/* .review .box-container{ - display: grid; - grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); - gap:1.5rem; - margin-bottom: 5%; -} - -.review .box-container .box{ - border:var(--border); - text-align: center; - padding:3rem 2rem; -} - -.review .box-container .box p{ - font-size: 1.5rem; - line-height: 1.8; - color:#ccc; - padding:2rem 0; -} - -.review .box-container .box .user{ - height: 7rem; - width: 7rem; - border-radius: 50%; - object-fit: cover; -} - -.review .box-container .box h3{ - padding:1rem 0; - font-size: 2rem; - color:#fff; -} - -.review .box-container .box .stars i{ - font-size: 1.5rem; - color:var(--main-color); -} - -.review .box img { - width: 15%; -} */ - -.review-avaliacoes { - display: flex; - gap: 15px; -} \ No newline at end of file diff --git a/src/componentes/pages/review/Review.js b/src/componentes/pages/review/Review.js index 22e1a48..cb66b56 100644 --- a/src/componentes/pages/review/Review.js +++ b/src/componentes/pages/review/Review.js @@ -5,71 +5,19 @@ import Header from "../../layout/header/Header"; import Footer from "../../layout/footer/Footer"; import Avaliacao from "../../components/produto/avaliacao/Avaliacao"; - function Review() { - return( -
- {/*
*/} - -
-

Avaliações

- -
- - - -
+ return ( +
+

+ {" "} + Avaliações {" "} +

-{/*
-
-
- -
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.

-
- -
-

Pessoa 1

-
- - - - - -
-
-
- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.

- -

Pessoa 2

-
- - - - - +
+
-
-
- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.

- -

Pessoa 3

-
- - - - - -
-
-
*/} -
- - -
- ); -} -export default Review; \ No newline at end of file + + ); +} +export default Review;