diff --git a/package-lock.json b/package-lock.json index 8a6763b..ea25cbd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@types/node": "^16.11.52", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", + "framer-motion": "^7.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -2159,6 +2160,21 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -2978,6 +2994,64 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@motionone/animation": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.14.0.tgz", + "integrity": "sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==", + "dependencies": { + "@motionone/easing": "^10.14.0", + "@motionone/types": "^10.14.0", + "@motionone/utils": "^10.14.0", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/dom": { + "version": "10.13.1", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.13.1.tgz", + "integrity": "sha512-zjfX+AGMIt/fIqd/SL1Lj93S6AiJsEA3oc5M9VkUr+Gz+juRmYN1vfvZd6MvEkSqEjwPQgcjN7rGZHrDB9APfQ==", + "dependencies": { + "@motionone/animation": "^10.13.1", + "@motionone/generators": "^10.13.1", + "@motionone/types": "^10.13.0", + "@motionone/utils": "^10.13.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/easing": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.14.0.tgz", + "integrity": "sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==", + "dependencies": { + "@motionone/utils": "^10.14.0", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/generators": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.14.0.tgz", + "integrity": "sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==", + "dependencies": { + "@motionone/types": "^10.14.0", + "@motionone/utils": "^10.14.0", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/types": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.14.0.tgz", + "integrity": "sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ==" + }, + "node_modules/@motionone/utils": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.14.0.tgz", + "integrity": "sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==", + "dependencies": { + "@motionone/types": "^10.14.0", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -7909,6 +7983,34 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/framer-motion": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.2.0.tgz", + "integrity": "sha512-D24ZHtbtdpiaByamNYiVXafVU6JfBxjrVlR1beyNupJL80haaDE23xS4dR0b/Qb64frtw/Mpdd9VYwSCv+UtSw==", + "dependencies": { + "@motionone/dom": "10.13.1", + "framesync": "6.1.2", + "hey-listen": "^1.0.8", + "popmotion": "11.0.5", + "style-value-types": "5.1.2", + "tslib": "2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/framesync": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz", + "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==", + "dependencies": { + "tslib": "2.4.0" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -8258,6 +8360,11 @@ "he": "bin/he" } }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -12180,6 +12287,17 @@ "node": ">=4" } }, + "node_modules/popmotion": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz", + "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==", + "dependencies": { + "framesync": "6.1.2", + "hey-listen": "^1.0.8", + "style-value-types": "5.1.2", + "tslib": "2.4.0" + } + }, "node_modules/postcss": { "version": "8.4.16", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", @@ -14904,6 +15022,15 @@ "webpack": "^5.0.0" } }, + "node_modules/style-value-types": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz", + "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==", + "dependencies": { + "hey-listen": "^1.0.8", + "tslib": "2.4.0" + } + }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -17927,6 +18054,21 @@ "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==", "requires": {} }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -18537,6 +18679,64 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "@motionone/animation": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.14.0.tgz", + "integrity": "sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==", + "requires": { + "@motionone/easing": "^10.14.0", + "@motionone/types": "^10.14.0", + "@motionone/utils": "^10.14.0", + "tslib": "^2.3.1" + } + }, + "@motionone/dom": { + "version": "10.13.1", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.13.1.tgz", + "integrity": "sha512-zjfX+AGMIt/fIqd/SL1Lj93S6AiJsEA3oc5M9VkUr+Gz+juRmYN1vfvZd6MvEkSqEjwPQgcjN7rGZHrDB9APfQ==", + "requires": { + "@motionone/animation": "^10.13.1", + "@motionone/generators": "^10.13.1", + "@motionone/types": "^10.13.0", + "@motionone/utils": "^10.13.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "@motionone/easing": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.14.0.tgz", + "integrity": "sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==", + "requires": { + "@motionone/utils": "^10.14.0", + "tslib": "^2.3.1" + } + }, + "@motionone/generators": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.14.0.tgz", + "integrity": "sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==", + "requires": { + "@motionone/types": "^10.14.0", + "@motionone/utils": "^10.14.0", + "tslib": "^2.3.1" + } + }, + "@motionone/types": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.14.0.tgz", + "integrity": "sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ==" + }, + "@motionone/utils": { + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.14.0.tgz", + "integrity": "sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==", + "requires": { + "@motionone/types": "^10.14.0", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -22132,6 +22332,28 @@ "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==" }, + "framer-motion": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.2.0.tgz", + "integrity": "sha512-D24ZHtbtdpiaByamNYiVXafVU6JfBxjrVlR1beyNupJL80haaDE23xS4dR0b/Qb64frtw/Mpdd9VYwSCv+UtSw==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "@motionone/dom": "10.13.1", + "framesync": "6.1.2", + "hey-listen": "^1.0.8", + "popmotion": "11.0.5", + "style-value-types": "5.1.2", + "tslib": "2.4.0" + } + }, + "framesync": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz", + "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==", + "requires": { + "tslib": "2.4.0" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -22377,6 +22599,11 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25211,6 +25438,17 @@ } } }, + "popmotion": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz", + "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==", + "requires": { + "framesync": "6.1.2", + "hey-listen": "^1.0.8", + "style-value-types": "5.1.2", + "tslib": "2.4.0" + } + }, "postcss": { "version": "8.4.16", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", @@ -27018,6 +27256,15 @@ "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", "requires": {} }, + "style-value-types": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz", + "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "2.4.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 fd08187..2c04d9f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.11.52", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", + "framer-motion": "^7.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/public/index.html b/public/index.html index aa069f2..16b434f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/App.css b/src/App.css index 74b5e05..6b89817 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,3 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.App { + } diff --git a/src/App.tsx b/src/App.tsx index a53698a..8b26301 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,11 @@ import React from 'react'; -import logo from './logo.svg'; import './App.css'; +import { Header } from './components/header/header'; function App() { return (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
); } diff --git a/src/components/footer/logoIcon.svg b/src/components/footer/logoIcon.svg new file mode 100644 index 0000000..a2e86e1 --- /dev/null +++ b/src/components/footer/logoIcon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/header/chevronIcon.svg b/src/components/header/chevronIcon.svg new file mode 100644 index 0000000..b5f642d --- /dev/null +++ b/src/components/header/chevronIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/header/header.css b/src/components/header/header.css new file mode 100644 index 0000000..f1914c4 --- /dev/null +++ b/src/components/header/header.css @@ -0,0 +1,54 @@ +.header-container { + display: flex; + padding: 35px 40px; + box-sizing: border-box; + color: #FFFFFF; + justify-content: space-between; + align-items: center; +} + +.header-logo { + width: 31px; + height: 50px; +} + +.header-buttons { + display: flex; + gap: 40px; +} + +.header-button { + background-color: transparent; + border: none; + font-weight: 400; + font-size: 16px; + line-height: 125%; + color: #FFFFFF; +} + +.header-lang-button { + display: flex; + align-items: center; + padding: 6px 12px; + justify-content: space-between; + box-sizing: border-box; + font-weight: 400; + font-size: 11px; + line-height: 13px; + color: #EBEBEB; + background-color: transparent; + border-radius: 50px; + border: 2px solid #EBEBEB; +} + +.header-lang-button-text { + display: flex; + align-self: center; +} + +.header-lang-button-icon { + width: 16px; + height: 16px; + background: url('chevronIcon.svg') 50% 50% no-repeat; + background-size: 100% 100%; +} \ No newline at end of file diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx new file mode 100644 index 0000000..a3eaa38 --- /dev/null +++ b/src/components/header/header.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import logo from './logoIcon.svg'; +import './header.css'; + +export const Header:React.FC = React.memo(() => { + return
+ company-logo +
+ + + +
+
+}) \ No newline at end of file diff --git a/src/components/header/logoIcon.svg b/src/components/header/logoIcon.svg new file mode 100644 index 0000000..a2e86e1 --- /dev/null +++ b/src/components/header/logoIcon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/index.css b/src/index.css index ec2585e..ee7cd41 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,8 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + + background: #0E0E0E; } code {