diff --git a/public/assets/icons/cart-icon.svg b/public/assets/icons/cart-icon.svg new file mode 100644 index 0000000..cda4312 --- /dev/null +++ b/public/assets/icons/cart-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/assets/icons/search-icon.svg b/public/assets/icons/search-icon.svg new file mode 100644 index 0000000..9f9b9f0 --- /dev/null +++ b/public/assets/icons/search-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/Logo-M3Academy.png b/public/assets/images/Logo-M3Academy.png new file mode 100644 index 0000000..92bb00a Binary files /dev/null and b/public/assets/images/Logo-M3Academy.png differ diff --git a/public/index.html b/public/index.html index aa069f2..fcfdc63 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,11 @@ + + + + + - React App + Institucional - M3 Academy diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..85f2cb9 --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,28 @@ +import styles from "./header.module.scss"; + +export function Header() { + return ( +
+ Logo M3 Academy +
+ + +
+
+ Entrar + Carrinho +
+
+ ); +} diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss new file mode 100644 index 0000000..baab161 --- /dev/null +++ b/src/components/Header/header.module.scss @@ -0,0 +1,76 @@ +.header { + background: var(--black); + // height: 76px; + + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 100px; + + .logo { + width: 12.5925%; + + padding: 25px 0; + } + + .formSearch { + width: 24.44%; + height: 32px; + + background: var(--white); + + border: 2px solid #f2f2f2; + border-radius: 5px; + + display: flex; + align-items: center; + justify-content: space-between; + + input { + background: transparent; + padding: 0 10px 0 16px; + flex: 1; + + font-weight: 400; + font-size: 14px; + line-height: 16px; + + color: var(--gray-400); + + &::placeholder { + font-weight: 400; + font-size: 14px; + line-height: 16px; + + color: var(--gray-400); + } + } + + button { + background: transparent; + height: 18px; + padding-right: 16px; + } + } + + .entrarContainer { + width: 12.5925%; + + display: flex; + justify-content: space-between; + align-items: center; + + span { + color: var(--white); + + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + } + + img { + width: 20.5882%; + } + } +} diff --git a/src/global.css b/src/global.css deleted file mode 100644 index ec2585e..0000000 --- a/src/global.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/global.scss b/src/global.scss new file mode 100644 index 0000000..b95a966 --- /dev/null +++ b/src/global.scss @@ -0,0 +1,27 @@ +:root { + --black: #000000; + --black-100: #303030; + + --white: #ffffff; + + --gray-500: #7d7d7d; + --gray-400: #c4c4c4; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; + text-decoration: none; + outline: none; +} + +body { + font-family: "Roboto", sans-serif; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} diff --git a/src/index.tsx b/src/index.tsx index 41168fc..9f87c9c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import "./global.css"; +import "./global.scss"; import Home from "./pages/Home"; const root = ReactDOM.createRoot( diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2ec7e68..a47c13e 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,7 +1,8 @@ import React from "react"; +import { Header } from "../components/Header/Header"; function Home() { - return

Hello World!

; + return
; } export default Home; diff --git a/src/types/index.d.ts b/src/types/index.d.ts new file mode 100644 index 0000000..8802366 --- /dev/null +++ b/src/types/index.d.ts @@ -0,0 +1 @@ +declare module "*.module.scss"; diff --git a/tsconfig.json b/tsconfig.json index a273b0c..9d379a3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +16,5 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": ["src"] }