src/components/AccordionBody/AccordionBody.tsx

@@ -50,7 +50,7 @@ const AccordionBody = () => {
                 </p>
               </div>
             </Tab.Pane>
-            <Tab.Pane eventKey="#link2">
+            <Tab.Pane className="contato-item" eventKey="#link2">
               <FormInput></FormInput>
             </Tab.Pane>
           </Tab.Content>

src/components/AccordionFooter/AccordionFooter.tsx

@@ -1,17 +1,24 @@
+import mais from "./assets/image/mais.png";
+import { Institutional } from "../Institutional/Institutional";
+import { Doubts } from "../Doubts/Doubts";
+import { Contact } from "../Contact/Contact";
 const AccordionFooter = () => {
   return (
-    <div className="accordion accordion-flush" id="accordionFlushExample">
+    <div
+      className="accordion accordion-flush acc_footer"
+      id="accordionFlushExample"
+    >
       <div className="accordion-item">
         <h2 className="accordion-header" id="flush-headingOne">
           <button
-            className="accordion-button collapsed"
+            className="accordion-button collapsed acc_btn"
             type="button"
             data-bs-toggle="collapse"
             data-bs-target="#flush-collapseOne"
             aria-expanded="false"
             aria-controls="flush-collapseOne"
           >
-            Accordion Item #1
+            Institucional
           </button>
         </h2>
         <div
@@ -20,20 +27,22 @@ const AccordionFooter = () => {
           aria-labelledby="flush-headingOne"
           data-bs-parent="#accordionFlushExample"
         >
-          <div className="accordion-body">Primeiro</div>
+          <div className="accordion-body">
+            <Institutional></Institutional>
+          </div>
         </div>
       </div>
       <div className="accordion-item">
         <h2 className="accordion-header" id="flush-headingTwo">
           <button
-            className="accordion-button collapsed"
+            className="accordion-button collapsed acc_btn"
             type="button"
             data-bs-toggle="collapse"
             data-bs-target="#flush-collapseTwo"
             aria-expanded="false"
             aria-controls="flush-collapseTwo"
           >
-            Accordion Item #2
+            Dúvidas
           </button>
         </h2>
         <div
@@ -42,20 +51,22 @@ const AccordionFooter = () => {
           aria-labelledby="flush-headingTwo"
           data-bs-parent="#accordionFlushExample"
         >
-          <div className="accordion-body">segundo</div>
+          <div className="accordion-body">
+            <Doubts></Doubts>
+          </div>
         </div>
       </div>
       <div className="accordion-item">
         <h2 className="accordion-header" id="flush-headingThree">
           <button
-            className="accordion-button collapsed"
+            className="accordion-button collapsed acc_btn"
             type="button"
             data-bs-toggle="collapse"
             data-bs-target="#flush-collapseThree"
             aria-expanded="false"
             aria-controls="flush-collapseThree"
           >
-            Accordion Item #3
+            Fale Conosco
           </button>
         </h2>
         <div
@@ -64,7 +75,9 @@ const AccordionFooter = () => {
           aria-labelledby="flush-headingThree"
           data-bs-parent="#accordionFlushExample"
         >
-          <div className="accordion-body">terceiro</div>
+          <div className="accordion-body">
+            <Contact></Contact>
+          </div>
         </div>
       </div>
     </div>

src/components/Address/address.module.scss

@@ -1,4 +1,5 @@
 .endereco {
+  display: flex;
   width: 234px;
   height: 24px;
   font-family: "Roboto";
@@ -9,7 +10,7 @@
   text-transform: capitalize;
   color: white;
   margin: 0 0 0 0;
-
+  align-items: center;
   @media screen and (min-width: 2500px) {
     width: 467px;
     height: 47px;

src/components/FormInput/formInput.module.scss

@@ -1,6 +1,6 @@
 .form-wrapper {
   width: 100%;
-  max-width: 748px;
+  //max-width: 748px;
   //min-height: 100vh;
   margin: 0 auto;
   //padding: 0 12px;

src/styles/partials/accordionBody.scss

@@ -1,4 +1,5 @@
 .accList {
+  width: 100%;
   a {
     background-color: white;
     border-radius: 0;
@@ -12,4 +13,8 @@
       line-height: 38px;
     }
   }
+  border-right: 1px solid black;
+}
+.contato-item {
+  width: 100%;
 }

src/styles/partials/body.scss

@@ -2,13 +2,14 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 .institucional-title {
   font-family: "Roboto";
   font-weight: 400;
   font-size: 24px;
   line-height: 28.13px;
+  display: flex;
+  justify-content: center;
   @media screen and (min-width: 2500px) {
     font-size: 48px;
     line-height: 56.25px;

src/styles/partials/top_footer.scss

@@ -21,7 +21,27 @@
     flex-direction: column;
     align-items: flex-start;
     border-top: 1px solid black;
-    margin-top: 56px;
+    margin-top: 79px;
+    padding: 0 0 0 12px;
+  }
+  .acc_footer {
+    width: 100%;
+  }
+
+  .acc_btn {
+    &::after {
+      background-image: url("../../components/AccordionFooter/assets/image/mais.png");
+    }
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    color: #303030;
+    padding: 12px;
+  }
+  .top_footer_socials {
+    margin-top: 8px;
   }
 }
 @media screen and (min-width: 1025px) {