feat: estilização footer mobile e alguns ajustes no mobile

src/components/ContainerBreadCrumbs/style.module.css

@@ -50,4 +50,16 @@
     width: 100%;
     padding: 1.875rem 1rem;
   }
+
+  .contentBreadCrumb li {
+    font-size: 0.75rem !important;
+  }
+
+  .contentBreadCrumb li img{
+    max-width: 16px;
+  }
+
+  .contentBreadCrumb li img[alt="seta para a direita"]{
+    max-width: 8px;
+  }
 }

src/components/Footer/AccordionLinks/style.module.css

@@ -1,7 +1,7 @@
 @media only screen and (max-width: 1024px) {
   .containerAccordion {
     width: 100%;
-    padding: 0.75rem 0;
+    padding: 0.75rem 0 0;
   }
 
   .titleAccordionContent {
@@ -50,7 +50,6 @@
   .listIcons {
     display: flex;
     gap: 0.659rem;
-    margin-bottom: 0.75rem;
   }
 
   .listIcons svg {

src/components/Footer/ContainerFooterInfo/style.module.css

@@ -11,22 +11,20 @@
 }
 
 .containerInfoWrapper {
-  width: 90%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  width: 92.04%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "info iconPay logVtexAnM3";
 }
 
 .contentInfoFooter {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  grid-area: info;
 }
 
 .contentInfoFooter span,
-.contentVtexIcon span, 
-.contentM3Icon span  {
+.contentVtexIcon span,
+.contentM3Icon span {
   font-size: 1.25rem;
   line-height: 23.44px;
 }
@@ -35,16 +33,11 @@
   max-width: 467px;
 }
 
-
 .contentIconsPay {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.75rem;
+  grid-area: iconPay;
 }
 
-.contentVtexIcon span, 
+.contentVtexIcon span,
 .contentM3Icon span {
   white-space: nowrap;
 }
@@ -54,13 +47,10 @@
 }
 
 .iconsVtexAndM3 {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+  grid-area: logVtexAnM3;
 }
 
-.contentVtexIcon, 
+.contentVtexIcon,
 .contentM3Icon {
   display: flex;
   justify-content: center;
@@ -74,4 +64,86 @@
 
 .iconsVtexAndM3 img {
   width: 40.78%;
+}
+
+@media only screen and (max-width: 1024px) {
+  .containerFooterInfo {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    margin-top: 1.5rem;
+    padding: 0.938rem 0;
+  }
+
+  .containerInfoWrapper {
+    width: 100%;
+    max-width: 360px;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      "iconPay"
+      "info"
+      "logVtexAnM3";
+    padding: 0 1rem;
+  }
+
+  .contentIconsPay {
+    padding: 0.938rem 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .contentIconsPay img {
+    width: 100%;
+    max-width: 29.53px;
+  }
+
+  .contentIconsPay img:last-child {
+    max-width: 45px;
+  }
+
+  .contentIconsPay span {
+    width: 1px;
+    height: 20.36px;
+    border-right: 1px solid var(--white);
+  }
+
+  .contentInfoFooter span{
+    font-size: 0px;
+  }
+
+  .contentInfoFooter::before {
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. .";
+    font-size: 10px;
+    font-weight: 400;
+    font-family: "Roboto";
+    color: var(--white);
+  }
+
+  .iconsVtexAndM3 {
+    padding: 0.938rem 0;
+    display: flex;
+  }
+
+  .contentVtexIcon,
+  .contentM3Icon {
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.796rem;
+  }
+
+  .contentVtexIcon span,
+  .contentM3Icon span {
+    font-size: 10px;
+  }
+
+  .contentVtexIcon img {
+    max-width: 44.92px;
+  }
+
+  .contentM3Icon img {
+    max-width: 28.66px;
+  }
 }

src/components/Footer/ContainerNewsLetter/style.module.css

@@ -13,19 +13,19 @@
   padding: 1rem 0;
 }
 
-.contentNewsLetter h3{
+.contentNewsLetter h3 {
   font-weight: 500;
   font-size: 2.25rem;
   color: var(--gray-1100);
   margin-bottom: 0.5rem;
 }
 
-.contentNewsLetter form{
+.contentNewsLetter form {
   width: 100%;
   display: flex;
 }
 
-.contentNewsLetter form input{
+.contentNewsLetter form input {
   width: 73%;
   height: 59px;
   border: 1px solid var(--gray-100);
@@ -35,7 +35,7 @@
   padding: 0.813rem 1rem;
 }
 
-.contentNewsLetter form button{
+.contentNewsLetter form button {
   width: 27%;
   background-color: var(--black);
   color: var(--white);
@@ -49,19 +49,42 @@
     width: 100%;
     padding: 1rem;
   }
-  
-  .contentNewsLetter form{
+
+  .contentNewsLetter form {
     width: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
   }
 
-  .contentNewsLetter form input{
-    width: 100%;
+  .contentNewsLetter form span {
+    position: absolute;
+    top: -21px;
+    right: 16px;
+    color: var(--red);
+
+    font-size: 0.875rem;
   }
-  
-  .contentNewsLetter form button{
+
+  .contentNewsLetter form input {
+    width: 100%;
+    height: 50px;
+    font-size: 0.875rem;
+    font-family: "Roboto";
+    font-weight: 400;
+    color: var(--gray-300);
+  }
+
+  .contentNewsLetter form input::placeholder {
+    font-size: 0.875rem;
+    font-family: "Roboto";
+    font-weight: 400;
+    color: var(--gray-300);
+  }
+
+  .contentNewsLetter form button {
     width: 100%;
     margin-top: 1rem;
+    font-size: 0.875rem;
   }
 }

src/components/HeaderMobile/index.tsx

@@ -41,7 +41,7 @@ export function HeaderMobile() {
           </div>
           <div className={style.contentSearch}>
             <span>
-              <input type="text" />
+              <input type="text" placeholder="Buscar..."/>
               <Button iconName="search" />
             </span>
           </div>

src/components/HeaderMobile/style.module.css

@@ -20,7 +20,7 @@
       "search search search";
 
     background-color: var(--black);
-    padding: 1.563rem 1rem;
+    padding: 0.75rem 1rem;
   }
 
   .contentBtnBars {
@@ -30,6 +30,10 @@
     align-items: center;
   }
 
+  .contentBtnBars svg{
+    max-width: 28px;
+  }
+
   .contentLogo {
     grid-area: logo;
     display: flex;
@@ -37,6 +41,10 @@
     align-items: center;
   }
 
+  .contentLogo img{
+    max-width: 136px;
+  }
+
   .contentMiniCart {
     grid-area: miniCart;
     display: flex;
@@ -45,14 +53,13 @@
   }
 
   .miniCart {
-    max-width: 54.68px;
     background-color: transparent;
     cursor: pointer;
     border: none;
   }
-  
-  .miniCart img {
-    width: 100%;
+
+  .miniCart svg{
+    max-width: 28px;
   }
 
   .contentSearch {
@@ -60,12 +67,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 1.563rem;
   }
 
   .contentSearch span {
     width: 100%;
-    height: 57px;
+    height: 36px;
     position: relative;
   }
 
@@ -74,14 +80,20 @@
     height: 100%;
     border-radius: 0.313rem;
     outline: none;
-    font-size: 28px;
+    font-size: 0.875rem;
     color: var(--gray-300);
-    padding: 0.75rem 1rem;
+    padding: 0.625rem 1rem;
     border: 1px solid var(--gray-50);
   }
 
+  .contentSearch span input::placeholder {
+    font-size: 0.875rem;
+    color: var(--gray-300);
+    font-family: "Roboto";
+    font-weight: 400;
+  }
+
   .contentSearch span button {
-    width: 35.15px;
     height: 100%;
     position: absolute;
     top: 0px;
@@ -91,8 +103,8 @@
     outline: none;
   }
 
-  .contentSearch span button img {
-    width: 100%;
+  .contentSearch span button svg{
+    width: 18px;
   }
 
   .containerInfoBars {

src/global.css

@@ -52,15 +52,15 @@ body {
     font-size: 0.75rem !important;
   }
 
-  body li {
-    font-size: 1rem !important;
-  }
-
-  body h2 {
+  body h1, h2 {
     font-size: 1.5rem !important;
   }
 
-  body h4 {
+  body li {
+    font-size: 0.875rem !important;
+  }
+
+  body h3, h4 {
     font-size: 0.875rem !important;
   }
 }

src/pages/Contato/style.module.css

@@ -127,10 +127,34 @@
 @media only screen and (max-width: 1024px) {
   .contentInfoList {
     grid-area: contentInfo;
+    margin: 0;
   }
 
   .contentInfoList h2{
     text-align: center;
     margin-top: 1.875rem;
   }
+
+  .contentInput label{
+    font-size: 0.875rem;
+    padding: 0 1rem;
+  }
+
+  .contentInput input{
+    font-size: 0.875rem;
+    height: 46px;
+  }
+
+  .contentInput input::placeholder{
+    font-size: 0.875rem;
+  }
+
+  .contentInput span{
+    font-size: 0.75rem;
+    top: 15px;
+  }
+
+  .contentCheckbox span {
+    font-size: 0.75rem;
+  }
 }

src/pages/Entrega/style.module.css

@@ -20,6 +20,7 @@
 @media only screen and (max-width: 1024px) {
   .contentInfoList {
     grid-area: contentInfo;
+    margin: 0;
   }
 
   .contentInfoList h2{

src/pages/FormaPagamento/style.module.css

@@ -20,6 +20,7 @@
 @media only screen and (max-width: 1024px) {
   .contentInfoList {
     grid-area: contentInfo;
+    margin: 0;
   }
 
   .contentInfoList h2{

src/pages/SegurancaPrivacidade/style.module.css

@@ -20,6 +20,7 @@
 @media only screen and (max-width: 1024px) {
   .contentInfoList {
     grid-area: contentInfo;
+    margin: 0;
   }
 
   .contentInfoList h2{

src/pages/Sobre/style.module.css

@@ -21,6 +21,7 @@
 @media only screen and (max-width: 1024px) {
   .contentInfoList {
     grid-area: contentInfo;
+    margin: 0;
   }
 
   .contentInfoList h2{

src/pages/TrocaDevolucao/style.module.css

@@ -20,6 +20,7 @@
 @media only screen and (max-width: 1024px) {
   .contentInfoList {
     grid-area: contentInfo;
+    margin: 0;
   }
 
   .contentInfoList h2{