diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..b50373f --- /dev/null +++ b/public/index.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + + Desafio React + + +
+ + diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..02fa106 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,111 @@ +@import "./components/Variables.scss"; + +body { + margin: 0; +} + +.Container-menu { + display: flex; + flex-direction: column; +} + +.TopContainer_wrapper { + display: flex; + flex-direction: column; +} + +.MainConteiner { + display: flex; + max-width: 100%; + padding-bottom: 66px; + + @media (min-width: 1025px) { + margin: 0 100px; + margin-bottom: 70px; + } + + @media (max-width: 1024px) { + padding-bottom: 68px; + } + + @media (min-width: 2500px) { + margin-bottom: 84px; + } + + .Main_textArea { + @media (min-width: 1025px) { + width: 100%; + padding: 10px 0px; + } + + @media (max-width: 1024px) { + padding: 0 16px; + } + + h2 { + margin: 0; + margin-bottom: 12px; + font-family: $fontFamily; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $color-black; + + @media (max-width: 1024px) { + text-align: center; + margin-top: 30px; + } + + @media (min-width: 2500px) { + font-weight: 700; + font-size: 48px; + line-height: 56px; + } + } + + .MainText { + display: flex; + flex-direction: column; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: $color-gray-500; + gap: 20px; + + .Apagar-Texto { + @media (max-width: 1024px) { + display: none; + } + } + + p { + margin: 0; + color: $color-gray-500; + font-weight: 400; + font-size: 13px; + line-height: 15px; + font-family: $fontFamily; + + @media (max-width: 1024px) { + font-weight: 400; + font-size: 12px; + line-height: 18px; + text-align: justify; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 26px; + line-height: 30px; + } + } + } + } + + @media (max-width: 1024px) { + flex-direction: column; + } +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..b54722c --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,32 @@ +import { Router } from "./router"; +import { Navegation } from "./components/Navegation"; + +import { ScreenSize } from "./components/DetectSize"; + +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 "./App.scss"; + +export const App = () => { + return ( + ScreenSize(), + ( + <> + {window.innerWidth > 1024 ? : } +
+
+ +
+
+ + +
+ +
+ + ) + ); +}; diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx new file mode 100644 index 0000000..4378ee6 --- /dev/null +++ b/src/components/ContactForm.tsx @@ -0,0 +1,133 @@ +import { Formik, Form, Field, ErrorMessage } from "formik"; +import FormSchema from "./schema/FormSchema"; +import { useState } from "react"; + +interface IFormikValues { + name: string; + email: string; + cpf: string; + data: string; + telefone: string; + instagram?: string; + checkbox: boolean; +} + +const initialValues = { + name: "", + email: "", + cpf: "", + data: "", + telefone: "", + instagram: "", + checkbox: false, +}; + +export const ContactForm = () => { + const [isSubmited, setIsSubmited] = useState(false); + const formSubmit = (values: IFormikValues) => { + setIsSubmited(true); + }; + return ( + + {({ errors, touched, isValid, validateForm }) => ( +
+
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ + {isSubmited && *Formulário enviado com sucesso!} +
+ )} + + ); +}; diff --git a/src/components/Container-menu/TextContainer.tsx b/src/components/Container-menu/TextContainer.tsx new file mode 100644 index 0000000..7c428b9 --- /dev/null +++ b/src/components/Container-menu/TextContainer.tsx @@ -0,0 +1,35 @@ +export const MainText = () => { + return ( + <> +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+ + ); +}; diff --git a/src/components/Container-menu/TopContainer.modules.scss b/src/components/Container-menu/TopContainer.modules.scss new file mode 100644 index 0000000..89214e8 --- /dev/null +++ b/src/components/Container-menu/TopContainer.modules.scss @@ -0,0 +1,75 @@ +@import "../Variables.scss"; + +.TopIcons { + display: flex; + padding: 29px 16px; + align-items: center; + + .HouseIcon { + @media (min-width: 2500px) { + img { + width: 31.22px; + } + } + } + + @media (min-width: 1025px) { + padding: 30px 0 81px 100px; + } + + .Arrow { + margin: 0 9.7px; + + @media (min-width: 2500px) { + width: 15.62px; + height: 15.62px; + } + } + + .span_top { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-gray; + text-transform: uppercase; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } +} + +.Title_wrapper { + display: flex; + justify-content: center; + + .Title { + margin: 0 0 80px 0; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: $color-gray-800; + + @media (max-width: 1024px) { + margin: 80px 0 40px; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 48px; + line-height: 56px; + letter-spacing: 0.1em; + } + } +} diff --git a/src/components/Container-menu/TopContainer.tsx b/src/components/Container-menu/TopContainer.tsx new file mode 100644 index 0000000..efec1c2 --- /dev/null +++ b/src/components/Container-menu/TopContainer.tsx @@ -0,0 +1,23 @@ +import { NavLink } from "react-router-dom"; + +import HouseIcon from "../assets/imgs/SVGs/house-icon.svg"; +import Arrow from "../assets/imgs/SVGs/arrow-point-to-right.svg"; + +import "./TopContainer.modules.scss"; + +export const TopContainer = () => { + return ( + <> +
+ + HouseIcon + + Arrow + institucional +
+
+

institucional

+
+ + ); +}; diff --git a/src/components/DetectSize.tsx b/src/components/DetectSize.tsx new file mode 100644 index 0000000..80cfc16 --- /dev/null +++ b/src/components/DetectSize.tsx @@ -0,0 +1,26 @@ +import React, { useState, useEffect } from "react"; + +import { HeaderDesktop } from "./Header/HeaderDesktop"; +import { HeaderMobile } from "./Header/HeaderMobile"; + +export function ScreenSize() { + const [windowDimenion, detectHW] = useState({ + winWidth: window.innerWidth, + }); + + const detectSize = () => { + detectHW({ + winWidth: window.innerWidth, + }); + }; + + useEffect(() => { + window.addEventListener("resize", detectSize); + + return () => { + window.removeEventListener("resize", detectSize); + }; + }, [windowDimenion]); + + return window.innerWidth > 1024 ? : ; +} diff --git a/src/components/Footer/BottomFooter.tsx b/src/components/Footer/BottomFooter.tsx new file mode 100644 index 0000000..b53f679 --- /dev/null +++ b/src/components/Footer/BottomFooter.tsx @@ -0,0 +1,45 @@ +import Vtex from "../assets/imgs/SVGs/Vtex-logo.svg"; +import M3 from "../assets/imgs/SVGs/M3-logo.svg"; + +import Master from "../assets/imgs/SVGs/credit-cards/Master.svg"; +import Visa from "../assets/imgs/SVGs/credit-cards/Visa.svg"; +import Diners from "../assets/imgs/SVGs/credit-cards/Diners.svg"; +import Elo from "../assets/imgs/SVGs/credit-cards/Elo.svg"; +import Hiper from "../assets/imgs/SVGs/credit-cards/Hiper.svg"; +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"; + +export const BottomFooter = () => { + return ( + <> +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor + + +
+ Master-icon + Visa-icon + Diners-icon + Elo-icon + Hiper-icon + Pagseguro-icon + Boleto-icon + + + vtex-icon +
+ +
+ Powered by + Vtex-logo + + Developed by + M3-logo +
+
+ + ); +}; diff --git a/src/components/Footer/ContactFooter.tsx b/src/components/Footer/ContactFooter.tsx new file mode 100644 index 0000000..5515f20 --- /dev/null +++ b/src/components/Footer/ContactFooter.tsx @@ -0,0 +1,62 @@ +import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter"; +import { useState } from "react"; + +export const Contact = () => { + const [isOpened, setIsOpened] = useState(false); + const [isOpened2, setIsOpened2] = useState(false); + const [isOpened3, setIsOpened3] = useState(false); + if (window.innerWidth > 1024) { + return ( + <> +
+
+
Institucional
+ +
+
+
Dúvidas
+ +
+
+
Fale Conosco
+ +
+
+ + ); + } else { + return ( + <> +
+
{ + setIsOpened(!isOpened); + }} + > +
Institucional
+ {isOpened && } +
+
{ + setIsOpened2(!isOpened2); + }} + > +
Dúvidas
+ {isOpened2 && } +
+
{ + setIsOpened3(!isOpened3); + }} + > +
Fale Conosco
+ {isOpened3 && } +
+
+ + ); + } +}; diff --git a/src/components/Footer/FooterMain.modules.scss b/src/components/Footer/FooterMain.modules.scss new file mode 100644 index 0000000..501bc64 --- /dev/null +++ b/src/components/Footer/FooterMain.modules.scss @@ -0,0 +1,536 @@ +@import "../Variables.scss"; + +.Footer_container { + display: flex; + flex-direction: column; + + .Newsletter_Container { + display: flex; + flex-direction: column; + border-top: 1px solid $color-black; + border-bottom: 1px solid $color-black; + padding: 16px; + + @media (min-width: 1025px) { + padding: 16px 31.485%; + } + + .Newsletter_wrapper { + display: flex; + flex-direction: column; + flex-wrap: wrap; + + .News_title { + font-family: $fontFamily; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + color: $color-gray-700; + margin: 0 0 16px 0; + text-transform: uppercase; + + @media (min-width: 2500px) { + font-weight: 500; + font-size: 36px; + line-height: 42px; + } + + @media (min-width: 1025px) { + margin: 0 0 8px 0; + } + + @media (max-width: 1024px) { + font-weight: 500; + font-size: 14px; + line-height: 16px; + } + } + + .Submite_wrapper { + display: flex; + + @media (max-width: 1024px) { + flex-direction: column; + gap: 16px; + } + + @media (min-width: 1025px) { + width: 100%; + } + + .Input_News { + padding: 13px 16px; + border: 1px solid $color-white-500; + border-radius: 4px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray; + + @media (max-width: 1024px) { + height: 14px; + } + + @media (max-width: 375px) { + height: 14px; + } + + @media (max-width: 1024px) { + font-weight: 400; + font-size: 14px; + line-height: 16px; + padding: 17px 16px; + } + + @media (min-width: 2500px) { + height: 31px !important; + width: 68.486% !important; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + + @media (min-width: 1025px) { + height: 14px; + margin-right: 8px; + width: 24.376%; + min-width: 306px; + } + + &::placeholder { + color: $color-gray; + } + } + .Button_News { + padding: 14px 20px; + background: $color-black; + box-shadow: 0px 4px 4px rgba($color-black, 0.25); + border-radius: 4px; + border: none; + font-family: $fontFamily; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 14px; + color: $color-white; + + @media (max-width: 1024px) { + padding: 17px 0; + font-weight: 700; + font-size: 14px; + line-height: 16px; + letter-spacing: 0.05em; + } + + @media (min-width: 2500px) { + width: 26.574% !important; + height: 59px !important; + font-weight: 700; + font-size: 24px; + line-height: 28px; + } + + @media (min-width: 1025px) { + height: 42px; + width: 9.844%; + min-width: 126px; + } + } + } + } + } + .Footer_top { + display: flex; + + @media (max-width: 1024px) { + flex-direction: column; + padding: 24px 16px; + } + + @media (min-width: 1025px) { + position: relative; + padding: 50px 0; + } + + .Contact_wrapper { + display: flex; + gap: 121px; + width: 55.235%; + margin: 0 12.11% 0 100px; + @media (max-width: 1024px) { + flex-direction: column; + gap: 0; + margin: 0; + width: 100%; + } + + @media (min-width: 2500px) { + gap: 293px; + margin: 0 15.16% 0 100px; + width: 61.24%; + } + + .Menu_folder { + display: flex; + flex-direction: column; + min-width: 20.51%; + + @media (min-width: 2500px) { + min-width: 20.575%; + } + + h5 { + margin-top: 0; + font-family: $fontFamily; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: $color-gray-700; + text-transform: uppercase; + @media (max-width: 1024px) { + margin-bottom: 12px; + text-transform: capitalize; + &::after { + content: "+"; + float: right; + font-size: 14px; + } + } + @media (min-width: 2500px) { + font-weight: 500; + font-size: 28px; + line-height: 33px; + } + } + + .links_footer { + transform: 0.4s; + transition: 0.4s; + text-decoration: none; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: $color-gray-700; + margin-bottom: 12px; + width: 155px; + @media (max-width: 1024px) { + color: $color-gray-500; + } + + @media (min-width: 2500px) { + width: 100%; + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } + + .last { + text-decoration-line: underline; + } + } + } + } + + .SocialMedia { + .Img_wrappers { + display: flex; + gap: 10px; + margin-bottom: 12px; + + img { + @media (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + } + .Site { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray-700; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + + .Wpp-Icon { + display: flex; + flex-direction: column; + gap: 1px; + position: fixed; + right: 16px; + bottom: 51px; + + @media (max-width: 375px) { + bottom: 26px !important; + right: 14px; + } + + @media (min-width: 1025px) { + right: 16px; + bottom: 210px; + } + + @media (max-width: 1024px) { + bottom: 46px; + } + + @media (min-width: 2500px) { + .Chat_button img, + .button_wrapper { + width: 66px; + height: 66px; + } + right: 16px; + bottom: 275px; + } + + .button_wrapper { + position: relative; + img { + @media (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + } + .button_wrapper::after { + content: " "; + width: 13px; + height: 7px; + top: 33%; + right: 31%; + position: absolute; + background-image: url("../assets/imgs/SVGs/Vector.svg"); + + @media (min-width: 2500px) { + background-repeat: no-repeat; + height: 24.14px; + width: 24.14px; + background-size: contain; + top: 37%; + } + } + + .button { + display: flex; + background-image: url("../assets/imgs/SVGs/Vector.svg"); + } + } + } + + .Bottom_Wrapper { + justify-content: space-between; + display: flex; + padding: 15px; + background: $color-black; + + @media (max-width: 1024px) { + flex-direction: column; + gap: 15px; + padding: 15px 16px; + } + + @media (min-width: 1025px) { + padding: 15px 100px; + } + + .corporateName { + display: flex; + align-self: center; + width: 236px; + height: 24px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: $color-white; + text-transform: capitalize; + + @media (max-width: 1024px) { + align-self: baseline; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 471px; + height: 47px; + } + } + + .Payment_methods { + align-items: center; + display: flex; + gap: 12px; + + @media (max-width: 374px) { + gap: 7px !important; + } + + @media (max-width: 1024px) { + order: -1; + } + + @media (max-width: 570px) { + gap: 11px; + } + + .carts_icons { + width: 36px; + height: 20px; + + @media (max-width: 374px) { + width: 22px !important; + } + + @media (max-width: 570px) { + width: 30px; + } + + @media (min-width: 2500px) { + width: 70px; + height: 39.27px; + } + } + + .div_icons { + content: ""; + border: 1px solid $color-gray; + transform: rotate(90deg); + width: 22px; + height: 0px; + + @media (max-width: 374px) { + width: 0 !important; + } + + @media (max-width: 375px) { + transform: rotate(180deg); + height: 18px; + } + + @media (max-width: 1024px) { + width: 22px; + } + + @media (min-width: 2500px) { + width: 22px; + } + } + + .vtex_icon { + width: 54.61px; + height: 34px; + + @media (max-width: 374px) { + width: 34px !important; + } + + @media (max-width: 570px) { + width: 45px; + height: 28px; + } + + @media (min-width: 2500px) { + width: 106px; + height: 66px; + } + } + } + + .Authors { + display: flex; + gap: 13px; + + @media (min-width: 2500px) { + width: 406px; + } + + .Powered_by { + display: flex; + align-items: center; + width: 53px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: $color-white; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 110px; + } + } + + .Developed_by { + display: flex; + align-items: center; + width: 61px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: $color-white; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 125px; + } + } + + .vtex_logo { + display: flex; + align-self: center; + width: 44.92px; + height: 16px; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 84.22px; + height: 30px; + } + } + + .m3_logo { + display: flex; + align-self: center; + width: 28.66px; + height: 15.65px; + + @media (min-width: 2500px) { + width: 54.95px; + height: 30px; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/Footer/FooterMain.tsx b/src/components/Footer/FooterMain.tsx new file mode 100644 index 0000000..a79699c --- /dev/null +++ b/src/components/Footer/FooterMain.tsx @@ -0,0 +1,21 @@ +import { Newsletter } from "./Newsletter"; +import { Contact } from "./ContactFooter"; +import { SocialMedia } from "./SocialMedia"; +import { BottomFooter } from "./BottomFooter"; + +import "./FooterMain.modules.scss"; + +export const MainFooter = () => { + return ( + <> +
+ +
+ + +
+ +
+ + ); +}; diff --git a/src/components/Footer/MenuListFooter.tsx b/src/components/Footer/MenuListFooter.tsx new file mode 100644 index 0000000..d08a6c9 --- /dev/null +++ b/src/components/Footer/MenuListFooter.tsx @@ -0,0 +1,63 @@ +import { NavLink } from "react-router-dom"; + +interface MenuFooterProps { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + +export const MenuList1 = () => { + return ( + <> + + Quem Somos + + + Política de Privacidade + + + Segurança + + + Seja um Revendedor + + + ); +}; + +export const MenuList2 = () => { + return ( + <> + + Entrega + + + Pagamento + + + Trocas e Devoluções + + + Dúvidas Frequentes + + + ); +}; + +export const MenuList3 = () => { + return ( + <> + + Atendimento ao Consumidor + + + (11) 4159-9504 + + + Atendimento Online + + + (11) 99433-8825 + + + ); +}; diff --git a/src/components/Footer/Newsletter.tsx b/src/components/Footer/Newsletter.tsx new file mode 100644 index 0000000..a635f75 --- /dev/null +++ b/src/components/Footer/Newsletter.tsx @@ -0,0 +1,16 @@ +export const Newsletter = () => { + return ( + <> +
+
+

Assine nossa Newsletter

+ +
+ + +
+
+
+ + ); +}; diff --git a/src/components/Footer/SocialMedia.tsx b/src/components/Footer/SocialMedia.tsx new file mode 100644 index 0000000..db7b420 --- /dev/null +++ b/src/components/Footer/SocialMedia.tsx @@ -0,0 +1,26 @@ +import Facebook from "../assets/imgs/SVGs/Facebook.svg"; +import Instagram from "../assets/imgs/SVGs/Instagram.svg"; +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 ( + <> +
+
+ Facebook-logo + Instagram-logo + Twitter-logo + YouTube-logo + Linkedin-logo +
+ www.loremipsum.com + + {/*
{window.innerWidth > 1024 ? : ""}
*/} +
+ + ); +}; diff --git a/src/components/Footer/wpp.tsx b/src/components/Footer/wpp.tsx new file mode 100644 index 0000000..2d9bb2f --- /dev/null +++ b/src/components/Footer/wpp.tsx @@ -0,0 +1,30 @@ +import Wpp from "../assets/imgs/SVGs/whatsapp.svg"; +import Ellipse from "../assets/imgs/SVGs/Ellipse.svg"; +import { useEffect } from "react"; + +export const WppIcon = () => { + return ( + <> +
+ + Wpp-logo + +
+ Ellipse-logo { + window.scrollTo(0, 0); + }} + /> +
+
+ + ); +}; diff --git a/src/components/Header/ContentMenuHeader.tsx b/src/components/Header/ContentMenuHeader.tsx new file mode 100644 index 0000000..a11f752 --- /dev/null +++ b/src/components/Header/ContentMenuHeader.tsx @@ -0,0 +1,19 @@ +import { NavLink } from "react-router-dom"; + +export const ContentMenuHeader = () => { + return ( + <> +
+ + + + + + + + + +
+ + ); +}; diff --git a/src/components/Header/HeaderDesktop.modules.scss b/src/components/Header/HeaderDesktop.modules.scss new file mode 100644 index 0000000..05956ff --- /dev/null +++ b/src/components/Header/HeaderDesktop.modules.scss @@ -0,0 +1,148 @@ +@import "../Variables.scss"; + +.HeaderDesktop { + display: flex; + justify-content: space-between; + height: 31px; + padding: 22px 100px; + background: $color-black; + font-family: $fontFamily; + border-bottom: 1px solid $color-gray; + + @media (min-width: 2500px) { + height: 56px; + } + + .m3LogoWrapper { + display: flex; + align-items: center; + + .M3Logo { + width: 100%; + @media (min-width: 2500px) { + width: 265.62px; + height: 50.5px; + } + } + } + + .Search_Header_wrapper { + position: relative; + display: flex; + align-items: center; + width: 24.445%; + max-width: 515px; + + .Search_Header { + position: relative; + width: 100%; + height: 12px; + padding: 8px 16px; + border: 2px solid $color-white-100; + border-radius: 5px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray; + + &::placeholder { + color: $color-gray; + } + + @media (min-width: 2500px) { + height: 29px; + padding: 12px 16px; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + } + .Search_Header_wrapper::after { + position: absolute; + content: ""; + width: 18px; + height: 18px; + top: 7px; + right: 16px; + background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg"); + background-repeat: no-repeat; + cursor: pointer; + + @media (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + background-size: contain; + top: 10px; + } + } + .Headerlinks { + display: flex; + gap: 55px; + + .EnterLink { + display: flex; + align-items: center; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-white; + text-decoration: none; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + .CartIcon_Wrapper { + display: flex; + align-items: center; + + a { + display: flex; + align-items: center; + } + + .CartIcon { + width: 100%; + } + } + } +} + +.ContentHeader_wrapper { + padding: 14px 100px; + background: $color-black; + font-family: $fontFamily; + font-style: normal; + gap: 55px; + display: flex; + height: 16px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + @media (min-width: 2500px) { + height: 33px; + } + + button { + padding: 0; + background: $color-black; + border: none; + color: $color-white; + cursor: pointer; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + font-family: $fontFamily; + @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 new file mode 100644 index 0000000..c29e19e --- /dev/null +++ b/src/components/Header/HeaderDesktop.tsx @@ -0,0 +1,44 @@ +import React from "react"; +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 { ContentMenuHeader } from "./ContentMenuHeader"; + +import "./HeaderDesktop.modules.scss"; + +export const HeaderDesktop = () => { + return ( + <> +
+
+ + LogoM3 + +
+
+ + +
+
+ + ENTRAR + +
+ + Cart-Icon + +
+
+
+
+ +
+ + ); +}; diff --git a/src/components/Header/HeaderMobile.modules.scss b/src/components/Header/HeaderMobile.modules.scss new file mode 100644 index 0000000..84e7135 --- /dev/null +++ b/src/components/Header/HeaderMobile.modules.scss @@ -0,0 +1,141 @@ +@import "../Variables.scss"; + +.HeaderMobile { + display: flex; + flex-direction: column; + padding: 25px 16px; + background: $color-black; + + .topHeaderMobile { + display: flex; + justify-content: space-between; + padding-bottom: 25px; + + .ModalWrapper { + position: fixed; + left: 0; + top: 0; + + pointer-events: none; + opacity: 0; + transition: all 0.2s ease-in-out; + + .ModalContent { + z-index: 8; + + .ContentHeader_wrapper { + display: flex; + flex-direction: column; + height: 585px; + background: $color-white; + padding: 31px 16px; + gap: 12px; + z-index: 8; + + button { + color: $color-gray; + background: $color-white; + } + } + } + + .Modaltop { + display: flex; + justify-content: space-between; + padding: 31px 16px; + background: $color-black; + color: $color-white; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + z-index: 8; + + .CloseButton { + border: none; + background: $color-black; + } + } + } + + .ModalWrapper.opened { + display: flex; + flex-direction: column; + width: calc(100% - 36px); + position: fixed; + left: 0; + top: 0; + z-index: 8; + + pointer-events: all; + opacity: 1; + } + + .ModalOuverlay { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + + background-color: rgba(69, 69, 69, 0.7); + } + } + + .MenuIcon { + background: $color-black; + border: none; + + @media (max-width: 1024px) { + padding-left: 0; + } + } + + .Search_Header_wrapper { + position: relative; + width: 100%; + + @media (max-width: 374px) { + display: flex; + justify-content: center; + } + + .Search_Header { + width: 96.372%; + border: 2px solid $color-white-100; + border-radius: 5px; + padding: 10px 16px; + color: $color-black; + + @media (max-width: 1024px) { + height: 12px; + width: calc(100% - 36px); + } + + @media (max-width: 375px) { + width: 89.508%; + height: 12px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + + &::placeholder { + color: $color-gray; + } + } + } + + .Search_Header_wrapper::after { + position: absolute; + content: ""; + width: 18px; + height: 18px; + right: 16px; + top: 10px; + background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg"); + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/components/Header/HeaderMobile.tsx b/src/components/Header/HeaderMobile.tsx new file mode 100644 index 0000000..e87fc82 --- /dev/null +++ b/src/components/Header/HeaderMobile.tsx @@ -0,0 +1,38 @@ +import { useState } from "react"; +import { NavLink } from "react-router-dom"; + +import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg"; +import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg"; +import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg"; +import { MenuHeader } from "../MenuHeader"; + +import "./HeaderMobile.modules.scss"; + +export const HeaderMobile = () => { + const [isOpened, setIsOpened] = useState(false); + return ( + <> +
+
+ + +
+ + LogoM3 + +
+
+ + CartIcon + +
+
+
+ +
+
+ + ); +}; diff --git a/src/components/MenuHeader.tsx b/src/components/MenuHeader.tsx new file mode 100644 index 0000000..1489d78 --- /dev/null +++ b/src/components/MenuHeader.tsx @@ -0,0 +1,27 @@ +import { ContentMenuHeader } from "./Header/ContentMenuHeader"; + +import CloseIcon from "./assets/imgs/SVGs/Close-button.svg"; + +interface MenuHeaderProps { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + +export const MenuHeader = ({ isOpened, setIsOpened }: MenuHeaderProps) => { + return ( + <> +
+
+ ENTRAR + +
+
+ +
+
+
+ + ); +}; diff --git a/src/components/Navegation.modules.scss b/src/components/Navegation.modules.scss new file mode 100644 index 0000000..4e6ec13 --- /dev/null +++ b/src/components/Navegation.modules.scss @@ -0,0 +1,71 @@ +@import "./Variables.scss"; + +.MenuRoutes { + padding: 0 16px; + + @media (min-width: 2500px) { + width: 35.12% !important; + } + + @media (min-width: 1025px) { + width: 40.376%; + padding: 0; + margin-right: 30px; + } + + ul { + list-style: none; + padding: 0 0 51px 0; + margin: 0 !important; + border-right: 1px solid #000; + + @media (max-width: 1024px) { + border: 0; + padding-bottom: 0; + } + + @media (min-width: 2500px) { + padding: 0px 0 117px 0; + } + + .Title_links { + a { + display: flex; + padding: 10px 16px; + margin: 0 !important; + list-style: none; + + @media (max-width: 1024px) { + padding: 10px 16px; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 32px; + line-height: 38px; + } + } + } + + .active { + background: $color-black; + color: $color-white; + font-weight: 700; + margin: 0 !important; + } + + a { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-gray-500; + text-decoration: none; + } + + .last { + content: ""; + } + } +} diff --git a/src/components/Variables.scss b/src/components/Variables.scss new file mode 100644 index 0000000..09c16b5 --- /dev/null +++ b/src/components/Variables.scss @@ -0,0 +1,16 @@ +$fontFamily: "Roboto", sans-serif; + +$color-black: #000; +$color-black-800: #100d0e; + +$color-white: #fff; +$color-white-100: #f0f0f0; +$color-white-500: #e5e5e5; + +$color-gray: #c4c4c4; +$color-gray-300: #b9b7b7; +$color-gray-500: #7d7d7d; +$color-gray-700: #303030; +$color-gray-800: #292929; + +$color-red: #ff0000; diff --git a/src/components/assets/imgs/SVGs/CartIcon_desktop.svg b/src/components/assets/imgs/SVGs/CartIcon_desktop.svg new file mode 100644 index 0000000..fd775ad --- /dev/null +++ b/src/components/assets/imgs/SVGs/CartIcon_desktop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/Close-button.svg b/src/components/assets/imgs/SVGs/Close-button.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/components/assets/imgs/SVGs/Close-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/assets/imgs/SVGs/Ellipse.svg b/src/components/assets/imgs/SVGs/Ellipse.svg new file mode 100644 index 0000000..97ae3af --- /dev/null +++ b/src/components/assets/imgs/SVGs/Ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/assets/imgs/SVGs/Facebook.svg b/src/components/assets/imgs/SVGs/Facebook.svg new file mode 100644 index 0000000..a391447 --- /dev/null +++ b/src/components/assets/imgs/SVGs/Facebook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/Instagram.svg b/src/components/assets/imgs/SVGs/Instagram.svg new file mode 100644 index 0000000..e30eed0 --- /dev/null +++ b/src/components/assets/imgs/SVGs/Instagram.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/Linkedin.svg b/src/components/assets/imgs/SVGs/Linkedin.svg new file mode 100644 index 0000000..a63314d --- /dev/null +++ b/src/components/assets/imgs/SVGs/Linkedin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/Logo-M3Academy_desktop.svg b/src/components/assets/imgs/SVGs/Logo-M3Academy_desktop.svg new file mode 100644 index 0000000..f57d95b --- /dev/null +++ b/src/components/assets/imgs/SVGs/Logo-M3Academy_desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/Logo-M3Academy_mobile.svg b/src/components/assets/imgs/SVGs/Logo-M3Academy_mobile.svg new file mode 100644 index 0000000..f83fef1 --- /dev/null +++ b/src/components/assets/imgs/SVGs/Logo-M3Academy_mobile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/M3-logo.svg b/src/components/assets/imgs/SVGs/M3-logo.svg new file mode 100644 index 0000000..cf041b8 --- /dev/null +++ b/src/components/assets/imgs/SVGs/M3-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/assets/imgs/SVGs/M3Logo_desktop.svg b/src/components/assets/imgs/SVGs/M3Logo_desktop.svg new file mode 100644 index 0000000..9bc9879 --- /dev/null +++ b/src/components/assets/imgs/SVGs/M3Logo_desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/MenuHamburguer.svg b/src/components/assets/imgs/SVGs/MenuHamburguer.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/components/assets/imgs/SVGs/MenuHamburguer.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/assets/imgs/SVGs/Twitter.svg b/src/components/assets/imgs/SVGs/Twitter.svg new file mode 100644 index 0000000..124d073 --- /dev/null +++ b/src/components/assets/imgs/SVGs/Twitter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/Vector.svg b/src/components/assets/imgs/SVGs/Vector.svg new file mode 100644 index 0000000..dc66ca6 --- /dev/null +++ b/src/components/assets/imgs/SVGs/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/assets/imgs/SVGs/Vtex-logo.svg b/src/components/assets/imgs/SVGs/Vtex-logo.svg new file mode 100644 index 0000000..0c1babb --- /dev/null +++ b/src/components/assets/imgs/SVGs/Vtex-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/assets/imgs/SVGs/YouTube.svg b/src/components/assets/imgs/SVGs/YouTube.svg new file mode 100644 index 0000000..33d4455 --- /dev/null +++ b/src/components/assets/imgs/SVGs/YouTube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/arrow-point-to-right.svg b/src/components/assets/imgs/SVGs/arrow-point-to-right.svg new file mode 100644 index 0000000..d38e598 --- /dev/null +++ b/src/components/assets/imgs/SVGs/arrow-point-to-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/Boleto.svg b/src/components/assets/imgs/SVGs/credit-cards/Boleto.svg new file mode 100644 index 0000000..208e289 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/Diners.svg b/src/components/assets/imgs/SVGs/credit-cards/Diners.svg new file mode 100644 index 0000000..8f15b92 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/Elo.svg b/src/components/assets/imgs/SVGs/credit-cards/Elo.svg new file mode 100644 index 0000000..cb44a70 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/Hiper.svg b/src/components/assets/imgs/SVGs/credit-cards/Hiper.svg new file mode 100644 index 0000000..81f4156 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/Master.svg b/src/components/assets/imgs/SVGs/credit-cards/Master.svg new file mode 100644 index 0000000..4abe694 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/Pagseguro.svg b/src/components/assets/imgs/SVGs/credit-cards/Pagseguro.svg new file mode 100644 index 0000000..3faea49 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/Visa.svg b/src/components/assets/imgs/SVGs/credit-cards/Visa.svg new file mode 100644 index 0000000..d8703a3 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/credit-cards/vtex-pci-200.svg b/src/components/assets/imgs/SVGs/credit-cards/vtex-pci-200.svg new file mode 100644 index 0000000..d2d2425 --- /dev/null +++ b/src/components/assets/imgs/SVGs/credit-cards/vtex-pci-200.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/house-icon.svg b/src/components/assets/imgs/SVGs/house-icon.svg new file mode 100644 index 0000000..7d137cd --- /dev/null +++ b/src/components/assets/imgs/SVGs/house-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/assets/imgs/SVGs/minicart_desktop.svg b/src/components/assets/imgs/SVGs/minicart_desktop.svg new file mode 100644 index 0000000..19dd15b --- /dev/null +++ b/src/components/assets/imgs/SVGs/minicart_desktop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/minicart_mobile.svg b/src/components/assets/imgs/SVGs/minicart_mobile.svg new file mode 100644 index 0000000..165d30e --- /dev/null +++ b/src/components/assets/imgs/SVGs/minicart_mobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/assets/imgs/SVGs/search-icon-desktop.svg b/src/components/assets/imgs/SVGs/search-icon-desktop.svg new file mode 100644 index 0000000..3536ff1 --- /dev/null +++ b/src/components/assets/imgs/SVGs/search-icon-desktop.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/search-icon.svg b/src/components/assets/imgs/SVGs/search-icon.svg new file mode 100644 index 0000000..9455c4d --- /dev/null +++ b/src/components/assets/imgs/SVGs/search-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/whatsapp.svg b/src/components/assets/imgs/SVGs/whatsapp.svg new file mode 100644 index 0000000..2314673 --- /dev/null +++ b/src/components/assets/imgs/SVGs/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/assets/imgs/SVGs/wpp-group.svg b/src/components/assets/imgs/SVGs/wpp-group.svg new file mode 100644 index 0000000..8db70ee --- /dev/null +++ b/src/components/assets/imgs/SVGs/wpp-group.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/schema/CustonValidationsRegex.ts b/src/components/schema/CustonValidationsRegex.ts new file mode 100644 index 0000000..e9f8791 --- /dev/null +++ b/src/components/schema/CustonValidationsRegex.ts @@ -0,0 +1,9 @@ +export const phoneNumber = + /^\(?[1-9]{2}\)? ?(?:[2-8]|9[1-9])[0-9]{3}\-?[0-9]{4}$/; + +// export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/; +export const cpfNumber = + /^([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2}|[0-9]{2}\.?[0-9]{3}\.?[0-9]{3}\/?[0-9]{4}\-?[0-9]{2})$/; + +export const insta = + /(?:^|[^\w])(?:@)([\w-](?:(?:[\w-]|(?:\.(?!\.))){0,28}(?:[\w-]))?)/; diff --git a/src/components/schema/FormSchema.ts b/src/components/schema/FormSchema.ts new file mode 100644 index 0000000..831a175 --- /dev/null +++ b/src/components/schema/FormSchema.ts @@ -0,0 +1,20 @@ +import * as Yup from "yup"; + +import { phoneNumber, cpfNumber, insta } from "./CustonValidationsRegex"; + +export default Yup.object().shape({ + name: Yup.string().required("*Campo Obrigatório"), + email: Yup.string() + .email() + .required("*Campo Obrigatório") + .email("E-mail inválido"), + cpf: Yup.string() + .matches(cpfNumber, "CPF inválido") + .required("*Campo Obrigatório"), + telefone: Yup.string() + .matches(phoneNumber, "numero inválido") + .required("*Campo Obrigatório"), + instagram: Yup.string().matches(insta, "conta inválida"), + data: Yup.date().required("*Campo Obrigatório"), + checkbox: Yup.boolean().oneOf([true], "*"), +}); diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..494dd23 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import { App } from "./App"; + +const root = ReactDOM.createRoot( + document.getElementById("root") as HTMLElement +); +root.render( + + + + + +); diff --git a/src/pages/About.tsx b/src/pages/About.tsx new file mode 100644 index 0000000..49136d7 --- /dev/null +++ b/src/pages/About.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const About = () => { + return ( + <> +
+

Sobre

+ +
+ + ); +}; diff --git a/src/pages/Contact.modules.scss b/src/pages/Contact.modules.scss new file mode 100644 index 0000000..2090f6a --- /dev/null +++ b/src/pages/Contact.modules.scss @@ -0,0 +1,157 @@ +@import "../components/Variables.scss"; + +form { + position: relative; + display: flex; + flex-direction: column; + padding: 16px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + @media (max-width: 1024px) { + padding: 0; + } + + @media (min-width: 1025px) { + width: 100%; + padding: 0px; + } + + .form-entryes { + flex-direction: column; + align-items: flex-start; + position: relative; + + label { + color: $color-black-800; + margin: 12px 0 12px 15px; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + + input { + width: calc(100% - 42px); + height: 14px; + padding: 15px 20px; + border: 1px solid $color-black-800; + border-radius: 25px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray-300; + margin: 0; + + @media (min-width: 2500px) { + height: 31px; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + + &::placeholder { + color: $color-gray-300; + } + } + } + .error { + display: flex; + justify-content: end; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-red; + position: absolute; + align-self: flex-end; + top: 25px; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } + + .checkbox_wrapper { + margin: 12px 0; + span { + margin-left: 13px; + margin-right: 2px; + @media (min-width: 2500px) { + font-size: 26px; + } + } + label { + margin-left: 0; + text-decoration: underline; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + } + + button { + height: 52.44px; + letter-spacing: 0.05em; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + padding: 17px; + background: $color-black; + border-radius: 25px; + color: $color-white; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 32px; + line-height: 38px; + padding: 16px 17px 17px 17px; + } + } + div { + display: flex; + justify-content: center; + align-items: center; + + label { + order: 2; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + + input { + order: 3; + width: 18px; + height: 18px; + border: 1px solid $color-black; + border-radius: 3px; + margin: 0 4px 3px; + + @media (min-width: 2500px) { + width: 36.4px; + height: 35.15px; + } + } + } + + @media (max-width: 1024px) { + h2 { + text-align: center; + } + } +} diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx new file mode 100644 index 0000000..ffabeaf --- /dev/null +++ b/src/pages/Contact.tsx @@ -0,0 +1,13 @@ +import { ContactForm } from "../components/ContactForm"; +import "./Contact.modules.scss"; + +export const Form = () => { + return ( + <> +
+

Preencha o formulário

+ +
+ + ); +}; diff --git a/src/pages/Delivery.tsx b/src/pages/Delivery.tsx new file mode 100644 index 0000000..80e343c --- /dev/null +++ b/src/pages/Delivery.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Delivery = () => { + return ( + <> +
+

Entrega

+ +
+ + ); +}; diff --git a/src/pages/Payments.tsx b/src/pages/Payments.tsx new file mode 100644 index 0000000..ddb3c24 --- /dev/null +++ b/src/pages/Payments.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Payments = () => { + return ( + <> +
+

Pagamentos

+ +
+ + ); +}; diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx new file mode 100644 index 0000000..8296b80 --- /dev/null +++ b/src/pages/Privacy.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Privacy = () => { + return ( + <> +
+

Seguraça e Privacidade

+ +
+ + ); +}; diff --git a/src/pages/Refund.tsx b/src/pages/Refund.tsx new file mode 100644 index 0000000..2217af7 --- /dev/null +++ b/src/pages/Refund.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Refund = () => { + return ( + <> +
+

Troca ou Devolução

+ +
+ + ); +}; diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..216694f --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,23 @@ +import { Routes, Route } from "react-router-dom"; + +import { About } from "./pages/About"; +import { Payments } from "./pages/Payments"; +import { Delivery } from "./pages/Delivery"; +import { Form } from "./pages/Contact"; +import { Privacy } from "./pages/Privacy"; +import { Refund } from "./pages/Refund"; + +export const Router = () => { + return ( + <> + + } /> + } /> + } /> + } /> + } /> + } /> + + + ); +};