src/components/AccordionBody/AccordionBody.tsx

@@ -2,7 +2,7 @@ import Col from "react-bootstrap/Col";
 import ListGroup from "react-bootstrap/ListGroup";
 import Row from "react-bootstrap/Row";
 import Tab from "react-bootstrap/Tab";
-
+import { FormInput } from "../FormInput/FormInput";
 import styles from "./accordionBody.module.scss";
 const AccordionBody = () => {
   return (
@@ -11,20 +11,47 @@ const AccordionBody = () => {
         <Col sm={4}>
           <ListGroup>
             <ListGroup.Item className={styles["acc-item"]} action href="#link1">
-              Link 1
+              Sobre
             </ListGroup.Item>
             <ListGroup.Item action href="#link2">
-              Link 2
+              Contato
             </ListGroup.Item>
           </ListGroup>
         </Col>
         <Col sm={8}>
           <Tab.Content>
             <Tab.Pane eventKey="#link1">
-              <p>oi</p>
+              <div>
+                <h2>Sobre</h2>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt
+                  mollit anim id est laborum. Sed ut perspiciatis unde omnis
+                  iste natus error sit voluptatem accusantium doloremque
+                  laudantium, totam rem aperiam, eaque ipsa quae ab illo
+                  inventore veritatis et quasi architecto beatae vitae dicta
+                  sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+                  aspernatur aut odit aut fugit, sed quia consequuntur magni
+                  dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
+                  quisquam est, qui dolorem ipsum quia dolor sit amet,
+                  consectetur, adipisci velit, sed quia non numquam eius modi
+                  tempora incidunt ut labore et dolore magnam aliquam quaerat
+                  voluptatem. Ut enim ad minima veniam, quis nostrum
+                  exercitationem ullam corporis suscipit laboriosam, nisi ut
+                  aliquid ex ea commodi consequatur? Quis autem vel eum iure
+                  reprehenderit qui in ea voluptate velit esse quam nihil
+                  molestiae consequatur, vel illum qui dolorem eum fugiat quo
+                  voluptas nulla pariatur?
+                </p>
+              </div>
             </Tab.Pane>
             <Tab.Pane eventKey="#link2">
-              <p>tchau</p>
+              <FormInput></FormInput>
             </Tab.Pane>
           </Tab.Content>
         </Col>

src/components/AccordionBody/accordionBody.module.scss

@@ -1,4 +1,5 @@
 .accordion-wrapper {
+  width: 100%;
   display: flex;
   flex-direction: column;
 }

src/components/FormInput/formInput.module.scss

@@ -1,27 +1,9 @@
-/*.form {
-  display: flex;
-  flex-direction: column;
-}
-.form-item {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 10px;
-}
-.textForm {
-  display: flex;
-  flex-direction: row;
-}
-.errorFormik {
-  margin-left: 80px;
-  color: red;
-}
-*/
 .form-wrapper {
   width: 100%;
-  max-width: 720px;
-  min-height: 100vh;
+  max-width: 748px;
+  //min-height: 100vh;
   margin: 0 auto;
-  padding: 0 12px;
+  //padding: 0 12px;
   display: flex;
 
   justify-content: center;

src/sectors/Body/InstitucionaisBody.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-
+import { AccordionBody } from "../../components/AccordionBody/AccordionBody";
 const InstitucionaisBody = () => {
   return (
-    <div>
-      <h2>INSTITUCIONAL</h2>
+    <div className="institucional-wrapper">
+      <h2 className="institucional-title">INSTITUCIONAL</h2>
+      <AccordionBody></AccordionBody>
     </div>
   );
 };

src/styles/main.scss

@@ -7,6 +7,7 @@
 @import "partials/navigation.scss";
 @import "partials/top_header.scss";
 @import "partials/bottom_header.scss";
+@import "partials/body.scss";
 @import "partials/top_footer.scss";
 @import "partials/footer.scss";
 @import "partials/bottom_footer.scss";

src/styles/partials/body.scss

@@ -0,0 +1,16 @@
+.institucional-wrapper {
+  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;
+  @media screen and (min-width: 2500px) {
+    font-size: 48px;
+    line-height: 56.25px;
+  }
+}