fix: ajusta o height da página

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>

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>

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>

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>

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>
   );
 };

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>
   );
 };

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;
 }

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;
   }
 }

pagina-institucional/src/style/FormCustom.module.scss

@@ -10,6 +10,10 @@
   .formCalTermo {
     text-align: center;
     margin-bottom: 13px;
+
+    input {
+      cursor: pointer;
+    }
   }
 
   .formCal {

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;

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;
     }

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;
+  }
+}