From dc4c0cfc71962065e5d6ea113ee39a48e84cad21 Mon Sep 17 00:00:00 2001
From: Luiz Felipe Silva <felipesilva9627@hotmail.com>
Date: Sun, 15 Jan 2023 16:06:32 -0300
Subject: [PATCH] feat: criado responsivo a partir de 2500px.

---
 src/components/section/Breadcrumb.module.scss | 18 ++++++++--
 ...t.module.scss => ContentAbout.module.scss} | 12 ++++++-
 ...titucionalContent.tsx => ContentAbout.tsx} |  8 ++---
 .../section/NavInstitucional.module.scss      | 15 ++++++++
 ...ordion.module.scss => Section.module.scss} |  0
 .../section/TitleInstitucional.module.scss    |  8 ++++-
 src/components/section/TitleInstitucional.tsx |  2 +-
 src/pages/Section.tsx                         |  6 ++--
 src/styles/partials/Form.module.scss          | 36 -------------------
 src/styles/partials/HeaderWrapper.module.scss | 20 -----------
 src/styles/partials/Menu.module.scss          |  7 ----
 src/styles/partials/Nav.module.scss           | 27 --------------
 src/styles/partials/User.module.scss          | 22 ------------
 13 files changed, 56 insertions(+), 125 deletions(-)
 rename src/components/section/{InstitucionalContent.module.scss => ContentAbout.module.scss} (69%)
 rename src/components/section/{InstitucionalContent.tsx => ContentAbout.tsx} (88%)
 rename src/components/section/{SectionAccordion.module.scss => Section.module.scss} (100%)
 delete mode 100644 src/styles/partials/Form.module.scss
 delete mode 100644 src/styles/partials/HeaderWrapper.module.scss
 delete mode 100644 src/styles/partials/Menu.module.scss
 delete mode 100644 src/styles/partials/Nav.module.scss
 delete mode 100644 src/styles/partials/User.module.scss

diff --git a/src/components/section/Breadcrumb.module.scss b/src/components/section/Breadcrumb.module.scss
index aff3c99..a926b0a 100644
--- a/src/components/section/Breadcrumb.module.scss
+++ b/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;
+    }
   }
 }
-
-
diff --git a/src/components/section/InstitucionalContent.module.scss b/src/components/section/ContentAbout.module.scss
similarity index 69%
rename from src/components/section/InstitucionalContent.module.scss
rename to src/components/section/ContentAbout.module.scss
index e60aada..99fc7b2 100644
--- a/src/components/section/InstitucionalContent.module.scss
+++ b/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;
diff --git a/src/components/section/InstitucionalContent.tsx b/src/components/section/ContentAbout.tsx
similarity index 88%
rename from src/components/section/InstitucionalContent.tsx
rename to src/components/section/ContentAbout.tsx
index 24c0180..d7990fa 100644
--- a/src/components/section/InstitucionalContent.tsx
+++ b/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 };
diff --git a/src/components/section/NavInstitucional.module.scss b/src/components/section/NavInstitucional.module.scss
index 75b7fe8..c712119 100644
--- a/src/components/section/NavInstitucional.module.scss
+++ b/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;
+        }
       }
     }
   }
diff --git a/src/components/section/SectionAccordion.module.scss b/src/components/section/Section.module.scss
similarity index 100%
rename from src/components/section/SectionAccordion.module.scss
rename to src/components/section/Section.module.scss
diff --git a/src/components/section/TitleInstitucional.module.scss b/src/components/section/TitleInstitucional.module.scss
index c37403d..4fb546e 100644
--- a/src/components/section/TitleInstitucional.module.scss
+++ b/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;
   }
diff --git a/src/components/section/TitleInstitucional.tsx b/src/components/section/TitleInstitucional.tsx
index b4296da..63a1197 100644
--- a/src/components/section/TitleInstitucional.tsx
+++ b/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>
   );
 };
 
diff --git a/src/pages/Section.tsx b/src/pages/Section.tsx
index 0b6fcd3..9863f4a 100644
--- a/src/pages/Section.tsx
+++ b/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>
   );
diff --git a/src/styles/partials/Form.module.scss b/src/styles/partials/Form.module.scss
deleted file mode 100644
index 10535e6..0000000
--- a/src/styles/partials/Form.module.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/src/styles/partials/HeaderWrapper.module.scss b/src/styles/partials/HeaderWrapper.module.scss
deleted file mode 100644
index 651ac7e..0000000
--- a/src/styles/partials/HeaderWrapper.module.scss
+++ /dev/null
@@ -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;
-  }
-}
-
diff --git a/src/styles/partials/Menu.module.scss b/src/styles/partials/Menu.module.scss
deleted file mode 100644
index 1404bd4..0000000
--- a/src/styles/partials/Menu.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.header-menu {
-  display: none;
-
-  @media (max-width: 1024px) {
-    display: flex;
-  }
-}
\ No newline at end of file
diff --git a/src/styles/partials/Nav.module.scss b/src/styles/partials/Nav.module.scss
deleted file mode 100644
index 01c4621..0000000
--- a/src/styles/partials/Nav.module.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/src/styles/partials/User.module.scss b/src/styles/partials/User.module.scss
deleted file mode 100644
index 79905ad..0000000
--- a/src/styles/partials/User.module.scss
+++ /dev/null
@@ -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;
-  }
-}
\ No newline at end of file