feat: layout scss mobile até 280px

src/App.scss

@@ -2,6 +2,8 @@
 
 body {
   margin: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .Container-menu {
@@ -28,6 +30,7 @@ body {
     @media (min-width: 1025px) {
       width: 100%;
       padding: 20px 0px;
+      margin-bottom: 84px;
     }
 
     @media (max-width: 1024px) {

src/App.tsx

@@ -7,6 +7,7 @@ import { HeaderDesktop } from "./components/Header/HeaderDesktop";
 import { HeaderMobile } from "./components/Header/HeaderMobile";
 import { TopContainer } from "./components/Container-menu/TopContainer";
 import { MainFooter } from "./components/Footer/FooterMain";
+import { WppIcon } from "./components/wpp";
 
 import "./App.scss";
 
@@ -25,6 +26,7 @@ export const App = () => {
             <Router />
           </div>
           <MainFooter />
+          <WppIcon />
         </section>
       </>
     )

src/components/ContactForm.tsx

@@ -63,7 +63,6 @@ export const ContactForm = () => {
           <Field
             id="cpf"
             name="cpf"
-            type="number"
             placeholder="000.000.000-00"
             className={errors.cpf && touched.cpf && "invalid"}
           />
@@ -75,7 +74,6 @@ export const ContactForm = () => {
           <Field
             id="data"
             name="data"
-            type="number"
             placeholder="00.00.0000"
             className={errors.data && touched.data && "invalid"}
           />
@@ -112,6 +110,7 @@ export const ContactForm = () => {
           </div>
 
           <button type="submit">CADASTRE-SE</button>
+          <span className="success"></span>
         </Form>
       )}
     </Formik>

src/components/Footer/BottomFooter.tsx

@@ -10,7 +10,6 @@ import Pagseguro from "../assets/imgs/SVGs/credit-cards/Pagseguro.svg";
 import Boleto from "../assets/imgs/SVGs/credit-cards/Boleto.svg";
 import vtex from "../assets/imgs/SVGs/credit-cards/vtex-pci-200.svg";
 
-import { WppIcon } from "./wpp";
 
 export const BottomFooter = () => {
   return (
@@ -22,7 +21,6 @@ export const BottomFooter = () => {
         </span>
 
         <div className="Payment_methods">
-          {window.innerWidth > 1024 ? "" : <WppIcon />}
           <img className="carts_icons" src={Master} alt="Master-icon" />
           <img className="carts_icons" src={Visa} alt="Visa-icon" />
           <img className="carts_icons" src={Diners} alt="Diners-icon" />

src/components/Footer/FooterMain.modules.scss

@@ -99,7 +99,7 @@
 
     @media (min-width: 1025px) {
       position: relative;
-      padding: 50px 0;
+      padding: 50px 100px;
     }
 
     .Contact_wrapper {
@@ -225,35 +225,6 @@
       line-height: 16px;
       color: $color-gray-700;
     }
-
-    .Wpp-Icon {
-      display: flex;
-      flex-direction: column;
-
-      @media (min-width: 1025px) {
-        position: absolute;
-        right: 16px;
-        top: 50px;
-      }
-
-      .button_wrapper {
-        position: relative;
-      }
-      .button_wrapper::after {
-        content: " ";
-        width: 13px;
-        height: 7px;
-        top: 33%;
-        right: 31%;
-        position: absolute;
-        background-image: url("../assets/imgs/SVGs/Vector.svg");
-      }
-
-      .button {
-        display: flex;
-        background-image: url("../assets/imgs/SVGs/Vector.svg");
-      }
-    }
   }
 
   .Bottom_Wrapper {
@@ -269,6 +240,7 @@
     @media (max-width: 1024px) {
       flex-direction: column;
       gap: 15px;
+      position: relative;
     }
 
     .corporateName {
@@ -288,6 +260,7 @@
     }
 
     .Payment_methods {
+      width: fit-content;
       align-items: center;
       display: flex;
       gap: 12px;
@@ -301,7 +274,7 @@
         height: 20px;
       }
 
-      .div_icons {
+      .div_icons::after {
         content: "";
         border: 1px solid $color-gray;
         transform: rotate(90deg);
@@ -313,6 +286,24 @@
         width: 54.61px;
         height: 34px;
       }
+
+      @media (max-width: 425px) {
+        gap: 11px;
+
+        .carts_icons {
+          width: 30px;
+          height: 17px;
+        }
+
+        .vtex_icon {
+          width: 45px;
+          height: 28px;
+        }
+      }
+
+      @media (max-width: 375px) {
+        gap: 1px;
+      }
     }
 
     .Authors {

src/components/Footer/SocialMedia.tsx

@@ -4,22 +4,21 @@ import Twitter from "../assets/imgs/SVGs/Twitter.svg";
 import YouTube from "../assets/imgs/SVGs/YouTube.svg";
 import Linkedin from "../assets/imgs/SVGs/Linkedin.svg";
 
-import { WppIcon } from "./wpp";
-
 export const SocialMedia = () => {
   return (
     <>
-      <div className="SocialMedia">
-        <div className="Img_wrappers">
-          <img src={Facebook} alt="Facebook-logo" />
-          <img src={Instagram} alt="Instagram-logo" />
-          <img src={Twitter} alt="Twitter-logo" />
-          <img src={YouTube} alt="YouTube-logo" />
-          <img src={Linkedin} alt="Linkedin-logo" />
+      <section className="SocialMedia">
+        <div className="Social_wrappers">
+          <div className="Img_wrappers">
+            <img src={Facebook} alt="Facebook-logo" />
+            <img src={Instagram} alt="Instagram-logo" />
+            <img src={Twitter} alt="Twitter-logo" />
+            <img src={YouTube} alt="YouTube-logo" />
+            <img src={Linkedin} alt="Linkedin-logo" />
+          </div>
+          <span className="Site"> www.loremipsum.com </span>
         </div>
-        <span className="Site"> www.loremipsum.com </span>
-        <div>{window.innerWidth > 1024 ? <WppIcon /> : ""}</div>
-      </div>
+      </section>
     </>
   );
 };

src/components/Footer/wpp.tsx

@@ -1,15 +0,0 @@
-import Wpp from "../assets/imgs/SVGs/whatsapp.svg";
-import Ellipse from "../assets/imgs/SVGs/Ellipse.svg";
-
-export const WppIcon = () => {
-  return (
-    <>
-      <div className="Wpp-Icon">
-        <img src={Wpp} alt="Wpp-logo" />
-        <div className="button_wrapper">
-          <img className="Button_wpp" src={Ellipse} alt="Ellipse-logo" />
-        </div>
-      </div>
-    </>
-  );
-};

src/components/Header/HeaderDesktop.modules.scss

@@ -42,17 +42,20 @@
         padding: 12px;
       }
     }
+    .InconWrapper {
+      position: absolute;
+      content: "";
+      width: 18px;
+      height: 18px;
+      top: 10px;
+      right: 16px;
+      background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
+      cursor: pointer;
+      pointer-events: all;
+    }
   }
-  .Search_Header_wrapper::after {
-    position: absolute;
-    content: "";
-    width: 18px;
-    height: 18px;
-    top: 10px;
-    right: 16px;
-    background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
-    cursor: pointer;
-  }
+  // .Search_Header_wrapper::after {
+  // }
   .Headerlinks {
     display: flex;
     gap: 55px;

src/components/Header/HeaderMobile.modules.scss

@@ -94,7 +94,7 @@
     width: 100%;
 
     .Search_Header {
-      width: 96.372%;
+      width: calc(100% - 36px);
       border: 2px solid $color-white-100;
       border-radius: 5px;
       padding: 10px 16px;

src/components/Navegation.modules.scss

@@ -7,6 +7,8 @@
     width: 40.376%;
     padding: 0;
     margin-right: 30px;
+    height: 337px;
+    border-right: 1px solid $color-black;
   }
 
   ul {
@@ -24,10 +26,6 @@
         @media (max-width: 1024px) {
           padding: 10px 16px;
         }
-
-        @media (min-width: 1025px) {
-          border-right: 1px solid $color-black;
-        }
       }
     }
 

src/components/schema/CustonValidationsRegex.ts

@@ -4,3 +4,5 @@ export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
 
 export const insta =
   /(?:^|[^\w])(?:@)([\w-](?:(?:[\w-]|(?:\.(?!\.))){0,28}(?:[\w-]))?)/;
+
+export const bornData = /\d{2}.\d{2}.\d{4}/;

src/components/schema/FormSchema.ts

@@ -1,13 +1,17 @@
 import * as Yup from "yup";
 
-import { phoneNumber, cpfNumber, insta } from "./CustonValidationsRegex";
+import {
+  phoneNumber,
+  cpfNumber,
+  insta,
+  bornData,
+} from "./CustonValidationsRegex";
 
 export default Yup.object().shape({
-  name: Yup.string().required("*Campo Obrigatório"),
-  email: Yup.string()
-    .email()
+  name: Yup.string()
     .required("*Campo Obrigatório")
-    .email("E-mail inválido"),
+    .min(3, "O campo deve ter no mínimo 3 caracteres"),
+  email: Yup.string().required("*Campo Obrigatório").email("E-mail inválido"),
   cpf: Yup.string()
     .matches(cpfNumber, "CPF inválido")
     .required("*Campo Obrigatório"),
@@ -15,6 +19,9 @@ export default Yup.object().shape({
     .matches(phoneNumber, "numero inválido")
     .required("*Campo Obrigatório"),
   instagram: Yup.string().matches(insta, "conta inválida"),
-  data: Yup.date().required("*Campo Obrigatório"),
+  data: Yup.string()
+    .matches(bornData, "data inválido")
+    // .max(new Date(), "Não é possível incluir uma data futura")
+    .required("Campo obrigatório"),
   checkbox: Yup.boolean().oneOf([true], "*"),
 });

src/components/wpp.scss

@@ -0,0 +1,65 @@
+@import "./Variables.scss";
+
+.links_wrappers {
+  position: fixed;
+  right: 16px;
+  bottom: 51px;
+  z-index: 1;
+
+  .Wpp-Icon {
+    display: flex;
+    flex-direction: column;
+
+    .Chat_link {
+      border: none;
+      width: fit-content;
+      padding: 0;
+      margin: 0;
+      height: 34px;
+      background: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      @media (min-width: 1025px) {
+        cursor: pointer;
+      }
+    }
+
+    .button_wrapper {
+      position: relative;
+
+      .ToTop_button {
+        border: none;
+        width: fit-content;
+        padding: 0;
+        margin: 0;
+        height: 34px;
+        background: none;
+
+        &:focus {
+          outline: none;
+        }
+
+        @media (min-width: 1025px) {
+          cursor: pointer;
+        }
+      }
+    }
+    .button_wrapper::after {
+      content: " ";
+      width: 13px;
+      height: 7px;
+      top: 33%;
+      right: 31%;
+      position: absolute;
+      background-image: url("./assets/imgs/SVGs/Vector.svg");
+    }
+
+    .button {
+      display: flex;
+      background-image: url("./assets/imgs/SVGs/Vector.svg");
+    }
+  }
+}

src/components/wpp.tsx

@@ -0,0 +1,35 @@
+import Wpp from "./assets/imgs/SVGs/whatsapp.svg";
+import Ellipse from "./assets/imgs/SVGs/Ellipse.svg";
+
+import "./wpp.scss";
+
+const ScrollUp = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
+
+export const WppIcon = () => {
+  return (
+    <>
+      <div className="links_wrappers">
+        <div className="Wpp-Icon">
+          <a
+            className="Chat_link"
+            href="https://wa.me/5540028922"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={Wpp} alt="Wpp-logo" />
+          </a>
+          <div className="button_wrapper">
+            <button onClick={ScrollUp} className="ToTop_button">
+              <img className="Button_wpp" src={Ellipse} alt="Ellipse-logo" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};