diff --git a/my-app/src/assets/svgs/Facebook.svg b/my-app/src/assets/svgs/Facebook.svg new file mode 100644 index 0000000..5d02c15 --- /dev/null +++ b/my-app/src/assets/svgs/Facebook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/my-app/src/assets/svgs/Instagram.svg b/my-app/src/assets/svgs/Instagram.svg new file mode 100644 index 0000000..0cfb9c8 --- /dev/null +++ b/my-app/src/assets/svgs/Instagram.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/my-app/src/assets/svgs/Linkedin.svg b/my-app/src/assets/svgs/Linkedin.svg new file mode 100644 index 0000000..63e1a19 --- /dev/null +++ b/my-app/src/assets/svgs/Linkedin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/my-app/src/assets/svgs/Twitter.svg b/my-app/src/assets/svgs/Twitter.svg new file mode 100644 index 0000000..f630315 --- /dev/null +++ b/my-app/src/assets/svgs/Twitter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/my-app/src/assets/svgs/Whatsapp.svg b/my-app/src/assets/svgs/Whatsapp.svg new file mode 100644 index 0000000..405da74 --- /dev/null +++ b/my-app/src/assets/svgs/Whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/my-app/src/assets/svgs/WppAndArrow.svg b/my-app/src/assets/svgs/WppAndArrow.svg new file mode 100644 index 0000000..fce101c --- /dev/null +++ b/my-app/src/assets/svgs/WppAndArrow.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/my-app/src/assets/svgs/Youtube.svg b/my-app/src/assets/svgs/Youtube.svg new file mode 100644 index 0000000..0b4b104 --- /dev/null +++ b/my-app/src/assets/svgs/Youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/my-app/src/assets/svgs/f 1.svg b/my-app/src/assets/svgs/f 1.svg new file mode 100644 index 0000000..cbbb343 --- /dev/null +++ b/my-app/src/assets/svgs/f 1.svg @@ -0,0 +1,3 @@ + + + diff --git a/my-app/src/assets/svgs/facebook-app-symbol 1.svg b/my-app/src/assets/svgs/facebook-app-symbol 1.svg new file mode 100644 index 0000000..bd6db81 --- /dev/null +++ b/my-app/src/assets/svgs/facebook-app-symbol 1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/my-app/src/components/FooterTop/FooterTop.modules.scss b/my-app/src/components/FooterTop/FooterTop.modules.scss new file mode 100644 index 0000000..569fdfa --- /dev/null +++ b/my-app/src/components/FooterTop/FooterTop.modules.scss @@ -0,0 +1,63 @@ + +.footer{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.footerUl{ + list-style: none; + display: flex; + flex-direction: column; + gap: 12px; + & p{ + width: 155px; + height: 0px; + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: #303030; + } + & a{ + width: 155px; + height: 15px; + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + text-decoration: none; + color: #303030; + } +} +.ulP2{ + width: 155px; + height: 0px; + font-family: 'Roboto'; + font-style: normal; + font-weight: 500 !important; + font-size: 12px !important; + line-height: 14px !important; + text-transform: capitalize !important; + color: #303030; +} +.networkIcons{ + display: flex; + gap: 10px; +} +.linkDiv{ + & a{ + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #303030; + text-decoration: none; + + } +} \ No newline at end of file diff --git a/my-app/src/components/FooterTop/FooterTop.tsx b/my-app/src/components/FooterTop/FooterTop.tsx new file mode 100644 index 0000000..2c33776 --- /dev/null +++ b/my-app/src/components/FooterTop/FooterTop.tsx @@ -0,0 +1,57 @@ +import './FooterTop.modules.scss' +import Facebook from '../../assets/svgs/Facebook.svg' +import Instagram from '../../assets/svgs/Instagram.svg' +import Twitter from '../../assets/svgs/Twitter.svg' +import Youtube from '../../assets/svgs/Youtube.svg' +import Linkedin from '../../assets/svgs/Linkedin.svg' +import Whatsapp from '../../assets/svgs/Whatsapp.svg' +import WppAndArrow from '../../assets/svgs/WppAndArrow.svg' + +const FooterTop = () => { + return ( + <> + + + ) +} + +export {FooterTop} \ No newline at end of file diff --git a/my-app/src/components/NewsLetter/NewsLetter.modules.scss b/my-app/src/components/NewsLetter/NewsLetter.modules.scss new file mode 100644 index 0000000..4ee60a6 --- /dev/null +++ b/my-app/src/components/NewsLetter/NewsLetter.modules.scss @@ -0,0 +1,74 @@ +.newsletter_wrapper{ + display: flex; + justify-content: center; + gap: 8px; + border-width: 1px 0px; + border-style: solid; + border-color: #000000; + margin-bottom: 50px; +} +.newssletter{ + margin-top: 16px; + margin-bottom: 16px; +} +.letter{ + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + color: #303030; +} +.errorD{ + height: 0px; + position: relative; + width: 360px; + display: flex; + justify-content: right; + bottom: 20px; +} +.errorPara{ + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #FF0000; +} +.LetterInputButton{ + & input{ + background: #FFFFFF; + border: 1px solid #E5E5E5; + border-radius: 4px; + width: 340px; + height: 42px; + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + margin: 8px 8px 0px 0px; + padding-left: 16px; + &::placeholder{ + color: #C4C4C4; + } + } + & button { + background: #000000; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 4px; + width: 126px; + height: 42px; + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-align: center; + letter-spacing: 0.05em; + color: #FFFFFF; + cursor: pointer; + } +} \ No newline at end of file diff --git a/my-app/src/components/NewsLetter/NewsLetter.tsx b/my-app/src/components/NewsLetter/NewsLetter.tsx new file mode 100644 index 0000000..3f1c775 --- /dev/null +++ b/my-app/src/components/NewsLetter/NewsLetter.tsx @@ -0,0 +1,47 @@ +import './NewsLetter.modules.scss' +import { useFormik } from 'formik'; +import { Letter } from '../../schemas/Schema' + +const onSubmit = async (values:any, actions:any) => { + console.log(values); + console.log(actions); + actions.resetForm() +}; + +const NewsLetter = () => { + const {values, errors, touched, isSubmitting, handleBlur, handleChange, handleSubmit} = useFormik({ + initialValues: { + email: '' + }, + validationSchema: Letter , + onSubmit + }) + console.log(values); + + return ( + <> +
+
+ +
+
+ {errors.email && touched.email && +
+

{errors.email}

} + ? "letterInput" : "letterInput" &&errors.email && touched.email ? "input-error" : ""} + type="text" + name='email' + placeholder='E-mail' + onChange={handleChange} + onBlur={handleBlur}/> + +
+
+
+
+ + ) +} + +export {NewsLetter} \ No newline at end of file diff --git a/my-app/src/pages/Contact.modules.scss b/my-app/src/pages/Contact.modules.scss index 01a578b..4d59368 100644 --- a/my-app/src/pages/Contact.modules.scss +++ b/my-app/src/pages/Contact.modules.scss @@ -86,6 +86,7 @@ select.input-error{ justify-content: center; width: 748px; height: 52.44px; + margin-bottom: 66.56px; } .signupButton{ background: #000000; diff --git a/my-app/src/pages/Home.modules.scss b/my-app/src/pages/Home.modules.scss deleted file mode 100644 index e69de29..0000000 diff --git a/my-app/src/pages/Home.tsx b/my-app/src/pages/Home.tsx index a86083e..ca3829c 100644 --- a/my-app/src/pages/Home.tsx +++ b/my-app/src/pages/Home.tsx @@ -5,6 +5,8 @@ import {Main} from "./institucional" import {Route, Routes} from "react-router-dom" import {About} from "./About" import {Contact} from "./Contact" +import {NewsLetter} from "../components/NewsLetter/NewsLetter" +import {FooterTop} from "../components/FooterTop/FooterTop" function App() { return ( @@ -16,6 +18,8 @@ function App() { }> }> + + ); } diff --git a/my-app/src/pages/institucional.modules.scss b/my-app/src/pages/institucional.modules.scss index 11785eb..d387da0 100644 --- a/my-app/src/pages/institucional.modules.scss +++ b/my-app/src/pages/institucional.modules.scss @@ -54,6 +54,13 @@ border: 1px solid #000000; } } +.instituLi_Clicked{ + background-color: black; + border: 1px solid #000000; +} +.instituLink_Clicked{ + color: white; +} .instituLink{ text-decoration: none; color: #7D7D7D; diff --git a/my-app/src/pages/institucional.tsx b/my-app/src/pages/institucional.tsx index 3395992..fbf36bd 100644 --- a/my-app/src/pages/institucional.tsx +++ b/my-app/src/pages/institucional.tsx @@ -14,12 +14,12 @@ const Main = () => {

INSTITUCIONAL

    -
  • Sobre
    • -
  • Forma de Pagamento
    • -
  • Entrega
    • -
  • Troca e Devolução
    • -
  • Segurança e Privacidade
    • -
  • Contato
    • +
  • Sobre
    • +
  • Forma de Pagamento
    • +
  • Entrega
    • +
  • Troca e Devolução
    • +
  • Segurança e Privacidade
    • +
  • Contato
diff --git a/my-app/src/schemas/Schema.tsx b/my-app/src/schemas/Schema.tsx index 1ed4c47..889928b 100644 --- a/my-app/src/schemas/Schema.tsx +++ b/my-app/src/schemas/Schema.tsx @@ -11,4 +11,9 @@ const Schema = yup.object().shape({ instagram: yup.string().required("*Campo Obrigatório") }); -export {Schema}; \ No newline at end of file +const Letter = yup.object().shape({ + email: yup.string().email("*Email inválido") +}) + +export {Schema}; +export {Letter} \ No newline at end of file