From d06169149580fb09dcb66f05ec8cfe696bbf043c Mon Sep 17 00:00:00 2001
From: Luiz Felipe Silva <felipesilva9627@hotmail.com>
Date: Sun, 15 Jan 2023 15:46:43 -0300
Subject: [PATCH] feat: criado responsivo para telas 2500px.

---
 src/components/Header/Form.module.scss        | 24 +++++++++++--
 src/components/Header/Form.tsx                |  6 ++--
 .../Header/HeaderWrapper.module.scss          |  6 +++-
 src/components/Header/Logo.module.scss        |  6 ++++
 src/components/Header/Logo.tsx                | 15 ++++++++
 src/components/Header/LogoM3.tsx              |  6 +---
 src/components/Header/Nav.module.scss         |  8 ++++-
 src/components/Header/Nav.tsx                 |  2 +-
 src/components/Header/User.module.scss        | 11 ++++++
 src/pages/Header.tsx                          |  4 +--
 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 ++++++++++++
 15 files changed, 184 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Header/Logo.module.scss
 create mode 100644 src/components/Header/Logo.tsx
 create mode 100644 src/styles/partials/Form.module.scss
 create mode 100644 src/styles/partials/HeaderWrapper.module.scss
 create mode 100644 src/styles/partials/Menu.module.scss
 create mode 100644 src/styles/partials/Nav.module.scss
 create mode 100644 src/styles/partials/User.module.scss

diff --git a/src/components/Header/Form.module.scss b/src/components/Header/Form.module.scss
index 10535e6..aca2fcb 100644
--- a/src/components/Header/Form.module.scss
+++ b/src/components/Header/Form.module.scss
@@ -1,4 +1,4 @@
-.header-form {
+.form {
   position: relative;
 
   @media (max-width: 1024px) {
@@ -7,7 +7,7 @@
     grid-row: 2;
   }
 
-  .header-search {
+  .form-search {
     height: 32px;
     width: 264px;
     border-radius: 5px;
@@ -15,6 +15,14 @@
     outline: 0;
     border: 2px solid #f2f2f2;
 
+    @media (min-width: 2500px) {
+      height: 57px;
+      width: 515px;
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 33px;
+    }
+
     @media (max-width: 1024px) {
       width: 100%;
     }
@@ -25,12 +33,22 @@
     }
   }
 
-  .header-search-icon {
+  .form-search-icon {
     position: absolute;
     background-color: transparent;
     right: 17px;
     bottom: 4px;
     border: 0;
     cursor: pointer;
+
+    @media (min-width: 2500px) {
+      bottom: 8px;
+
+      img {
+        height: 35px;
+        width: 35px;
+      }
+     
+    }
   }
 }
diff --git a/src/components/Header/Form.tsx b/src/components/Header/Form.tsx
index 5c2b207..00cbcb8 100644
--- a/src/components/Header/Form.tsx
+++ b/src/components/Header/Form.tsx
@@ -9,16 +9,16 @@ import search from "../../assets/svg/search.svg";
 
 const Form = () => {
   return (
-    <form action="./" className={styleForm["header-form"]}>
+    <form action="./" className={styleForm["form"]}>
       <input
         type="text"
         id="search"
-        className={styleForm["header-search"]}
+        className={styleForm["form-search"]}
         placeholder="Buscar..."
         required
       />
 
-      <button type="submit" className={styleForm["header-search-icon"]}>
+      <button type="submit" className={styleForm["form-search-icon"]}>
         <img src={search} alt="Lupa de pesquisa" />
       </button>
     </form>
diff --git a/src/components/Header/HeaderWrapper.module.scss b/src/components/Header/HeaderWrapper.module.scss
index 651ac7e..01ee583 100644
--- a/src/components/Header/HeaderWrapper.module.scss
+++ b/src/components/Header/HeaderWrapper.module.scss
@@ -2,12 +2,16 @@
   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 (min-width: 2500px) {
+    padding: 22px 100px;
+    height: auto;
+  }
+
   @media (max-width: 1024px) {
     display: grid;
     grid-template-columns: repeat(3, max-content);
diff --git a/src/components/Header/Logo.module.scss b/src/components/Header/Logo.module.scss
new file mode 100644
index 0000000..b1b66b6
--- /dev/null
+++ b/src/components/Header/Logo.module.scss
@@ -0,0 +1,6 @@
+.logo {
+  @media (min-width: 2500px) {
+    height: 50px;
+    width: 265px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx
new file mode 100644
index 0000000..0ac6ac7
--- /dev/null
+++ b/src/components/Header/Logo.tsx
@@ -0,0 +1,15 @@
+// Imagem
+import logoM3 from "../../assets/svg/logo.svg";
+
+// Estilo
+import styleLogo from "./Logo.module.scss";
+
+const Logo = () => {
+  return (
+    <a href="#logo">
+      <img src={logoM3} alt="M3 Academy" className={styleLogo["logo"]} />
+    </a>
+  );
+};
+
+export { Logo };
diff --git a/src/components/Header/LogoM3.tsx b/src/components/Header/LogoM3.tsx
index 474f58d..97aa835 100644
--- a/src/components/Header/LogoM3.tsx
+++ b/src/components/Header/LogoM3.tsx
@@ -2,11 +2,7 @@
 import logoM3 from "../../assets/svg/logo.svg";
 
 const LogoM3 = () => {
-  return (
-    <a href="#logo">
-      <img src={logoM3} alt="M3 Academy" />{" "}
-    </a>
-  );
+  return <img src={logoM3} alt="M3 Academy" />;
 };
 
 export { LogoM3 };
diff --git a/src/components/Header/Nav.module.scss b/src/components/Header/Nav.module.scss
index 677f554..27a06ce 100644
--- a/src/components/Header/Nav.module.scss
+++ b/src/components/Header/Nav.module.scss
@@ -1,4 +1,4 @@
-.header-nav {
+.nav {
   padding: 14px 100px;
   background-color: #000;
   text-decoration: none;
@@ -25,6 +25,12 @@
     text-decoration: none;
     transition: all 0.3s linear;
 
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      font-weight: 500;
+      line-height: 33px;
+    }
+
     &:hover {
       font-weight: 500;
     }
diff --git a/src/components/Header/Nav.tsx b/src/components/Header/Nav.tsx
index 0e33e14..d846437 100644
--- a/src/components/Header/Nav.tsx
+++ b/src/components/Header/Nav.tsx
@@ -6,7 +6,7 @@ import styleNav from "./Nav.module.scss";
 
 const Nav = () => {
   return (
-    <nav className={styleNav["header-nav"]}>
+    <nav className={styleNav["nav"]}>
       <ul>
         <li>
           <a href="#cursos">Cursos</a>
diff --git a/src/components/Header/User.module.scss b/src/components/Header/User.module.scss
index a4a452a..74e4c79 100644
--- a/src/components/Header/User.module.scss
+++ b/src/components/Header/User.module.scss
@@ -11,6 +11,17 @@
     text-decoration: none;
     transition: all 0.3s linear;
 
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 33px;
+
+      img {
+        height: 54px;
+        width: 54px;
+      }
+    }
+
     &:first-child {
       margin-right: 55px;
     }
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
index 22b6f63..30c97f9 100644
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 // Componentes
 import { Menu } from "../components/header/Menu";
-import { LogoM3 } from "../components/header/LogoM3";
+import { Logo } from "../components/header/Logo";
 import { Form } from "../components/header/Form";
 import { User } from "../components/header/User";
 import { Nav } from "../components/header/Nav";
@@ -16,7 +16,7 @@ const Header = () => {
     <header>
       <div className={styleHeaderWrapper["header"]}>
         <Menu />
-        <LogoM3 />
+        <Logo />
         <Form />
         <User />
       </div>
diff --git a/src/styles/partials/Form.module.scss b/src/styles/partials/Form.module.scss
new file mode 100644
index 0000000..10535e6
--- /dev/null
+++ b/src/styles/partials/Form.module.scss
@@ -0,0 +1,36 @@
+.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
new file mode 100644
index 0000000..651ac7e
--- /dev/null
+++ b/src/styles/partials/HeaderWrapper.module.scss
@@ -0,0 +1,20 @@
+.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
new file mode 100644
index 0000000..1404bd4
--- /dev/null
+++ b/src/styles/partials/Menu.module.scss
@@ -0,0 +1,7 @@
+.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
new file mode 100644
index 0000000..01c4621
--- /dev/null
+++ b/src/styles/partials/Nav.module.scss
@@ -0,0 +1,27 @@
+.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
new file mode 100644
index 0000000..79905ad
--- /dev/null
+++ b/src/styles/partials/User.module.scss
@@ -0,0 +1,22 @@
+.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
-- 
2.34.1