feat:adiciona footer 1280px

src/components/footer/footer.jsx

@@ -1,9 +1,45 @@
+import boleto from "./assets/Boleto.png";
+import diners from "./assets/Diners.png";
+import elo from "./assets/Elo.png";
+import hiper from "./assets/Hiper.png";
+import m3 from "./assets/m3.png";
+import master from "./assets/Master.png";
+import pagseguro from "./assets/Pagseguro.png";
+import visa from "./assets/Visa.png";
+import vtexPci from "./assets/vtex-pci.png";
+import vtex from "./assets/vtex.png";
+import line from "./assets/Line.png";
+
 import style from "./footer.module.css";
 
 export function Footer() {
   return (
     <div className={style.footer}>
-      <div></div>
+      <div className={style.footerContainer}>
+        <div className={style.footerSpanContainer}>
+          <span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor
+          </span>
+        </div>
+        <div className={style.footerCardIconsContainer}>
+          <img src={master} alt="" />
+          <img src={visa} alt="" />
+          <img src={diners} alt="" />
+          <img src={elo} alt="" />
+          <img src={hiper} alt="" />
+          <img src={pagseguro} alt="" />
+          <img src={boleto} alt="" />
+          <img src={line} alt="" />
+          <img src={vtexPci} alt="" />
+        </div>
+        <div className={style.PdDbContainer}>
+          <span>Powered By</span>
+          <img src={vtex} alt="" />
+          <span>Developed By</span>
+          <img src={m3} alt="" />
+        </div>
+      </div>
     </div>
   );
 }

src/components/footer/footer.module.css

@@ -1,5 +1,46 @@
 .footer {
+  align-items: center;
+  justify-content: center;
+  display: flex;
   width: 100%;
   height: 64px;
   background: #000000;
 }
+
+.footerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 1077px;
+  height: 24px;
+}
+
+.footerSpanContainer {
+  display: flex;
+  width: 234px;
+  height: 24px;
+  align-items: center;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 10px;
+  color: #ffffff;
+}
+
+.footerCardIconsContainer {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+}
+
+.PdDbContainer {
+  display: flex;
+  gap: 13px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 10px;
+  color: #ffffff;
+  align-items: center;
+}

src/components/header-menu/header-menu.module.css

@@ -15,6 +15,7 @@
   line-height: 16px;
   text-transform: uppercase;
   color: white;
+  text-decoration: none;
 }
 
 .headerMenuSpan1 {
@@ -26,4 +27,5 @@
   line-height: 16px;
   text-transform: uppercase;
   color: white;
+  text-decoration: none;
 }

src/components/header/header.module.css

@@ -12,13 +12,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
+  width: 1077px;
   /* width: 78.13%; */
 }
 
-.headerLogo {
+/* .headerLogo {
   margin-left: 100px;
-}
+} */
 
 .headerSearch {
   display: flex;
@@ -31,9 +31,10 @@
 }
 
 .headerSearchPlaceholder {
+  box-sizing: border-box;
   padding-left: 16px;
-  width: 242px;
-  height: 26px;
+  width: 264px;
+  height: 32px;
   font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
@@ -46,7 +47,7 @@
 .headerSafebuy {
   display: flex;
   align-items: center;
-  margin-right: 100px;
+  /* margin-right: 100px; */
   gap: 55px;
 }
 

src/components/info-agencia/info-agencia.module.css

@@ -23,11 +23,17 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
-  line-height: 14px;
+  color: #303030;
+}
+
+.infoAgenciaName {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  color: #303030;
 }
 
 .socialMediaContainer {

src/components/info-agencia/info-agencia.tsx

@@ -10,21 +10,21 @@ export function InfoAgencia() {
     <div className={style.infoAgenciaContainer}>
       <div className={style.infoAgenciaUl}>
         <ul className={style.ulStyle}>
-          <li>INSTITUCIONAL</li>
+          <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>DÚVIDAS</li>
+          <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>FALE CONOSCO</li>
+          <li className={style.infoAgenciaName}>FALE CONOSCO</li>
           <li>Atendimento ao Consumidor</li>
           <li>(11) 4159 9504</li>
           <li>Atendimento Online</li>
@@ -33,23 +33,23 @@ export function InfoAgencia() {
       </div>
       <div className={style.socialMediaContainer}>
         <div className={style.socialMediaIconsContainer}>
-          <a href="https://www.devmedia.com.br/react-js-criando-rotas-com-react-router-dom/42901">
+          <a href="https://www.google.com.br/">
             {" "}
             <img className={style.socialIcons} src={facebook}></img>
           </a>
-          <a href="https://www.devmedia.com.br/react-js-criando-rotas-com-react-router-dom/42901">
+          <a href="https://www.google.com.br/">
             {" "}
             <img className={style.socialIcons} src={instagram}></img>
           </a>
-          <a href="https://www.devmedia.com.br/react-js-criando-rotas-com-react-router-dom/42901">
+          <a href="https://www.google.com.br/">
             {" "}
             <img className={style.socialIcons} src={twitter}></img>
           </a>
-          <a href="https://www.devmedia.com.br/react-js-criando-rotas-com-react-router-dom/42901">
+          <a href="https://www.google.com.br/">
             {" "}
             <img className={style.socialIcons} src={youtube}></img>
           </a>
-          <a href="https://www.devmedia.com.br/react-js-criando-rotas-com-react-router-dom/42901">
+          <a href="https://www.google.com.br/">
             {" "}
             <img className={style.socialIcons} src={linkedin}></img>
           </a>

src/components/newsletter/newsletter.module.css

@@ -10,7 +10,7 @@
 
 .newsLetterTitle {
   margin: 0 0 8px 0;
-  /* font-family: "Roboto"; */
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
@@ -20,11 +20,12 @@
 
 .newsLetterPlaceholder {
   width: 340px;
-  height: 38px;
+  height: 42px;
   background: #ffffff;
   border: 1px solid #e5e5e5;
   border-radius: 4px;
   padding-left: 16px;
+  box-sizing: border-box;
 }
 
 .newsLetterButton {
@@ -34,10 +35,21 @@
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 4px;
   color: #ffffff;
-  /* font-family: "Roboto"; */
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 700;
   font-size: 12px;
   letter-spacing: 0.05em;
   margin-left: 8px;
+  box-sizing: border-box;
 }
+
+/* .newsLetterButton :hover {
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.newsLetterButton :active {
+  background-color: aqua;
+}
+ */