From 2aac46544f6c9085930d396ee471272b2443673c Mon Sep 17 00:00:00 2001
From: Patrick <patrickconservatorio@gmail.com>
Date: Sun, 8 Jan 2023 14:45:17 -0300
Subject: [PATCH] feat: adiciona infoAgencia 1280-2500px

---
 src/components/footer/footer.module.scss      |   4 +
 .../info-agencia/info-agencia.module.scss     | 123 ++++++++++++------
 src/components/info-agencia/info-agencia.tsx  | 101 +++++++-------
 src/components/main/main-content.tsx          |   2 +-
 4 files changed, 140 insertions(+), 90 deletions(-)

diff --git a/src/components/footer/footer.module.scss b/src/components/footer/footer.module.scss
index ebcad54..7d007cd 100644
--- a/src/components/footer/footer.module.scss
+++ b/src/components/footer/footer.module.scss
@@ -64,6 +64,10 @@
         justify-content: center;
         align-items: center;
 
+        @media (max-width: 375px) {
+          gap: 11px;
+        }
+
         .Pci {
           @media (min-width: 280px) and (max-width: 1150px) {
             height: 28px;
diff --git a/src/components/info-agencia/info-agencia.module.scss b/src/components/info-agencia/info-agencia.module.scss
index c923f24..d870e6b 100644
--- a/src/components/info-agencia/info-agencia.module.scss
+++ b/src/components/info-agencia/info-agencia.module.scss
@@ -1,48 +1,93 @@
-.infoAgenciaContainer {
+.infoAgencia {
   width: 100%;
-  height: 239px;
   display: flex;
-}
+  align-items: center;
 
-.infoAgenciaUl {
-  display: flex;
-  gap: 121px;
-  padding: 50px 100px;
-}
+  .infoAgenciaContainer {
+    width: 100%;
+    max-width: 100%;
 
-.socialIcons {
-  width: 35px;
-  height: 35px;
-}
+    .infoAgenciaMainContainer {
+      display: flex;
+      justify-content: space-between;
+      margin: 50px 100px;
+      height: 139px;
 
-.ulStyle {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 155px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  color: #303030;
-}
+      @media (min-width: 2500px) {
+        height: 197px;
+      }
 
-.infoAgenciaName {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  color: #303030;
-}
+      .institucionalInfosContainer {
+        width: 703px;
+        display: flex;
+        gap: 121px;
 
-.socialMediaContainer {
-  display: flex;
-  flex-direction: column;
-  padding: 50px;
-}
+        @media (min-width: 2500px) {
+          gap: 293px;
+          width: 1531px;
+        }
 
-.socialMediaIconsContainer {
-  display: flex;
-  gap: 10px;
+        .institucionalInfosUl {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          width: 155px;
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          color: #303030;
+
+          @media (min-width: 2500px) {
+            font-size: 24px;
+            width: 315px;
+            gap: 10px;
+          }
+        }
+        .infoAgenciaName {
+          font-style: normal;
+          font-weight: 500;
+          font-size: 14px;
+          color: #303030;
+
+          @media (min-width: 2500px) {
+            font-size: 28px;
+          }
+        }
+      }
+    }
+    .socialMedia {
+      display: flex;
+      flex-direction: column;
+
+      & span {
+        font-family: "Roboto";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        color: #303030;
+
+        @media (min-width: 2500px) {
+          font-size: 28px;
+        }
+      }
+
+      .socialMediaIconsContainer {
+        display: flex;
+        gap: 10px;
+
+        .socialIcons {
+          width: 35px;
+          height: 35px;
+
+          @media (min-width: 2500px) {
+            width: 70px;
+            height: 70px;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/info-agencia/info-agencia.tsx b/src/components/info-agencia/info-agencia.tsx
index be9315e..7b07615 100644
--- a/src/components/info-agencia/info-agencia.tsx
+++ b/src/components/info-agencia/info-agencia.tsx
@@ -8,57 +8,58 @@ import youtube from "./assets/youtube.png";
 
 export function InfoAgencia() {
   return (
-    <div className={style.infoAgenciaContainer}>
-      <div className={style.infoAgenciaUl}>
-        <ul className={style.ulStyle}>
-          <li className={style.infoAgenciaName}>INSTITUCIONAL</li>
-          <li>Quem somos</li>
-          <li>Política de Privacidade</li>
-          <li>Segurança</li>
-          <li>Seja um Revendedor</li>
-        </ul>
-        <ul className={style.ulStyle}>
-          <li className={style.infoAgenciaName}>DÚVIDAS</li>
-          <li>Entrega</li>
-          <li>Pagamento</li>
-          <li>Trocas e Devoluções</li>
-          <li>Dúvidas Frequentes</li>
-        </ul>
-        <ul className={style.ulStyle}>
-          <li className={style.infoAgenciaName}>FALE CONOSCO</li>
-          <li>Atendimento ao Consumidor</li>
-          <li>(11) 4159 9504</li>
-          <li>Atendimento Online</li>
-          <li>(11) 9 9433-8825</li>
-        </ul>
-      </div>
-      <div className={style.socialMediaContainer}>
-        <div className={style.socialMediaIconsContainer}>
-          <a href="https://www.google.com.br/">
-            {" "}
-            <img className={style.socialIcons} src={facebook} alt=""></img>
-          </a>
-          <a href="https://www.google.com.br/">
-            {" "}
-            <img className={style.socialIcons} src={instagram} alt=""></img>
-          </a>
-          <a href="https://www.google.com.br/">
-            {" "}
-            <img className={style.socialIcons} src={twitter} alt=""></img>
-          </a>
-          <a href="https://www.google.com.br/">
-            {" "}
-            <img className={style.socialIcons} src={youtube} alt=""></img>
-          </a>
-          <a href="https://www.google.com.br/">
-            {" "}
-            <img className={style.socialIcons} src={linkedin} alt=""></img>
-          </a>
+    <div className={style.infoAgencia}>
+      <div className={style.infoAgenciaContainer}>
+        <div className={style.infoAgenciaMainContainer}>
+          <div className={style.institucionalInfosContainer}>
+            <ul className={style.institucionalInfosUl}>
+              <li className={style.infoAgenciaName}>INSTITUCIONAL</li>
+              <li>Quem somos</li>
+              <li>Política de Privacidade</li>
+              <li>Segurança</li>
+              <li>Seja um Revendedor</li>
+            </ul>
+            <ul className={style.institucionalInfosUl}>
+              <li className={style.infoAgenciaName}>DÚVIDAS</li>
+              <li>Entrega</li>
+              <li>Pagamento</li>
+              <li>Trocas e Devoluções</li>
+              <li>Dúvidas Frequentes</li>
+            </ul>
+            <ul className={style.institucionalInfosUl}>
+              <li className={style.infoAgenciaName}>INSTITUCIONAL</li>
+              <li>Atendimento ao Consumidor</li>
+              <li>Política de privacidade</li>
+              <li>Segurança</li>
+              <li>Seja um revendedor</li>
+            </ul>
+          </div>
+          <div className={style.socialMedia}>
+            <div className={style.socialMediaIconsContainer}>
+              <a href="https://www.google.com.br/">
+                {" "}
+                <img className={style.socialIcons} src={facebook} alt=""></img>
+              </a>
+              <a href="https://www.google.com.br/">
+                {" "}
+                <img className={style.socialIcons} src={instagram} alt=""></img>
+              </a>
+              <a href="https://www.google.com.br/">
+                {" "}
+                <img className={style.socialIcons} src={twitter} alt=""></img>
+              </a>
+              <a href="https://www.google.com.br/">
+                {" "}
+                <img className={style.socialIcons} src={youtube} alt=""></img>
+              </a>
+              <a href="https://www.google.com.br/">
+                {" "}
+                <img className={style.socialIcons} src={linkedin} alt=""></img>
+              </a>
+            </div>
+            <span>www.loremipsum.com</span>
+          </div>
         </div>
-        <span>www.loremipsum.com</span>
-        {/* <div>
-          <img src={youtube} alt="" />
-        </div> */}
       </div>
     </div>
   );
diff --git a/src/components/main/main-content.tsx b/src/components/main/main-content.tsx
index 7b4e66d..36083e2 100644
--- a/src/components/main/main-content.tsx
+++ b/src/components/main/main-content.tsx
@@ -31,7 +31,7 @@ export function MainContent() {
     },
     { name: "Contato", content: <CustomForm /> },
   ];
-  const [content, setContent] = useState<string | JSX.Element>(arr[2].content);
+  const [content, setContent] = useState<string | JSX.Element>(arr[0].content);
   return (
     <div className={style.MainContainer}>
       <nav className={style.NavContainer}>