diff --git a/src/_variaveis.scss b/src/_variaveis.scss new file mode 100644 index 0000000..95e0905 --- /dev/null +++ b/src/_variaveis.scss @@ -0,0 +1,41 @@ +// /* fonts */ +// @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); +// @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); +$font-family: "Roboto", sans-serif; +// $font-family-secundary: "Tenor Sans", sans-serif; + +/* Colors */ +$color-black: #292929; +$color-black2: #000000; + +$color-white: #fff; + +$color-gray: #6c6c6c; +$color-gray2: #7d7d7d; +$color-gray3: #f0f0f0; +$color-gray4: #8d8d8d; +$color-gray5: #e5e5e5; +$color-gray6: #C4C4C4; +$color-gray7: #e0e0e0; + +$color-blue: #4267b2; +$color-blue2: #00C8FF; +; + +$color-green: #4caf50; + +/* Grid breakpoints */ +$grid-breakpoints: ( + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px) !default; + +$z-index: ( + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25) !default; \ No newline at end of file diff --git a/src/components/Footer/Accordion/Accordion.tsx b/src/components/Footer/Accordion/Accordion.tsx new file mode 100644 index 0000000..d8dd904 --- /dev/null +++ b/src/components/Footer/Accordion/Accordion.tsx @@ -0,0 +1,9 @@ +import React from "react"; +import { AccordionSection } from "./AccordionSection"; + +// trocar para "menu fotter" +export const Accordion = () => { + return ( +
+ ); +} \ No newline at end of file diff --git a/src/components/Footer/Accordion/AccordionSection.tsx b/src/components/Footer/Accordion/AccordionSection.tsx new file mode 100644 index 0000000..d88cd23 --- /dev/null +++ b/src/components/Footer/Accordion/AccordionSection.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +export const AccordionSection = () => { + + return ( +
+ +
+ ); + + +} \ No newline at end of file diff --git a/src/components/Footer/MenuFotter.tsx b/src/components/Footer/MenuFotter.tsx new file mode 100644 index 0000000..973d560 --- /dev/null +++ b/src/components/Footer/MenuFotter.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export const MenuFotter = () => { + +} \ No newline at end of file diff --git a/src/components/Footer/NewsLetter.tsx b/src/components/Footer/NewsLetter.tsx new file mode 100644 index 0000000..85caaa8 --- /dev/null +++ b/src/components/Footer/NewsLetter.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export const NewsLetter = () => { + +} \ No newline at end of file diff --git a/src/components/Footer/Rodape/DevelopedBy.tsx b/src/components/Footer/Rodape/DevelopedBy.tsx new file mode 100644 index 0000000..35a57e7 --- /dev/null +++ b/src/components/Footer/Rodape/DevelopedBy.tsx @@ -0,0 +1,22 @@ +import React from 'react' + + +interface RodapeDevelopedByProps { + link: string; + description: string; + source: string; + altText: string; +} +export const DevelopedBy = ({ link, description, source, altText }: RodapeDevelopedByProps) => { + return ( + <> +
  • + + {description} + {altText} + +
    • + + ) +} + diff --git a/src/components/Footer/Rodape/Rodape.module.scss b/src/components/Footer/Rodape/Rodape.module.scss new file mode 100644 index 0000000..9a6e575 --- /dev/null +++ b/src/components/Footer/Rodape/Rodape.module.scss @@ -0,0 +1,254 @@ +@import "../../../variaveis"; + +/* _footer.scss */ +.footer { + + color: $color-gray2; + bottom: 0; + width: 100%; + background-color: #000; + + &__wrapper { + + padding: 16px 0; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 7.8125%; + + @media (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + margin: 0 16px; + + } + + // .container { + // width: 94.9734%; + + // align-items: center; + // display: flex; + // justify-content: space-between; + + // @media (max-width: 1024px) { + // flex-direction: column; + // align-items: flex-start; + // margin: 0 16px; + + // } + // } + } + + &__address { + color: #fff; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + width: 100%; + max-width: 269px; + + @media(min-width:2500px) { + font-size: 20px; + line-height: 27px; + max-width: none; + width: 537px; + min-width: 537px; + } + + @media(max-width:1024px) { + margin-bottom: 16px; + order: 2; + } + + + + + } + + &__stamps { + align-items: center; + display: flex; + justify-content: center; + justify-self: center; + list-style: none; + column-gap: 11px; + + + @media (min-width: 2500px) { + min-width: 690px; + + } + + + @media (max-width: 1024px) { + justify-content: flex-start; + margin: 0; + margin-bottom: 23px; + + order: 1; + padding: 0; + } + + span { + img { + width: 36px; + height: 20.2px; + @media(min-width:2500px) { + width: 70px; + height: 39.27px; + } + + @media (max-width: 1024px) { + width: 35px; + height: 20.13px; + } + + @media (max-width: 490px) { + width: 30px; + height: 17px; + + } + @media (max-width: 370px) { + column-gap: 5.5px; + width: 18px; + width: 19px; + + } + + + } + } + + + &__divider { + background-color: $color-gray4; + display: inline-block; + height: 24px; + margin: 0 8px; + width: 1px !important; + min-width: 1px !important; + } + + } + + &__vtexpci { + img { + width: 53px; + height: 33px; + + @media(min-width:2500px) { + width: 103.52px; + height: 64.44px; + } + } + } + + &__developedBy { + align-items: center; + display: flex; + + list-style-type: none; + margin: 0; + max-width: 217px; + width: 100%; + + margin: 0; + + @media(min-width:2500px) { + min-width: 388.98px; + } + + @media(max-width:1024px) { + order: 3; + padding: 0; + } + + li { + width: 100%; + min-width: 108.5px; + + @media(min-width:2500px) { + min-width: 189PX; + } + } + + + + li:last-child { + margin-left: 16px; + + a { + span { + width: 100%; + font-weight: 400; + font-size: 9px; + line-height: 12px; + + + @media(min-width:2500px) { + font-size: 18px; + line-height: 25px; + } + } + + img { + + width: 28.66px; + height: 15.65px; + + @media(min-width:2500px) { + width: 55.98px; + height: 30.55px; + } + } + + } + } + + + a { + align-items: center; + color: $color-gray2; + display: flex; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + text-decoration: none; + color: #fff; + text-transform: capitalize; + + @media(min-width:2500px) { + font-size: 18px; + line-height: 25px; + } + + span { + margin-right: 8px; + width: 100%; + + @media(min-width:2500px) { + margin-right: 10px; + min-width: 100px; + } + + + + } + + img { + width: 44.92px; + height: 16px; + + @media(min-width:2500px) { + width: 87.73px; + height: 31.24px; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/Footer/Rodape/Rodape.tsx b/src/components/Footer/Rodape/Rodape.tsx new file mode 100644 index 0000000..68371ee --- /dev/null +++ b/src/components/Footer/Rodape/Rodape.tsx @@ -0,0 +1,78 @@ +import React from 'react' + +import paymantMasterCard from "../assets/img/masterCardM3Academy.png"; +import paymantVisa from "../assets/img/visaM3Academy.png"; +import paymantAmex from "../assets/img/amexM3Academy.png"; +import paymantElo from "../assets/img/eloM3Academy.png"; +import paymantHiperCard from "../assets/img/hiperCardM3Academy.png"; +import paymantPayPal from "../assets/img/payPalM3Academy.png"; +import paymantBoleto from "../assets/img/boletoM3Academy.png"; +import paymantVtexPCI from "../assets/img/vtexPCIM3Academy.png"; +import developByM3 from "../assets/svgs/logoM3M3Academy.svg"; +import developByVtex from "../assets/svgs/logoVTEXM3Academy.svg"; + +import styleRodape from "./Rodape.module.scss"; +import { RodapeStamp } from './RodapeStamp'; +import { DevelopedBy } from './DevelopedBy'; + +export const Rodape = () => { + return ( + + ); +} + diff --git a/src/components/Footer/Rodape/RodapeStamp.tsx b/src/components/Footer/Rodape/RodapeStamp.tsx new file mode 100644 index 0000000..cb41200 --- /dev/null +++ b/src/components/Footer/Rodape/RodapeStamp.tsx @@ -0,0 +1,20 @@ +import React, { Component } from 'react' +import styleRodape from "./Rodape.module.scss"; + + + +interface RodapeStampProps { + source: string; + altText: string; +} +export const RodapeStamp = ({ source, altText }: RodapeStampProps) => { + return ( +
  • + + {altText} + +
    • + ) + +} + diff --git a/src/components/Footer/assets/img/amexM3Academy.png b/src/components/Footer/assets/img/amexM3Academy.png new file mode 100644 index 0000000..aae1952 Binary files /dev/null and b/src/components/Footer/assets/img/amexM3Academy.png differ diff --git a/src/components/Footer/assets/img/boletoM3Academy.png b/src/components/Footer/assets/img/boletoM3Academy.png new file mode 100644 index 0000000..3e217de Binary files /dev/null and b/src/components/Footer/assets/img/boletoM3Academy.png differ diff --git a/src/components/Footer/assets/img/eloM3Academy.png b/src/components/Footer/assets/img/eloM3Academy.png new file mode 100644 index 0000000..7b54ba7 Binary files /dev/null and b/src/components/Footer/assets/img/eloM3Academy.png differ diff --git a/src/components/Footer/assets/img/hiperCardM3Academy.png b/src/components/Footer/assets/img/hiperCardM3Academy.png new file mode 100644 index 0000000..9ecc2cd Binary files /dev/null and b/src/components/Footer/assets/img/hiperCardM3Academy.png differ diff --git a/src/components/Footer/assets/img/masterCardM3Academy.png b/src/components/Footer/assets/img/masterCardM3Academy.png new file mode 100644 index 0000000..c5b06a9 Binary files /dev/null and b/src/components/Footer/assets/img/masterCardM3Academy.png differ diff --git a/src/components/Footer/assets/img/payPalM3Academy.png b/src/components/Footer/assets/img/payPalM3Academy.png new file mode 100644 index 0000000..d2091d9 Binary files /dev/null and b/src/components/Footer/assets/img/payPalM3Academy.png differ diff --git a/src/components/Footer/assets/img/visaM3Academy.png b/src/components/Footer/assets/img/visaM3Academy.png new file mode 100644 index 0000000..38293e2 Binary files /dev/null and b/src/components/Footer/assets/img/visaM3Academy.png differ diff --git a/src/components/Footer/assets/img/vtexPCIM3Academy.png b/src/components/Footer/assets/img/vtexPCIM3Academy.png new file mode 100644 index 0000000..c5d345d Binary files /dev/null and b/src/components/Footer/assets/img/vtexPCIM3Academy.png differ diff --git a/src/components/Footer/assets/svgs/logoM3M3Academy.svg b/src/components/Footer/assets/svgs/logoM3M3Academy.svg new file mode 100644 index 0000000..ae62dc2 --- /dev/null +++ b/src/components/Footer/assets/svgs/logoM3M3Academy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Footer/assets/svgs/logoVTEXM3Academy.svg b/src/components/Footer/assets/svgs/logoVTEXM3Academy.svg new file mode 100644 index 0000000..436c57f --- /dev/null +++ b/src/components/Footer/assets/svgs/logoVTEXM3Academy.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Footer/styles/Accordion.module.scss b/src/components/Footer/styles/Accordion.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Footer/styles/Footer.module.scss b/src/components/Footer/styles/Footer.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 87bf3df..16dd4a3 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,14 @@ import React from "react"; +import { Rodape } from "../components/Footer/Rodape/Rodape"; import { Header } from "../components/Header/Header"; -export const Home = ()=>{ - return( +export const Home = () => { + return ( <> -
    +
    + + ) } \ No newline at end of file