Merge pull request 'feat: cria main 1280px e adiciona react-router-dom' (#15) from feature/cria-main-1280px-adiciona-react-router-dom into development

Reviewed-on: #15

package-lock.json

@@ -18,6 +18,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-modal": "^3.16.1",
+        "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
         "sass": "^1.57.1",
         "typescript": "^4.9.4",
@@ -3079,6 +3080,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -13988,6 +13997,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+      "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+      "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
+    "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",

src/components/FooterBottom/styles.module.scss

@@ -139,7 +139,6 @@
 
     &__corporateName {
       width: 100%;
-      max-width: 100%;
       height: auto;
       order: 2;
       margin-bottom: 15px;

src/components/FooterTop/styles.module.scss

@@ -1,9 +1,6 @@
 .footerTop {
   display: flex;
   justify-content: center;
-  border-width: 0px 0px 1px 1px;
-  border-style: solid;
-  border-color: var(--black-500);
   height: auto;
   padding: 50px 0;
 
@@ -41,7 +38,7 @@
       font-size: 14px;
       line-height: 16px;
       text-transform: uppercase;
-      color: var(--black-400);
+      color: var(--black-300);
     }
 
     h2 {
@@ -50,7 +47,7 @@
       font-size: 12px;
       line-height: 14px;
       text-transform: capitalize;
-      color: var(--black-400);
+      color: var(--black-300);
       margin-bottom: 12px;
     }
 
@@ -60,7 +57,7 @@
       font-size: 12px;
       line-height: 14px;
       text-transform: capitalize;
-      color: var(--black-400);
+      color: var(--black-300);
       margin-bottom: 12px;
 
       &:last-child {
@@ -89,7 +86,7 @@
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
-      color: var(--black-400);
+      color: var(--black-300);
     }
   }
 

src/components/Header/styles.module.scss

@@ -11,7 +11,6 @@
     justify-content: center;
     align-items: center;
     height: 76px;
-    padding: 0 16px 0 16px;
 
     .menu-mobile-button {
       display: none;
@@ -46,7 +45,7 @@
       align-items: center;
 
       &__input {
-        width: 29.915%;
+        width: 28.721%;
         height: 32px;
         border: none;
         border-top-left-radius: 5px;
@@ -137,7 +136,6 @@
     display: flex;
     justify-content: center;
     width: 100%;
-    padding: 0 16px 0 16px;
 
     nav {
       display: flex;
@@ -174,6 +172,7 @@
     &__content {
       width: 100%;
       justify-content: space-between;
+      padding: 0 16px;
 
       .menu-mobile-button {
         display: block;

src/components/InstitutionalMain/index.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-import styles from "./styles.module.scss";
-
-const InstitutionalMain = () => {
-  return <div className={styles["main"]}></div>;
-};
-
-export { InstitutionalMain };

src/components/InstitutionalMain/styles.module.scss

@@ -1,3 +0,0 @@
-.main {
-  height: 588px;
-}

src/components/Main/About/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const About = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Sobre</h1>
+        <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.
+          <br />
+          <br />
+          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.
+          <br />
+          <br />
+          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>
+    </div>
+  );
+};
+
+export { About };

src/components/Main/About/styles.module.scss

@@ -0,0 +1,29 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 285px;
+
+  &__text {
+    width: 69.388%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+}

src/components/Main/Contact/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const Contact = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Contato</h1>
+        <form></form>
+      </div>
+    </div>
+  );
+};
+
+export { Contact };

src/components/Main/Contact/styles.module.scss

@@ -0,0 +1,29 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 285px;
+
+  &__text {
+    width: 69.388%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+}

src/components/Main/Delivery/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const Delivery = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Entrega</h1>
+        <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.
+          <br />
+          <br />
+          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.
+          <br />
+          <br />
+          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>
+    </div>
+  );
+};
+
+export { Delivery };

src/components/Main/Delivery/styles.module.scss

@@ -0,0 +1,29 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 285px;
+
+  &__text {
+    width: 69.388%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+}

src/components/Main/ExchangeAndReturn/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const ExchangeAndReturn = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Troca e Devolução</h1>
+        <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.
+          <br />
+          <br />
+          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.
+          <br />
+          <br />
+          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>
+    </div>
+  );
+};
+
+export { ExchangeAndReturn };

src/components/Main/ExchangeAndReturn/styles.module.scss

@@ -0,0 +1,29 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 285px;
+
+  &__text {
+    width: 69.388%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+}

src/components/Main/MainMenu/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import styles from "./styles.module.scss";
+
+const MainMenu = () => {
+  return (
+    <div className={styles["menu"]}>
+      <ul>
+        <li>
+          <Link to="/">Sobre</Link>
+        </li>
+        <li>
+          <Link to="/payment">Forma de Pagamento</Link>
+        </li>
+        <li>
+          <Link to="/delivery">Entrega</Link>
+        </li>
+        <li>
+          <Link to="/exchange">Troca e Devolução</Link>
+        </li>
+        <li>
+          <Link to="/security">Segurança e Privacidade</Link>
+        </li>
+        <li>
+          <Link to="/contact">Contato</Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export { MainMenu };

src/components/Main/MainMenu/styles.module.scss

@@ -0,0 +1,22 @@
+.menu {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: var(--black-500);
+  width: 28.015%;
+  height: 100%;
+
+  li {
+    padding: 10px 0 10px 16px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: var(--gray-300);
+
+    &:hover {
+      cursor: pointer;
+      background: var(--black-500);
+      color: var(--white-500);
+    }
+  }
+}

src/components/Main/Payment/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const Payment = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Formas de Pagamento</h1>
+        <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.
+          <br />
+          <br />
+          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.
+          <br />
+          <br />
+          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>
+    </div>
+  );
+};
+
+export { Payment };

src/components/Main/Payment/styles.module.scss

@@ -0,0 +1,29 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 285px;
+
+  &__text {
+    width: 69.388%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+}

src/components/Main/SecurityAndPrivacy/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const SecurityAndPrivacy = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Segurança e Privacidade</h1>
+        <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.
+          <br />
+          <br />
+          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.
+          <br />
+          <br />
+          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>
+    </div>
+  );
+};
+
+export { SecurityAndPrivacy };

src/components/Main/SecurityAndPrivacy/styles.module.scss

@@ -0,0 +1,29 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 285px;
+
+  &__text {
+    width: 69.388%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+}

src/components/Main/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import styles from "./styles.module.scss";
+import homeIcon from "../../assets/images/home.png";
+import arrowRightIcon from "../../assets/images/arrow-right.png";
+import { About } from "./About";
+import { Payment } from "./Payment";
+import { Delivery } from "./Delivery";
+import { ExchangeAndReturn } from "./ExchangeAndReturn";
+import { SecurityAndPrivacy } from "./SecurityAndPrivacy";
+import { Contact } from "./Contact";
+
+const Main = () => {
+  return (
+    <section className={styles["main"]}>
+      <div className={styles["main__container"]}>
+        <div className={styles["main__top"]}>
+          <div className={styles["main__way"]}>
+            <span className={styles["homeIcon"]}>
+              <img src={homeIcon} alt="Home" />
+            </span>
+            <span className={styles["arrowIcon"]}>
+              <img src={arrowRightIcon} alt="Seta" />
+            </span>
+            <p>INSTITUCIONAL</p>
+          </div>
+          <div className={styles["main__title"]}>
+            <h1>Institucional</h1>
+          </div>
+          <Router>
+            <Routes>
+              <Route path="/" element={<About />} />
+              <Route path="/payment" element={<Payment />} />
+              <Route path="/delivery" element={<Delivery />} />
+              <Route path="/exchange" element={<ExchangeAndReturn />} />
+              <Route path="/security" element={<SecurityAndPrivacy />} />
+              <Route path="/contact" element={<Contact />} />
+            </Routes>
+          </Router>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Main };

src/components/Main/styles.module.scss

@@ -0,0 +1,72 @@
+.main {
+  display: flex;
+  justify-content: center;
+  height: 588px;
+
+  &__container {
+    width: 84.375%;
+    height: 100%;
+  }
+
+  &__top {
+    width: 100%;
+    height: 233px;
+  }
+
+  &__way {
+    display: flex;
+    align-items: flex-end;
+    gap: 9.7px;
+    width: 100%;
+    height: 44px;
+
+    .homeIcon {
+      width: 16px;
+      height: 16px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .arrowIcon {
+      width: 8px;
+      height: 8px;
+      position: relative;
+
+      img {
+        position: absolute;
+        bottom: 50%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      color: var(--gray-100);
+    }
+  }
+
+  &__title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 189px;
+
+    h1 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--black-400);
+    }
+  }
+}

src/components/NewsLetter/styles.module.scss

@@ -20,7 +20,7 @@
       line-height: 21px;
       letter-spacing: 0.05em;
       font-variant: small-caps;
-      color: var(--black-400);
+      color: var(--black-300);
       text-transform: uppercase;
     }
   }

src/pages/Institutional/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Footer } from "../../components/Footer";
 import { Header } from "../../components/Header";
-import { InstitutionalMain } from "../../components/InstitutionalMain";
+import { Main } from "../../components/Main";
 import { MenuMobileModal } from "../../components/MunuMobileModal";
 
 const Institutional = () => {
@@ -26,7 +26,7 @@ const Institutional = () => {
         onRequestClose={() => setMenuMobileModal(false)}
       />
       <Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
-      <InstitutionalMain />
+      <Main />
       <Footer windowWidth={windowWidth} />
     </>
   );

src/styles/global.scss

@@ -9,11 +9,13 @@
   --white-400: #e5e5e5;
   --white-500: #ffffff;
 
-  --black-400: #303030;
+  --black-300: #303030;
+  --black-400: #292929;
   --black-500: #000000;
 
   --gray-100: #c4c4c4;
   --gray-200: #c6c6c6;
+  --gray-300: #7d7d7d;
 }
 
 a {