DmitriyB/streaming-landing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

добавлен хедер

Browse Source
This commit is contained in:
DmitriyB
2022-08-22 12:48:46 +05:00
parent f7586c2c0a
commit f07e41321c
11 changed files with 355 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+247
View File
@@ -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",
package.json
+1
View File
@@ -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",
public/index.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
src/App.css
+2 -37
View File
@@ -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 {
}
src/App.tsx
+2 -15
View File
@@ -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 (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Header />
</div>
);
}
src/components/footer/logoIcon.svg
+13
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/components/header/chevronIcon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.0001 12.6666L10.6667 8L6.0001 3.33334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 218 B

src/components/header/header.css
+54
View File
@@ -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%;
}
src/components/header/header.tsx
+17
View File
@@ -0,0 +1,17 @@
import React from "react";
import logo from './logoIcon.svg';
import './header.css';
export const Header:React.FC = React.memo(() => {
return <div className="header-container">
<img className="header-logo" alt="company-logo" src={logo} />
<div className="header-buttons">
<button className="header-button">Контакты</button>
<button className="header-button">О компании</button>
<button className="header-lang-button">
<span className="header-lang-button-text">RU</span>
<span className="header-lang-button-icon"></span>
</button>
</div>
</div>
})
src/components/header/logoIcon.svg
+13
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/index.css
+2
View File
@@ -5,6 +5,8 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #0E0E0E;
}
code {