)
};
-export {Footer}
\ No newline at end of file
+
+export { Footer }
\ No newline at end of file
diff --git a/desafio-5/src/components/scripts/header.tsx b/desafio-5/src/components/scripts/header.tsx
new file mode 100644
index 0000000..067f9bb
--- /dev/null
+++ b/desafio-5/src/components/scripts/header.tsx
@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react"
+
+import HeaderStyles from "../modules/header.module.scss"
+import Logo from '../assets/imgs/Logo.png';
+import LogoMobile from '../assets/imgs/Logo-M3Academy-mobile.png';
+import Lupa from "../assets/icons/search_Icon_desk.svg";
+import Cart from "../assets/icons/cart_desk_icon.svg";
+import MenuMobile from "../assets/icons/Hamburger_menu.svg";
+
+const Header = () =>{
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+};
+
+export { Header }
\ No newline at end of file
diff --git a/desafio-5/src/components/utils/Variables.scss b/desafio-5/src/components/utils/Variables.scss
new file mode 100644
index 0000000..672f9df
--- /dev/null
+++ b/desafio-5/src/components/utils/Variables.scss
@@ -0,0 +1,14 @@
+// colors
+$-black : #000000;
+$-white:#ffffff;
+$-gray: #D6D6D6;
+$-gray-light:#e5e5e5;
+$-gray-100: #F0F0F0;
+$-gray-200: #F2F2F2;
+$-gray-300:#C4C4C4;
+$-gray-400:#C6C6C6;
+$-gray-500:#858585;
+$-gray-600:#333333;
+$-prisma: #FF5A5F;
+$-crimson: rgb(156, 4, 34);
+$-shockPink:rgb(220, 20, 60);
\ No newline at end of file
diff --git a/Desafio_5/src/index.tsx b/desafio-5/src/index.tsx
similarity index 55%
rename from Desafio_5/src/index.tsx
rename to desafio-5/src/index.tsx
index a29a3b5..3f3d866 100644
--- a/Desafio_5/src/index.tsx
+++ b/desafio-5/src/index.tsx
@@ -1,32 +1,33 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import './Global.scss';
import { Home } from './pages/home';
-import { Header } from './components/partials/header';
-import { Footer } from './components/partials/footer';
+import { Header } from './components/scripts/header';
+import { Footer } from './components/scripts/footer';
+import './components/Main.scss';
+import './components/common/global.scss';
+import './components/common/resets.scss'
-const rootElementheader = document.getElementById('rootheader');
+const rootElement = document.getElementById('root');
+const rootheader = document.getElementById('rootheader');
+const rootfooter = document.getElementById('rootfooter');
-const rootElementmain = document.getElementById('root');
-
-const rootElementfooter = document.getElementById('rootfooter');
-
-if (rootElementheader) {
- ReactDOM.createRoot(rootElementheader).render(
+if (rootheader) {
+ ReactDOM.createRoot(rootheader).render(
);
} else {
// rootElement não foi encontrado. Talvez seja necessário aguardar o carregamento da página.
}
-if (rootElementmain) {
- ReactDOM.createRoot(rootElementmain).render(
+
+if (rootElement) {
+ ReactDOM.createRoot(rootElement).render(
);
} else {
// rootElement não foi encontrado. Talvez seja necessário aguardar o carregamento da página.
}
-if (rootElementfooter) {
- ReactDOM.createRoot(rootElementfooter).render(
+if (rootfooter) {
+ ReactDOM.createRoot(rootfooter).render(
);
} else {
diff --git a/desafio-5/src/pages/home.tsx b/desafio-5/src/pages/home.tsx
new file mode 100644
index 0000000..3c02595
--- /dev/null
+++ b/desafio-5/src/pages/home.tsx
@@ -0,0 +1,13 @@
+import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react"
+
+import MainStyles from "../components/modules/home.module.scss"
+
+const Home = () =>{
+ return (
+
+ conteudo da main
+
+ )
+};
+
+export { Home }
\ No newline at end of file
diff --git a/Desafio_5/src/react-app-env.d.ts b/desafio-5/src/react-app-env.d.ts
similarity index 100%
rename from Desafio_5/src/react-app-env.d.ts
rename to desafio-5/src/react-app-env.d.ts
diff --git a/Desafio_5/tsconfig.json b/desafio-5/tsconfig.json
similarity index 100%
rename from Desafio_5/tsconfig.json
rename to desafio-5/tsconfig.json
diff --git a/desafio-5/webpack.config.js b/desafio-5/webpack.config.js
new file mode 100644
index 0000000..fba5b78
--- /dev/null
+++ b/desafio-5/webpack.config.js
@@ -0,0 +1,31 @@
+const path = require('path');
+
+module.exports = {
+ entry: './src/index.js',
+ output: {
+ path: path.resolve(__dirname, 'build'),
+ filename: 'bundle.js',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ },
+ },
+ {
+ test: /\.s[ac]ss$/i,
+ use: [
+ // Creates `style` nodes from JS strings
+ 'style-loader',
+ // Translates CSS into CommonJS
+ 'css-loader',
+ // Compiles Sass to CSS
+ 'sass-loader',
+ ],
+ },
+ ],
+ },
+};
\ No newline at end of file