From ac2a81edb927e68f225deb628daf4f83c6b21a74 Mon Sep 17 00:00:00 2001
From: Leonardo <rochaleo879@gmail.com>
Date: Fri, 20 Jan 2023 16:05:35 -0300
Subject: [PATCH] fix: ajusta o main para telas 4k

---
 .../src/components/FooterTopMobile.tsx        | 14 ++++
 pagina-institucional/src/components/Main.tsx  |  7 +-
 .../src/components/MenuFooterMobile.tsx       | 35 ++++++++++
 .../src/components/MenuFooterMobile2.tsx      | 35 ++++++++++
 .../src/components/MenuInfo.tsx               |  3 +-
 .../src/components/schema/FormSchema.ts       |  6 +-
 pagina-institucional/src/pages/Home.tsx       |  2 +
 .../src/style/AccordionMenu.module.scss       | 18 +++++
 .../src/style/FooterBottom.module.scss        |  3 +-
 .../src/style/FooterMenu.module.scss          |  6 ++
 .../src/style/HamburguerHeader.module.scss    |  1 -
 .../src/style/Main.module.scss                | 65 ++++++++++++++++++-
 .../src/style/MenuFooterMobile.module.scss    | 52 +++++++++++++++
 .../src/style/MenuInfo.module.scss            | 19 ++++++
 14 files changed, 253 insertions(+), 13 deletions(-)
 create mode 100644 pagina-institucional/src/components/FooterTopMobile.tsx
 create mode 100644 pagina-institucional/src/components/MenuFooterMobile.tsx
 create mode 100644 pagina-institucional/src/components/MenuFooterMobile2.tsx
 create mode 100644 pagina-institucional/src/style/MenuFooterMobile.module.scss
 create mode 100644 pagina-institucional/src/style/MenuInfo.module.scss

diff --git a/pagina-institucional/src/components/FooterTopMobile.tsx b/pagina-institucional/src/components/FooterTopMobile.tsx
new file mode 100644
index 0000000..119ea91
--- /dev/null
+++ b/pagina-institucional/src/components/FooterTopMobile.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { MenuFooterMobile } from "./MenuFooterMobile";
+import { MenuFooterMobile2 } from "./MenuFooterMobile2";
+
+const FooterTopMobile = () => {
+  return (
+    <div>
+      <MenuFooterMobile />
+      <MenuFooterMobile2 />
+    </div>
+  );
+};
+
+export { FooterTopMobile };
diff --git a/pagina-institucional/src/components/Main.tsx b/pagina-institucional/src/components/Main.tsx
index d58b43e..1999b06 100644
--- a/pagina-institucional/src/components/Main.tsx
+++ b/pagina-institucional/src/components/Main.tsx
@@ -5,7 +5,6 @@ import { MenuInfo } from "../components/MenuInfo";
 import { FormCustom } from "../components/FormCustom";
 import home from "../assets/home.svg";
 import seta from "../assets/seta.svg";
-import line from "../assets/Line.svg";
 
 const items = [
   {
@@ -68,9 +67,9 @@ const Main = () => {
   return (
     <div className={styles.app}>
       <div className={styles.mainIcon}>
-        <img src={home} alt="imagem de uma casa" />
-        <img src={seta} alt="imagem de uma seta" />
-        <p>INSTITUCIONAL</p>
+        <img className={styles.IconHouse} src={home} alt="imagem de uma casa" />
+        <img className={styles.IconSeta} src={seta} alt="imagem de uma seta" />
+        <p className={styles.IconText}>INSTITUCIONAL</p>
       </div>
       <h1 className={styles.mainTitle}>Institucional</h1>
       <div className={styles.itemBox}>
diff --git a/pagina-institucional/src/components/MenuFooterMobile.tsx b/pagina-institucional/src/components/MenuFooterMobile.tsx
new file mode 100644
index 0000000..7f71c8e
--- /dev/null
+++ b/pagina-institucional/src/components/MenuFooterMobile.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import styles from "../style/MenuFooterMobile.module.scss";
+
+const MenuFooterMobile = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className={styles.container}>
+      <button className={styles.button} onClick={() => setIsOpen(!isOpen)}>
+        <div className={styles.buttonName}>Institucional</div>{" "}
+        <div className={styles.butttonOption}>{isOpen ? "-" : "+"}</div>
+      </button>
+      {isOpen && (
+        <ul className={styles.list}>
+          <a href="/">
+            <li className={styles.listItem}>Quem Somos</li>
+          </a>
+
+          <a href="/">
+            <li className={styles.listItem}>Política De Privacidade</li>
+          </a>
+
+          <a href="/">
+            <li className={styles.listItem}>Segurança</li>
+          </a>
+
+          <a href="/">
+            <li className={styles.listItem}>Seja Um Revendedor</li>
+          </a>
+        </ul>
+      )}
+    </div>
+  );
+};
+export { MenuFooterMobile };
diff --git a/pagina-institucional/src/components/MenuFooterMobile2.tsx b/pagina-institucional/src/components/MenuFooterMobile2.tsx
new file mode 100644
index 0000000..b54fefc
--- /dev/null
+++ b/pagina-institucional/src/components/MenuFooterMobile2.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import styles from "../style/MenuFooterMobile.module.scss";
+
+const MenuFooterMobile2 = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className={styles.container}>
+      <button className={styles.button} onClick={() => setIsOpen(!isOpen)}>
+        <div className={styles.buttonName}>Dúvidas</div>{" "}
+        <div className={styles.butttonOption}>{isOpen ? "-" : "+"}</div>
+      </button>
+      {isOpen && (
+        <ul className={styles.list}>
+          <a href="/">
+            <li className={styles.listItem}>Entrega</li>
+          </a>
+
+          <a href="/">
+            <li className={styles.listItem}>Pagamento</li>
+          </a>
+
+          <a href="/">
+            <li className={styles.listItem}>Trocas e Devoluções</li>
+          </a>
+
+          <a href="/">
+            <li className={styles.listItem}>Dúvidas Frequentes</li>
+          </a>
+        </ul>
+      )}
+    </div>
+  );
+};
+export { MenuFooterMobile2 };
diff --git a/pagina-institucional/src/components/MenuInfo.tsx b/pagina-institucional/src/components/MenuInfo.tsx
index 4986190..b8f9aba 100644
--- a/pagina-institucional/src/components/MenuInfo.tsx
+++ b/pagina-institucional/src/components/MenuInfo.tsx
@@ -1,8 +1,9 @@
 import React from "react";
+import styles from "../style/MenuInfo.module.scss";
 
 const MenuInfo = () => {
   return (
-    <div>
+    <div className={styles.text}>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
diff --git a/pagina-institucional/src/components/schema/FormSchema.ts b/pagina-institucional/src/components/schema/FormSchema.ts
index 8765b44..2672f79 100644
--- a/pagina-institucional/src/components/schema/FormSchema.ts
+++ b/pagina-institucional/src/components/schema/FormSchema.ts
@@ -1,10 +1,8 @@
 import * as Yup from "yup";
 
 export default Yup.object().shape({
-  name: Yup.string()
-    .required("*Campo Obrigatório")
-    .min(3, "*Nome Inválido"),
-  email: Yup.string().required("*Campo Obrigatório").email("Email Inválido"),
+  name: Yup.string().required("*Campo Obrigatório").min(3, "*Nome Inválido"),
+  email: Yup.string().required("*Campo Obrigatório").email("*Email Inválido"),
   cpf: Yup.string().required("*Campo Obrigatório"),
   telefone: Yup.string().required("*Campo Obrigatório"),
   termo: Yup.string().required(""),
diff --git a/pagina-institucional/src/pages/Home.tsx b/pagina-institucional/src/pages/Home.tsx
index a7ef1a1..c753a47 100644
--- a/pagina-institucional/src/pages/Home.tsx
+++ b/pagina-institucional/src/pages/Home.tsx
@@ -8,6 +8,7 @@ import { HeaderMobile } from "../components/HeaderMobile";
 import { Newsletter } from "../components/Newsletter";
 import { FooterMenu } from "../components/Footer/FooterMenu";
 import { FooterBottom } from "../components/Footer/FooterBottom";
+import { FooterTopMobile } from "../components/FooterTopMobile";
 
 const Home = () => {
   return (
@@ -18,6 +19,7 @@ const Home = () => {
       <Main />
       <Newsletter />
       <FooterMenu />
+      <FooterTopMobile />
       <FooterBottom />
     </>
   );
diff --git a/pagina-institucional/src/style/AccordionMenu.module.scss b/pagina-institucional/src/style/AccordionMenu.module.scss
index 8b679af..98fdb52 100644
--- a/pagina-institucional/src/style/AccordionMenu.module.scss
+++ b/pagina-institucional/src/style/AccordionMenu.module.scss
@@ -25,15 +25,33 @@
   align-items: center;
   margin-left: 100px;
   color: #7d7d7d;
+
+  @media (min-width: 2500px) {
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 38px;
+    max-width: 351px;
+    color: #7d7d7d;
+    margin-bottom: 20px;
+  }
 }
 
 .accordionTitle.active {
   background-color: black;
   color: white;
+  @media (min-width: 2500px) {
+  }
+  width: 590px;
+  height: 58px;
 }
 
 .accordionContent {
   margin-left: 50px;
   width: 748px;
   max-height: 50px;
+
+  @media (min-width: 2500px) {
+    margin-left: 150px;
+  }
 }
+
diff --git a/pagina-institucional/src/style/FooterBottom.module.scss b/pagina-institucional/src/style/FooterBottom.module.scss
index 1df4de0..68d902d 100644
--- a/pagina-institucional/src/style/FooterBottom.module.scss
+++ b/pagina-institucional/src/style/FooterBottom.module.scss
@@ -2,12 +2,13 @@
   background: #000;
   color: white;
   margin-top: 64px;
+  height: 64px;
 
   .footerBox {
     display: flex;
     justify-content: space-between;
     margin: 0 0 0 100px;
-    max-width: 80%;
+    max-width: 100%;
   }
 
   .footerText {
diff --git a/pagina-institucional/src/style/FooterMenu.module.scss b/pagina-institucional/src/style/FooterMenu.module.scss
index 1553dc0..32256c2 100644
--- a/pagina-institucional/src/style/FooterMenu.module.scss
+++ b/pagina-institucional/src/style/FooterMenu.module.scss
@@ -1,8 +1,14 @@
 .border {
   border-top: 1px solid black;
+  @media (max-width: 1024px) {
+    margin-bottom: 25px;
+  }
 }
 
 .links_wrapper {
+  @media (max-width: 1024px) {
+    display: none;
+  }
   display: flex;
   justify-content: space-between;
   margin: 50px 0 0 100px;
diff --git a/pagina-institucional/src/style/HamburguerHeader.module.scss b/pagina-institucional/src/style/HamburguerHeader.module.scss
index a2bfe1d..62d0819 100644
--- a/pagina-institucional/src/style/HamburguerHeader.module.scss
+++ b/pagina-institucional/src/style/HamburguerHeader.module.scss
@@ -81,7 +81,6 @@
   display: flex;
   align-self: center;
 }
-p,
 .linkEnter {
   margin: 0 0 0 8px;
   font-style: normal;
diff --git a/pagina-institucional/src/style/Main.module.scss b/pagina-institucional/src/style/Main.module.scss
index 2080239..f61d358 100644
--- a/pagina-institucional/src/style/Main.module.scss
+++ b/pagina-institucional/src/style/Main.module.scss
@@ -8,31 +8,73 @@
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 80px;
+
+  @media (min-width: 2500px) {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 48px;
+    line-height: 56px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+}
+
+h2 {
+  height: 28px;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  color: #292929;
+
+  @media (min-width: 2500px) {
+    font-size: 48px;
+    line-height: 56px;
+    color: #292929;
+  }
 }
 
 .boxPagamento {
   margin-top: -50px;
   height: 500px;
+
+  @media (min-width: 2500px) {
+    margin-top: -90px;
+  }
 }
 
 .boxEntrega {
   margin-top: -100px;
+  @media (min-width: 2500px) {
+    margin-top: -140px;
+  }
 }
 
 .boxTroca {
   margin-top: -150px;
+  @media (min-width: 2500px) {
+    margin-top: -190px;
+  }
 }
 
 .boxSegurança {
   margin-top: -200px;
+  @media (min-width: 2500px) {
+    margin-top: -240px;
+  }
 }
 
 .boxContato {
   margin-top: -250px;
+  @media (min-width: 2500px) {
+    margin-top: -290px;
+  }
 }
 
 .itemBox {
-  height: 512px;
+  height: 585px;
 }
 
 .mainIcon {
@@ -40,12 +82,31 @@
   margin-left: 100px;
   display: flex;
   gap: 10px;
+
+  .IconHouse {
+    @media (min-width: 2500px) {
+      width: 31.22px;
+      height: 31.25px;
+    }
+  }
+
+  .IconSeta {
+    @media (min-width: 2500px) {
+      width: 8.9px;
+      margin-top: 10px;
+      height: 15.62px;
+    }
+  }
   p {
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
     line-height: 14px;
-
     color: #c4c4c4;
+    @media (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28px;
+      margin: 0;
+    }
   }
 }
diff --git a/pagina-institucional/src/style/MenuFooterMobile.module.scss b/pagina-institucional/src/style/MenuFooterMobile.module.scss
new file mode 100644
index 0000000..9359210
--- /dev/null
+++ b/pagina-institucional/src/style/MenuFooterMobile.module.scss
@@ -0,0 +1,52 @@
+.container {
+  margin-bottom: 12px;
+}
+
+.button {
+  padding: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  border: none;
+  background: transparent;
+
+  .buttonName {
+    margin-left: 16px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    color: #303030;
+  }
+
+  .butttonOption {
+    color: #303030;
+    width: 7.8px;
+    height: 8.28px;
+    cursor: pointer;
+    margin-right: 16px;
+  }
+}
+
+.list {
+  list-style-type: none;
+  padding: 0;
+  margin-left: 16px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  text-transform: capitalize;
+
+  color: #303030;
+}
+
+.listItem {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  text-transform: capitalize;
+
+  color: #303030;
+}
diff --git a/pagina-institucional/src/style/MenuInfo.module.scss b/pagina-institucional/src/style/MenuInfo.module.scss
new file mode 100644
index 0000000..ac450c8
--- /dev/null
+++ b/pagina-institucional/src/style/MenuInfo.module.scss
@@ -0,0 +1,19 @@
+.text {
+  width: 748px;
+  height: 223px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 15px;
+
+  color: #7d7d7d;
+  @media (min-width: 2500px) {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 26px;
+    line-height: 30px;
+    color: #7d7d7d;
+    width: 1680px;
+    height: 376px;
+  }
+}