diff --git a/package-lock.json b/package-lock.json index 69342a3..14ee22f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4", @@ -7816,6 +7817,11 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -15077,6 +15083,29 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -17528,6 +17557,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -24042,6 +24079,11 @@ "strip-final-newline": "^2.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -29161,6 +29203,22 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -31008,6 +31066,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index 07ce9c2..f025231 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4", diff --git a/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx b/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx index 18d8671..60647f6 100644 --- a/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx +++ b/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx @@ -1,17 +1,17 @@ import React from "react" import styleSelosDev from "./FooterSelosDev.module.scss" -import masterCard from "../../../assets/img/master.svg" -import visaCard from "../../../assets/img/visa.svg" -import americanCard from "../../../assets/img/american-express.svg" -import eloCard from "../../../assets/img/elo.svg" -import hiperCard from "../../../assets/img/hiper.svg" -import paypalCard from "../../../assets/img/paypal.svg" -import boletoCard from "../../../assets/img/boleto.svg" -import vtexCertifiedCard from "../../../assets/img/vtex.svg" +import masterCard from "./assets/master.svg" +import visaCard from "./assets/visa.svg" +import americanCard from "./assets/american-express.svg" +import eloCard from "./assets/elo.svg" +import hiperCard from "./assets/hiper.svg" +import paypalCard from "./assets/paypal.svg" +import boletoCard from "./assets/boleto.svg" +import vtexCertifiedCard from "./assets/vtex.svg" -import vtexDev from "../../../assets/img/vtex-dev.svg" -import m3 from "../../../assets/img/m3.svg" +import vtexDev from "./assets/vtex-dev.svg" +import m3 from "./assets/m3.svg" export const FooterSelosDev = () => { diff --git a/src/assets/img/american-express.svg b/src/components/Footer/FooterSelosDev/assets/american-express.svg similarity index 100% rename from src/assets/img/american-express.svg rename to src/components/Footer/FooterSelosDev/assets/american-express.svg diff --git a/src/assets/img/boleto.svg b/src/components/Footer/FooterSelosDev/assets/boleto.svg similarity index 100% rename from src/assets/img/boleto.svg rename to src/components/Footer/FooterSelosDev/assets/boleto.svg diff --git a/src/assets/img/elo.svg b/src/components/Footer/FooterSelosDev/assets/elo.svg similarity index 100% rename from src/assets/img/elo.svg rename to src/components/Footer/FooterSelosDev/assets/elo.svg diff --git a/src/assets/img/hiper.svg b/src/components/Footer/FooterSelosDev/assets/hiper.svg similarity index 100% rename from src/assets/img/hiper.svg rename to src/components/Footer/FooterSelosDev/assets/hiper.svg diff --git a/src/assets/img/m3.svg b/src/components/Footer/FooterSelosDev/assets/m3.svg similarity index 100% rename from src/assets/img/m3.svg rename to src/components/Footer/FooterSelosDev/assets/m3.svg diff --git a/src/assets/img/master.svg b/src/components/Footer/FooterSelosDev/assets/master.svg similarity index 100% rename from src/assets/img/master.svg rename to src/components/Footer/FooterSelosDev/assets/master.svg diff --git a/src/assets/img/paypal.svg b/src/components/Footer/FooterSelosDev/assets/paypal.svg similarity index 100% rename from src/assets/img/paypal.svg rename to src/components/Footer/FooterSelosDev/assets/paypal.svg diff --git a/src/assets/img/visa.svg b/src/components/Footer/FooterSelosDev/assets/visa.svg similarity index 100% rename from src/assets/img/visa.svg rename to src/components/Footer/FooterSelosDev/assets/visa.svg diff --git a/src/assets/img/vtex-dev.svg b/src/components/Footer/FooterSelosDev/assets/vtex-dev.svg similarity index 100% rename from src/assets/img/vtex-dev.svg rename to src/components/Footer/FooterSelosDev/assets/vtex-dev.svg diff --git a/src/assets/img/vtex.svg b/src/components/Footer/FooterSelosDev/assets/vtex.svg similarity index 100% rename from src/assets/img/vtex.svg rename to src/components/Footer/FooterSelosDev/assets/vtex.svg diff --git a/src/components/Footer/LinksFooter/Links/Link.tsx b/src/components/Footer/LinksFooter/Links/Link.tsx new file mode 100644 index 0000000..594d4d8 --- /dev/null +++ b/src/components/Footer/LinksFooter/Links/Link.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +interface linkProps { + text: string; + href: string; +} + +export const Link = (props: linkProps) => { + + const { href, text } = props; + + return
  • {text}
    • +} + +export default Link; \ No newline at end of file diff --git a/src/components/Footer/LinksFooter/LinksFooter.tsx b/src/components/Footer/LinksFooter/LinksFooter.tsx index c2a152e..076018d 100644 --- a/src/components/Footer/LinksFooter/LinksFooter.tsx +++ b/src/components/Footer/LinksFooter/LinksFooter.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from "react" import styleLink from "./LinksFooter.module.scss" - -import facebook from "../../../assets/img/facebook.svg" -import instagram from "../../../assets/img/instagram.svg" -import twitter from "../../../assets/img/twitter.svg" -import youtube from "../../../assets/img/youtube.svg" -import linkedlin from "../../../assets/img/linkedlin.svg" - -import titleLinks from "../../../assets/img/titleLinks.svg" +import { Title } from "./Titles/Title" +import { ReactComponent as Facebook } from "./assets/facebook.svg" +import { ReactComponent as Instagram } from "./assets/instagram.svg" +import { ReactComponent as Twitter } from "./assets/twitter.svg" +import { ReactComponent as Youtube } from "./assets/youtube.svg" +import { ReactComponent as Linkedlin } from "./assets/linkedlin.svg" +import titleLinks from "./assets/titleLinks.svg" +import { Link } from "./Links/Link" export const LinksFooter = () => { @@ -54,60 +54,64 @@ export const LinksFooter = () => { return (
    -
    -

    handleListInstitucional(openInstitucional)} - className={styleLink["container__links__rodape__title"]}> - Institucional + text="Institucional" + className={styleLink["container__links__rodape__title"]} + src={titleLinks} + alt="Imagem expandir lista" + type="button" + ariaLabel="Exibir lista" /> - -

    {openInstitucional && } -
    -

    handleListDuvidas(openDuvidas)} className={styleLink["container__links__rodape__title"]}>Dúvidas - -

    + < Title + onClick={() => handleListDuvidas(openDuvidas)} + text="Dúvidas" + className={styleLink["container__links__rodape__title"]} + src={titleLinks} + alt="Imagem expandir lista" + type="button" + ariaLabel="Exibir lista" /> {openDuvidas && }
    -

    handleFaleConosco(openFaleConosco)} className={styleLink["container__links__rodape__title"]}>Fale Conosco - -

    + < Title + onClick={() => handleFaleConosco(openFaleConosco)} + text="Fale Conosco" + className={styleLink["container__links__rodape__title"]} + src={titleLinks} + alt="Imagem expandir lista" + type="button" + ariaLabel="Exibir lista" /> + {openFaleConosco && } -
    @@ -116,7 +120,7 @@ export const LinksFooter = () => {
  • - Imagem Facebook +
    • @@ -124,7 +128,7 @@ export const LinksFooter = () => {
  • - Imagem Instagram +
    • @@ -132,7 +136,7 @@ export const LinksFooter = () => {
  • - Imagem Twitter +
    • @@ -140,7 +144,7 @@ export const LinksFooter = () => {
  • - Imagem Youtube +
    • @@ -148,7 +152,7 @@ export const LinksFooter = () => {
  • - Imagem Linkedlin +
    • diff --git a/src/components/Footer/LinksFooter/NetWorks/NetWork.tsx b/src/components/Footer/LinksFooter/NetWorks/NetWork.tsx new file mode 100644 index 0000000..70743bb --- /dev/null +++ b/src/components/Footer/LinksFooter/NetWorks/NetWork.tsx @@ -0,0 +1,25 @@ +import React from "react" + +interface netWorkProps { + style: string; + src: string; + alt: string; + href: string; +} + +const NetWork = (props: netWorkProps) => { + + const { style, src, alt, href } = props; + + return ( +
  • + +
    + {alt} +
    +     +
    • + ) +} + +export default NetWork; \ No newline at end of file diff --git a/src/components/Footer/LinksFooter/Titles/Title.tsx b/src/components/Footer/LinksFooter/Titles/Title.tsx new file mode 100644 index 0000000..a9664ab --- /dev/null +++ b/src/components/Footer/LinksFooter/Titles/Title.tsx @@ -0,0 +1,28 @@ +import React, { MouseEventHandler } from "react"; + +interface tituloProps { + className: string; + src: string; + alt: string; + text: string; + ariaLabel: string; + onClick: MouseEventHandler; + type: "button"; +} + +export const Title = (props: tituloProps) => { + const { text, className, src, alt, onClick, ariaLabel, type } = props; + + return ( + <> +

    + {text} + +

    + + ) +} + +export default Title; \ No newline at end of file diff --git a/src/assets/img/facebook.svg b/src/components/Footer/LinksFooter/assets/facebook.svg similarity index 100% rename from src/assets/img/facebook.svg rename to src/components/Footer/LinksFooter/assets/facebook.svg diff --git a/src/assets/img/instagram.svg b/src/components/Footer/LinksFooter/assets/instagram.svg similarity index 100% rename from src/assets/img/instagram.svg rename to src/components/Footer/LinksFooter/assets/instagram.svg diff --git a/src/assets/img/linkedlin.svg b/src/components/Footer/LinksFooter/assets/linkedlin.svg similarity index 100% rename from src/assets/img/linkedlin.svg rename to src/components/Footer/LinksFooter/assets/linkedlin.svg diff --git a/src/assets/img/titleLinks.svg b/src/components/Footer/LinksFooter/assets/titleLinks.svg similarity index 100% rename from src/assets/img/titleLinks.svg rename to src/components/Footer/LinksFooter/assets/titleLinks.svg diff --git a/src/assets/img/twitter.svg b/src/components/Footer/LinksFooter/assets/twitter.svg similarity index 100% rename from src/assets/img/twitter.svg rename to src/components/Footer/LinksFooter/assets/twitter.svg diff --git a/src/assets/img/youtube.svg b/src/components/Footer/LinksFooter/assets/youtube.svg similarity index 100% rename from src/assets/img/youtube.svg rename to src/components/Footer/LinksFooter/assets/youtube.svg diff --git a/src/components/Footer/Newsletter/Newsletter.tsx b/src/components/Footer/Newsletter/Newsletter.tsx index 708cbec..f05657a 100644 --- a/src/components/Footer/Newsletter/Newsletter.tsx +++ b/src/components/Footer/Newsletter/Newsletter.tsx @@ -10,7 +10,7 @@ export const Newsletter = () => {
    -
    diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index 6dbe7a1..2d23124 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -94,7 +94,7 @@ right: 17px; } - img { + .search-svg { height: 18px; width: 18px; color: var(--black-200); @@ -142,13 +142,65 @@ height: 54.68px; } - img { + .cart-svg { width: 100%; + height: 28px; + + @media (min-width: 2500px) { + width: 54.68px; + height: 54.68px; + } } } } } + &__form-input-button { + background: var(--black); + position: relative; + padding: 0 16px 25px; + display: flex; + + @media (min-width: 1025px) { + display: none; + } + + &__input { + width: 100%; + height: 36px; + border: 2px solid var(--white-100); + border-radius: 5px; + padding: 10px 40px 10px 16px; + + font-weight: 400; + font-size: 14px; + line-height: 16px; + font-family: var(--font-roboto); + + &::placeholder { + color: var(--gray-100); + } + } + + &__button { + position: absolute; + z-index: 10; + border: none; + background: transparent; + outline: none; + top: 8px; + right: 30px; + width: 18px; + height: 18px; + + img { + width: 18px; + height: 18px; + color: var(--black-200); + } + } + } + .container-nav { background-color: var(--black); padding: 14px 100.32px 14px 100px; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 0c8b70a..835e091 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,14 +1,10 @@ import React from "react"; import { InputMenuMobile } from "./InputMenuMobile/InputMenuMobile" import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer" - import styleHeader from "./Header.module.scss" - -import logo from "../../assets/img/logo-m3.png" -import cart from "../../assets/img/cart.svg" -import search from "../../assets/img/search.svg" - - +import logo from "./assets/logo-m3.png" +import { ReactComponent as Cart } from "./assets/cart.svg" +import { ReactComponent as Search } from "./assets/search.svg" export function Header() { @@ -31,14 +27,14 @@ export function Header() { placeholder="Buscar...">

    ENTRAR

    diff --git a/src/components/Header/InputMenuMobile/InputMenuMobile.tsx b/src/components/Header/InputMenuMobile/InputMenuMobile.tsx index 11ed94a..99b8035 100644 --- a/src/components/Header/InputMenuMobile/InputMenuMobile.tsx +++ b/src/components/Header/InputMenuMobile/InputMenuMobile.tsx @@ -1,7 +1,6 @@ import React from "react"; import styleInput from "./inputMenuMobile.module.scss" - -import search from "../../../assets/img/search.svg" +import { ReactComponent as Search } from "../assets/search.svg" export const InputMenuMobile = () => { return ( @@ -16,8 +15,7 @@ export const InputMenuMobile = () => {
    diff --git a/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss b/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss index e420a5a..dc9311f 100644 --- a/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss +++ b/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss @@ -37,7 +37,7 @@ width: 18px; height: 18px; - img { + &__svg { width: 18px; height: 18px; color: var(--black-200); diff --git a/src/components/Header/MenuHamburguer/MenuHamburguer.tsx b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx index 3761a99..1c7dd55 100644 --- a/src/components/Header/MenuHamburguer/MenuHamburguer.tsx +++ b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx @@ -1,8 +1,8 @@ import React, { useState } from "react"; import styleMenu from "./MenuHamburguer.module.scss" -import hamburguer from "../../../assets/img/hamburguer.svg" -import closeMenu from "../../../assets/img/close.svg" +import hamburguer from "../assets/hamburguer.svg" +import closeMenu from "../assets/close.svg" export const MenuHamburguer = () => { diff --git a/src/assets/img/cart.svg b/src/components/Header/assets/cart.svg similarity index 100% rename from src/assets/img/cart.svg rename to src/components/Header/assets/cart.svg diff --git a/src/assets/img/close.svg b/src/components/Header/assets/close.svg similarity index 100% rename from src/assets/img/close.svg rename to src/components/Header/assets/close.svg diff --git a/src/assets/img/hamburguer.svg b/src/components/Header/assets/hamburguer.svg similarity index 100% rename from src/assets/img/hamburguer.svg rename to src/components/Header/assets/hamburguer.svg diff --git a/src/assets/img/logo-m3.png b/src/components/Header/assets/logo-m3.png similarity index 100% rename from src/assets/img/logo-m3.png rename to src/components/Header/assets/logo-m3.png diff --git a/src/assets/img/search.svg b/src/components/Header/assets/search.svg similarity index 100% rename from src/assets/img/search.svg rename to src/components/Header/assets/search.svg diff --git a/src/global.scss b/src/global.scss index 20560f4..d02e5dc 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,17 +1,4 @@ //VARIABLES -:root { - --font-roboto: "Roboto", sans-serif; - - --black: #000000; - --black-100: #303030; - --black-200: #292929; - - --white: #ffffff; - --white-100: #f0f0f0; - - --gray-100: #c4c4c4; - --gray-200: #e5e5e5; -} * { box-sizing: border-box; diff --git a/src/index.tsx b/src/index.tsx index de96c51..486d01d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import './variables.scss' import './global.scss'; import { Home } from './pages/Home'; diff --git a/src/variables.scss b/src/variables.scss new file mode 100644 index 0000000..507b9f2 --- /dev/null +++ b/src/variables.scss @@ -0,0 +1,13 @@ +:root { + --font-roboto: "Roboto", sans-serif; + + --black: #000000; + --black-100: #303030; + --black-200: #292929; + + --white: #ffffff; + --white-100: #f0f0f0; + + --gray-100: #c4c4c4; + --gray-200: #e5e5e5; +}