diff --git a/package-lock.json b/package-lock.json index c75e15d..d44e8b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react": "^18.2.0", "react-bootstrap": "^2.7.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.7.0", "react-scripts": "5.0.1", "react-text-mask": "^5.5.0", "typescript": "^4.9.4", @@ -3140,6 +3141,14 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } }, + "node_modules/@remix-run/router": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz", + "integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@restart/hooks": { "version": "0.4.7", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz", @@ -15327,6 +15336,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz", + "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==", + "dependencies": { + "@remix-run/router": "1.3.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz", + "integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==", + "dependencies": { + "@remix-run/router": "1.3.0", + "react-router": "6.7.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -20870,6 +20909,11 @@ "@swc/helpers": "^0.4.14" } }, + "@remix-run/router": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz", + "integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA==" + }, "@restart/hooks": { "version": "0.4.7", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz", @@ -29643,6 +29687,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz", + "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==", + "requires": { + "@remix-run/router": "1.3.0" + } + }, + "react-router-dom": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz", + "integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==", + "requires": { + "@remix-run/router": "1.3.0", + "react-router": "6.7.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 49d6fd8..e6f8124 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-bootstrap": "^2.7.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.7.0", "react-scripts": "5.0.1", "react-text-mask": "^5.5.0", "typescript": "^4.9.4", diff --git a/public/index.html b/public/index.html index aa069f2..b20bcb0 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,23 @@ - - - - - - - - - - - React App - - - -
- - - + + + + \ No newline at end of file diff --git a/src/components/Address/Address.tsx b/src/components/Address/Address.tsx index bf006c2..1e88714 100644 --- a/src/components/Address/Address.tsx +++ b/src/components/Address/Address.tsx @@ -1,7 +1,8 @@ import React from "react"; +import styles from "./address.module.scss"; const Address = () => { return ( -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

diff --git a/src/components/Address/address.module.scss b/src/components/Address/address.module.scss new file mode 100644 index 0000000..9b4ad43 --- /dev/null +++ b/src/components/Address/address.module.scss @@ -0,0 +1,19 @@ +.endereco { + width: 234px; + height: 24px; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: white; + margin: 0 0 0 0; + + @media screen and (min-width: 2500px) { + width: 467px; + height: 47px; + font-size: 20px; + line-height: 23px; + } +} diff --git a/src/components/Caminhos/Caminhos.tsx b/src/components/Caminhos/Caminhos.tsx new file mode 100644 index 0000000..5d49f93 --- /dev/null +++ b/src/components/Caminhos/Caminhos.tsx @@ -0,0 +1,34 @@ +import homeImg from "./assets/image/home.png"; +import styles from "./caminhos.module.scss"; +import { Link, Outlet } from "react-router-dom"; +import { Home } from "../../pages/Home"; +import React, { useState } from "react"; + +const Caminhos = (prop: { titulo: string }) => { + return ( + <> + + + + + ); +}; +export { Caminhos }; diff --git a/src/components/Caminhos/assets/image/home.png b/src/components/Caminhos/assets/image/home.png new file mode 100644 index 0000000..9eca2c3 Binary files /dev/null and b/src/components/Caminhos/assets/image/home.png differ diff --git a/src/components/Caminhos/caminhos.module.scss b/src/components/Caminhos/caminhos.module.scss new file mode 100644 index 0000000..3c5b5dc --- /dev/null +++ b/src/components/Caminhos/caminhos.module.scss @@ -0,0 +1,24 @@ +.caminhos-itens { + display: flex; + flex-direction: row; + gap: 5px; + align-items: baseline; + margin: 30px 0 0 100px; + p { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 12px; + text-transform: uppercase; + color: #c4c4c4; + @media screen and (min-width: 2500px) { + font-size: 24px; + } + } +} +.home_img { + width: 16px; + @media screen and (min-width: 2500px) { + width: 31.25px; + } +} diff --git a/src/components/DevelopedBy/developedBy.module.scss b/src/components/DevelopedBy/developedBy.module.scss index 470f3ca..929b98c 100644 --- a/src/components/DevelopedBy/developedBy.module.scss +++ b/src/components/DevelopedBy/developedBy.module.scss @@ -3,6 +3,27 @@ flex-direction: row; align-items: center; p { - margin-right: 30px; + display: flex; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + + text-transform: capitalize; + margin-right: 13px; + color: white; + margin: 0 13px 0 0; + @media screen and (min-width: 2500px) { + font-size: 20px; + } + } + img { + width: 28.66px; + height: 15.65px; + @media screen and (min-width: 2500px) { + width: 34.15px; + height: 23.87px; + } } } diff --git a/src/components/M3Logo/M3Logo.tsx b/src/components/M3Logo/M3Logo.tsx index f402bfc..cf71a9b 100644 --- a/src/components/M3Logo/M3Logo.tsx +++ b/src/components/M3Logo/M3Logo.tsx @@ -1,8 +1,14 @@ import React from "react"; import m3LogoImg from "./assets/image/Logo-M3Academy.svg"; - +import styles from "./m3logo.module.scss"; const M3Logo = () => { - return M3 Academy logo; + return ( + M3 Academy logo + ); }; export { M3Logo }; diff --git a/src/components/M3Logo/m3logo.module.scss b/src/components/M3Logo/m3logo.module.scss new file mode 100644 index 0000000..885495b --- /dev/null +++ b/src/components/M3Logo/m3logo.module.scss @@ -0,0 +1,6 @@ +.M3LogoImg { + width: 136px; + @media screen and (min-width: 2500px) { + width: 265px; + } +} diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx index 68d04bb..c6c173e 100644 --- a/src/components/NavigationBar/NavigationBar.tsx +++ b/src/components/NavigationBar/NavigationBar.tsx @@ -1,32 +1,79 @@ -import Container from "react-bootstrap/Container"; -import Nav from "react-bootstrap/Nav"; -import Navbar from "react-bootstrap/Navbar"; -import NavDropdown from "react-bootstrap/NavDropdown"; +import { M3Logo } from "../M3Logo/M3Logo"; import styles from "./navigationBar.module.scss"; - +import m3LogoImg from "./assets/image/Logo-M3Academy.svg"; +import { Cart } from "../Cart/Cart"; +import React, { useState } from "react"; +import { Link, Outlet } from "react-router-dom"; +import { Enter } from "../Enter/Enter"; const NavigationBar = () => { return ( - - - - - - - - + <> + + + ); }; diff --git a/src/components/NavigationBar/assets/image/Logo-M3Academy.svg b/src/components/NavigationBar/assets/image/Logo-M3Academy.svg new file mode 100644 index 0000000..f57d95b --- /dev/null +++ b/src/components/NavigationBar/assets/image/Logo-M3Academy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/NavigationBar/navigationBar.module.scss b/src/components/NavigationBar/navigationBar.module.scss index 6db56bc..8b13789 100644 --- a/src/components/NavigationBar/navigationBar.module.scss +++ b/src/components/NavigationBar/navigationBar.module.scss @@ -1,28 +1 @@ -.cursosNav { - color: #ffffff; - font-family: "Roboto"; - font-weight: 500; - font-size: 14px; - @media screen and (min-width: 2500px) { - font-size: 28px; - } -} -.saibaNav { - color: #ffffff; - font-family: "Roboto"; - font-weight: 500; - font-size: 14px; - @media screen and (min-width: 2500px) { - font-size: 28px; - } -} -.instituicionaisNav { - color: #ffffff; - font-family: "Roboto"; - font-weight: 500; - font-size: 14px; - @media screen and (min-width: 2500px) { - font-size: 28px; - } -} diff --git a/src/components/Newsletter/newsletter.module.scss b/src/components/Newsletter/newsletter.module.scss index 2134542..f9c9d7f 100644 --- a/src/components/Newsletter/newsletter.module.scss +++ b/src/components/Newsletter/newsletter.module.scss @@ -1,9 +1,17 @@ .newsForm { + width: 474px; + height: 72px; display: flex; flex-direction: column; font-weight: 500; font-size: 18px; + font-family: "Roboto"; font-variant: small-caps; + line-height: 21px; + letter-spacing: 0.05em; + font-style: normal; + color: #303030; + margin: 16px 0 16px 0; @media screen and (min-width: 2500px) { font-size: 36px; } @@ -26,6 +34,7 @@ font-weight: 400; font-size: 14px; color: #c4c4c4; + font-family: "Roboto"; @media screen and (min-width: 2500px) { font-size: 28px; } @@ -36,6 +45,7 @@ } } .newsForm-btn { + display: flex; width: 126px; height: 42px; background: #000000; @@ -45,6 +55,8 @@ color: white; font-weight: 700; font-size: 12px; + align-items: center; + justify-content: center; @media screen and (min-width: 2500px) { width: 246px; height: 59px; diff --git a/src/components/Payments/Payments.tsx b/src/components/Payments/Payments.tsx index 668687f..a6720ae 100644 --- a/src/components/Payments/Payments.tsx +++ b/src/components/Payments/Payments.tsx @@ -38,7 +38,7 @@ const Payments = () => { }; const VtexPci = () => { - return vtx Pci; + return vtx Pci; }; export { Payments, VtexPci }; diff --git a/src/components/Payments/payments.module.scss b/src/components/Payments/payments.module.scss index 2d88400..bffead2 100644 --- a/src/components/Payments/payments.module.scss +++ b/src/components/Payments/payments.module.scss @@ -1,4 +1,25 @@ .paymentsList { display: flex; flex-direction: row; + gap: 12px; + padding: 0 0 0 0; +} +.paymentsItem { + img { + width: 35px; + height: 20.2px; + @media screen and (min-width: 2500px) { + width: 70px; + height: 40.25px; + } + } +} + +.paymentsPci { + width: 54.61px; + height: 34px; + @media screen and (min-width: 2500px) { + width: 106px; + height: 66px; + } } diff --git a/src/components/PoweredBy/assets/image/vtexLogo.png b/src/components/PoweredBy/assets/image/vtexLogo.png index 867c3bb..8f08de3 100644 Binary files a/src/components/PoweredBy/assets/image/vtexLogo.png and b/src/components/PoweredBy/assets/image/vtexLogo.png differ diff --git a/src/components/PoweredBy/poweredBy.module.scss b/src/components/PoweredBy/poweredBy.module.scss index 2b531b4..3bb5f42 100644 --- a/src/components/PoweredBy/poweredBy.module.scss +++ b/src/components/PoweredBy/poweredBy.module.scss @@ -3,6 +3,27 @@ flex-direction: row; align-items: center; p { - margin-right: 30px; + display: flex; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + + text-transform: capitalize; + margin-right: 13px; + color: white; + margin: 0 13px 0 0; + @media screen and (min-width: 2500px) { + font-size: 20px; + } + } + img { + width: 44.92px; + height: 16px; + @media screen and (min-width: 2500px) { + width: 84.22px; + height: 30px; + } } } diff --git a/src/components/Router/Router.tsx b/src/components/Router/Router.tsx new file mode 100644 index 0000000..5be1701 --- /dev/null +++ b/src/components/Router/Router.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { Routes, Route, BrowserRouter } from "react-router-dom"; + +import { Home } from "../../pages/Home"; +import { Teste } from "../../pages/Teste"; +import { Cursos } from "../../pages/Cursos"; +/* +import Home from "./Home"; +import Sobre from "./Sobre"; +import Usuario from "./Usuario"; + + + +*/ + +const RoutesUrl = () => { + return ( + + }> + } /> + + ); +}; + +export { RoutesUrl }; diff --git a/src/components/SearchBox/searchBox.module.scss b/src/components/SearchBox/searchBox.module.scss index 256e116..1669f12 100644 --- a/src/components/SearchBox/searchBox.module.scss +++ b/src/components/SearchBox/searchBox.module.scss @@ -10,16 +10,8 @@ gap: 10px; width: 264px; height: 32px; - /* - position: absolute; - - left: 508px; - top: 22px; - */ - /* white */ background: #ffffff; - /* primary-700 */ border: 2px solid #f2f2f2; border-radius: 5px; @@ -27,6 +19,11 @@ width: 515.62px; height: 57px; } + @media screen and (max-width: 1024px) { + width: 992px; + height: 36px; + margin: 20px 0 20px 0; + } } .buscaBtn { position: relative; @@ -36,7 +33,7 @@ border-radius: 5px; background-color: white; right: 30px; - top: 5px; + top: 0px; &::placeholder { color: #c4c4c4; font-weight: 400; @@ -49,6 +46,10 @@ font-size: 28px; } } + @media screen and (max-width: 1024px) { + right: 30px; + top: 23px; + } } .searchImg { diff --git a/src/components/Socials/Socials.tsx b/src/components/Socials/Socials.tsx index aee8b92..ef39412 100644 --- a/src/components/Socials/Socials.tsx +++ b/src/components/Socials/Socials.tsx @@ -11,19 +11,29 @@ const Socials = () => {
diff --git a/src/components/Socials/socials.module.scss b/src/components/Socials/socials.module.scss index e4413e1..c82984e 100644 --- a/src/components/Socials/socials.module.scss +++ b/src/components/Socials/socials.module.scss @@ -6,6 +6,7 @@ li { margin-right: 10px; } + padding: 0 0 0 0; } a { text-decoration: none; @@ -19,4 +20,8 @@ line-height: 32.81px; } } + img { + width: 35px; + height: 35px; + } } diff --git a/src/components/Whatsapp/Whatsapp.tsx b/src/components/Whatsapp/Whatsapp.tsx index 4fa35e9..0b8daf1 100644 --- a/src/components/Whatsapp/Whatsapp.tsx +++ b/src/components/Whatsapp/Whatsapp.tsx @@ -1,10 +1,13 @@ import React from "react"; import whatsappImg from "./assets/image/whatsapp.png"; +import styles from "./whatsapp.module.scss"; const Whatsapp = () => { return ( -
- Whatsapp + ); }; diff --git a/src/components/Whatsapp/whatsapp.module.scss b/src/components/Whatsapp/whatsapp.module.scss new file mode 100644 index 0000000..17e3feb --- /dev/null +++ b/src/components/Whatsapp/whatsapp.module.scss @@ -0,0 +1,10 @@ +.whatsapp-wrapper { + img { + width: 34px; + height: 34px; + @media screen and (min-width: 2500px) { + width: 66px; + height: 66px; + } + } +} diff --git a/src/index.tsx b/src/index.tsx index d42211a..239a017 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,25 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./styles/main.scss"; +import { BrowserRouter, Route } from "react-router-dom"; import { Home } from "./pages/Home"; - +import { Teste } from "./pages/Teste"; +import { Cursos } from "./pages/Cursos"; +import { RoutesUrl } from "./components/Router/Router"; +import { Header } from "./sectors/Header/Header"; +import { Footer } from "./sectors/Footer/Footer"; +import { Newsletter } from "./components/Newsletter/Newsletter"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( - + +
+ + +
+ ); diff --git a/src/pages/Cursos.tsx b/src/pages/Cursos.tsx new file mode 100644 index 0000000..e784b57 --- /dev/null +++ b/src/pages/Cursos.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { CursosBody } from "../sectors/Body/CursosBody"; +import { Caminhos } from "../components/Caminhos/Caminhos"; +import { Header } from "../sectors/Header/Header"; +const Cursos = (prop: { titulo: string }) => { + return ( +
+ + +
+ ); +}; + +export { Cursos }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 10c4cb1..54a651a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,13 +1,8 @@ import React from "react"; -import { AccordionBody } from "../components/AccordionBody/AccordionBody"; - -const Home = () => { - //const style = { background: "black" }; - return ( -
- -
- ); +import { Header } from "../sectors/Header/Header"; +import { Footer } from "../sectors/Footer/Footer"; +const Home = (prop: { titulo: string }) => { + return
; }; export { Home }; diff --git a/src/pages/Teste.tsx b/src/pages/Teste.tsx new file mode 100644 index 0000000..e926666 --- /dev/null +++ b/src/pages/Teste.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { Header } from "../sectors/Header/Header"; +import { Caminhos } from "../components/Caminhos/Caminhos"; + +const Teste = (prop: { titulo: string }) => { + return ( +
+ +
+ ); +}; + +export { Teste }; diff --git a/src/sectors/Body/CursosBody.tsx b/src/sectors/Body/CursosBody.tsx new file mode 100644 index 0000000..62fbce4 --- /dev/null +++ b/src/sectors/Body/CursosBody.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const CursosBody = () => { + return

Cursos

; +}; + +export { CursosBody }; diff --git a/src/sectors/Footer/BottomFooter/BottomFooter.tsx b/src/sectors/Footer/BottomFooter/BottomFooter.tsx new file mode 100644 index 0000000..05b3e93 --- /dev/null +++ b/src/sectors/Footer/BottomFooter/BottomFooter.tsx @@ -0,0 +1,23 @@ +import { Address } from "../../../components/Address/Address"; +import { Payments } from "../../../components/Payments/Payments"; +import { VtexPci } from "../../../components/Payments/Payments"; +import { PoweredBy } from "../../../components/PoweredBy/PoweredBy"; +import { DevelopedBy } from "../../../components/DevelopedBy/DevelopedBy"; +const BottomFooter = () => { + return ( +
+
+
+ +

|

+ +
+
+ + +
+
+ ); +}; + +export { BottomFooter }; diff --git a/src/sectors/Footer/Footer.tsx b/src/sectors/Footer/Footer.tsx new file mode 100644 index 0000000..cb53813 --- /dev/null +++ b/src/sectors/Footer/Footer.tsx @@ -0,0 +1,14 @@ +import { TopFooter } from "./TopFooter/TopFooter"; +import { BottomFooter } from "./BottomFooter/BottomFooter"; +import { Newsletter } from "../../components/Newsletter/Newsletter"; +const Footer = () => { + return ( +
+ + + +
+ ); +}; + +export { Footer }; diff --git a/src/sectors/Footer/TopFooter/TopFooter.tsx b/src/sectors/Footer/TopFooter/TopFooter.tsx new file mode 100644 index 0000000..6433fe9 --- /dev/null +++ b/src/sectors/Footer/TopFooter/TopFooter.tsx @@ -0,0 +1,24 @@ +import { Institutional } from "../../../components/Institutional/Institutional"; +import { Doubts } from "../../../components/Doubts/Doubts"; +import { Contact } from "../../../components/Contact/Contact"; +import { Socials } from "../../../components/Socials/Socials"; +import { Whatsapp } from "../../../components/Whatsapp/Whatsapp"; + +const TopFooter = () => { + return ( +
+ + + + + + +
+ + +
+
+ ); +}; + +export { TopFooter }; diff --git a/src/sectors/Header/BottomHeader/BottomHeader.tsx b/src/sectors/Header/BottomHeader/BottomHeader.tsx new file mode 100644 index 0000000..7304a26 --- /dev/null +++ b/src/sectors/Header/BottomHeader/BottomHeader.tsx @@ -0,0 +1,14 @@ +import { NavigationBar } from "../../../components/NavigationBar/NavigationBar"; +import { SearchBox } from "../../../components/SearchBox/SearchBox"; +const BottomHeader = () => { + return ( +
+ +
+ +
+
+ ); +}; + +export { BottomHeader }; diff --git a/src/sectors/Header/Header.tsx b/src/sectors/Header/Header.tsx index c6d305f..c4b6e4f 100644 --- a/src/sectors/Header/Header.tsx +++ b/src/sectors/Header/Header.tsx @@ -1,10 +1,11 @@ import React from "react"; import { TopHeader } from "./TopHeader/TopHeader"; - +import { BottomHeader } from "./BottomHeader/BottomHeader"; const Header = () => { return (
+
); }; diff --git a/src/sectors/Header/TopHeader/TopHeader.tsx b/src/sectors/Header/TopHeader/TopHeader.tsx index 2f5a8d0..4f71b87 100644 --- a/src/sectors/Header/TopHeader/TopHeader.tsx +++ b/src/sectors/Header/TopHeader/TopHeader.tsx @@ -1,40 +1,21 @@ import React from "react"; import styles from "./styles.module.scss"; -import logoAcademy from "./assets/images/Logo-M3Academy 1.svg"; -import searchImg from "./assets/images/search_2.png"; -import cartImg from "./assets/images/cart_1.png"; +import { M3Logo } from "../../../components/M3Logo/M3Logo"; +import { SearchBox } from "../../../components/SearchBox/SearchBox"; +import { Enter } from "../../../components/Enter/Enter"; +import { Cart } from "../../../components/Cart/Cart"; const TopHeader = () => { return ( -
- LogoM3Academy -
- - +
+ +
+ +
+
+ +
- - ENTRAR - - - ImagemCarrinho -
); }; diff --git a/src/styles/common/global.scss b/src/styles/common/global.scss index 420d4bc..647fc6d 100644 --- a/src/styles/common/global.scss +++ b/src/styles/common/global.scss @@ -18,12 +18,3 @@ button { li { list-style-type: none; } -/* -$grid-breakpoints: ( - xs: 0, - sm: 375px, - md: 768px, - lg: 1025px, - xl: 1280px, - xxl: 2500px, -);*/ diff --git a/src/styles/main.scss b/src/styles/main.scss index cff57d4..c0f7eff 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -3,4 +3,10 @@ @import "common/reset.scss"; @import "partials/header.scss"; @import "partials/container.scss"; -@import "~bootstrap/scss/bootstrap"; +@import "utils/custom.scss"; +@import "partials/navigation.scss"; +@import "partials/top_header.scss"; +@import "partials/bottom_header.scss"; +@import "partials/top_footer.scss"; +@import "partials/footer.scss"; +@import "partials/bottom_footer.scss"; diff --git a/src/styles/partials/bottom_footer.scss b/src/styles/partials/bottom_footer.scss new file mode 100644 index 0000000..f8a8858 --- /dev/null +++ b/src/styles/partials/bottom_footer.scss @@ -0,0 +1,30 @@ +.bottom_footer { + width: 100%; + display: flex; + flex-direction: row; + background: black; + margin: 0 auto; + padding: 20px 100px; + justify-content: space-between; +} +.bottom_footer_itens { + display: flex; + flex-direction: row; + + align-items: center; +} + +.pagamentos { + display: flex; + flex-direction: row; + + p { + color: white; + } + gap: 5px; +} +.creation { + display: flex; + flex-direction: row; + gap: 13px; +} diff --git a/src/styles/partials/bottom_header.scss b/src/styles/partials/bottom_header.scss new file mode 100644 index 0000000..f283512 --- /dev/null +++ b/src/styles/partials/bottom_header.scss @@ -0,0 +1,21 @@ +.bottom_header { + background: black; + padding: 0 100px 0 64px; + border-top: 1px solid #e5e5e5; + @media screen and (max-width: 1025px) { + padding: 0 16px 0 16px; + } + @media screen and (min-width: 1025px) { + .search-wrapper { + display: none; + } + } + @media screen and (max-width: 1025px) { + .bottom_header { + justify-content: center; + align-items: center; + } + .search-wrapper { + } + } +} diff --git a/src/styles/partials/footer.scss b/src/styles/partials/footer.scss new file mode 100644 index 0000000..a7072cd --- /dev/null +++ b/src/styles/partials/footer.scss @@ -0,0 +1,8 @@ +.footer-wrapper { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + border-top: 1px solid black; + margin-top: 81px; +} diff --git a/src/styles/partials/header.scss b/src/styles/partials/header.scss index c108e58..84fd064 100644 --- a/src/styles/partials/header.scss +++ b/src/styles/partials/header.scss @@ -1,6 +1,4 @@ .header { width: 100%; - height: 162px; background-color: $black100; - padding-top: 22px; } diff --git a/src/styles/partials/navigation.scss b/src/styles/partials/navigation.scss new file mode 100644 index 0000000..935aad2 --- /dev/null +++ b/src/styles/partials/navigation.scss @@ -0,0 +1,58 @@ +@media screen and (min-width: 1025px) { + .logoM3Img { + display: none; + } + .carrinho-wrapper { + display: none; + } +} +.logoM3Img { + width: 136px; +} +.nav-link { + font-family: "Roboto"; + color: white; + font-size: 14px; + font-weight: 500; + &:hover { + color: aqua; + } + .active { + color: aquamarine; + } + @media screen and (min-width: 2500px) { + font-size: 28px; + } + @media screen and (max-width: 1025px) { + color: #c4c4c4; + } +} +.bottom_header { + background: black; +} + +.navbar-toggler { + background-color: transparent; +} +.navbar-toggler-icon { + background-color: white; +} + +@media screen and (max-width: 1024px) { + .container-fluid { + padding: 0 0 0 0; + } + .navbar-nav { + margin-left: 20px; + } + .offcanvas-header { + background-color: black; + } + .btn-close { + background-color: #c4c4c4; + } + .offcanvas { + width: 100% !important; + height: 585px; + } +} diff --git a/src/styles/partials/top_footer.scss b/src/styles/partials/top_footer.scss new file mode 100644 index 0000000..effae37 --- /dev/null +++ b/src/styles/partials/top_footer.scss @@ -0,0 +1,13 @@ +.top_footer_wrapper { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 50px 16px 64px 100px; + border-top: 1px solid black; +} +.top_footer_socials { + display: flex; + flex-direction: row; + gap: 50px; +} diff --git a/src/styles/partials/top_header.scss b/src/styles/partials/top_header.scss new file mode 100644 index 0000000..7093870 --- /dev/null +++ b/src/styles/partials/top_header.scss @@ -0,0 +1,15 @@ +.top_header { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0 auto; + padding: 22px 100px 22px 100px; + @media screen and (max-width: 1024px) { + display: none; + } +} +.sign_up { + display: flex; + flex-direction: row; + gap: 55px; +} diff --git a/src/styles/utils/custom.scss b/src/styles/utils/custom.scss new file mode 100644 index 0000000..0d39b59 --- /dev/null +++ b/src/styles/utils/custom.scss @@ -0,0 +1,20 @@ +// Custom.scss +// Option A: Include all of Bootstrap + +// Include any default variable overrides here (though functions won't be available) +@import "/node_modules/bootstrap/scss/functions"; + +$grid-breakpoints: ( + xs: 0, + xsm: 362px, + sm: 576px, + md: 768px, + lg: 992px, + xpp: 1025px, + xl: 1200px, + xxl: 1400px, +); + +@import "/node_modules/bootstrap/scss/bootstrap.scss"; + +// Then add additional custom code here diff --git a/yarn.lock b/yarn.lock index 37b505c..62399f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1592,6 +1592,11 @@ dependencies: "@swc/helpers" "^0.4.14" +"@remix-run/router@1.3.0": + "integrity" "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA==" + "resolved" "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz" + "version" "1.3.0" + "@restart/hooks@^0.4.6", "@restart/hooks@^0.4.7": "integrity" "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==" "resolved" "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz" @@ -8341,7 +8346,7 @@ "strip-ansi" "^6.0.1" "text-table" "^0.2.0" -"react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0": +"react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0", "react-dom@>=16.8": "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz" "version" "18.2.0" @@ -8394,6 +8399,21 @@ "resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz" "version" "0.11.0" +"react-router-dom@^6.7.0": + "integrity" "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==" + "resolved" "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz" + "version" "6.7.0" + dependencies: + "@remix-run/router" "1.3.0" + "react-router" "6.7.0" + +"react-router@6.7.0": + "integrity" "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==" + "resolved" "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz" + "version" "6.7.0" + dependencies: + "@remix-run/router" "1.3.0" + "react-scripts@5.0.1": "integrity" "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==" "resolved" "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz" @@ -8466,7 +8486,7 @@ "loose-envify" "^1.4.0" "prop-types" "^15.6.2" -"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8.0": +"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0": "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==" "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz" "version" "18.2.0"