feat(main): Adiciona main a pagina

src/components/Button.tsx

@@ -0,0 +1,14 @@
+interface ButtonProps {
+  link: string;
+  text: string;
+}
+
+const Button = (props: ButtonProps) => {
+  return (
+    <a href={props.link}>
+      <button className="page-subject__button">{props.text}</button>
+    </a>
+  );
+};
+
+export default Button;

src/components/Main.tsx

@@ -0,0 +1,19 @@
+import iconHome from "../assets/img/iconHome.png";
+import arrow from "../assets/img/arrow.png";
+import SubjectMain from "./SubjectMain";
+
+const Main = () => {
+  return (
+    <main className="page-main">
+      <div className="page-main__menu">
+        <img className="page-main__img-Home" src={iconHome} alt="" />
+        <img className="page-main__img-arrow" src={arrow} alt="" />
+        <strong className="page-main__text">INSTITUCIONAL</strong>
+      </div>
+      <h1 className="page-main__title">INSTITUCIONAL</h1>
+      <SubjectMain />
+    </main>
+  );
+};
+
+export default Main;

src/components/SubjectMain.tsx

@@ -0,0 +1,22 @@
+import Button from "./Button";
+import SubjectText from "./SubjectText";
+
+const SubjectMain = () => {
+  return (
+    <section className="page-subject">
+      <div className="page-subject__menu">
+        <Button link="/" text="Sobre" />
+        <Button link="/" text="Forma de Pagamento" />
+        <Button link="/" text="Entrega" />
+        <Button link="/" text="Troca e Devolução" />
+        <Button link="/" text="Segurança e Privacidade" />
+        <Button link="/" text="Contato" />
+      </div>
+      <div className="page-subject__text">
+        <SubjectText title="Sobre" />
+      </div>
+    </section>
+  );
+};
+
+export default SubjectMain;

src/components/SubjectText.tsx

@@ -0,0 +1,38 @@
+interface SubjectTextProps {
+  title: string;
+}
+
+const SubjectText = (props: SubjectTextProps) => {
+  return (
+    <>
+      <h2 className="page-subject__title">{props.title}</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. <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>
+    </>
+  );
+};
+
+export default SubjectText;

src/global.scss

@@ -1,3 +1,4 @@
 @import './styles/variables.scss';
 @import './styles/reset.scss';
-@import './styles/header.scss';
+@import './styles/header.scss';
+@import './styles/main.scss'

src/pages/Home.tsx

@@ -1,9 +1,11 @@
 import Header from "../components/Header";
+import Main from "../components/Main";
 
 const Home = () => {
   return (
     <>
       <Header />
+      <Main />
     </>
   );
 };

src/styles/header.scss

@@ -29,19 +29,19 @@
         width: 100%;
         height: 32px;
         background: $white;
-        border: 2px solid $gray-700;
+        border: 2px solid $gray-800;
         border-radius: 5px;
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
-        color: $gray-500;
+        color: $gray-600;
         padding: 0;
         outline: 0;
         padding-left: 16px;
 
 
         &::placeholder {
-            color: $gray-500;
+            color: $gray-600;
         }
     }
 
@@ -191,11 +191,11 @@
     @media screen and (min-width: 1025px) {
         &__container-top {
             padding: 0 100px;
-            border-bottom: 1px solid $gray-600;
+            border-bottom: 1px solid $gray-700;
         }
 
         &__menu,
-        &__mobile {
+        &__container-bottom-mobile {
             display: none;
         }
     }

src/styles/main.scss

@@ -0,0 +1,82 @@
+.page-main {
+    padding: 0 100px;
+
+    &__menu {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-top: 30px;
+    }
+
+    &__text {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: $gray-700;
+    }
+
+    &__title {
+        margin-top: 80px;
+        text-align: center;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 28px;
+        letter-spacing: 0.1em;
+        color: $gray;
+    }
+
+    .page-subject {
+        display: flex;
+        margin-top: 80px;
+        gap: 30px;
+
+        &__menu {
+            width: 302px;
+            border-right: 1px solid $black ;
+        }
+
+        &__button {
+            border: 0;
+            outline: 0;
+            background: transparent;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 19px;
+            color: $gray-400;
+            width: 302px;
+            height: 39px;
+            text-align: start;
+            padding-left: 16px;
+
+            &:hover,
+            &:active {
+                background: $black;
+                font-weight: 700;
+                color: $white;
+            }
+        }
+
+        &__text {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            justify-content: center;
+            margin-top: 10px;
+
+            h2 {
+                font-weight: 700;
+                font-size: 24px;
+                line-height: 28px;
+                color: $gray;
+            }
+
+            p {
+                font-weight: 400;
+                font-size: 13px;
+                line-height: 15px;
+                color: $gray-400;
+            }
+
+        }
+    }
+}

src/styles/variables.scss

@@ -4,12 +4,14 @@ $font-family: 'Roboto', sans-serif;
 
 $black: #000;
 $white: #fff;
+$gray: #292929;
 $gray-200: #303030;
 $gray-300: #5E5E5E;
-$gray-400: #919191;
+$gray-400: #7D7D7D;
-$gray-500: #C6C6C6;
+$gray-500: #919191;
-$gray-600: #C4C4C4;
+$gray-600: #C6C6C6;
-$gray-700: #F2F2F2;
+$gray-700: #C4C4C4;
-$gray-800: #F9F9F9;
+$gray-800: #F2F2F2;
+$gray-900: #F9F9F9;
 
 $red: #FF0000;