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 - Vtex-logo + = 2500 ? vtexLogobig : Vtex} + alt="Vtex-logo" + /> Developed by - M3-logo + = 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 = () => {
- LogoM3 + = 2500 ? LogoM3Big : LogoM3} + alt="LogoM3" + className="M3Logo" + />
@@ -31,7 +38,11 @@ export const HeaderDesktop = () => {
- Cart-Icon + = 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 = () => {