feat(function/responsividade): Adiciona função de navegação e responsividade do main

src/components/Button.tsx

@@ -1,22 +0,0 @@
-import styles from "../styles/subject.module.scss";
-
-interface ButtonProps {
-  link: string;
-  text: string;
-  onClick: React.MouseEventHandler;
-}
-
-const Button = (props: ButtonProps) => {
-  return (
-    <a href={props.link}>
-      <button
-        onClick={props.onClick}
-        className={styles["page-subject__button"]}
-      >
-        {props.text}
-      </button>
-    </a>
-  );
-};
-
-export default Button;

src/components/Header.tsx

@@ -28,6 +28,7 @@ const Header = () => {
               <img src={iconMenu} alt="" />
             </button>
             <MenuMobile
+              active={isActive}
               className={
                 isActive ? styles["active"] : styles["page-header__menu-mobile"]
               }

src/components/Main.tsx

@@ -8,7 +8,7 @@ const Main = () => {
   return (
     <main className={styles["page-main"]}>
       <div className={styles["page-main__menu"]}>
-        <img className={styles["page-main__img-Home"]} src={iconHome} alt="" />
+        <img className={styles["page-main__img-home"]} src={iconHome} alt="" />
         <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
         <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
       </div>

src/components/Nav.tsx

@@ -0,0 +1,24 @@
+import styles from "../styles/subject.module.scss";
+
+interface NavProps {
+  text: string;
+  onClick: React.MouseEventHandler;
+  active: boolean;
+}
+
+const Nav = (props: NavProps) => {
+  return (
+    <li
+      onClick={props.onClick}
+      className={
+        props.active
+          ? styles["page-subject__active"]
+          : styles["page-subject__button"]
+      }
+    >
+      {props.text}
+    </li>
+  );
+};
+
+export default Nav;

src/components/SubjectMain.tsx

@@ -1,55 +1,157 @@
-import Button from "./Button";
+import Nav from "./Nav";
 import SubjectText from "./SubjectText";
 
 import styles from "../styles/subject.module.scss";
+import Forum from "./form";
 import { useState } from "react";
 
 const SubjectMain = () => {
-  const [isActive, setIsActive] = useState(false);
-  const activeText = () => {
-    setIsActive(!isActive);
+  const [isSobre, setIsSobre] = useState(true);
+  const [isPagamento, setIsPagamento] = useState(false);
+  const [isEntrega, setIsEntrega] = useState(false);
+  const [isTroca, setIsTroca] = useState(false);
+  const [isPrivacidade, setIsPrivacidade] = useState(false);
+  const [isForm, setIsForm] = useState(false);
+  const activeSobre = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(true);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
   };
+  const activePagamento = () => {
+    if (
+      isSobre === true ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === false
+    ) {
+      setIsSobre(false);
+      setIsPagamento(true);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
+  };
+  const activeEntrega = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(true);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
+  };
+  const activeTroca = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(true);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
+  };
+  const activePrivacidade = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(true);
+      setIsForm(false);
+    }
+  };
+  const activeForm = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(true);
+    }
+  };
+  const Subjects = [
+    <SubjectText active={isSobre} title="Sobre" />,
+    <SubjectText active={isPagamento} title="Forma de Pagamento" />,
+    <SubjectText active={isEntrega} title="Entrega" />,
+    <SubjectText active={isTroca} title="Troca e Devolução" />,
+    <SubjectText active={isPrivacidade} title="Segurança e Privacidade" />,
+    <Forum active={isForm} />,
+  ];
+
+  console.log(Subjects);
 
   return (
     <section className={styles["page-subject"]}>
-      <div className={styles["page-subject__menu"]}>
-        <Button onClick={activeText} link="#Sobre" text="Sobre" />
-        <Button
-          onClick={activeText}
-          link="#FormadePagamento"
-          text="Forma de Pagamento"
-        />
-        <Button onClick={activeText} link="#Entrega" text="Entrega" />
-        <Button
-          onClick={activeText}
-          link="#TrocaeDevolucao"
-          text="Troca e Devolução"
-        />
-        <Button
-          onClick={activeText}
-          link="#SegurancaePrivacidade"
-          text="Segurança e Privacidade"
-        />
-        <Button onClick={activeText} link="#Contao" text="Contato" />
-      </div>
-      <div className={styles["page-subject__text"]}>
-        <SubjectText
-          className={
-            isActive
-              ? styles["page-subject__container active"]
-              : styles["page-subject__container"]
-          }
-          title="Sobre"
-        />
-        <SubjectText
-          className={
-            isActive
-              ? styles["page-subject__container active"]
-              : styles["page-subject__container"]
-          }
-          title="Forma de Pagamento"
-        />
-      </div>
+      <nav className={styles["page-subject__nav"]}>
+        <ul className={styles["page-subject__menu"]}>
+          <Nav active={isSobre} onClick={activeSobre} text="Sobre" />
+          <Nav
+            active={isPagamento}
+            onClick={activePagamento}
+            text="Forma de Pagamento"
+          />
+          <Nav active={isEntrega} onClick={activeEntrega} text="Entrega" />
+          <Nav
+            active={isTroca}
+            onClick={activeTroca}
+            text="Troca e Devolução"
+          />
+          <Nav
+            active={isPrivacidade}
+            onClick={activePrivacidade}
+            text="Segurança e Privacidade"
+          />
+          <Nav active={isForm} onClick={activeForm} text="Contato" />
+        </ul>
+      </nav>
+      <ul className={styles["page-subject__text"]}>
+        <li>{Subjects}</li>
+      </ul>
     </section>
   );
 };

src/components/SubjectText.tsx

@@ -2,11 +2,15 @@ import styles from "../styles/subject.module.scss";
 
 interface SubjectTextProps {
   title: string;
-  className: string;
+  active: boolean;
 }
 const SubjectText = (props: SubjectTextProps) => {
   return (
-    <div className={props.className}>
+    <article
+      className={
+        props.active ? styles["page-subject__container"] : styles["desative"]
+      }
+    >
       <h2 className={styles["page-subject__title"]}>{props.title}</h2>
       <p className={styles["page-subject__paragraph"]}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -15,8 +19,9 @@ const SubjectText = (props: SubjectTextProps) => {
         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 />
+        mollit anim id est laborum.
+      </p>
+      <p className={styles["page-subject__paragraph"]}>
         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
@@ -25,15 +30,16 @@ const SubjectText = (props: SubjectTextProps) => {
         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 />
+        voluptatem.
+      </p>
+      <p className={styles["page-subject__paragraph"]}>
         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>
+    </article>
   );
 };
 

src/components/checkbox.tsx

@@ -0,0 +1,18 @@
+import styles from "../styles/checkbox.module.scss";
+
+const Checkbox = () => {
+  return (
+    <div className={styles["page-main__container"]}>
+      <label className={styles["page-main__label"]} htmlFor="checkbox">
+        *<strong>Declaro que li e aceito</strong>
+      </label>
+      <input
+        id="checkbox"
+        className={styles["page-main__input"]}
+        type="checkbox"
+      />
+    </div>
+  );
+};
+
+export default Checkbox;

src/components/form.tsx

@@ -0,0 +1,75 @@
+import styles from "../styles/form.module.scss";
+import Checkbox from "./checkbox";
+import Input from "./input";
+
+interface FormProps {
+  active: boolean;
+  activeError?: boolean;
+}
+
+const Form = (props: FormProps) => {
+  return (
+    <form
+      className={props.active ? styles["page-main__form"] : styles["desative"]}
+    >
+      <h3 className={styles["page-main__title"]}>Preencha o formulário</h3>
+      <Input
+        htmlFor="Name"
+        id="Name"
+        textLabel="Nome"
+        type="text"
+        placeholder="Seu nome completo"
+      />
+      <Input
+        htmlFor="Email"
+        id="Email"
+        textLabel="E-mail"
+        type="email"
+        placeholder="Seu e-mail"
+      />
+      <Input
+        htmlFor="Cpf"
+        id="Cpf"
+        textLabel="CPF"
+        type="text"
+        placeholder="000.000.000-00"
+      />
+      <Input
+        htmlFor="Data"
+        id="Data"
+        textLabel="Data de Nascimento:"
+        type="text"
+        placeholder="00.00.0000"
+      />
+      <Input
+        htmlFor="tel"
+        id="tel"
+        textLabel="Telefone:"
+        type="text"
+        placeholder="(00) 00000-0000"
+      />
+      <Input
+        htmlFor="Instagram"
+        id="Instagram"
+        textLabel="Instagram"
+        type="text"
+        placeholder="@seuuser"
+      />
+      <Checkbox />
+      <button type="submit" className={styles["page-main__button"]}>
+        CADASTRE-SE
+      </button>
+      <p
+        className={
+          props.activeError
+            ? styles["page-main__success"]
+            : styles["page-main__error"]
+        }
+      >
+        *Formulário enviado com sucesso!
+      </p>
+    </form>
+  );
+};
+
+export default Form;

src/components/input.tsx

@@ -0,0 +1,37 @@
+import styles from "../styles/input.module.scss";
+
+interface InputProps {
+  placeholder: string;
+  type: string;
+  textLabel: string;
+  htmlFor: string;
+  id: string;
+  active?: boolean;
+}
+
+const Input = (props: InputProps) => {
+  return (
+    <div className={styles["page-main__container"]}>
+      <label className={styles["page-main__label"]} htmlFor={props.htmlFor}>
+        {props.textLabel}
+      </label>
+      <p
+        className={
+          props.active
+            ? styles["page-main__error"]
+            : styles["page-main__sem-erro"]
+        }
+      >
+        *Campo Obrigatório
+      </p>
+      <input
+        id={props.id}
+        className={styles["page-main__input"]}
+        type={props.type}
+        placeholder={props.placeholder}
+      />
+    </div>
+  );
+};
+
+export default Input;

src/components/menuMobile.tsx

@@ -2,33 +2,37 @@ import iconExit from "../assets/img/iconExit.png";
 import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
 
-import styles from "../styles/menuMobile.module.scss";
+import styles from "../styles/header.module.scss";
 
 interface MenuMobileProps {
   className: string;
   onClick: React.MouseEventHandler;
+  active: boolean;
 }
 
 const MenuMobile = (props: MenuMobileProps) => {
   return (
-    <div className={props.className}>
-      <div className={styles["page-header__menu-mobile--container"]}>
-        <div className={styles["page-header__menu-mobile--header"]}>
-          <Link link="/" text="ENTRAR" />
-          <button
-            className={styles["page-header__menu-mobile--button-exit"]}
-            aria-label="exit"
-            type="submit"
-            onClick={props.onClick}
-          >
-            <img src={iconExit} alt="" />
-          </button>
-        </div>
-        <div className={styles["page-header__menu-mobile--links"]}>
-          <HeaderLinks />
+    <>
+      <div className={props.active ? styles["background"] : styles[""]}></div>
+      <div className={props.className}>
+        <div className={styles["page-header__menu-mobile--container"]}>
+          <div className={styles["page-header__menu-mobile--header"]}>
+            <Link link="/" text="ENTRAR" />
+            <button
+              className={styles["page-header__menu-mobile--button-exit"]}
+              aria-label="exit"
+              type="submit"
+              onClick={props.onClick}
+            >
+              <img src={iconExit} alt="" />
+            </button>
+          </div>
+          <div className={styles["page-header__menu-mobile--links"]}>
+            <HeaderLinks />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/index.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import "./styles/global.scss";
+import "./styles/global.module.scss";
 import Home from "./pages/Home";
 
 const App = () => {

src/pages/Home.tsx

@@ -3,10 +3,10 @@ import Main from "../components/Main";
 
 const Home = () => {
   return (
-    <>
+    <div>
       <Header />
       <Main />
-    </>
+    </div>
   );
 };
 

src/styles/checkbox.module.scss

@@ -0,0 +1,44 @@
+@import './variables.scss';
+
+.page-main {
+    &__container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+    }
+
+    &__label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: $red;
+        text-decoration: initial;
+
+        strong {
+            font-weight: 400;
+            text-decoration: underline;
+            color: $black-200;
+        }
+    }
+
+    &__input {
+        border: 1px solid $black;
+        border-radius: 3px;
+        width: 18px;
+        height: 18px;
+    }
+
+    @media screen and (min-width: 2500px) {
+
+        &__label {
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__input {
+            width: 36px;
+            height: 35px;
+        }
+    }
+}

src/styles/form.module.scss

@@ -0,0 +1,67 @@
+@import './variables.scss';
+
+.desative {
+    display: none;
+}
+
+.page-main {
+    &__form {
+        width: 100%;
+        position: relative;
+    }
+
+    &__title {
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 28px;
+        color: $black;
+        margin-bottom: 12px;
+    }
+
+    &__button {
+        background: $black;
+        width: 100%;
+        height: 52px;
+        border-radius: 25px;
+        border: 0;
+        outline: 0;
+        margin-top: 12px;
+        font-size: 16px;
+        line-height: 19px;
+        letter-spacing: 0.05em;
+        cursor: pointer;
+        color: $white;
+    }
+
+    &__error {
+        display: none;
+    }
+
+    &__success {
+        margin-top: 12px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: $green;
+    }
+
+    @media screen and (min-width: 2500px) {
+        &__title {
+            font-size: 48px;
+            line-height: 56px;
+        }
+
+        &__button {
+            height: 71px;
+            font-size: 32px;
+            line-height: 38px;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+
+        &__title {
+            text-align: center;
+        }
+    }
+}

src/styles/header.module.scss

@@ -31,19 +31,19 @@
         width: 100%;
         height: 32px;
         background: $white;
-        border: 2px solid $gray-800;
+        border: 2px solid $gray-1000;
         border-radius: 5px;
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
-        color: $gray-600;
+        color: $gray-800;
         padding: 0;
         outline: 0;
         padding-left: 16px;
 
 
         &::placeholder {
-            color: $gray-600;
+            color: $gray-800;
         }
     }
 
@@ -104,20 +104,60 @@
         display: none;
     }
 
+    .background {
+        position: fixed;
+        background: rgba($gray-300, 0.702);
+        z-index: 50;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
     .active {
         position: absolute;
         top: 0;
         left: 0;
-        background: rgba($gray, 0.702);
         width: 100%;
-        height: 100%;
-        z-index: 50;
+        z-index: 100;
         display: block;
+    }
 
-
-        .link {
-            color: $gray-600;
+    &__menu-mobile {
+        &--container {
+            height: 585px;
+            background: $white;
+            width: 96.5%;
         }
+
+        &--header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: $black;
+            padding: 31px 16px;
+        }
+
+        &--button-exit {
+            background: transparent;
+            border: 0;
+            outline: 0;
+            cursor: pointer;
+        }
+
+        &--links {
+            display: flex;
+            flex-direction: column;
+            align-self: start;
+            gap: 12px;
+            padding: 31px 0 0 16px;
+
+            .link {
+                color: $gray-800;
+            }
+
+        }
+
     }
 
     @media screen and (min-width: 2500px) {
@@ -164,7 +204,7 @@
     @media screen and (min-width: 1025px) {
         &__container-top {
             padding: 0 100px;
-            border-bottom: 1px solid $gray-700;
+            border-bottom: 1px solid $gray-900;
         }
 
         &__menu,

src/styles/input.module.scss

@@ -0,0 +1,71 @@
+@import './variables.scss';
+
+.page-main {
+    &__container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    &__label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        margin-left: 15px;
+        color: $black-200;
+    }
+
+    &__input {
+        background: $white;
+        border: 1px solid $black-200;
+        border-radius: 25px;
+        width: 100%;
+        height: 46px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        padding-left: 20px;
+        color: $gray-700;
+        outline: 0;
+
+        &::placeholder {
+            color: $gray-700;
+        }
+    }
+
+    &__sem-erro {
+        display: none;
+    }
+
+    &__error {
+        display: flex;
+        position: absolute;
+        top: 14px;
+        right: 20px;
+        color: $red;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+    }
+
+    @media screen and (min-width: 2500px) {
+
+        &__label {
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__input {
+            height: 63px;
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__error {
+            font-size: 24px;
+            line-height: 28px;
+        }
+    }
+}

src/styles/main.module.scss

@@ -10,11 +10,19 @@
         margin-top: 30px;
     }
 
+    &__img-home {
+        width: 16px;
+    }
+
+    &__img-arrow {
+        width: 4.5px;
+    }
+
     &__text {
         font-weight: 400;
         font-size: 12px;
         line-height: 14px;
-        color: $gray-700;
+        color: $gray-900;
     }
 
     &__title {
@@ -26,4 +34,31 @@
         letter-spacing: 0.1em;
         color: $gray;
     }
+
+    @media screen and (min-width: 2500px) {
+
+        &__img-home {
+            width: 31px;
+        }
+
+        &__img-arrow {
+            width: 9px;
+            height: 15.6px;
+        }
+
+        &__text {
+            font-size: 24px;
+            line-height: 28px;
+        }
+
+        &__title {
+            font-size: 48px;
+            line-height: 56px;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+        padding: 0 16px;
+
+    }
 }

src/styles/menuMobile.module.scss

@@ -1,35 +0,0 @@
-@import './variables.scss';
-
-.page-header {
-    &__menu-mobile {
-        &--container {
-            height: 585px;
-            background: $white;
-            width: 96.5%;
-        }
-
-        &--header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: $black;
-            padding: 31px 16px;
-        }
-
-        &--button-exit {
-            background: transparent;
-            border: 0;
-            outline: 0;
-            cursor: pointer;
-        }
-
-        &--links {
-            display: flex;
-            flex-direction: column;
-            align-self: start;
-            gap: 12px;
-            padding: 31px 0 0 16px;
-        }
-
-    }
-}

src/styles/subject.module.scss

@@ -5,22 +5,33 @@
     margin-top: 80px;
     gap: 30px;
 
-    &__menu {
-        width: 302px;
-        border-right: 1px solid $black ;
+    &__nav {
+        border-right: 1px solid $black;
     }
 
-    &__button {
-        border: 0;
-        outline: 0;
+    &__menu {
+        width: 302px;
+        height: 285px;
+    }
+
+
+    li {
+        list-style: none;
+    }
+
+    &__button,
+    &__active {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
         background: transparent;
         font-weight: 400;
         font-size: 16px;
         line-height: 19px;
-        color: $gray-400;
-        width: 302px;
+        text-decoration: none;
+        color: $gray-500;
+        width: 100%;
         height: 39px;
-        text-align: start;
         padding-left: 16px;
 
         &:hover,
@@ -31,11 +42,13 @@
         }
     }
 
-    &__container {
-        display: none;
+    &__active {
+        background: $black;
+        font-weight: 700;
+        color: $white;
     }
 
-    .active {
+    &__container {
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -43,6 +56,15 @@
         margin-top: 10px;
     }
 
+    .desative {
+        display: none;
+    }
+
+    &__text {
+        width: 100%;
+        list-style: none;
+    }
+
     &__title {
         font-weight: 700;
         font-size: 24px;
@@ -54,8 +76,51 @@
         font-weight: 400;
         font-size: 13px;
         line-height: 15px;
-        color: $gray-400;
+        color: $gray-500;
     }
 
+    @media screen and (min-width: 2500px) {
+        &__menu {
+            width: 509px;
+            height: 465px;
+        }
 
+        &__button,
+        &__active {
+            font-size: 32px;
+            line-height: 38px;
+            height: 58px;
+        }
+
+        &__title {
+            font-size: 48px;
+            line-height: 56px;
+        }
+
+        &__paragraph {
+            font-size: 26px;
+            line-height: 30px;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+        margin-top: 40px;
+
+        &__menu {
+            width: 100%;
+            border-right: 0;
+            max-height: initial;
+            padding: 0;
+        }
+
+        &__button,
+        &__active {
+            width: 100%;
+        }
+
+        &__title {
+            text-align: center;
+        }
+    }
 }

src/styles/variables.scss

@@ -3,15 +3,19 @@
 $font-family: 'Roboto', sans-serif;
 
 $black: #000;
+$black-200: #100D0E;
 $white: #fff;
 $gray: #292929;
 $gray-200: #303030;
-$gray-300: #5E5E5E;
-$gray-400: #7D7D7D;
-$gray-500: #919191;
-$gray-600: #C6C6C6;
-$gray-700: #C4C4C4;
-$gray-800: #F2F2F2;
-$gray-900: #F9F9F9;
+$gray-300: #454545;
+$gray-400: #5E5E5E;
+$gray-500: #7D7D7D;
+$gray-600: #919191;
+$gray-700: #B9B7B7;
+$gray-800: #C6C6C6;
+$gray-900: #C4C4C4;
+$gray-1000: #F2F2F2;
+$gray-1010: #F9F9F9;
 
-$red: #FF0000;
+$red: #FF0000;
+$green: #008000;