fix: Melhorando a semântica html e ajustando elementos footer e newsletter

2023-01-11 16:14:19 -03:00 · 2023-01-11 16:14:19 -03:00 · 91e25b1993
commit 91e25b1993
parent c7723cbe22
14 changed files with 255 additions and 150 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,8 +1,7 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
@ -14,12 +13,11 @@
      name="description"
      content="Web site created using create-react-app"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
--- a/src/components/ElementFloat/ElementFloat.tsx
+++ b/src/components/ElementFloat/ElementFloat.tsx
@ -1,8 +1,17 @@
 import { ReactComponent as WhatsAppIcon } from "./assets/whatsapp-icon.svg";

+import { useState } from "react";
 import styles from "./elementFloat.module.scss";

 export default function ElementFloat() {
+  const [pageYPosition, setPageYPosition] = useState(0);
+
+  function getPageYAfterScroll() {
+    setPageYPosition(window.scrollY);
+  }
+
+  window.addEventListener("scroll", getPageYAfterScroll);
+
  const btnScrollTop = () => {
    window.scrollTo({
      top: 0,
@ -18,13 +27,18 @@ export default function ElementFloat() {
          <WhatsAppIcon />
        </a>
      </button>
-      <button
-        className={styles.topoSiteIcon}
-        onClick={btnScrollTop}
-        arial-label="Voltar ao topo"
-      >
-        <img src="/assets/images/top-site-icon.png" alt="Voltar para o topo" />
-      </button>
+      {pageYPosition > 90 && (
+        <button
+          className={styles.topoSiteIcon}
+          onClick={btnScrollTop}
+          arial-label="Voltar ao topo"
+        >
+          <img
+            src="/assets/images/top-site-icon.png"
+            alt="Voltar para o topo"
+          />
+        </button>
+      )}
    </div>
  );
 }
--- a/src/components/Footer/FooterBottom/FooterBottom.tsx
+++ b/src/components/Footer/FooterBottom/FooterBottom.tsx
@ -14,55 +14,63 @@ export default function FooterBottom() {
      </div>
      <ul className={styles.footerPayments}>
        <li className={styles.footerPaymentsWrapper}>
-          <div>
-            <img
-              className={styles.paymentFooter}
-              src="/assets/images/masterCardM3Academy.png"
-              alt="Logo Master Card"
-            />
-            <img
-              className={styles.paymentFooter}
-              src="/assets/images/visaM3Academy.png"
-              alt="Logo Visa"
-            />
-            <img
-              className={styles.paymentFooter}
-              src="/assets/images/amexM3Academy.png"
-              alt="Logo American Express"
-            />
-            <img
-              className={styles.paymentFooter}
-              src="/assets/images/eloM3Academy.png"
-              alt="Logo Elo"
-            />
-            <img
-              className={styles.paymentFooter}
-              src="/assets/images/hipercardM3Academy.png"
-              alt="Logo HiperCard"
-            />
-            <img
-              className={styles.paymentFooter}
-              src="/assets/images/paypalM3Academy.png"
-              alt="Logo PayPal"
-            />
-            <img
-              className={styles.paymentFooter}
-              src="/assets/images/boletoM3Academy.png"
-              alt="Logo Boleto"
-            />
-          </div>
+          <img
+            className={`${styles.paymentFooter} ${styles.mastercard}`}
+            src="/assets/images/masterCardM3Academy.png"
+            alt="Logo Master Card"
+          />
+        </li>
+        <li className={styles.footerPaymentsWrapper}>
+          <img
+            className={styles.visa}
+            src="/assets/images/visaM3Academy.png"
+            alt="Logo Visa"
+          />
+        </li>
+        <li className={styles.footerPaymentsWrapper}>
+          <img
+            className={styles.amex}
+            src="/assets/images/amexM3Academy.png"
+            alt="Logo American Express"
+          />
+        </li>
+        <li className={styles.footerPaymentsWrapper}>
+          <img
+            className={styles.elo}
+            src="/assets/images/eloM3Academy.png"
+            alt="Logo Elo"
+          />
+        </li>
+        <li className={styles.footerPaymentsWrapper}>
+          <img
+            className={styles.hipercard}
+            src="/assets/images/hipercardM3Academy.png"
+            alt="Logo HiperCard"
+          />
+        </li>
+        <li className={styles.footerPaymentsWrapper}>
+          <img
+            className={styles.paypal}
+            src="/assets/images/paypalM3Academy.png"
+            alt="Logo PayPal"
+          />
+        </li>
+        <li className={styles.footerPaymentsWrapper}>
+          <img
+            className={styles.boleto}
+            src="/assets/images/boletoM3Academy.png"
+            alt="Logo Boleto"
+          />
        </li>
        <li>
          <span className={styles.divider}></span>
        </li>
        <li className={styles.footerPaymentsWrapperVtex}>
-          <div>
-            <img
-              className={styles.vtexIcon}
-              src="/assets/images/vtexPCIM3Academy.png"
-              alt="Logo VTEX PCI Certificado"
-            />
-          </div>
+          <img
+            className={styles.vtexIcon}
+            src="/assets/images/vtexPCIM3Academy.png"
+            alt="Logo VTEX PCI Certificado"
+          />
        </li>
      </ul>
      <ul className={styles.containerDevelop}>
--- a/src/components/Footer/FooterBottom/footerBottom.module.scss
+++ b/src/components/Footer/FooterBottom/footerBottom.module.scss
@ -28,16 +28,33 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
+    gap: 12px;

    .footerPaymentsWrapper {
-      div {
-        display: flex;
-        gap: 12px;
-        width: 100%;
-        img {
-          width: 36px;
-          height: 20px;
-        }
+      display: flex;
+      width: 100%;
+
+      .mastercard,
+      .boleto {
+        width: 36px;
+        height: 20.2px;
+      }
+
+      .visa,
+      .amex,
+      .hipercard {
+        width: 35px;
+        height: 20.13px;
+      }
+
+      .elo {
+        width: 37px;
+        height: 20.26px;
+      }
+
+      .paypal {
+        width: 34px;
+        height: 19.07px;
      }
    }

@ -47,20 +64,16 @@
      align-items: center;
      height: 24px;
      width: 1px;
-
-      margin: 0 12px;
    }

    .footerPaymentsWrapperVtex {
-      div {
-        display: flex;
-        align-items: center;
-        width: 100%;
+      display: flex;
+      align-items: center;
+      width: 100%;

-        .vtexIcon {
-          width: 54.61px;
-          height: 34px;
-        }
+      .vtexIcon {
+        width: 54.61px;
+        height: 34px;
      }
    }
  }
@ -116,20 +129,30 @@
      width: 692px;

      .footerPaymentsWrapper {
-        div {
-          img {
-            width: 70px;
-            height: 39.27px;
-          }
+        .mastercard,
+        .boleto,
+        .paypal {
+          width: 70px;
+          height: 39.27px;
+        }
+
+        .visa,
+        .amex,
+        .hipercard {
+          width: 70px;
+          height: 40.25px;
+        }
+
+        .elo {
+          width: 70px;
+          height: 38.33px;
        }
      }

      .footerPaymentsWrapperVtex {
-        div {
-          .vtexIcon {
-            width: 106px;
-            height: 66px;
-          }
+        .vtexIcon {
+          width: 106px;
+          height: 66px;
        }
      }
    }
@ -189,12 +212,17 @@
  .containerFooterBottom {
    .footerPayments {
      .footerPaymentsWrapper {
-        div {
-          gap: 11px;
-          img {
-            width: 30px;
-            height: 17px;
-          }
+        gap: 11px;
+
+        .mastercard,
+        .boleto,
+        .paypal,
+        .visa,
+        .amex,
+        .hipercard,
+        .elo {
+          width: 30px;
+          height: 17px;
        }
      }

@ -203,11 +231,9 @@
      }

      .footerPaymentsWrapperVtex {
-        div {
-          .vtexIcon {
-            width: 45px;
-            height: 28px;
-          }
+        .vtexIcon {
+          width: 45px;
+          height: 28px;
        }
      }
    }
@ -217,19 +243,17 @@
@media screen and (max-width: 370px) {
  .containerFooterBottom {
    .footerPayments {
-      display: block;
+      display: inline-block;

      .footerPaymentsWrapper {
-        div {
-          display: block;
-          img {
-            width: 30.27px;
-            height: 16.97px;
-            margin-right: 11px;
+        display: contents;
+        img {
+          width: 30.27px;
+          height: 16.97px;
+          margin-right: 11px;

-            &:last-child {
-              margin-top: 11px;
-            }
+          &:last-child {
+            margin-top: 11px;
          }
        }
      }
@ -239,13 +263,11 @@
      }

      .footerPaymentsWrapperVtex {
-        div {
-          .vtexIcon {
-            width: 45px;
-            height: 28px;
-            margin-left: -2px;
-            margin-top: 11px;
-          }
+        .vtexIcon {
+          width: 45px;
+          height: 28px;
+          margin-left: -2px;
+          margin-top: 11px;
        }
      }
    }
--- a/src/components/Footer/FooterTop/FooterTop.tsx
+++ b/src/components/Footer/FooterTop/FooterTop.tsx
@ -138,10 +138,14 @@ export default function FooterTop() {
            <span className={styles.titleSuportClient}>
              Atendimento Ao Consumidor
            </span>
+          </li>
+          <li className={styles.supportClient}>
            <a href="tel:114159-9504">{`(11) 4159 9504`}</a>
          </li>
          <li className={styles.supportClient}>
            <span className={styles.titleSuportClient}>Atendimento Online</span>
+          </li>
+          <li className={styles.supportClient}>
            <a
              href="tel:1199433-8825"
              className={styles.numberDecoration}
--- a/src/components/Footer/FooterTop/footerTop.module.scss
+++ b/src/components/Footer/FooterTop/footerTop.module.scss
@ -35,25 +35,34 @@

  .containerSupportClient {
    width: 14.3518%;
-    .supportClient {
+
+    .listLinksFooterTop {
      display: flex;
      flex-direction: column;
+      gap: 12px;

-      text-decoration: none;
+      .supportClient {
+        text-decoration: none;
+        margin: 0;

-      .titleSuportClient {
-        margin-bottom: 12px;
-        font-weight: 500;
-      }
+        &:first-child {
+          margin-top: 12px;
+        }

-      .numberDecoration {
-        text-decoration: underline;
+        .titleSuportClient {
+          font-weight: 500;
+        }
+
+        .numberDecoration {
+          text-decoration: underline;
+        }
      }
    }
  }

  .containerSocialIcons {
    width: 19.9074%;
+
    .wrapperSocialIcons {
      display: flex;
      gap: 10px;
@ -61,6 +70,7 @@

      a {
        width: 16.279%;
+        display: flex;

        svg {
          width: 100%;
@ -121,6 +131,18 @@
      width: 100%;
    }

+    .containerSupportClient {
+      width: 100%;
+
+      .listLinksFooterTop {
+        display: none;
+      }
+
+      .active {
+        display: flex;
+      }
+    }
+
    div h4 {
      display: flex;
      align-items: center;
@ -150,7 +172,7 @@
      width: max-content;

      .wrapperSocialIcons {
-        margin-bottom: 0;
+        margin-bottom: 12px;
        a {
          width: 100%;

@ -159,10 +181,6 @@
          }
        }
      }
-
-      .linkSocial {
-        display: none;
-      }
    }
  }
 }
--- a/src/components/Header/header.module.scss
+++ b/src/components/Header/header.module.scss
@ -70,6 +70,7 @@
    align-items: center;

    a {
+      display: flex;
      color: var(--white);

      font-weight: 400;
@ -198,7 +199,7 @@
      }

      .cartIcon {
-        display: block;
+        display: flex;
        width: 100%;
      }
    }
--- a/src/components/MenuNav/menuNav.module.scss
+++ b/src/components/MenuNav/menuNav.module.scss
@ -40,6 +40,7 @@
    gap: 12px;

    margin-top: 31px;
+    max-height: max-content;

    li {
      color: var(--gray-400);
--- a/src/components/MenuToggle/MenuToggle.tsx
+++ b/src/components/MenuToggle/MenuToggle.tsx
@ -20,10 +20,12 @@ export const MenuToggle = ({
          <div className={styles.contentMenuToogle}>
            <div className={styles.headerMenuToggle}>
              <a href="/">Entrar</a>
-              <CloseMenuIcon
-                onClick={() => setShowMenuToggle((prev) => !prev)}
-                className={styles.closeMenuIcon}
-              />
+              <button arial-label="Fechar menu">
+                <CloseMenuIcon
+                  onClick={() => setShowMenuToggle((prev) => !prev)}
+                  className={styles.closeMenuIcon}
+                />
+              </button>
            </div>
            <MenuNav />
          </div>
--- a/src/components/MenuToggle/menuToggle.module.scss
+++ b/src/components/MenuToggle/menuToggle.module.scss
@ -35,10 +35,13 @@
        text-transform: uppercase;
      }

-      .closeMenuIcon {
-        width: 15px;
+      button {
+        background: transparent;
+        .closeMenuIcon {
+          width: 15px;

-        cursor: pointer;
+          cursor: pointer;
+        }
      }
    }
  }
--- a/src/components/Newsletter/Newsletter.tsx
+++ b/src/components/Newsletter/Newsletter.tsx
@ -1,22 +1,44 @@
+import { Formik, Form, Field } from "formik";
 import styles from "./newsletter.module.scss";

+interface IFormikValue {
+  emailNewsletter: string;
+}
+
+const initialValue = {
+  emailNewsletter: "",
+};
+
 export default function Newsletter() {
+  const handleFormikSubmit = (value: IFormikValue) => {
+    alert("Email cadastrado!");
+  };
+
  return (
-    <form className={styles.formNewsletter} action="#">
-      <div className={styles.containerForm}>
-        <h3>Assine nossa Newsletter</h3>
-        <div className={styles.containerInputNewsletter}>
-          <input
-            type="email"
-            name="email-newsletter"
-            id="email-newsletter"
-            placeholder="E-mail"
-          />
-          <button type="submit" arial-label="Enviar email newsletter">
-            Enviar
-          </button>
+    <Formik
+      onSubmit={(value, { resetForm }) => {
+        handleFormikSubmit(value);
+        resetForm();
+      }}
+      initialValues={initialValue}
+    >
+      <Form className={styles.formNewsletter}>
+        <div className={styles.containerForm}>
+          <h3>Assine nossa Newsletter</h3>
+          <div className={styles.containerInputNewsletter}>
+            <Field
+              type="email"
+              name="emailNewsletter"
+              id="emailNewsletter"
+              placeholder="E-mail"
+              required
+            />
+            <button type="submit" arial-label="Enviar email newsletter">
+              Enviar
+            </button>
+          </div>
        </div>
-      </div>
-    </form>
+      </Form>
+    </Formik>
  );
 }
--- a/src/components/Newsletter/newsletter.module.scss
+++ b/src/components/Newsletter/newsletter.module.scss
@ -3,6 +3,8 @@
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);

+  height: 104px;
+
  .containerForm {
    width: 37.0312%;
    display: flex;
@ -18,7 +20,7 @@
      text-transform: uppercase;

      color: var(--black-100);
-      margin-bottom: 12px;
+      margin-bottom: 8px;
    }

    .containerInputNewsletter {
@ -59,6 +61,7 @@
        text-transform: uppercase;

        color: var(--white);
+        cursor: pointer;
      }
    }
  }
@ -66,6 +69,7 @@

@media screen and (min-width: 2500px) {
  .formNewsletter {
+    height: 141px;
    .containerForm {
      width: 37.3581%;

@ -98,6 +102,7 @@
@media screen and (max-width: 1024px) {
  .formNewsletter {
    padding: 16px;
+    height: auto;

    .containerForm {
      width: 100%;
--- a/src/pages/home.module.scss
+++ b/src/pages/home.module.scss
@ -1,3 +1,10 @@
 .containerHome {
  position: relative;
+  display: grid;
+  height: 100vh;
+  grid-template-rows: max-content max-content 1fr;
+
+  footer {
+    align-self: end;
+  }
 }
--- a/src/schema/FormSchema.ts
+++ b/src/schema/FormSchema.ts
@ -48,6 +48,6 @@ export default Yup.object().shape({
    .required("*Campo obrigatório")
    .test("phone", "*Telefone Inválido", (phone) => convertPhone(phone!)),
  instagram: Yup.string()
-    .matches(/^@/, "@ no início é obrigatória")
-    .min(4, "Nome de usuario muito curto"),
+    .matches(/^@/, "*@ no início é obrigatório")
+    .min(4, "*Nome de usuario muito curto"),
 });