From 1b5c3ffa0c509279df4774d074c7154678730cc7 Mon Sep 17 00:00:00 2001
From: Leonardo <rochaleo879@gmail.com>
Date: Wed, 18 Jan 2023 16:31:18 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20ajusta=20o=20height=20da=20p=C3=A1gina?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagina-institucional/src/assets/Line.svg      |  3 +++
 pagina-institucional/src/assets/home.svg      |  3 +++
 pagina-institucional/src/assets/seta.svg      |  3 +++
 .../src/components/Footer/FooterBottom.tsx    |  2 +-
 .../src/components/Header.tsx                 | 10 +++++----
 pagina-institucional/src/components/Main.tsx  | 15 +++++++++----
 .../src/style/AccordionMenu.module.scss       |  8 ++++---
 .../src/style/FooterBottom.module.scss        | 22 +++++++++++++++----
 .../src/style/FormCustom.module.scss          |  4 ++++
 .../src/style/Header.module.scss              | 10 +++++++--
 .../src/style/HeaderBottom.module.scss        |  4 +---
 .../src/style/Main.module.scss                | 19 ++++++++++++++++
 12 files changed, 82 insertions(+), 21 deletions(-)
 create mode 100644 pagina-institucional/src/assets/Line.svg
 create mode 100644 pagina-institucional/src/assets/home.svg
 create mode 100644 pagina-institucional/src/assets/seta.svg

diff --git a/pagina-institucional/src/assets/Line.svg b/pagina-institucional/src/assets/Line.svg
new file mode 100644
index 0000000..afb33b0
--- /dev/null
+++ b/pagina-institucional/src/assets/Line.svg
@@ -0,0 +1,3 @@
+<svg width="1" height="285" viewBox="0 0 1 285" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0.5" x2="0.5" y2="285" stroke="black"/>
+</svg>
diff --git a/pagina-institucional/src/assets/home.svg b/pagina-institucional/src/assets/home.svg
new file mode 100644
index 0000000..749cbdc
--- /dev/null
+++ b/pagina-institucional/src/assets/home.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8327 7.59562L14.6904 6.4533L8.40443 0.167326C8.1813 -0.0557753 7.81954 -0.0557753 7.59641 0.167326L1.3104 6.4533L0.167503 7.59623C-0.0517478 7.82324 -0.0454864 8.185 0.181532 8.40425C0.402993 8.61814 0.754068 8.61814 0.975529 8.40425L1.14238 8.23623V15.4285C1.14238 15.7442 1.39823 16 1.71384 16H14.2858C14.6014 16 14.8573 15.7442 14.8573 15.4285V8.23623L15.0247 8.40368C15.2517 8.62293 15.6135 8.61664 15.8327 8.38965C16.0466 8.16819 16.0466 7.81708 15.8327 7.59562ZM9.71421 14.8571H6.28549V10.2855H9.71421V14.8571ZM13.7144 14.8571H10.8571V9.71403C10.8571 9.39841 10.6013 9.14256 10.2856 9.14256H5.71403C5.39841 9.14256 5.14256 9.39841 5.14256 9.71403V14.8571H2.28531V7.09334L7.99982 1.3788L13.7144 7.09334V14.8571Z" fill="#C4C4C4"/>
+</svg>
diff --git a/pagina-institucional/src/assets/seta.svg b/pagina-institucional/src/assets/seta.svg
new file mode 100644
index 0000000..762a1d8
--- /dev/null
+++ b/pagina-institucional/src/assets/seta.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.1162 3.60396L1.67632 0.164193C1.45751 -0.0547314 1.10273 -0.0547314 0.884018 0.164193C0.665288 0.382921 0.665288 0.737679 0.884018 0.95639L3.92778 4.00006L0.884106 7.04362C0.665377 7.26244 0.665377 7.61716 0.884106 7.83589C1.10284 8.0547 1.45759 8.0547 1.67641 7.83589L5.11629 4.39607C5.22566 4.28665 5.28028 4.1434 5.28028 4.00008C5.28028 3.85668 5.22555 3.71332 5.1162 3.60396Z" fill="#C4C4C4"/>
+</svg>
diff --git a/pagina-institucional/src/components/Footer/FooterBottom.tsx b/pagina-institucional/src/components/Footer/FooterBottom.tsx
index a06b0b6..8d9e5ff 100644
--- a/pagina-institucional/src/components/Footer/FooterBottom.tsx
+++ b/pagina-institucional/src/components/Footer/FooterBottom.tsx
@@ -39,7 +39,7 @@ const FooterBottom = () => {
         <div className={styles.FooterName}>
           <p className={styles.footerDevLogo}>Powered by</p>
           <img className={styles.footerdeveloped} src={vtex} alt="logo vtex" />
-          <p className={styles.footerDevLogo}>Developed by</p>
+          <p className={styles.footerDevLogom3}>Developed by</p>
           <img className={styles.footerdevelopedm3} src={m3} alt="logo m3" />
         </div>
       </div>
diff --git a/pagina-institucional/src/components/Header.tsx b/pagina-institucional/src/components/Header.tsx
index 91cbe83..3d151ce 100644
--- a/pagina-institucional/src/components/Header.tsx
+++ b/pagina-institucional/src/components/Header.tsx
@@ -6,8 +6,8 @@ import styles from "../style/Header.module.scss";
 
 const Header = () => {
   return (
-    <div>
-      <header className={styles.header___wrapper}>
+    <div className={styles.header___wrapper}>
+      <div className={styles.headerBox}>
         <div className={styles.logo}>
           <a href="/">
             <img src={logo} className={styles.logoimg} alt="Logo M3 Academy" />
@@ -24,7 +24,9 @@ const Header = () => {
           </a>
         </div>
         <div className={styles.headerlinks}>
-          <a className={styles.textlink} href="/">Entrar</a>
+          <a className={styles.textlink} href="/">
+            Entrar
+          </a>
           <a href="/">
             <img
               className={styles.cartimg}
@@ -33,7 +35,7 @@ const Header = () => {
             />
           </a>
         </div>
-      </header>
+      </div>
     </div>
   );
 };
diff --git a/pagina-institucional/src/components/Main.tsx b/pagina-institucional/src/components/Main.tsx
index b1b184d..d58b43e 100644
--- a/pagina-institucional/src/components/Main.tsx
+++ b/pagina-institucional/src/components/Main.tsx
@@ -3,6 +3,9 @@ import AccordionMenu from "../components/AccordionMenu";
 import styles from "../style/Main.module.scss";
 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 = [
   {
@@ -54,7 +57,7 @@ const items = [
     title: "Contato",
     content: (
       <div className={styles.boxContato}>
-        <h2>Contato</h2>
+        <h2>Preencha o formulário</h2>
         <FormCustom />
       </div>
     ),
@@ -64,11 +67,15 @@ const items = [
 const Main = () => {
   return (
     <div className={styles.app}>
-      <div>
-        <a href="/">Link</a>
+      <div className={styles.mainIcon}>
+        <img src={home} alt="imagem de uma casa" />
+        <img src={seta} alt="imagem de uma seta" />
+        <p>INSTITUCIONAL</p>
       </div>
       <h1 className={styles.mainTitle}>Institucional</h1>
-      <AccordionMenu items={items} />
+      <div className={styles.itemBox}>
+        <AccordionMenu items={items} />
+      </div>
     </div>
   );
 };
diff --git a/pagina-institucional/src/style/AccordionMenu.module.scss b/pagina-institucional/src/style/AccordionMenu.module.scss
index db4e240..8b679af 100644
--- a/pagina-institucional/src/style/AccordionMenu.module.scss
+++ b/pagina-institucional/src/style/AccordionMenu.module.scss
@@ -5,9 +5,9 @@
 }
 
 .accordionItem {
-  flex: 1;
   display: flex;
   flex-direction: row;
+  max-height: 500px;
 }
 
 .accordionTitle {
@@ -19,10 +19,12 @@
   line-height: 19px;
   margin-bottom: 10px;
   max-width: 302px;
+  max-height: 50px;
   height: 39px;
   display: flex;
   align-items: center;
-  margin-left: 125px;
+  margin-left: 100px;
+  color: #7d7d7d;
 }
 
 .accordionTitle.active {
@@ -33,5 +35,5 @@
 .accordionContent {
   margin-left: 50px;
   width: 748px;
-  height: 223px;
+  max-height: 50px;
 }
diff --git a/pagina-institucional/src/style/FooterBottom.module.scss b/pagina-institucional/src/style/FooterBottom.module.scss
index bd5afd8..1df4de0 100644
--- a/pagina-institucional/src/style/FooterBottom.module.scss
+++ b/pagina-institucional/src/style/FooterBottom.module.scss
@@ -1,6 +1,7 @@
 .footer_wrapper {
   background: #000;
   color: white;
+  margin-top: 64px;
 
   .footerBox {
     display: flex;
@@ -18,6 +19,7 @@
     line-height: 12px;
     text-transform: capitalize;
     color: #ffffff;
+    margin: 17px 0;
   }
 
   .footerLogos,
@@ -38,6 +40,8 @@
   }
 
   .footerdeveloped {
+    display: flex;
+    align-self: center;
     width: 44.92px;
   }
 
@@ -53,10 +57,20 @@
     font-size: 10px;
     line-height: 12px;
     text-transform: capitalize;
-    align-items: center;
-    text-align: center;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-self: center;
+  }
+
+  .footerDevLogom3 {
+    width: 61px;
+    height: 12px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: capitalize;
+    color: #ffffff;
+    display: flex;
+    align-self: center;
   }
 }
diff --git a/pagina-institucional/src/style/FormCustom.module.scss b/pagina-institucional/src/style/FormCustom.module.scss
index dc7cf33..9f2c3c1 100644
--- a/pagina-institucional/src/style/FormCustom.module.scss
+++ b/pagina-institucional/src/style/FormCustom.module.scss
@@ -10,6 +10,10 @@
   .formCalTermo {
     text-align: center;
     margin-bottom: 13px;
+
+    input {
+      cursor: pointer;
+    }
   }
 
   .formCal {
diff --git a/pagina-institucional/src/style/Header.module.scss b/pagina-institucional/src/style/Header.module.scss
index 8118b97..7706f2d 100644
--- a/pagina-institucional/src/style/Header.module.scss
+++ b/pagina-institucional/src/style/Header.module.scss
@@ -1,9 +1,15 @@
 .header___wrapper {
   background: #000;
   height: 76px;
-  display: flex;
-  justify-content: space-around;
   border-bottom: 1px solid #c4c4c4;
+  display: grid;
+
+  .headerBox {
+    margin-left: 100px;
+    margin-right: 100px;
+    display: flex;
+    justify-content: space-between;
+  }
 
   .logo {
     display: flex;
diff --git a/pagina-institucional/src/style/HeaderBottom.module.scss b/pagina-institucional/src/style/HeaderBottom.module.scss
index 5aa823b..782029b 100644
--- a/pagina-institucional/src/style/HeaderBottom.module.scss
+++ b/pagina-institucional/src/style/HeaderBottom.module.scss
@@ -5,9 +5,7 @@
     display: flex;
     gap: 55px;
     height: 44px;
-    width: 70%;
-    margin-right: auto;
-    margin-left: auto;
+    margin-left: 100px;
     @media (max-width: 1024px) {
       display: none;
     }
diff --git a/pagina-institucional/src/style/Main.module.scss b/pagina-institucional/src/style/Main.module.scss
index ab4f103..c5b7f7a 100644
--- a/pagina-institucional/src/style/Main.module.scss
+++ b/pagina-institucional/src/style/Main.module.scss
@@ -12,6 +12,7 @@
 
 .boxPagamento {
   margin-top: -50px;
+  height: 500px;
 }
 
 .boxEntrega {
@@ -29,3 +30,21 @@
 .boxContato {
   margin-top: -250px;
 }
+
+.itemBox {
+  height: 512px;
+}
+
+.mainIcon .active {
+  margin-top: 30px;
+  margin-left: 100px;
+  display: flex;
+  gap: 10px;
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #c4c4c4;
+  }
+}