diff --git a/src/App.scss b/src/App.scss
index aea148c..6a71a50 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -30,7 +30,11 @@ body {
@media (min-width: 1025px) {
width: 100%;
padding: 20px 0px;
- margin-bottom: 84px;
+ margin-bottom: 61px;
+ }
+
+ @media (min-width: 2500px) {
+ margin-bottom: 74px;
}
@media (max-width: 1024px) {
@@ -50,6 +54,11 @@ body {
text-align: center;
margin-top: 20px;
}
+
+ @media (min-width: 2500px) {
+ font-size: 48px;
+ line-height: 56px;
+ }
}
.MainText {
@@ -61,6 +70,11 @@ body {
line-height: 15px;
color: $color-gray-500;
+ @media (min-width: 2500px) {
+ font-size: 26px;
+ line-height: 30px;
+ }
+
p {
margin: 20px 0;
}
diff --git a/src/components/Container-menu/TopContainer.modules.scss b/src/components/Container-menu/TopContainer.modules.scss
index 01eb0db..93bfbae 100644
--- a/src/components/Container-menu/TopContainer.modules.scss
+++ b/src/components/Container-menu/TopContainer.modules.scss
@@ -9,8 +9,21 @@
padding: 30px 100px;
}
+ @media (min-width: 2500px) {
+ .HouseIcon {
+ img {
+ width: 31px;
+ }
+ }
+ }
+
.Arrow {
margin: 0 9.7px;
+
+ @media (min-width: 2500px) {
+ width: 8.9px;
+ height: 15.62px;
+ }
}
.span_top {
@@ -21,6 +34,11 @@
line-height: 14px;
color: $color-gray;
text-transform: uppercase;
+
+ @media (min-width: 2500px) {
+ font-size: 24px;
+ line-height: 28px;
+ }
}
}
@@ -42,5 +60,11 @@
@media (max-width: 1024px) {
margin: 81px 0 50px;
}
+
+ @media (min-width: 2500px) {
+ font-weight: 400;
+ font-size: 48px;
+ line-height: 56px;
+ }
}
}
diff --git a/src/components/Footer/BottomFooter.tsx b/src/components/Footer/BottomFooter.tsx
index e6e8b4f..73d0502 100644
--- a/src/components/Footer/BottomFooter.tsx
+++ b/src/components/Footer/BottomFooter.tsx
@@ -10,6 +10,8 @@ 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 m3Logobig from "../assets/imgs/Svg-2500+/m3Logo.svg";
+import vtexLogobig from "../assets/imgs/Svg-2500+/vtexLogo.svg";
export const BottomFooter = () => {
return (
@@ -35,10 +37,18 @@ export const BottomFooter = () => {
Powered by
-
+
= 2500 ? vtexLogobig : Vtex}
+ alt="Vtex-logo"
+ />
Developed by
-
+
= 2500 ? m3Logobig : M3}
+ alt="M3-logo"
+ />
>
diff --git a/src/components/Footer/FooterMain.modules.scss b/src/components/Footer/FooterMain.modules.scss
index 73c3ef5..7954595 100644
--- a/src/components/Footer/FooterMain.modules.scss
+++ b/src/components/Footer/FooterMain.modules.scss
@@ -19,6 +19,10 @@
flex-direction: column;
flex-wrap: wrap;
+ @media (min-width: 2500px) {
+ min-width: 922px;
+ }
+
.News_title {
font-family: $fontFamily;
font-style: normal;
@@ -32,6 +36,11 @@
@media (min-width: 1025px) {
margin: 0 0 8px 0;
}
+
+ @media (min-width: 2500px) {
+ font-size: 36px;
+ line-height: 42px;
+ }
}
.Submite_wrapper {
@@ -59,13 +68,19 @@
@media (min-width: 1025px) {
margin-right: 8px;
- width: 24.376%;
+ width: 85%;
min-width: 306px;
}
&::placeholder {
color: $color-gray;
}
+
+ @media (min-width: 2500px) {
+ min-width: 668px;
+ font-size: 28px;
+ line-height: 33px;
+ }
}
.Button_News {
padding: 14px 20px;
@@ -81,9 +96,15 @@
color: $color-white;
@media (min-width: 1025px) {
- width: 9.844%;
+ width: 15%;
min-width: 126px;
}
+
+ @media (min-width: 2500px) {
+ min-width: 246px;
+ font-size: 24px;
+ line-height: 28px;
+ }
}
}
}
@@ -123,6 +144,11 @@
font-size: 14px;
line-height: 16px;
color: $color-gray-700;
+
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
}
.links_footer {
@@ -135,6 +161,11 @@
text-transform: capitalize;
color: $color-gray-700;
margin-bottom: 12px;
+
+ @media (min-width: 2500px) {
+ font-size: 24px;
+ line-height: 28px;
+ }
}
.last {
@@ -216,6 +247,12 @@
height: 35px;
padding-bottom: 12px;
}
+
+ @media (min-width: 2500px) {
+ img {
+ width: 70px;
+ }
+ }
}
.Site {
font-family: $fontFamily;
@@ -224,6 +261,11 @@
font-size: 14px;
line-height: 16px;
color: $color-gray-700;
+
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
}
}
@@ -257,6 +299,13 @@
@media (min-width: 1025px) {
align-self: center;
}
+
+ @media (min-width: 2500px) {
+ width: 467px;
+ height: 47px;
+ font-size: 20px;
+ line-height: 23px;
+ }
}
.Payment_methods {
@@ -272,6 +321,11 @@
.carts_icons {
width: 36px;
height: 20px;
+
+ @media (min-width: 2500px) {
+ width: 70px;
+ height: 39.27px;
+ }
}
.div_icons::after {
@@ -280,11 +334,20 @@
transform: rotate(90deg);
width: 24px;
height: 0px;
+
+ @media (min-width: 2500px) {
+ width: 24px;
+ }
}
.vtex_icon {
width: 54.61px;
height: 34px;
+
+ @media (min-width: 2500px) {
+ width: 106px;
+ height: 66px;
+ }
}
@media (max-width: 425px) {
@@ -313,7 +376,7 @@
.Powered_by {
display: flex;
align-items: center;
- width: 53px;
+ width: fit-content;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
@@ -321,12 +384,17 @@
line-height: 12px;
text-transform: capitalize;
color: $color-white;
+
+ @media (min-width: 2500px) {
+ font-size: 20px;
+ line-height: 23px;
+ }
}
.Developed_by {
display: flex;
align-items: center;
- width: 61px;
+ width: fit-content;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
@@ -334,6 +402,11 @@
line-height: 12px;
text-transform: capitalize;
color: $color-white;
+
+ @media (min-width: 2500px) {
+ font-size: 20px;
+ line-height: 23px;
+ }
}
.vtex_logo {
@@ -341,6 +414,11 @@
align-self: center;
width: 44.92px;
height: 16px;
+
+ @media (min-width: 2500px) {
+ width: 84.22px;
+ height: 30px;
+ }
}
.m3_logo {
@@ -348,6 +426,11 @@
align-self: center;
width: 28.66px;
height: 15.65px;
+
+ @media (min-width: 2500px) {
+ width: 54.95px;
+ height: 30px;
+ }
}
}
}
diff --git a/src/components/ContactForm.tsx b/src/components/Form.tsx
similarity index 90%
rename from src/components/ContactForm.tsx
rename to src/components/Form.tsx
index 1888047..5601782 100644
--- a/src/components/ContactForm.tsx
+++ b/src/components/Form.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import FormSchema from "./schema/FormSchema";
@@ -21,11 +22,12 @@ const initialValues = {
checkbox: false,
};
-const formSubmit = (values: IFormikValues) => {
- console.log(values);
-};
-
export const ContactForm = () => {
+ const [isSubmited, setIsSubmited] = useState(false);
+ const formSubmit = (values: IFormikValues) => {
+ console.log(values);
+ setIsSubmited(true);
+ };
return (
{
id="cpf"
name="cpf"
placeholder="000.000.000-00"
+ // maxLength="15"
className={errors.cpf && touched.cpf && "invalid"}
/>
@@ -110,7 +113,9 @@ export const ContactForm = () => {
-
+ {isSubmited && (
+ *Formulário enviado com sucesso!
+ )}
)}
diff --git a/src/components/Header/HeaderDesktop.modules.scss b/src/components/Header/HeaderDesktop.modules.scss
index 3525d82..1f31190 100644
--- a/src/components/Header/HeaderDesktop.modules.scss
+++ b/src/components/Header/HeaderDesktop.modules.scss
@@ -12,6 +12,12 @@
display: flex;
align-items: center;
+ a {
+ @media (min-width: 1025px) {
+ width: 10.61vw;
+ }
+ }
+
.M3Logo {
width: 100%;
}
@@ -29,6 +35,11 @@
width: 100%;
height: 16px;
padding: 8px;
+ font-family: $fontFamily;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
border: 2px solid $color-white-100;
border-radius: 5px;
color: $color-black;
@@ -40,6 +51,8 @@
@media (min-width: 2500px) {
height: 33px;
padding: 12px;
+ font-size: 28px;
+ line-height: 33px;
}
}
.InconWrapper {
@@ -52,10 +65,17 @@
background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
cursor: pointer;
pointer-events: all;
+
+ @media (min-width: 2500px) {
+ background-image: url("../assets/imgs/Svg-2500+/VectorBig.svg");
+ width: 35px;
+ height: 35px;
+ top: 11px;
+ right: 16px;
+ }
}
}
- // .Search_Header_wrapper::after {
- // }
+
.Headerlinks {
display: flex;
gap: 55px;
@@ -90,18 +110,24 @@
.ContentHeader_wrapper {
padding: 14px 100px;
background: $color-black;
- font-family: $fontFamily;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
line-height: 16px;
button {
margin-right: 53px;
background: $color-black;
border: none;
+ font-family: $fontFamily;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
color: $color-white;
-
cursor: pointer;
+
+ @media (min-width: 2500px) {
+ font-weight: 500;
+ font-size: 28px;
+ line-height: 33px;
+ }
}
}
diff --git a/src/components/Header/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop.tsx
index c29e19e..0eba45f 100644
--- a/src/components/Header/HeaderDesktop.tsx
+++ b/src/components/Header/HeaderDesktop.tsx
@@ -4,6 +4,9 @@ import { NavLink } from "react-router-dom";
import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg";
import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg";
+import CartBig from "../assets/imgs/Svg-2500+/cart-big.svg";
+import LogoM3Big from "../assets/imgs/Svg-2500+/LogoM3AcademyBig.svg";
+
import { ContentMenuHeader } from "./ContentMenuHeader";
import "./HeaderDesktop.modules.scss";
@@ -14,7 +17,11 @@ export const HeaderDesktop = () => {
-
+ = 2500 ? LogoM3Big : LogoM3}
+ alt="LogoM3"
+ className="M3Logo"
+ />
@@ -31,7 +38,11 @@ export const HeaderDesktop = () => {
-
+ = 2500 ? CartBig : CartIcon}
+ alt="Cart-Icon"
+ className="CartIcon"
+ />
diff --git a/src/components/Navegation.modules.scss b/src/components/Navegation.modules.scss
index bde8701..26b28e2 100644
--- a/src/components/Navegation.modules.scss
+++ b/src/components/Navegation.modules.scss
@@ -9,6 +9,10 @@
margin-right: 30px;
height: 337px;
border-right: 1px solid $color-black;
+
+ @media (min-width: 2500px) {
+ height: 480px;
+ }
}
ul {
@@ -43,6 +47,12 @@
line-height: 19px;
color: $color-gray-500;
text-decoration: none;
+
+ @media (min-width: 2500px) {
+ font-weight: 700;
+ font-size: 32px;
+ line-height: 38px;
+ }
}
.last {
diff --git a/src/components/Variables.scss b/src/components/Variables.scss
index 09c16b5..1c9d4d2 100644
--- a/src/components/Variables.scss
+++ b/src/components/Variables.scss
@@ -14,3 +14,5 @@ $color-gray-700: #303030;
$color-gray-800: #292929;
$color-red: #ff0000;
+
+$color-green: #008000;
diff --git a/src/components/assets/imgs/Svg-2500+/LogoM3AcademyBig.svg b/src/components/assets/imgs/Svg-2500+/LogoM3AcademyBig.svg
new file mode 100644
index 0000000..f57d95b
--- /dev/null
+++ b/src/components/assets/imgs/Svg-2500+/LogoM3AcademyBig.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/assets/imgs/Svg-2500+/VectorBig.svg b/src/components/assets/imgs/Svg-2500+/VectorBig.svg
new file mode 100644
index 0000000..9d31f23
--- /dev/null
+++ b/src/components/assets/imgs/Svg-2500+/VectorBig.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/assets/imgs/Svg-2500+/cart-big.svg b/src/components/assets/imgs/Svg-2500+/cart-big.svg
new file mode 100644
index 0000000..19dd15b
--- /dev/null
+++ b/src/components/assets/imgs/Svg-2500+/cart-big.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/components/assets/imgs/Svg-2500+/m3Logo.svg b/src/components/assets/imgs/Svg-2500+/m3Logo.svg
new file mode 100644
index 0000000..ae62dc2
--- /dev/null
+++ b/src/components/assets/imgs/Svg-2500+/m3Logo.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/assets/imgs/Svg-2500+/vtexLogo.svg b/src/components/assets/imgs/Svg-2500+/vtexLogo.svg
new file mode 100644
index 0000000..436c57f
--- /dev/null
+++ b/src/components/assets/imgs/Svg-2500+/vtexLogo.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/components/schema/CustonValidationsRegex.ts b/src/components/schema/CustonValidationsRegex.ts
index 84bf09c..d12bfaf 100644
--- a/src/components/schema/CustonValidationsRegex.ts
+++ b/src/components/schema/CustonValidationsRegex.ts
@@ -1,8 +1,8 @@
-export const phoneNumber = /\([1-9]{2}\) [1-9]{2}\d{3}-\d{4}/;
+export const phoneNumber = /^\(?[1-9]{2}\)??[1-9]{2}\d{3}-?\d{4}$/;
-export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
+export const cpfNumber = /^\d{3}.?\d{3}.?\d{3}-?\d{2}$/;
export const insta =
- /(?:^|[^\w])(?:@)([\w-](?:(?:[\w-]|(?:\.(?!\.))){0,28}(?:[\w-]))?)/;
+ /(?:^|[^\w])(?:@)([\w-](?:(?:[\w-]|(?:.(?!.))){0,28}(?:[\w-]))?)/;
-export const bornData = /\d{2}.\d{2}.\d{4}/;
+export const bornData = /^\d{2}.?\d{2}.?\d{4}$/;
diff --git a/src/pages/Contact.modules.scss b/src/pages/Contact.modules.scss
index 3c0b6cc..3eb7680 100644
--- a/src/pages/Contact.modules.scss
+++ b/src/pages/Contact.modules.scss
@@ -15,6 +15,11 @@ form {
padding: 0px;
}
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+
label {
margin: 12px 0;
}
@@ -33,6 +38,11 @@ form {
&::placeholder {
color: $color-gray-300;
}
+
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
}
.error {
display: flex;
@@ -43,15 +53,41 @@ form {
font-size: 12px;
line-height: 14px;
color: $color-red;
+
+ @media (min-width: 2500px) {
+ font-size: 24px;
+ line-height: 28px;
+ }
}
button {
padding: 17px;
background: $color-black;
border-radius: 25px;
+ font-weight: 400;
color: $color-white;
+
+ @media (min-width: 2500px) {
+ font-size: 32px;
+ line-height: 38px;
+ }
}
- div {
+
+ .subject {
+ font-family: $fontFamily;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ color: $color-green;
+
+ @media (min-width: 2500px) {
+ font-size: 24px;
+ line-height: 28px;
+ }
+ }
+
+ .checkbox_wrapper {
display: flex;
justify-content: center;
align-items: center;
@@ -67,6 +103,11 @@ form {
border: 1px solid $color-black;
border-radius: 3px;
margin: 0 4px;
+
+ @media (min-width: 2500px) {
+ width: 36.4px;
+ height: 35.15px;
+ }
}
}
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index ffabeaf..ffa05f8 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -1,4 +1,4 @@
-import { ContactForm } from "../components/ContactForm";
+import { ContactForm } from "../components/Form";
import "./Contact.modules.scss";
export const Form = () => {