diff --git a/package-lock.json b/package-lock.json index d96c573..45ecb5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,9 @@ "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "sass": "^1.57.1" } }, "node_modules/@adobe/css-tools": { @@ -8634,6 +8637,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==", + "devOptional": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14517,6 +14526,23 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "devOptional": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -22986,6 +23012,12 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.18.tgz", "integrity": "sha512-eAPNpsj7Ax1q6Y/3lm2PmlwRcFzpON7HSNQ3ru5WQH1/PSpnyed/HpNOELl2CxLKoj4r+bAHgdyKqW5gc2Se1A==" }, + "immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==", + "devOptional": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -27033,6 +27065,17 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "devOptional": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/package.json b/package.json index 06a3712..4598d22 100644 --- a/package.json +++ b/package.json @@ -39,5 +39,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "sass": "^1.57.1" } } diff --git a/public/index.html b/public/index.html index 0eb6c96..153310f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,28 +1,23 @@ - + + + + + - - - - + + + + + React App diff --git a/src/assets/img/Logo-M3.png b/src/assets/img/Logo-M3.png new file mode 100644 index 0000000..d7524ec Binary files /dev/null and b/src/assets/img/Logo-M3.png differ diff --git a/src/assets/svg/cart.svg b/src/assets/svg/cart.svg new file mode 100644 index 0000000..fd775ad --- /dev/null +++ b/src/assets/svg/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/svg/search.svg b/src/assets/svg/search.svg new file mode 100644 index 0000000..80fc2f2 --- /dev/null +++ b/src/assets/svg/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Footer/footer.sass b/src/components/Footer/footer.scss similarity index 100% rename from src/components/Footer/footer.sass rename to src/components/Footer/footer.scss diff --git a/src/components/Header/header.tsx b/src/components/Header/header.tsx index d79eb23..cdcf34e 100644 --- a/src/components/Header/header.tsx +++ b/src/components/Header/header.tsx @@ -1,7 +1,35 @@ import React from 'react'; +import Logo from '../../assets/img/Logo-M3.png'; +import Search from '../../assets/svg/search.svg'; +import Cart from '../../assets/svg/cart.svg'; + +import styles from './headerStyle.module.scss'; + +import { HeaderBottom } from "./headerBottom"; const Header = () => { - return
+ return ( +
+
+
+ + Logo da M3 academy + +
+ +
+ + Entrar + carrinho + +
+
+ < HeaderBottom /> +
+ ) } export { Header }; \ No newline at end of file diff --git a/src/components/Header/headerBottom.tsx b/src/components/Header/headerBottom.tsx new file mode 100644 index 0000000..c33d268 --- /dev/null +++ b/src/components/Header/headerBottom.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import styles from './headerStyle.module.scss'; + +interface text{ + text: string; +} + +const Links = (props: text) => { + const { text } = props; + return ( + {text} + ) +} + +const HeaderBottom = () => { + return( +
+ + + +
+ ) +}; + +export { HeaderBottom } \ No newline at end of file diff --git a/src/components/Header/headerStyle.module.scss b/src/components/Header/headerStyle.module.scss new file mode 100644 index 0000000..664ce20 --- /dev/null +++ b/src/components/Header/headerStyle.module.scss @@ -0,0 +1,74 @@ +.conteiner { + background-color: black; + width: 100%; + + .conteiner-header { + display: flex; + height: 76px; + justify-content: space-between; + align-items: center; + padding: 0px 100px; + width: 100%; + + .conteiner-search { + display: flex; + background-color: white; + border: 2px solid #F2F2F2; + border-radius: 5px; + padding: 5px 16px; + height: 32px; + width: 24.445%; + + .search-input, .search-input::placeholder{ + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 14px; + border: 0; + line-height: 16px; + color: #C6C6C6; + width: 100%; + } + + .search-img { + height: 18px; + width: 18px; + } + } + + .conteiner-cart { + width: 12.594%; + + .cart-text{ + display: flex; + align-items: center; + justify-content: space-between; + text-transform: uppercase; + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: white; + } + } + + } + + .conteiner-bottom { + border-top: 1px solid #C4C4C4; + height: 44px; + display: flex; + align-items: center; + padding: 0 100px; + + .bottom-item{ + color: white; + font-family: 'Roboto'; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + text-decoration: none; + margin-right: 55px; + } + } +} \ No newline at end of file diff --git a/src/components/Header/header.sass b/src/components/Main/main.scss similarity index 100% rename from src/components/Header/header.sass rename to src/components/Main/main.scss diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 6431bc5..ba00239 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1 +1,3 @@ /// + +declare module '*.scss'; \ No newline at end of file diff --git a/src/components/Main/main.sass b/src/styles/App similarity index 100% rename from src/components/Main/main.sass rename to src/styles/App diff --git a/src/styles/App.css b/src/styles/App.css index 74b5e05..d94d416 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -1,38 +1,5 @@ -.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); - } +* { + box-sizing: border-box; + padding: 0; + margin: 0; }