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/components/NavigationBar/NavigationBar.tsx

@@ -64,7 +64,7 @@ const NavigationBar = () => {
                 </Link>
               </li>
               <li className="nav-item">
-                <Link className="nav-link" to="/cursos">
+                <Link className="nav-link" to="/institucionais">
                   INSTITUCIONAIS
                 </Link>
               </li>

src/components/Router/Router.tsx

@@ -4,6 +4,7 @@ import { Routes, Route, BrowserRouter } from "react-router-dom";
 import { Home } from "../../pages/Home";
 import { Teste } from "../../pages/Teste";
 import { Cursos } from "../../pages/Cursos";
+import { Institucionais } from "../../pages/Institucionais";
 /*
 import Home from "./Home";
 import Sobre from "./Sobre";
@@ -18,6 +19,10 @@ const RoutesUrl = () => {
     <Routes>
       <Route path="/" element={<Home titulo="Home" />}></Route>
       <Route path="/cursos" element={<Cursos titulo="Cursos" />} />
+      <Route
+        path="/institucionais"
+        element={<Institucionais titulo="Institucional" />}
+      />
     </Routes>
   );
 };

src/pages/Institucionais.tsx

@@ -0,0 +1,12 @@
+import { Caminhos } from "../components/Caminhos/Caminhos";
+import { InstitucionaisBody } from "../sectors/Body/InstitucionaisBody";
+const Institucionais = (prop: { titulo: string }) => {
+  return (
+    <div>
+      <Caminhos titulo={prop.titulo}></Caminhos>
+      <InstitucionaisBody></InstitucionaisBody>
+    </div>
+  );
+};
+
+export { Institucionais };

src/sectors/Body/CursosBody.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 
 const CursosBody = () => {
-  return <h2>Cursos</h2>;
+  return (
+    <div>
+      <h2>Cursos</h2>;
+    </div>
+  );
 };
 
 export { CursosBody };

src/sectors/Body/InstitucionaisBody.tsx

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

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