diff --git a/react-project/package-lock.json b/react-project/package-lock.json index f310550..e33dde4 100644 --- a/react-project/package-lock.json +++ b/react-project/package-lock.json @@ -19,6 +19,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-input-mask": "^2.0.4", "react-modal": "^3.16.1", "react-router-dom": "^6.6.1", @@ -15097,6 +15098,14 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "node_modules/react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-input-mask": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", @@ -29284,6 +29293,12 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "requires": {} + }, "react-input-mask": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", diff --git a/react-project/package.json b/react-project/package.json index 8d8bcc3..13b53d0 100644 --- a/react-project/package.json +++ b/react-project/package.json @@ -14,6 +14,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-input-mask": "^2.0.4", "react-modal": "^3.16.1", "react-router-dom": "^6.6.1", diff --git a/react-project/src/assets/styles/variables.scss b/react-project/src/assets/styles/variables.scss index cf335db..1778bbe 100644 --- a/react-project/src/assets/styles/variables.scss +++ b/react-project/src/assets/styles/variables.scss @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); + :root { --font-roboto: "Roboto", sans-serif; diff --git a/react-project/src/components/Footer/Developed.tsx b/react-project/src/components/Footer/Developed.tsx new file mode 100644 index 0000000..96e26eb --- /dev/null +++ b/react-project/src/components/Footer/Developed.tsx @@ -0,0 +1,26 @@ +import developed from "./assets/modules/Developed.module.scss"; + +import vtex from "./assets/svgs/vtex.svg"; +import m3 from "./assets/svgs/m3.svg"; + +const Developed = () => { + return ( +
+ Powered By + +
+ Logo VTEX +
+ + + Developed By + +
+ Logo M3 +
+ +
+ ); +}; + +export { Developed }; diff --git a/react-project/src/components/Footer/Footer.tsx b/react-project/src/components/Footer/Footer.tsx index 354d4b6..2cfb707 100644 --- a/react-project/src/components/Footer/Footer.tsx +++ b/react-project/src/components/Footer/Footer.tsx @@ -1,9 +1,23 @@ import { Newsletter } from "./Newsletter"; +import { SitemapAccordion } from "./SitemapAccordion"; +import { Sitemap } from "./Sitemap"; +import { SocialMedias } from "./SocialMedias"; +import { FooterBottom } from "./FooterBottom"; + +import footer from "./assets/modules/Footer.module.scss"; const Footer = () => { return ( ); }; diff --git a/react-project/src/components/Footer/FooterBottom.tsx b/react-project/src/components/Footer/FooterBottom.tsx new file mode 100644 index 0000000..7d70bc3 --- /dev/null +++ b/react-project/src/components/Footer/FooterBottom.tsx @@ -0,0 +1,46 @@ +import footer from "./assets/modules/FooterBottom.module.scss"; + +import { Payments } from "./Payments"; +import { Developed } from "./Developed"; + +import master from "./assets/svgs/master.svg"; +import visa from "./assets/svgs/visa.svg"; +import diners from "./assets/svgs/diners.svg"; +import elo from "./assets/svgs/elo.svg"; +import hiper from "./assets/svgs/hiper.svg"; +import paypal from "./assets/svgs/paypal.svg"; +import boleto from "./assets/svgs/boleto.svg"; +import vtexPci from "./assets/svgs/vtex-pci.svg"; + +const FooterBottom = () => { + return ( +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor +

+ +
+ + +
+ +
+ Vtex PCI +
+
+ + +
+ ); +}; + +export { FooterBottom }; diff --git a/react-project/src/components/Footer/Link.tsx b/react-project/src/components/Footer/Link.tsx new file mode 100644 index 0000000..a8d5a65 --- /dev/null +++ b/react-project/src/components/Footer/Link.tsx @@ -0,0 +1,16 @@ +interface ILink { + href: string; + text: string; +} + +const Link = (props: ILink) => { + const { href, text } = props; + + return ( +
  • + {text} +
    • + ); +}; + +export { Link }; diff --git a/react-project/src/components/Footer/Newsletter.tsx b/react-project/src/components/Footer/Newsletter.tsx index f2c7f57..54cfd4e 100644 --- a/react-project/src/components/Footer/Newsletter.tsx +++ b/react-project/src/components/Footer/Newsletter.tsx @@ -2,20 +2,12 @@ import newsletter from "./assets/modules/Newsletter.module.scss"; import { Formik, Form, Field, ErrorMessage } from "formik"; -import * as Yup from "yup"; - -const NewsletterSchema = Yup.object().shape({ - email: Yup.string().required("*Campo obrigatório").email("Email inválido"), -}); +import NewsletterSchema from "./assets/schemas/NewsletterSchema"; interface IEmailType { email: string; } -/*const initialValues = { - email: "", -};*/ - const Newsletter = () => { return (
    diff --git a/react-project/src/components/Footer/Payments.tsx b/react-project/src/components/Footer/Payments.tsx new file mode 100644 index 0000000..48effc4 --- /dev/null +++ b/react-project/src/components/Footer/Payments.tsx @@ -0,0 +1,18 @@ +interface IPayments { + icon: string; + alt: string; +} + +const Payments = (props: IPayments) => { + const { icon, alt } = props; + + return ( +
  • +
    + {alt} +
    +
    • + ); +}; + +export { Payments }; diff --git a/react-project/src/components/Footer/Sitemap.tsx b/react-project/src/components/Footer/Sitemap.tsx new file mode 100644 index 0000000..dad6b03 --- /dev/null +++ b/react-project/src/components/Footer/Sitemap.tsx @@ -0,0 +1,47 @@ +import sitemap from "./assets/modules/Sitemap.module.scss"; + +import { Link } from "./Link"; + +const Sitemap = () => { + return ( +
    +
    +

    Institucional

    + +
      + + + + +
    +
    + +
    +

    Dúvidas

    + +
      + + + + +
    +
    + +
    +

    Fale Conosco

    +
      +
    • + Atendimento Ao Consumidor +
      • + +
    • + Atendimento Online +
      • + +
    +
    +
    + ); +}; + +export { Sitemap }; diff --git a/react-project/src/components/Footer/SitemapAccordion.tsx b/react-project/src/components/Footer/SitemapAccordion.tsx new file mode 100644 index 0000000..3f0838b --- /dev/null +++ b/react-project/src/components/Footer/SitemapAccordion.tsx @@ -0,0 +1,71 @@ +import { + Accordion, + AccordionBody, + AccordionHeader, + AccordionItem, +} from "react-headless-accordion"; +import { Link } from "./Link"; + +import links from "./assets/modules/SitemapAccordion.module.scss"; + +import more from "./assets/svgs/more.svg"; + +const SitemapAccordion = () => { + return ( + + + +

    Institucional

    + Icone de + +     + + +
      + + + + +
    +     +     + + + +

    Dúvidas

    + Icone de + +     + + +
      + + + + +
    +     +     + + + +

    Fale Conosco

    + Icone de + +     + + +
      +
    • + Atendimento Ao Consumidor +
      • + +
    • + Atendimento Online +
      • + +
    +     +     +     + ); +}; + +export { SitemapAccordion }; diff --git a/react-project/src/components/Footer/SocialMedias.tsx b/react-project/src/components/Footer/SocialMedias.tsx new file mode 100644 index 0000000..053dd26 --- /dev/null +++ b/react-project/src/components/Footer/SocialMedias.tsx @@ -0,0 +1,46 @@ +import social from "./assets/modules/SocialMedias.module.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"; + +const SocialMedias = () => { + return ( +
    +
    +
    + + Ícone do facebook + +
    +
    + + Ícone do instagram + +
    +
    + + Ícone do twitter + +
    +
    + + Ícone do youtube + +
    +
    + + Ícone do linkedin + +
    +
    +
    + www.loremipsum.com +
    +
    + ); +}; + +export { SocialMedias }; diff --git a/react-project/src/components/Footer/assets/modules/Developed.module.scss b/react-project/src/components/Footer/assets/modules/Developed.module.scss new file mode 100644 index 0000000..02272f7 --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/Developed.module.scss @@ -0,0 +1,53 @@ +.developed { + display: flex; + align-items: center; + gap: 13px; + + @media screen and (min-width: 2500px) { + gap: 12px; + } + + @media screen and (max-width: 1024px) { + order: 2; + } + + span { + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: var(--white); + + @media screen and (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + a { + display: contents; + + figure { + display: contents; + + .vtex { + width: 44.92px; + height: 16px; + + @media screen and (min-width: 2500px) { + width: 84.22px; + height: 30px; + } + } + + .m3 { + width: 28.66px; + height: 15.65px; + + @media screen and (min-width: 2500px) { + width: 54.95px; + height: 30px; + } + } + } + } +} diff --git a/react-project/src/components/Footer/assets/modules/Footer.module.scss b/react-project/src/components/Footer/assets/modules/Footer.module.scss new file mode 100644 index 0000000..a1618dc --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/Footer.module.scss @@ -0,0 +1,10 @@ +.wrapper { + padding: 50px 100px; + display: flex; + justify-content: space-between; + + @media screen and (max-width: 1024px) { + padding: 24px 16px; + flex-direction: column; + } +} diff --git a/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss b/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss new file mode 100644 index 0000000..61df511 --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss @@ -0,0 +1,126 @@ +.footer { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--black); + padding: 15px 100px; + + @media screen and (max-width: 1024px) { + padding: 15px 16px; + flex-direction: column; + align-items: flex-start; + gap: 15px; + } + + p { + width: 234px; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: var(--white); + text-transform: capitalize; + + @media screen and (min-width: 2500px) { + width: 467px; + font-size: 20px; + line-height: 23px; + } + + @media screen and (max-width: 1024px) { + order: 1; + } + } + + &__icons { + display: flex; + align-items: center; + gap: 12px; + + @media screen and (min-width: 1025px) and (max-width: 1070px) { + gap: 6px; + } + + @media screen and (max-width: 599px) { + gap: 11px; + } + + @media screen and (max-width: 361px) { + gap: 6px; + } + + ul { + list-style: none; + display: flex; + align-items: center; + gap: 12px; + + @media screen and (min-width: 1025px) and (max-width: 1070px) { + gap: 6px; + } + + @media screen and (max-width: 599px) { + gap: 11px; + } + + @media screen and (max-width: 361px) { + gap: 6px; + } + + li { + display: contents; + + figure { + display: contents; + + img { + @media screen and (min-width: 2500px) { + width: 70px; + height: 40px; + } + + @media screen and (max-width: 599px) { + width: 30px; + height: 17px; + } + + @media screen and (max-width: 361px) { + width: 24px; + height: 15px; + } + } + } + } + } + + div { + background-color: var(--gray-100); + width: 1px; + height: 24px; + + @media screen and (max-width: 599px) { + height: 20px; + } + } + + figure { + display: contents; + + img { + @media screen and (min-width: 2500px) { + width: 106px; + height: 66px; + } + + @media screen and (max-width: 599px) { + width: 45px; + height: 28px; + } + + @media screen and (max-width: 361px) { + width: 35px; + height: 25px; + } + } + } + } +} diff --git a/react-project/src/components/Footer/assets/modules/Newsletter.module.scss b/react-project/src/components/Footer/assets/modules/Newsletter.module.scss index 3d2574f..49bd012 100644 --- a/react-project/src/components/Footer/assets/modules/Newsletter.module.scss +++ b/react-project/src/components/Footer/assets/modules/Newsletter.module.scss @@ -6,7 +6,17 @@ display: flex; justify-content: center; + @media screen and (max-width: 1024px) { + margin-top: 80px; + justify-content: left; + padding: 16px 16px; + } + &__wrapper { + @media screen and (max-width: 1024px) { + width: 100%; + } + h3 { color: var(--black-200); font-weight: 500; @@ -14,10 +24,26 @@ line-height: 21px; letter-spacing: 0.05em; margin-bottom: 8px; + + @media screen and (min-width: 2500px) { + font-size: 36px; + line-height: 42px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + margin-bottom: 16px; + } } form { position: relative; + display: flex; + + @media screen and (max-width: 1024px) { + display: inherit; + } input { padding: 13px 16px; @@ -31,11 +57,34 @@ height: 42px; margin-right: 8px; + @media screen and (min-width: 2500px) { + width: 668px; + height: 59px; + font-size: 28px; + line-height: 33px; + } + + @media screen and (max-width: 1024px) { + padding: 17px 16px; + height: 50px; + margin-right: 0; + margin-bottom: 16px; + width: 100%; + border-radius: unset; + } + &::placeholder { font-weight: 400; font-size: 14px; line-height: 16px; color: var(--gray-100); + + @media screen and (min-width: 2500px) { + width: 668px; + height: 59px; + font-size: 28px; + line-height: 33px; + } } } @@ -51,7 +100,34 @@ font-weight: 700; font-size: 12px; line-height: 14px; + letter-spacing: 0.05em; cursor: pointer; + transition: all 0.2s linear; + + &:hover { + background-color: var(--black-100); + } + + &:active { + background: var(--black); + } + + @media screen and (min-width: 2500px) { + width: 246px; + height: 59px; + font-size: 24px; + line-height: 28px; + } + + @media screen and (max-width: 1024px) { + width: 100%; + height: 50px; + border-radius: unset; + box-shadow: none; + font-size: 14px; + line-height: 16px; + padding: 17px; + } } } @@ -63,6 +139,18 @@ font-size: 10px; line-height: 12px; color: var(--red-100); + + @media screen and (min-width: 2500px) { + top: 60px; + font-size: 13px; + line-height: 15px; + } + + @media screen and (max-width: 1024px) { + left: unset; + right: 2px; + top: 50px; + } } .success { @@ -73,6 +161,18 @@ font-size: 10px; line-height: 12px; color: var(--green-100); + + @media screen and (min-width: 2500px) { + top: 60px; + left: 250px; + font-size: 13px; + line-height: 15px; + } + + @media screen and (max-width: 1024px) { + left: 2px; + top: 50px; + } } } } diff --git a/react-project/src/components/Footer/assets/modules/Sitemap.module.scss b/react-project/src/components/Footer/assets/modules/Sitemap.module.scss new file mode 100644 index 0000000..bad2114 --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/Sitemap.module.scss @@ -0,0 +1,73 @@ +.sitemap { + display: flex; + gap: 121px; + + @media screen and (max-width: 1024px) { + display: none; + } + + &__col { + width: 155px; + + @media screen and (min-width: 2500px) { + width: 315px; + } + + h4 { + margin-bottom: 12px; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: var(--black-200); + text-transform: uppercase; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + ul { + list-style: none; + + li { + margin-bottom: 12px; + + a { + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: var(--black-200); + text-decoration: none; + + &:hover { + background-color: var(--gray-500); + transition: 0.3s; + } + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + span { + font-weight: 500; + font-size: 12px; + line-height: 14px; + color: var(--black-200); + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + &:last-child { + text-decoration: underline; + margin-bottom: 0; + } + } + } + } +} diff --git a/react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss b/react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss new file mode 100644 index 0000000..012ad38 --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss @@ -0,0 +1,51 @@ +.accordion { + width: 100%; + @media screen and (min-width: 1025px) { + display: none; + } + + button { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + border: none; + background: none; + margin-bottom: 12px; + cursor: pointer; + + h4 { + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: var(--black-200); + } + } + + ul { + list-style: none; + + li { + margin-bottom: 12px; + + a { + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: var(--black-200); + text-decoration: none; + } + + span { + font-weight: 500; + font-size: 12px; + line-height: 14px; + color: var(--black-200); + } + + &:last-child { + text-decoration: underline; + } + } + } +} diff --git a/react-project/src/components/Footer/assets/modules/SocialMedias.module.scss b/react-project/src/components/Footer/assets/modules/SocialMedias.module.scss new file mode 100644 index 0000000..0a7c91e --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/SocialMedias.module.scss @@ -0,0 +1,42 @@ +.social { + &__medias { + display: flex; + gap: 10px; + margin-bottom: 12px; + + figure { + display: contents; + + a { + display: contents; + + img { + @media screen and (min-width: 2500px) { + width: 75px; + height: 75px; + } + } + } + } + } + + &__website { + a { + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--black-200); + text-decoration: none; + + &:hover { + background-color: var(--gray-500); + transition: 0.3s; + } + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + } +} diff --git a/react-project/src/components/Footer/assets/schemas/NewsletterSchema.ts b/react-project/src/components/Footer/assets/schemas/NewsletterSchema.ts new file mode 100644 index 0000000..fb14305 --- /dev/null +++ b/react-project/src/components/Footer/assets/schemas/NewsletterSchema.ts @@ -0,0 +1,5 @@ +import * as Yup from "yup"; + +export default Yup.object().shape({ + email: Yup.string().required("*Campo obrigatório").email("Email inválido"), +}); diff --git a/react-project/src/components/Footer/assets/svgs/boleto.svg b/react-project/src/components/Footer/assets/svgs/boleto.svg new file mode 100644 index 0000000..6fea7a5 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/diners.svg b/react-project/src/components/Footer/assets/svgs/diners.svg new file mode 100644 index 0000000..d97e9c3 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/divisor.svg b/react-project/src/components/Footer/assets/svgs/divisor.svg new file mode 100644 index 0000000..bf7a225 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/divisor.svg @@ -0,0 +1,3 @@ + + + diff --git a/react-project/src/components/Footer/assets/svgs/elo.svg b/react-project/src/components/Footer/assets/svgs/elo.svg new file mode 100644 index 0000000..8b861c4 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/facebook.svg b/react-project/src/components/Footer/assets/svgs/facebook.svg new file mode 100644 index 0000000..65c657c --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/facebook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/hiper.svg b/react-project/src/components/Footer/assets/svgs/hiper.svg new file mode 100644 index 0000000..68efb36 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/instagram.svg b/react-project/src/components/Footer/assets/svgs/instagram.svg new file mode 100644 index 0000000..18391db --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/instagram.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/linkedin.svg b/react-project/src/components/Footer/assets/svgs/linkedin.svg new file mode 100644 index 0000000..d476932 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/linkedin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/m3.svg b/react-project/src/components/Footer/assets/svgs/m3.svg new file mode 100644 index 0000000..0eeb905 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/m3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/react-project/src/components/Footer/assets/svgs/master.svg b/react-project/src/components/Footer/assets/svgs/master.svg new file mode 100644 index 0000000..edfe014 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/more.svg b/react-project/src/components/Footer/assets/svgs/more.svg new file mode 100644 index 0000000..d64bfd8 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/more.svg @@ -0,0 +1,3 @@ + + + diff --git a/react-project/src/components/Footer/assets/svgs/paypal.svg b/react-project/src/components/Footer/assets/svgs/paypal.svg new file mode 100644 index 0000000..338b510 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/paypal.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/twitter.svg b/react-project/src/components/Footer/assets/svgs/twitter.svg new file mode 100644 index 0000000..aaabfdf --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/twitter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/visa.svg b/react-project/src/components/Footer/assets/svgs/visa.svg new file mode 100644 index 0000000..058de04 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/vtex-pci.svg b/react-project/src/components/Footer/assets/svgs/vtex-pci.svg new file mode 100644 index 0000000..4ac6598 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/vtex-pci.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/vtex.svg b/react-project/src/components/Footer/assets/svgs/vtex.svg new file mode 100644 index 0000000..7e8d17b --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/vtex.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/youtube.svg b/react-project/src/components/Footer/assets/svgs/youtube.svg new file mode 100644 index 0000000..e9d8e5f --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/react-project/src/components/Header/assets/modules/Hamburguer.module.scss b/react-project/src/components/Header/assets/modules/Hamburguer.module.scss index cbc395b..587b105 100644 --- a/react-project/src/components/Header/assets/modules/Hamburguer.module.scss +++ b/react-project/src/components/Header/assets/modules/Hamburguer.module.scss @@ -14,6 +14,10 @@ width: 97.4609%; height: 585px; + @media screen and (max-width: 599px) { + width: 90.4%; + } + &__top { display: flex; justify-content: space-between; diff --git a/react-project/src/components/Header/assets/modules/SearchInput.module.scss b/react-project/src/components/Header/assets/modules/SearchInput.module.scss index e5c3af6..f032ec7 100644 --- a/react-project/src/components/Header/assets/modules/SearchInput.module.scss +++ b/react-project/src/components/Header/assets/modules/SearchInput.module.scss @@ -24,6 +24,7 @@ @media screen and (max-width: 1024px) { width: 100%; + height: 36px; } &::placeholder { @@ -45,6 +46,10 @@ padding: 1px; } + @media screen and (max-width: 1024px) { + top: 8px; + } + img { @media screen and (min-width: 2500px) { width: 35.15px; diff --git a/react-project/src/components/MainInstitucional/Breadcrumb.tsx b/react-project/src/components/MainInstitucional/Breadcrumb.tsx index 7ecd2c9..e2b34af 100644 --- a/react-project/src/components/MainInstitucional/Breadcrumb.tsx +++ b/react-project/src/components/MainInstitucional/Breadcrumb.tsx @@ -8,12 +8,16 @@ const Breadcrumb = () => {
    - Icone Home + Icone Home
    - Icone Flecha para direita + Icone Flecha para direita
    INSTITUCIONAL
    diff --git a/react-project/src/components/MainInstitucional/Contato.tsx b/react-project/src/components/MainInstitucional/Contato.tsx index 57ff157..9fe5a2d 100644 --- a/react-project/src/components/MainInstitucional/Contato.tsx +++ b/react-project/src/components/MainInstitucional/Contato.tsx @@ -64,8 +64,6 @@ const phoneNumberMask = [ /\d/, ]; -const insta = ["@"]; - const Contato = () => { return (
    @@ -136,7 +134,7 @@ const Contato = () => { />
    - + ( @@ -158,7 +156,7 @@ const Contato = () => { />
    - + ( diff --git a/react-project/src/components/MainInstitucional/Navigation.tsx b/react-project/src/components/MainInstitucional/Navigation.tsx index cf1422c..eacaf69 100644 --- a/react-project/src/components/MainInstitucional/Navigation.tsx +++ b/react-project/src/components/MainInstitucional/Navigation.tsx @@ -3,8 +3,6 @@ import { NavLink } from "react-router-dom"; import navigation from "./assets/modules/Navigation.module.scss"; const Navigation = () => { - /*let activeClassName = "ativo";*/ - return (
    • diff --git a/react-project/src/components/MainInstitucional/assets/modules/Breadcrumb.module.scss b/react-project/src/components/MainInstitucional/assets/modules/Breadcrumb.module.scss index 9723cf9..dba3905 100644 --- a/react-project/src/components/MainInstitucional/assets/modules/Breadcrumb.module.scss +++ b/react-project/src/components/MainInstitucional/assets/modules/Breadcrumb.module.scss @@ -4,12 +4,30 @@ gap: 9.72px; margin-bottom: 80px; + @media screen and (min-width: 2500px) { + gap: 12px; + } + a { display: contents; } figure { display: contents; + + .home { + @media screen and (min-width: 2500px) { + width: 31.25px; + height: 31.25px; + } + } + + .arrow { + @media screen and (min-width: 2500px) { + width: 8.9px; + height: 15.62px; + } + } } span { @@ -17,5 +35,10 @@ font-weight: 400; font-size: 12px; line-height: 14px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } diff --git a/react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss b/react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss index 395ab9e..1187107 100644 --- a/react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss +++ b/react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss @@ -8,6 +8,15 @@ line-height: 28px; color: var(--black); margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + + @media screen and (max-width: 1024px) { + text-align: center; + } } &__form-col { @@ -22,6 +31,11 @@ font-size: 14px; line-height: 16px; color: var(--black-300); + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } input { @@ -35,11 +49,21 @@ color: var(--gray-400); padding: 15px 20px; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + &::placeholder { font-weight: 400; font-size: 14px; line-height: 16px; color: var(--gray-400); + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } } @@ -53,6 +77,13 @@ span { color: var(--red-100); margin-right: 2px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } label { @@ -62,6 +93,10 @@ margin-right: 4.28px; position: relative; text-decoration: underline; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } label { position: absolute; @@ -70,6 +105,12 @@ border: 1px solid #000000; border-radius: 3px; right: -26px; + + @media screen and (min-width: 2500px) { + width: 36.4px; + height: 35.15px; + right: -50px; + } } } input { @@ -79,6 +120,16 @@ margin-left: 1px; margin-top: 1.5px; + @media screen and (min-width: 2500px) { + width: 30px; + height: 28.5px; + margin-left: 8px; + } + + @media screen and (max-width: 599px) { + margin-left: 1.6px; + } + &:checked { opacity: 1; } @@ -93,6 +144,11 @@ font-size: 12px; line-height: 14px; color: var(--red-100); + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } button { @@ -106,6 +162,12 @@ letter-spacing: 0.05em; color: var(--white); cursor: pointer; + + @media screen and (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + height: 71px; + } } &__success { @@ -117,5 +179,10 @@ font-size: 12px; line-height: 14px; color: var(--green-100); + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } diff --git a/react-project/src/components/MainInstitucional/assets/modules/Main.module.scss b/react-project/src/components/MainInstitucional/assets/modules/Main.module.scss index 4a9370b..4db4f14 100644 --- a/react-project/src/components/MainInstitucional/assets/modules/Main.module.scss +++ b/react-project/src/components/MainInstitucional/assets/modules/Main.module.scss @@ -4,6 +4,11 @@ margin-right: 100px; margin-top: 29px; + @media screen and (max-width: 1024px) { + margin-left: 16px; + margin-right: 16px; + } + &__title { color: var(--black-100); font-style: normal; @@ -13,11 +18,24 @@ letter-spacing: 0.1em; text-align: center; margin-bottom: 80px; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + + @media screen and (max-width: 1024px) { + margin-bottom: 40px; + } } &__wrapperNav { display: flex; + @media screen and (max-width: 1024px) { + display: inherit; + } + .content { align-self: center; @@ -26,7 +44,15 @@ font-weight: 700; font-size: 24px; line-height: 28px; - margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + + @media screen and (max-width: 1024px) { + text-align: center; + } } p { @@ -34,7 +60,18 @@ font-weight: 400; font-size: 13px; line-height: 15px; - margin-bottom: 13px; + margin-top: 12px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + } + + @media screen and (max-width: 1024px) { + text-align: justify; + font-size: 12px; + line-height: 18px; + } } } } diff --git a/react-project/src/components/MainInstitucional/assets/modules/Navigation.module.scss b/react-project/src/components/MainInstitucional/assets/modules/Navigation.module.scss index 96a83bc..84f043f 100644 --- a/react-project/src/components/MainInstitucional/assets/modules/Navigation.module.scss +++ b/react-project/src/components/MainInstitucional/assets/modules/Navigation.module.scss @@ -5,6 +5,19 @@ height: 285px; margin-right: 30px; + @media screen and (min-width: 2500px) { + width: 590px; + height: 465px; + } + + @media screen and (max-width: 1024px) { + width: 100%; + height: unset; + margin-right: 0; + border: none; + margin-bottom: 30px; + } + li { width: inherit; @@ -17,7 +30,13 @@ font-size: 16px; line-height: 19px; + @media screen and (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + } + &.ativo { + font-weight: 700; color: var(--white); background-color: var(--black); } diff --git a/react-project/src/logo.svg b/react-project/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/react-project/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file