From adc6f6f8aab73be6f67fc85db4836b459449fb8d Mon Sep 17 00:00:00 2001
From: Samuel <samuelcondackxz@gmail.com>
Date: Tue, 17 Jan 2023 13:14:45 -0300
Subject: [PATCH] Feat: Adiciona a responsividade de TV

---
 .../src/components/Footer/Footer.modules.scss | 36 ++++++++--
 .../FooterTop/FooterTop.modules.scss          | 66 ++++++++++++++++++-
 my-app/src/components/FooterTop/FooterTop.tsx |  6 +-
 .../src/components/Header/Header.modules.scss | 32 ++++++++-
 my-app/src/components/Header/Header.tsx       |  4 +-
 .../HeaderBottom/HeaderBottom.modules.scss    |  6 ++
 .../NewsLetter/NewsLetter.modules.scss        | 25 ++++++-
 my-app/src/pages/About.modules.scss           | 14 ++++
 my-app/src/pages/Contact.modules.scss         | 55 ++++++++++++++++
 my-app/src/pages/institucional.modules.scss   | 31 ++++++++-
 my-app/src/pages/institucional.tsx            |  9 +--
 11 files changed, 261 insertions(+), 23 deletions(-)

diff --git a/my-app/src/components/Footer/Footer.modules.scss b/my-app/src/components/Footer/Footer.modules.scss
index 28afe4b..aed546b 100644
--- a/my-app/src/components/Footer/Footer.modules.scss
+++ b/my-app/src/components/Footer/Footer.modules.scss
@@ -24,6 +24,15 @@
         line-height: 12px;
         text-transform: capitalize;
         color: #FFFFFF;
+        @media (min-width: 2500px){
+            font-weight: 400;
+            font-size: 20px;
+            line-height: 23px;
+            width: 400px;
+            height: 20px;
+            margin-top: 24.5px;
+            margin-bottom: 24.5px;
+        }
     }
     @media (max-width: 1024px){
         order: 2;
@@ -35,14 +44,18 @@
     align-items: center;
     gap: 12px;
     @media (max-width: 1024px){
-        width: 398px;
+        width: 25%;
         height: 34px;
     }
     & img{
         width: 36px;
         height: 20.2px;
+        @media (min-width: 2500px){
+            width: 70px;
+            height: 39.27px;
+        }
         @media (max-width: 1024px){
-            width: 36px;
+            width: inherit;
             height: 20.2px;
         }
     }
@@ -51,12 +64,16 @@
     padding-left: 12px;
     border-left: 1px solid #C4C4C4;
     @media (max-width: 1024px){
-        width: 54.61px;
         height: 34px;
+        width: 45px;
     }
     & img{
-        width: 54.61px;
+        width: inherit;
         height: 34px;
+        @media (min-width: 2500px){
+            width: 106px;
+            height: 66px;
+        }
     }
 }
 .Powered{
@@ -73,6 +90,17 @@
         line-height: 12px;
         text-transform: capitalize;
         color: #FFFFFF;
+        @media (min-width: 2500px){
+            font-weight: 400;
+            font-size: 20px;
+            line-height: 23px;
+        }
+    }
+    & img{
+        @media (min-width: 2500px){
+            width: 84.22px;
+            height: 30px;
+        }
     }
     @media (max-width: 1024px){
         justify-content: left;
diff --git a/my-app/src/components/FooterTop/FooterTop.modules.scss b/my-app/src/components/FooterTop/FooterTop.modules.scss
index 131123f..067ae94 100644
--- a/my-app/src/components/FooterTop/FooterTop.modules.scss
+++ b/my-app/src/components/FooterTop/FooterTop.modules.scss
@@ -59,6 +59,11 @@
     font-size: 14px;
     line-height: 16px;  
     margin-left: 40px;
+    @media (min-width: 2500px){
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 33px;
+    }
     @media (max-width: 1024px){
     margin-left: 16px;
     }
@@ -104,6 +109,11 @@
     font-size: 14px;
     line-height: 16px;  
     margin-left: 40px;
+    @media (min-width: 2500px){
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 33px;
+    }
     @media (max-width: 1024px){
     margin-left: 16px;
     }
@@ -149,6 +159,11 @@
     font-size: 14px;
     line-height: 16px;  
     margin-left: 40px;
+    @media (min-width: 2500px){
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 33px;
+    }
     @media (max-width: 1024px){
     margin-left: 16px;
     }
@@ -181,6 +196,11 @@
         text-transform: capitalize;
         text-decoration: none;
         color: #303030;
+        @media (min-width: 2500px){
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 28px;
+        }
     }
     
 }
@@ -195,6 +215,21 @@
     line-height: 14px !important;
     text-transform: capitalize !important;
     color: #303030;
+    @media (min-width: 2500px){
+        font-weight: 500 !important;
+        font-size: 24px !important;
+        line-height: 28px !important;
+        width: unset;
+    }
+}
+.ulP22{
+    margin-top: 12px;
+    margin-bottom: 0;
+    @media (min-width: 2500px){
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 28px;
+    }
 }
 .iconsLinks{
     margin-right: 50px;
@@ -202,8 +237,20 @@
 .networkIcons{
     display: flex;
     gap: 10px;
+    @media (min-width: 2500px){
+        & img{
+            width: 70px;
+            height: 70px;
+        }
+    }
+    @media (max-width: 1024px){
+     margin-left: 16px;   
+    }
 }
 .linkDiv{
+    @media (max-width: 1024px){
+        margin-left: 16px;
+    }
     & a{
         font-family: 'Roboto';
         font-style: normal;
@@ -212,7 +259,11 @@
         line-height: 16px;
         color: #303030;
         text-decoration: none;
-
+        @media (min-width: 2500px){
+            font-weight: 400;
+            font-size: 28px;
+            line-height: 33px;
+        }
     }
 }
 .WppArrow{
@@ -220,6 +271,19 @@
     flex-direction: column;
     gap: 5px;
     margin-right: 16px;
+    float: right;
+    height: 0;
+    position: fixed;
+    top: 80%;
+    right: 0;
+    & img{
+        width: 34px;
+        height: 35px;
+        @media (min-width: 2500px){
+            width: 66px;
+            height: 66px;
+        }
+    }
 }
 .backTop{
     cursor: pointer;
diff --git a/my-app/src/components/FooterTop/FooterTop.tsx b/my-app/src/components/FooterTop/FooterTop.tsx
index 723cff3..a5944c4 100644
--- a/my-app/src/components/FooterTop/FooterTop.tsx
+++ b/my-app/src/components/FooterTop/FooterTop.tsx
@@ -40,9 +40,9 @@ const FooterTop = () => {
                         <label className='CheckLabel3' htmlFor="fale"><h3 className='h3Check3'></h3></label>
                     <ul className='footerUl'>
                         <p className='ulP2'>Atendimento Ao Consumidor</p>
-                        <p>(11) 4159-9504</p>
+                        <p className='ulP22'>(11) 4159-9504</p>
                         <p className='ulP2'>Atendimento Online</p>
-                        <p>(11) 99433-8825</p>
+                        <p className='ulP22'>(11) 99433-8825</p>
                     </ul>
                 </div>
 
@@ -58,11 +58,11 @@ const FooterTop = () => {
                         <a href="/">www.loremipsum.com</a>
                     </div>
                 </div>
+            </div>
                 <div className='WppArrow'>
                     <a href="/"><img src={Whatsapp} alt="Whatsapp and Arrow Icon"/></a>
                     <img className='backTop' src={Arrow} alt="Back to the top icon" onClick={backtotop}/>
                 </div>
-            </div>
         </footer>
         </>
     )
diff --git a/my-app/src/components/Header/Header.modules.scss b/my-app/src/components/Header/Header.modules.scss
index cb45326..bde2325 100644
--- a/my-app/src/components/Header/Header.modules.scss
+++ b/my-app/src/components/Header/Header.modules.scss
@@ -14,9 +14,18 @@
         padding-right: 16px;
     }
 }
+.linkMenu{
+    @media (min-width: 1025px){
+        display: none;
+    }
+}
 .academylogo{
     width: 136px;
     height: 25.86px;
+    @media (min-width: 2500px){
+        width: 265px;
+        height: 50.5px;   
+    }
 }
 .SearchBar{
     border: 2px solid #F2F2F2;
@@ -28,11 +37,22 @@
     align-items: center;
     justify-content: space-between;
     padding: 7px 16px;
+    color: #C4C4C4;
     @media (max-width: 1024px){
         position: relative;
         width: 100%;
         order: 3;
     }
+    @media (min-width: 2500px){
+        width: 515.62px;
+        height: 57px;
+    }
+}
+.searchImg{
+    @media (min-width: 2500px){
+        width: 35.15px;
+        height: 35.15px;
+    }
 }
 .SearchInput{
     width: 100%;
@@ -50,6 +70,9 @@
     @media (max-width: 1024px){
         
     }
+    @media (min-width: 2500px){
+        font-size: 28px;
+    }
 }
 .LoginAndCart{
     display: flex;
@@ -68,7 +91,14 @@
     @media (max-width: 1024px){
         display: none;
     }
+    @media (min-width: 2500px){
+        font-size: 28px;
+    }
 }
 .carticon{
-    width: 100%;
+    
+    @media (min-width: 2500px){
+        width: 54.68px;
+        height: 54.68px;
+    }
 }
\ No newline at end of file
diff --git a/my-app/src/components/Header/Header.tsx b/my-app/src/components/Header/Header.tsx
index db3214f..76deeb7 100644
--- a/my-app/src/components/Header/Header.tsx
+++ b/my-app/src/components/Header/Header.tsx
@@ -9,7 +9,7 @@ import './Header.modules.scss'
 const Header = () => {
   return (
     <section className="Header">
-      <NavLink to="/Menu">
+      <NavLink to="/Menu" className="linkMenu">
         <picture>
           <source srcSet={Menubars} media="(max-width: 1024px)"/>
           <img src="" alt="" />
@@ -25,7 +25,7 @@ const Header = () => {
       <div className="LoginAndCart">
         <Link to="/" className="loginlink">ENTRAR</Link>
         <span>
-        <Link to="/"><img src={Cart} alt="CartIcon" /></Link>
+        <Link to="/"><img src={Cart} alt="CartIcon" className="carticon"/></Link>
         </span>
       </div>
     </section>
diff --git a/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss b/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
index c411aa5..1e21341 100644
--- a/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
+++ b/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
@@ -25,4 +25,10 @@
     font-size: 14px;
     line-height: 16px;
     text-transform: uppercase;
+    @media (min-width: 2500px){
+        font-size: 28px;
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 33px;
+    }
 }
\ No newline at end of file
diff --git a/my-app/src/components/NewsLetter/NewsLetter.modules.scss b/my-app/src/components/NewsLetter/NewsLetter.modules.scss
index 233fea0..202ed54 100644
--- a/my-app/src/components/NewsLetter/NewsLetter.modules.scss
+++ b/my-app/src/components/NewsLetter/NewsLetter.modules.scss
@@ -9,8 +9,8 @@
     margin-bottom: 50px;
     @media (max-width: 1024px) {
         justify-content: left;
-        margin-left: 16px;
-        margin-right: 16px;
+        padding-left: 16px;
+        padding-right: 16px;
         width: inherit;
         margin-bottom: 24px;
     }
@@ -31,6 +31,12 @@
     letter-spacing: 0.05em;
     font-variant: small-caps;
     color: #303030;
+    @media (min-width: 2500px){
+        font-weight: 500;
+        font-size: 36px;
+        line-height: 42px;
+        letter-spacing: 0.05em;
+    }
     @media (max-width: 1024px) {
         font-family: 'Roboto';
         font-style: normal;
@@ -75,6 +81,13 @@
         &::placeholder{
             color: #C4C4C4;
         }
+        @media (min-width: 2500px){
+            width: 668px;
+            height: 59px;
+            font-weight: 400;
+            font-size: 28px;
+            line-height: 33px;
+        }
         @media (max-width: 1024px) {
             width: inherit;
             margin-bottom: 16px;
@@ -97,6 +110,14 @@
         letter-spacing: 0.05em;
         color: #FFFFFF;
         cursor: pointer;
+        @media (min-width: 2500px){
+            width: 246px;
+            height: 59px;
+            font-weight: 700;
+            font-size: 24px;
+            line-height: 28px;
+            letter-spacing: 0.05em;
+        }
         @media (max-width: 1024px) {
             width: inherit;
         }
diff --git a/my-app/src/pages/About.modules.scss b/my-app/src/pages/About.modules.scss
index 13f14ed..66b5402 100644
--- a/my-app/src/pages/About.modules.scss
+++ b/my-app/src/pages/About.modules.scss
@@ -6,6 +6,10 @@
     bottom: 20px;
     left: 30px;
     width: 748px;
+    @media (min-width: 2500px){
+        left: 13%;
+        width: 1680px;
+    }
     @media (max-width: 1185px){
     width: 50%;
     }
@@ -15,6 +19,11 @@
         bottom: 0;
     }
     & h1{
+        @media (min-width: 2500px){
+            font-weight: 700;
+            font-size: 48px;
+            line-height: 56px;
+        }
         @media (max-width: 1024px) {
         text-align: center;
         }
@@ -26,6 +35,11 @@
         font-size: 13px;
         line-height: 15px;    
         color: #7D7D7D;
+        @media (min-width: 2500px){
+            font-weight: 400;
+            font-size: 26px;
+            line-height: 30px;
+        }
         @media (max-width: 1024px) {
             text-align: justify;
             margin-left: 16px;
diff --git a/my-app/src/pages/Contact.modules.scss b/my-app/src/pages/Contact.modules.scss
index 538ff03..a4f117f 100644
--- a/my-app/src/pages/Contact.modules.scss
+++ b/my-app/src/pages/Contact.modules.scss
@@ -4,6 +4,10 @@
     position: relative;
     left: 30px;
     width: 748px;
+    @media (min-width: 2500px){
+        left: 13%;
+        width: 1680px;
+    }
     @media (max-width: 1400px){
         width: 55%;
     }
@@ -21,6 +25,11 @@
         font-size: 24px;
         line-height: 28px;
         margin: 0;
+        @media (min-width: 2500px){
+            font-weight: 700;
+            font-size: 48px;
+            line-height: 56px;
+        }
         @media (max-width: 1024px) {
             text-align: center;
         }
@@ -35,6 +44,11 @@
     font-size: 14px;
     line-height: 16px;
     color: #100D0E;
+    @media (min-width: 2500px){
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 33px;
+    }
     @media (max-width: 1024px) {
         margin-left: 31px;
     }
@@ -45,6 +59,12 @@
     border: 1px solid #100D0E;
     border-radius: 25px;
     padding-left: 20px;
+    @media (min-width: 2500px){
+        height: 63px;
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 33px;
+    }
 }
 .checkbox{
     display: flex;
@@ -54,17 +74,34 @@
     margin-top: 13.58px;
     margin-bottom: 12.6px;
     gap: 4.28px;
+    @media (min-width: 2500px){
+        width: 1680px;
+    }
     & p{
         color: #FF0000;
+        @media (min-width: 2500px){
+            font-weight: 400;
+            font-size: 28px;
+            line-height: 33px;
+        }
     }
     & input{
         width: 18.64px;
         height: 18px;
         border: 1px solid #000000;
         border-radius: 3px;
+        @media (min-width: 2500px){
+            width: 36.4px;
+            height: 35.15px;
+        }
     }
     & a{
         color: #100D0E;
+        @media (min-width: 2500px){
+            font-weight: 400;
+            font-size: 28px;
+            line-height: 33px;
+        }
     }
 }
 input.input-error,
@@ -83,6 +120,10 @@ select.input-error{
     width: 748px;
     height: 0px;
     top: 10px;
+    @media (min-width: 2500px){
+        top: 0;
+        left: 120%;
+    }
     @media (max-width: 1400px){
         width: 100%;
         }
@@ -94,6 +135,11 @@ select.input-error{
     font-size: 12px;
     line-height: 14px;
     color: #FF0000;
+    @media (min-width: 2500px){
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 28px;
+    }
 }
 .sentP{
     font-family: 'Roboto';
@@ -112,6 +158,10 @@ select.input-error{
     width: 748px;
     height: 52.44px;
     margin-bottom: 66.56px;
+    @media (min-width: 2500px){
+        width: 1680px;
+        height: 71px;
+    }
     @media (max-width: 1400px){
         width: 100%;
         }
@@ -130,4 +180,9 @@ select.input-error{
     width: 100%;
     height: 100%;
     cursor: pointer;
+    @media (min-width: 2500px){
+        font-weight: 400;
+        font-size: 32px;
+        line-height: 38px;
+    }
 }
\ No newline at end of file
diff --git a/my-app/src/pages/institucional.modules.scss b/my-app/src/pages/institucional.modules.scss
index 220805a..1ccc691 100644
--- a/my-app/src/pages/institucional.modules.scss
+++ b/my-app/src/pages/institucional.modules.scss
@@ -8,10 +8,18 @@
 .pathsHome{
     width: 15.99px;
     height: 16px;
+    @media (min-width: 2500px){
+        width: 31.22px;
+        height: 31.25px;
+    }
 }
 .pathsGt{
     width: 4.56px;
     height: 8px;
+    @media (min-width: 2500px){
+        width: 8.9px;
+        height: 15.62px;
+    }
 }
 .pathsP{
     font-family: 'Roboto';
@@ -20,6 +28,11 @@
     font-size: 12px;
     line-height: 28px;
     color: #C4C4C4;
+    @media (min-width: 2500px){
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 28px;  
+    }
 }
 .mainH1{
     display: flex;
@@ -34,6 +47,13 @@
     text-transform: uppercase;
     color: #292929;
     margin-bottom: 80px;
+    @media (min-width: 2500px){
+        font-weight: 400;
+        font-size: 48px;
+        line-height: 56px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+    }
 }
 .instituWrapper{
     margin-left: 100px;
@@ -44,7 +64,6 @@
         margin-right: 16px;
         width: inherit;
         float: none;
-        
     }
 }
 .instituUl{
@@ -56,11 +75,15 @@
         border: 0;
         width: 100%;
     }
+    @media (min-width: 2500px){
+        width: 590px;
+    }
 }
 .instituLi{
     list-style: none;
     padding: 10px 16px;
     text-decoration: none;
+    
 }
 .instituLink{
     text-decoration: none;
@@ -69,7 +92,11 @@
         color: white;
     }
     width: 301px;
-    
+    @media (min-width: 2500px){
+        font-weight: 700;
+        font-size: 32px;
+        line-height: 38px;
+    }
 }
 
 .active{
diff --git a/my-app/src/pages/institucional.tsx b/my-app/src/pages/institucional.tsx
index 6ffb208..929d632 100644
--- a/my-app/src/pages/institucional.tsx
+++ b/my-app/src/pages/institucional.tsx
@@ -1,14 +1,7 @@
 import './institucional.modules.scss'
 import Home from '../../src/assets/svgs/Home.svg'
 import Gt from '../../src/assets/svgs/greaterThan.svg'
-import {Link, NavLink} from "react-router-dom"
-
-
-const buttonStyle = {
-    background: 'black',
-    border: '1px solid #000000',
-    color: 'white'
-}
+import { NavLink } from "react-router-dom"
 
 const Main = () => {
     return (