Merge pull request 'feat: criado responsivo a partir de 2500px.' (#5) from feature/institucional into development

Reviewed-on: #5

src/components/section/Breadcrumb.module.scss

@@ -8,8 +8,17 @@
   }
 
   img {
+    &:nth-child(1) {
+      @media (min-width: 2500px) {
+        width: 31px;
+      }
+    }
     &:nth-child(2) {
       margin: 0 10px;
+
+      @media (min-width: 2500px) {
+        width: 15px;
+      }
     }
   }
 
@@ -18,8 +27,11 @@
     font-weight: 400;
     line-height: 14px;
     text-transform: uppercase;
-    color: #C4C4C4;
+    color: #c4c4c4;
+
+    @media (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28px;
+    }
   }
 }
-
-

src/components/section/ContentAbout.module.scss

@@ -1,10 +1,15 @@
-.institucionalContent{
+.contentAbout {
   h2 {
     margin: 12px 0;
     font-size: 24px;
     font-weight: 700;
     line-height: 28px;
 
+    @media (min-width: 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+    }
+
     @media (max-width: 1024px) {
       margin: 30px 0 12px 0;
       text-align: center;
@@ -21,6 +26,11 @@
       margin: 20px 0;
     }
 
+    @media (min-width: 2500px) {
+      font-size: 26px;
+      line-height: 30px;
+    }
+
     @media (max-width: 1024px) {
       font-size: 12px;
       line-height: 18px;

src/components/section/ContentAbout.tsx

@@ -2,11 +2,11 @@
 import React from "react";
 
 // Estilos
-import styleInstitucionalContent from "./InstitucionalContent.module.scss";
+import styleContent from "./ContentAbout.module.scss";
 
-const InstitucionalContent = () => {
+const ContentAbout = () => {
   return (
-    <div className={styleInstitucionalContent["institucionalContent"]}>
+    <div className={styleContent["contentAbout"]}>
       <h2>Sobre</h2>
 
       <p>
@@ -42,4 +42,4 @@ const InstitucionalContent = () => {
   );
 };
 
-export { InstitucionalContent };
+export { ContentAbout };

src/components/section/NavInstitucional.module.scss

@@ -15,6 +15,11 @@
       width: 302px;
       height: 39px;
 
+      @media (min-width: 2500px) {
+        width: 590px;
+        height: 58px;
+      }
+
       @media (max-width: 1024px) {
         width: 100%;
       }
@@ -25,6 +30,11 @@
         line-height: 19px;
         color: #7d7d7d;
         text-decoration: none;
+
+        @media (min-width: 2500px) {
+          font-size: 32px;
+          line-height: 38px;
+        }
       }
     }
 
@@ -34,6 +44,11 @@
       a {
         color: #fff;
         font-weight: 700;
+
+        @media (min-width: 2500px) {
+          font-size: 32px;
+          line-height: 38px;
+        }
       }
     }
   }

src/components/section/TitleInstitucional.module.scss

@@ -1,4 +1,4 @@
-.title {
+.titleInstitucional {
   font-size: 24px;
   font-weight: 400;
   line-height: 28px;
@@ -6,6 +6,12 @@
   text-align: center;
   margin: 80px 0;
 
+  @media (min-width: 2500px) {
+    font-size: 48px;
+    line-height: 56px;
+    letter-spacing: 0.1em;
+  }
+
   @media (max-width: 1024px) {
     margin: 80px 0 40px 0;
   }

src/components/section/TitleInstitucional.tsx

@@ -6,7 +6,7 @@ import styleTitleInstitucional from "./TitleInstitucional.module.scss";
 
 const TitleInstitucional = () => {
   return (
-    <h1 className={styleTitleInstitucional["title"]}>Institucional</h1>
+    <h1 className={styleTitleInstitucional["titleInstitucional"]}>Institucional</h1>
   );
 };
 

src/pages/Section.tsx

@@ -5,10 +5,10 @@ import React from "react";
 import { Breadcrumb } from "../components/section/Breadcrumb";
 import { TitleInstitucional } from "../components/section/TitleInstitucional";
 import { NavInstitucional } from "../components/section/NavInstitucional";
-import { InstitucionalContent } from "../components/section/InstitucionalContent";
+import { ContentAbout } from "../components/section/ContentAbout";
 
 // Estilos
-import styleSection from "../components/section/SectionAccordion.module.scss";
+import styleSection from "../components/section/Section.module.scss";
 
 const Section = () => {
   return (
@@ -18,7 +18,7 @@ const Section = () => {
 
       <section className={styleSection["section"]}>
         <NavInstitucional />
-        <InstitucionalContent />
+        <ContentAbout />
       </section>
     </main>
   );

src/styles/partials/Form.module.scss

@@ -1,36 +0,0 @@
-.header-form {
-  position: relative;
-
-  @media (max-width: 1024px) {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-row: 2;
-  }
-
-  .header-search {
-    height: 32px;
-    width: 264px;
-    border-radius: 5px;
-    padding: 7px 16px 7px 16px;
-    outline: 0;
-    border: 2px solid #f2f2f2;
-
-    @media (max-width: 1024px) {
-      width: 100%;
-    }
-
-    &::placeholder {
-      font-weight: 400;
-      color: #c4c4c4;
-    }
-  }
-
-  .header-search-icon {
-    position: absolute;
-    background-color: transparent;
-    right: 17px;
-    bottom: 4px;
-    border: 0;
-    cursor: pointer;
-  }
-}

src/styles/partials/HeaderWrapper.module.scss

@@ -1,20 +0,0 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  height: 76px;
-  width: 100%;
-  align-items: center;
-  border-bottom: 1px solid #c4c4c4;
-  padding: 0 100px;
-  background-color: #000000;
-
-  @media (max-width: 1024px) {
-    display: grid;
-    grid-template-columns: repeat(3, max-content);
-    grid-template-rows: repeat(2, 1fr);
-    gap: 21px;
-    height: auto;
-    padding: 25px 16px;
-  }
-}
-

src/styles/partials/Menu.module.scss

@@ -1,7 +0,0 @@
-.header-menu {
-  display: none;
-
-  @media (max-width: 1024px) {
-    display: flex;
-  }
-}

src/styles/partials/Nav.module.scss

@@ -1,27 +0,0 @@
-.header-nav {
-  padding: 14px 100px;
-  background-color: #000;
-  text-decoration: none;
-
-  @media (max-width: 1024px) {
-    display: none;
-  }
-
-  ul {
-    display: flex;
-    list-style: none;
-  }
-
-  li {
-    margin-right: 25px;
-  }
-
-  a {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16px;
-    text-transform: uppercase;
-    color: #fff;
-    text-decoration: none;
-  }
-}

src/styles/partials/User.module.scss

@@ -1,22 +0,0 @@
-.header-user {
-  display: flex;
-  align-items: center;
-
-  p {
-    color: #fff;
-    margin-right: 55px;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16px;
-    text-transform: uppercase;
-    cursor: pointer;
-
-    @media (max-width: 1024px) {
-      display: none;
-    }
-  }
-
-  img {
-    cursor: pointer;
-  }
-}