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

Reviewed-on: #6

src/components/footer/FooterBottom.module.scss

@@ -6,6 +6,10 @@
   align-items: center;
   justify-content: space-between;
 
+  @media (min-width: 2500px) {
+    padding: 24.5px 100px;
+  }
+
   @media (max-width: 1024px) {
     display: grid;
     padding: 20px 16px;
@@ -22,6 +26,11 @@
       font-weight: 400;
       line-height: 12px;
 
+      @media (min-width: 2500px) {
+        font-size: 20px;
+        line-height: 23px;
+      }
+
       @media (max-width: 1024px) {
         margin: 20px 0 15px 0;
       }
@@ -37,9 +46,16 @@
 
       @media (max-width: 375px) {
         margin-right: 11px;
-        img {
+      }
+
+      img {
+        @media (max-width: 375px) {
           width: 30px;
         }
+
+        @media (min-width: 2500px) {
+          width: 70px;
+        }
       }
 
       @media (max-width: 374px) {
@@ -48,6 +64,10 @@
 
       &:last-child {
         img {
+          @media (min-width: 2500px) {
+            width: 106px;
+          }
+
           @media (max-width: 375px) {
             margin-left: 11px;
             width: 45px;
@@ -56,7 +76,7 @@
           @media (max-width: 374px) {
             margin-left: 4px;
           }
-         
+
           margin-left: 12px;
         }
       }
@@ -67,7 +87,7 @@
     }
 
     span {
-      border-left: 2px solid #c4c4c4;
+      border-left: 1px solid #c4c4c4;
       height: 25px;
       margin-bottom: 5px;
     }
@@ -82,17 +102,34 @@
       font-weight: 400;
       line-height: 12px;
       margin-right: 12px;
+
+      @media (min-width: 2500px) {
+        font-size: 20px;
+        line-height: 23px;
+      }
     }
 
     .footerBottom-credits-powered {
       display: flex;
       align-items: center;
       margin-right: 13px;
+
+      img {
+        @media (min-width: 2500px) {
+          width: 84px;
+        }
+      }
     }
 
     .footerBottom-credits-developed {
       display: flex;
       align-items: center;
+
+      img {
+        @media (min-width: 2500px) {
+          width: 56px;
+        }
+      }
     }
   }
 }

src/components/footer/FooterTop.module.scss

@@ -15,6 +15,11 @@
     line-height: 16px;
     text-transform: uppercase;
 
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      line-height: 33px;
+    }
+
     @media (max-width: 1024px) {
       text-transform: capitalize;
     }
@@ -30,6 +35,11 @@
       line-height: 14px;
       text-decoration: none;
       color: #303030;
+
+      @media (min-width: 2500px) {
+        font-size: 24px;
+        line-height: 28px;
+      }
     }
 
     &:last-child {
@@ -38,24 +48,34 @@
   }
 
   .footerTop-fale-conosco {
-    p:nth-child(2),
-    p:nth-child(4) {
+    p {
       font-size: 12px;
-      font-weight: 500;
-      line-height: 14px;
-      max-width: 20ch;
-    }
-
-    p:nth-child(3),
-    p:nth-child(5) {
-      font-weight: 400;
-      margin: 12px 0;
-      font-size: 12px;
-      font-weight: 400;
       line-height: 14px;
 
-      &:last-child {
-        text-decoration: underline;
+      @media (min-width: 2500px) {
+        font-size: 24px;
+        line-height: 28px;
+      }
+
+      &:nth-child(2),
+      &:nth-child(4) {
+        font-weight: 500;
+        line-height: 14px;
+        max-width: 20ch;
+
+        @media (min-width: 2500px) {
+          max-width: 100%;
+        }
+      }
+
+      &:nth-child(3),
+      &:nth-child(5) {
+        font-weight: 400;
+        margin: 12px 0;
+
+        &:last-child {
+          text-decoration: underline;
+        }
       }
     }
   }
@@ -70,9 +90,20 @@
         }
       }
     }
+    
+    img {
+      @media (min-width: 2500px) {
+        width: 70px;
+      }
+    }
 
     p {
       margin-top: 12px;
+
+      @media (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
     }
   }
 }

src/components/footer/Newsletter.module.scss

@@ -25,6 +25,11 @@
       text-transform: uppercase;
       margin-bottom: 7px;
 
+      @media (min-width: 2500px) {
+        font-size: 36px;
+        line-height: 42px;
+      }
+
       @media (max-width: 1024px) {
         font-size: 14px;
         line-height: 16px;
@@ -33,14 +38,22 @@
 
     .newsletter-form {
       input {
-        height: 42px;
         width: 340px;
+        height: 42px;
         border-radius: 4px;
         padding: 13px 16px 13px 16px;
         outline: none;
         border: 1px solid #e5e5e5;
         margin-right: 8px;
 
+        @media (min-width: 2500px) {
+          width: 668px;
+          height: 59px;
+          font-size: 28px;
+          font-weight: 400;
+          line-height: 33px;
+        }
+
         @media (max-width: 1024px) {
           margin: 0 0 16px 0;
           border-radius: 0;
@@ -67,6 +80,13 @@
         outline: none;
         border: none;
 
+        @media (min-width: 2500px) {
+          width: 246px;
+          height: 59px;
+          font-size: 24px;
+          line-height: 28px;
+        }
+
         @media (max-width: 1024px) {
           width: 100%;
           height: 50px;

src/components/global/ButtonsGlobal.module.scss

@@ -1,10 +1,19 @@
-.buttons {
+.buttonsGlobal {
   display: flex;
   flex-direction: column;
   position: fixed;
   right: 16px;
   bottom: 16px;
 
+  a {
+    img {
+      @media (min-width: 2500px) {
+        width: 66px;
+        height: 66px;
+      }
+    }
+  }
+
   div {
     display: flex;
     justify-content: center;
@@ -14,5 +23,17 @@
     border-radius: 50%;
     background-color: #c4c4c4;
     cursor: pointer;
+
+    @media (min-width: 2500px) {
+      width: 66px;
+      height: 66px;
+    }
+
+    img {
+      @media (min-width: 2500px) {
+        width: 25px;
+        height: 60px;
+      }
+    }
   }
 }

src/components/global/ButtonsGlobal.tsx

@@ -14,7 +14,7 @@ const ButtonsGlobal = () => {
   }
 
   return (
-    <div className={styleButtons["buttons"]}>
+    <div className={styleButtons["buttonsGlobal"]}>
       <a
         href="https://api.whatsapp.com/send?phone=5511952353969"
         target="_blank"