diff --git a/package-lock.json b/package-lock.json index 7b194ba..d445028 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -14001,6 +14002,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26713,6 +26722,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 53857da..fff2561 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/src/assets/imgs/menu-navbar.png b/src/assets/imgs/menu-navbar.png new file mode 100644 index 0000000..2b91465 Binary files /dev/null and b/src/assets/imgs/menu-navbar.png differ diff --git a/src/assets/imgs/x-button.png b/src/assets/imgs/x-button.png new file mode 100644 index 0000000..2dd6845 Binary files /dev/null and b/src/assets/imgs/x-button.png differ diff --git a/src/assets/svgs/arrowrightsvg.svg b/src/assets/svgs/arrowright.svg similarity index 100% rename from src/assets/svgs/arrowrightsvg.svg rename to src/assets/svgs/arrowright.svg diff --git a/src/components/footer/Footer.module.scss b/src/components/footer/Footer.module.scss index df83a35..51d51c2 100644 --- a/src/components/footer/Footer.module.scss +++ b/src/components/footer/Footer.module.scss @@ -1,16 +1,12 @@ -footer { - margin-top: 600px; -} - .newsletter__container { display: flex; align-items: center; justify-content: center; - height: 104px; + padding: 16px; + // height: 104px; .newsletter__container__span { color: #303030; - margin-left: 8px; font-weight: 500; font-size: 18px; line-height: 21px; @@ -18,17 +14,28 @@ footer { font-variant: small-caps; } + .newsletter__form__wrapper { + @media screen and (max-width: 1024px) { + width: 100%; + } + } + .newsletter__input { width: 340px; height: 42px; padding: 15px; - margin: 8px; + margin: 8px 8px 0 0; border: 1px solid #e5e5e5; border-radius: 4px; &::placeholder { color: #c4c4c4; } + + @media screen and (max-width: 1024px) { + margin: 8px 0; + width: 100%; + } } .newsletter__submitButton { @@ -45,19 +52,31 @@ footer { border: 1px solid black; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 4px; + + @media screen and (max-width: 1024px) { + width: 100%; + border-radius: 0; + } } } .container__about { display: flex; - height: 240px; justify-content: space-around; align-items: center; + + @media screen and (min-width: 1025px) { + height: 240px; + } + + @media screen and (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + padding: 26px 16px; + } } -.wrapper__institucional, -.wrapper__duvidas, -.wrapper__contato { +.wrapper__about { display: flex; flex-direction: column; @@ -66,13 +85,13 @@ footer { font-weight: 500; font-size: 14px; line-height: 16px; - /* identical to box height */ + padding-bottom: 10px; text-transform: uppercase; } & a { - margin-top: 12px; + margin-bottom: 12px; font-weight: 400; font-size: 12px; line-height: 14px; @@ -82,6 +101,10 @@ footer { text-decoration: underline; } } + + @media screen and (max-width: 1024px) { + display: none; + } } ul { @@ -93,32 +116,110 @@ ul { } } +.accordion__container { + width: 100%; + @media screen and (min-width: 1025px) { + display: none; + } + + .accordion__button { + margin: 5px 0; + padding: 10px; + width: 100%; + border: none; + background: white; + display: flex; + justify-content: space-between; + + &:hover { + background-color: rgb(241, 241, 241); + } + } + + .accordion__body { + padding: 10px; + + a { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + + color: #303030; + } + a:hover { + text-decoration: underline; + } + } + + span { + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + + text-transform: uppercase; + + color: #303030; + } +} + +.wrapper__socialmedia { + margin-bottom: 90px; + @media screen and (max-width: 1024px) { + margin-top: 25px; + } +} + +.socialmedia__link { + @media screen and (max-width: 1024px) { + display: none; + } +} + .footer__stamps__wrapper { - height: 64px; background-color: black; color: white; + position: relative; display: flex; - justify-content: center; - align-items: center; + padding: 16px; + + @media screen and (min-width: 1025px) { + justify-content: center; + align-items: center; + } + + @media screen and (max-width: 1024px) { + padding: 16px; + flex-direction: column; + } } .stamps__address { - position: absolute; width: 234px; font-style: normal; font-weight: 400; font-size: 10px; line-height: 12px; - left: 100px; text-transform: capitalize; + + @media screen and (min-width: 1025px) { + position: absolute; + left: 100px; + } + + @media screen and (max-width: 1024px) { + margin: 15px 0; + order: 2; + } } .stamps__creditCards { - align-items: center; display: flex; - justify-content: center; list-style: none; + & span { background-color: white; display: inline-block; @@ -134,15 +235,24 @@ ul { .stamps__vtexPci { height: 46px; } + + @media screen and (min-width: 1025px) { + align-items: center; + justify-content: center; + } + + @media screen and (max-width: 1024px) { + order: 1; + align-items: center; + flex-wrap: wrap; + } } .stamps__developedBy { - position: absolute; align-items: center; display: flex; list-style-type: none; margin: 0; - right: 100px; & span { font-weight: 400; @@ -155,4 +265,13 @@ ul { & img { height: 16px; } + + @media screen and (min-width: 1025px) { + right: 100px; + position: absolute; + } + + @media screen and (max-width: 1024px) { + order: 3; + } } diff --git a/src/components/footer/FooterTop.tsx b/src/components/footer/FooterTop.tsx index a6edb4c..706314d 100644 --- a/src/components/footer/FooterTop.tsx +++ b/src/components/footer/FooterTop.tsx @@ -5,31 +5,110 @@ import instagram from "../../assets/imgs/instagram-icon.png"; import twitter from "../../assets/imgs/twitter-icon.png"; import youtube from "../../assets/imgs/youtube-icon.png"; import linkedin from "../../assets/imgs/linkedin-icon.png"; +import { + Accordion, + AccordionBody, + AccordionHeader, + AccordionItem, +} from "react-headless-accordion"; const FooterTop = () => { return (
-
+
Institucional Quem somos Política de Privacidade Segurança Seja um Revendedor
-
+
DÚVIDAS Entrega Pagamento Troca e devolução Dúvidas frequentes
-
+
Fale conosco

Atendimento ao consumidor

(11) 4159-9504

Atendimento online

(11) 99433-8825
+ + + + + Institucional + + + + + + + + + + + + + + + + + DÚVIDAS + + + + + +
+ Entrega +
+
+ Pagamento +
+ + + + + + + + + + Fale Conosco + + + + + +
+ Atendimento ao Consumidor +
+ +
+ Atendimento Online +
+ + + + +
  • @@ -58,7 +137,9 @@ const FooterTop = () => {
- www.loremipsum.com + + www.loremipsum.com +
); diff --git a/src/index.tsx b/src/index.tsx index d3a11b8..c1ff07c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,9 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./global.scss"; -import { Home } from "./pages/Home"; +import { FaleConosco } from "./pages/FaleConosco"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); -root.render(); +root.render(); diff --git a/src/pages/Home.tsx b/src/pages/FaleConosco.tsx similarity index 83% rename from src/pages/Home.tsx rename to src/pages/FaleConosco.tsx index 1a06cdb..e442bcb 100644 --- a/src/pages/Home.tsx +++ b/src/pages/FaleConosco.tsx @@ -3,7 +3,7 @@ import { Header } from "../components/header/Header"; import { Main } from "../components/main/Main"; import { Footer } from "../components/footer/Footer"; -const Home = () => { +const FaleConosco = () => { return ( <>
@@ -13,4 +13,4 @@ const Home = () => { ); }; -export { Home }; +export { FaleConosco };