criação do footer bandeira e powerby de descktop 1280 e mobile
This commit is contained in:
parent
fc065c2999
commit
f323f22a2e
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 92 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 25 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 28 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,9 @@
|
||||
<svg width="53" height="33" viewBox="0 0 53 33" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="53" height="33" fill="url(#pattern0)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_1660_276" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
|
||||
</pattern>
|
||||
<image id="image0_1660_276" width="200" height="126" xlink:href="data:image/png;base64,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"/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
4
desafio-5/src/components/Footer/assets/imgs/m3-logo.svg
Normal file
4
desafio-5/src/components/Footer/assets/imgs/m3-logo.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="29" height="16" viewBox="0 0 29 16" fill="white" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6908 5.35268C16.2433 4.75927 15.6813 4.26577 15.0395 3.90269C14.3977 3.53961 13.6897 3.31466 12.9593 3.24175C12.2288 3.16883 11.4915 3.2495 10.7929 3.47877C10.0942 3.70803 9.44909 4.08103 8.89735 4.57469L8.42068 4.20515C5.14601 1.85175 0.560514 3.8502 0.131517 7.88112C0.00101444 9.82309 -0.0323953 11.7706 0.0314179 13.716C0.0208904 13.9656 0.0607758 14.2148 0.148598 14.4481C0.236421 14.6814 0.370306 14.8937 0.541944 15.072C0.713582 15.2503 0.91931 15.3907 1.14636 15.4845C1.3734 15.5782 1.61692 15.6234 1.8618 15.6172C2.10146 15.6161 2.33844 15.5657 2.55849 15.4688C2.77854 15.372 2.97712 15.2307 3.14231 15.0536C3.30749 14.8765 3.43586 14.6671 3.51971 14.4381C3.60356 14.209 3.64115 13.9651 3.63022 13.7209C3.63022 12.3205 3.63022 10.9201 3.63022 9.51489C3.62637 9.0983 3.65506 8.68206 3.71602 8.27012C3.79291 7.84849 4.02343 7.4722 4.36124 7.21691C4.69905 6.96162 5.11908 6.84627 5.53687 6.89406C5.94527 6.92547 6.32842 7.10775 6.61449 7.40673C6.90056 7.70571 7.06991 8.10086 7.09079 8.5181C7.11463 9.03351 7.09079 9.54893 7.09079 10.0643C7.09079 11.3188 7.09079 12.5733 7.09079 13.8278C7.0859 14.1917 7.19199 14.5481 7.39437 14.8478C7.59676 15.1475 7.88545 15.3755 8.22048 15.5005C9.43597 16.0159 10.6753 15.1115 10.6991 13.6868C10.6991 12.0288 10.6991 10.3707 10.7468 8.71259C10.7629 8.31178 10.8829 7.92249 11.0948 7.58452C11.2965 7.2865 11.5888 7.06453 11.9265 6.95292C12.2642 6.8413 12.6286 6.84625 12.9633 6.96699C13.3408 7.07493 13.6709 7.31116 13.8989 7.63656C14.1269 7.96196 14.2391 8.35703 14.2169 8.75636C14.2169 10.4339 14.2169 12.1114 14.2169 13.7889C14.2169 14.0297 14.2634 14.268 14.3537 14.4904C14.444 14.7129 14.5764 14.9149 14.7432 15.0852C14.9101 15.2554 15.1082 15.3904 15.3262 15.4825C15.5443 15.5746 15.7779 15.6221 16.0139 15.6221C16.2499 15.6221 16.4836 15.5746 16.7016 15.4825C16.9196 15.3904 17.1177 15.2554 17.2846 15.0852C17.4515 14.9149 17.5838 14.7129 17.6741 14.4904C17.7645 14.268 17.8109 14.0297 17.8109 13.7889C17.8109 12.0725 17.8109 10.3853 17.8109 8.64452C17.8142 7.44943 17.4192 6.28868 16.6908 5.35268"/>
|
||||
<path d="M25.695 6.32487L25.1278 6.08661C25.6903 5.63927 26.2241 5.25514 26.7008 4.81752C27.1243 4.4774 27.4899 4.06832 27.7828 3.60679C28.6408 1.97302 27.4301 0.0718221 25.5091 0.0280605C23.7359 0.00374847 21.9675 0.00374847 20.1943 0.00374847C19.9771 -0.0115626 19.7592 0.0201443 19.5549 0.0967889C19.3505 0.173434 19.1644 0.293284 19.0087 0.448477C18.8529 0.60367 18.7311 0.790699 18.6512 0.997294C18.5713 1.20389 18.5352 1.42538 18.5451 1.64724C18.5239 1.87321 18.5511 2.10119 18.6248 2.31537C18.6985 2.52956 18.817 2.72483 18.9721 2.88764C19.1272 3.05046 19.3151 3.17692 19.5229 3.25828C19.7306 3.33964 19.9532 3.37394 20.1753 3.3588C21.0428 3.3588 21.9103 3.3588 22.7778 3.3588C22.9256 3.40743 23.0781 3.40743 23.3641 3.40743C22.1868 4.37991 21.1 5.30376 20.0275 6.21789C19.3363 6.80138 19.1266 7.43836 19.3697 8.16285C19.4988 8.52047 19.7394 8.82497 20.0546 9.02963C20.3697 9.23429 20.742 9.3278 21.1143 9.29579C22.0343 9.29579 22.959 9.29579 23.8789 9.29579C24.0853 9.25688 24.2974 9.26476 24.5004 9.31886C24.7034 9.37297 24.8923 9.47198 25.0536 9.60888C25.2148 9.74577 25.3446 9.91719 25.4337 10.111C25.5227 10.3048 25.5689 10.5162 25.5689 10.7302C25.5689 10.9442 25.5227 11.1556 25.4337 11.3494C25.3446 11.5432 25.2148 11.7146 25.0536 11.8515C24.8923 11.9884 24.7034 12.0874 24.5004 12.1415C24.2974 12.1956 24.0853 12.2035 23.8789 12.1646C22.6873 12.1646 21.4956 12.1646 20.304 12.1646C19.8862 12.1876 19.4931 12.3731 19.2053 12.6829C18.9176 12.9927 18.7573 13.4032 18.7573 13.83C18.7573 14.2567 18.9176 14.6672 19.2053 14.977C19.4931 15.2868 19.8862 15.4723 20.304 15.4954C21.5481 15.4954 22.7969 15.4954 24.041 15.4954C25.1339 15.4671 26.184 15.0565 27.0154 14.3323C27.8467 13.6082 28.4088 12.6145 28.6074 11.5179C28.7658 10.4443 28.5644 9.34753 28.0359 8.40513C27.5073 7.46273 26.6826 6.72978 25.695 6.32487"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@ -0,0 +1,7 @@
|
||||
<svg width="45" height="16" viewBox="0 0 45 16" fill="white" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32.4567 5.99083H30.8496V11.4557C30.8496 11.558 30.7611 11.6456 30.6579 11.6456H29.4193C29.3161 11.6456 29.2276 11.558 29.2276 11.4557V5.99083H27.6057C27.5615 5.99083 27.5025 5.97622 27.473 5.94699C27.4436 5.91777 27.4141 5.87394 27.4141 5.81549V4.8511C27.4141 4.80727 27.4288 4.74882 27.473 4.7196C27.5025 4.69037 27.5615 4.66115 27.6057 4.67576H32.4567C32.5599 4.67576 32.6484 4.74882 32.6484 4.8511V5.81549C32.6484 5.91777 32.5599 5.99083 32.4567 5.99083Z"/>
|
||||
<path d="M37.632 11.6017C36.998 11.6893 36.3492 11.7332 35.7152 11.7186C34.4914 11.7186 33.415 11.4117 33.415 9.70213V6.5898C33.415 4.88021 34.5061 4.58797 35.7299 4.58797C36.364 4.57336 36.998 4.6172 37.632 4.70487C37.7647 4.71948 37.8237 4.77793 37.8237 4.89482V5.77154C37.8237 5.87382 37.7352 5.96149 37.632 5.96149H35.6415C35.1991 5.96149 35.0369 6.10761 35.0369 6.60441V7.4519H37.5583C37.6615 7.4519 37.7499 7.53957 37.7499 7.64186V8.53318C37.7499 8.63547 37.6615 8.72314 37.5583 8.72314H35.0369V9.71675C35.0369 10.1989 35.1991 10.3597 35.6415 10.3597H37.632C37.7352 10.3597 37.8237 10.4473 37.8237 10.5496V11.4263C37.8237 11.5286 37.7647 11.5871 37.632 11.6017Z"/>
|
||||
<path d="M44.7685 11.6455H43.2646C43.1614 11.6601 43.0582 11.6016 43.0139 11.4993L41.7017 9.45367L40.5221 11.4555C40.4631 11.5724 40.3894 11.6455 40.2862 11.6455H38.8854C38.8559 11.6455 38.8117 11.6455 38.7822 11.6162C38.7527 11.587 38.738 11.5578 38.738 11.5139C38.738 11.4847 38.7527 11.4701 38.7527 11.4555L40.8022 8.06555L38.7232 4.85094C38.7085 4.83632 38.7085 4.8071 38.7085 4.79249C38.7085 4.71943 38.7822 4.66098 38.8559 4.67559H40.4041C40.5073 4.67559 40.5811 4.76327 40.64 4.85094L41.8491 6.75048L43.0287 4.85094C43.0729 4.74865 43.1614 4.69021 43.2646 4.67559H44.6653C44.739 4.67559 44.8128 4.71943 44.8128 4.79249C44.8128 4.8071 44.798 4.83632 44.798 4.85094L42.7338 8.09477L44.8865 11.4555C44.9012 11.4847 44.916 11.5139 44.916 11.5432C44.9012 11.6016 44.8423 11.6455 44.7685 11.6455Z"/>
|
||||
<path d="M25.1581 4.69055C25.0844 4.69055 25.0254 4.73439 25.0107 4.80745L23.6394 9.84854C23.6247 9.95082 23.5952 9.99466 23.5067 9.99466C23.4182 9.99466 23.3888 9.95082 23.374 9.84854L22.0028 4.80745C21.988 4.73439 21.929 4.69055 21.8553 4.69055H20.4988C20.4546 4.69055 20.4103 4.70516 20.3809 4.749C20.3514 4.77822 20.3366 4.82206 20.3514 4.86589C20.3514 4.86589 22.0322 10.6522 22.047 10.7106C22.2682 11.3974 22.8137 11.7335 23.5067 11.7335C24.1702 11.7627 24.7747 11.3389 24.9664 10.7106C24.9959 10.6376 26.6326 4.86589 26.6326 4.86589C26.6473 4.82206 26.6326 4.77822 26.6031 4.749C26.5736 4.71978 26.5294 4.69055 26.4851 4.69055H25.1581Z"/>
|
||||
<path d="M17.491 0H3.38045C2.86439 0 2.39256 0.277625 2.1419 0.70137C1.8765 1.13973 1.86176 1.68037 2.09767 2.11872L3.51315 4.77808H0.947592C0.623211 4.77808 0.313574 4.93881 0.136639 5.21644C-0.0402959 5.49406 -0.040296 5.84475 0.10715 6.13699L4.64849 14.6411C4.81068 14.9479 5.13506 15.1379 5.47418 15.1379C5.81331 15.1379 6.13769 14.9479 6.29988 14.6411L7.53843 12.3324L9.08661 15.2402C9.33727 15.7078 9.83858 16 10.3694 16C10.9002 16 11.4015 15.7078 11.6522 15.2402L18.7296 2.04566C18.9655 1.60731 18.9507 1.08128 18.6853 0.672146C18.4494 0.248402 17.9776 0 17.491 0ZM11.1803 5.56712L8.08398 11.3242C7.98076 11.5288 7.77434 11.6457 7.53843 11.6457C7.30251 11.6457 7.09609 11.5142 6.99288 11.3242L3.94075 5.62557C3.85228 5.45023 3.85228 5.24566 3.95549 5.07032C4.0587 4.89498 4.25038 4.79269 4.44206 4.79269H10.6938C10.8854 4.79269 11.0624 4.88037 11.1509 5.0411C11.2688 5.20183 11.2688 5.40639 11.1803 5.56712Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
29
desafio-5/src/components/Footer/components/footerBy.tsx
Normal file
29
desafio-5/src/components/Footer/components/footerBy.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import { ReactComponent as M3 } from "../assets/imgs/m3-logo.svg";
|
||||
import { ReactComponent as Vtex } from "../assets/imgs/vtex-logo.svg";
|
||||
import style from "../style/footerBy.module.scss";
|
||||
|
||||
const FooterBy = () => {
|
||||
return (
|
||||
<div className={style["footer-home__creators"]}>
|
||||
<a
|
||||
href="https://vtex.com/br-pt/"
|
||||
target="_blank"
|
||||
className={style["footer-home__creators-powered"]}
|
||||
>
|
||||
Powered by
|
||||
<Vtex />
|
||||
</a>
|
||||
<a
|
||||
href="https://m3ecommerce.com/"
|
||||
target="_blank"
|
||||
className={style["footer-home__creators-developed"]}
|
||||
>
|
||||
Developed by
|
||||
<M3 />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FooterBy };
|
||||
20
desafio-5/src/components/Footer/components/payFlags.tsx
Normal file
20
desafio-5/src/components/Footer/components/payFlags.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
import style from "../style/payFlags.module.scss";
|
||||
|
||||
interface IPayment{
|
||||
urlImage: string;
|
||||
textAlt: string;
|
||||
vtexPci?: boolean
|
||||
}
|
||||
|
||||
const Payment = ({urlImage, textAlt, vtexPci} : IPayment) => {
|
||||
return (
|
||||
<img
|
||||
className={`${style["footer-home__payments-band"]} ${vtexPci == true ? style["footer-home__payments-band--vtexPci"]:""}`}
|
||||
src={urlImage}
|
||||
alt={textAlt}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { Payment };
|
||||
54
desafio-5/src/components/Footer/footer.tsx
Normal file
54
desafio-5/src/components/Footer/footer.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
import style from "../Footer/style/footer.module.scss";
|
||||
import Master from "../Footer/assets/flagsCards/Master.svg";
|
||||
import Visa from "../Footer/assets/flagsCards/Visa.svg";
|
||||
import AmericanExpress from "../Footer/assets/flagsCards/AmericanExpress.svg";
|
||||
import Elo from "../Footer/assets/flagsCards/Elo.svg";
|
||||
import Hiper from "../Footer/assets/flagsCards/Hiper.svg";
|
||||
import Paypal from "../Footer/assets/flagsCards/PayPal.svg";
|
||||
import Boleto from "../Footer/assets/flagsCards/boleto.svg";
|
||||
import VtexPci from "../Footer/assets/flagsCards/vtexPci-icon.svg";
|
||||
|
||||
|
||||
import {FooterBy} from "../Footer/components/footerBy"
|
||||
import { Payment } from "../Footer/components/payFlags";
|
||||
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className={style["footer-home"]}>
|
||||
<p
|
||||
className={`${style["footer-home__text"]} ${style["footer-home__text--desktop"]}`}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
</p>
|
||||
|
||||
<div className={style["footer-home__payments"]}>
|
||||
<div className={style["footer-home__payments--division"]}>
|
||||
<Payment urlImage={Master} textAlt="Bandeira Mastercard" />
|
||||
<Payment urlImage={Visa} textAlt="Bandeira Visa" />
|
||||
<Payment
|
||||
urlImage={AmericanExpress}
|
||||
textAlt="Bandeira AmericanExpress"
|
||||
/>
|
||||
<Payment urlImage={Elo} textAlt="Bandeira Elo" />
|
||||
|
||||
|
||||
<Payment urlImage={Hiper} textAlt="Bandeira Hiper" />
|
||||
<Payment urlImage={Paypal} textAlt="Bandeira Paypal" />
|
||||
<Payment urlImage={Boleto} textAlt="Ícone Boleto" />
|
||||
<Payment urlImage={VtexPci} textAlt="Ícone VtexPci" vtexPci={true} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<FooterBy />
|
||||
</footer>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export { Footer };
|
||||
86
desafio-5/src/components/Footer/style/footer.module.scss
Normal file
86
desafio-5/src/components/Footer/style/footer.module.scss
Normal file
@ -0,0 +1,86 @@
|
||||
.footer-home {
|
||||
display: block;
|
||||
display: flex;
|
||||
background-color: var(--black-600);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 100px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-home__text {
|
||||
// max-width: 234px;
|
||||
width: 100%;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.footer-home__text--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-home__payments {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-home__payments--division {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.footer-home__payments--division:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.footer-home__payments{
|
||||
|
||||
order: -1;
|
||||
}
|
||||
.footer-home {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.footer-home__text {
|
||||
max-width: 234px;
|
||||
|
||||
margin: 21.94px 0 21px 0;
|
||||
}
|
||||
|
||||
.footer-home__text--mobile {
|
||||
max-width: 234px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.footer-home__text--mobile {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.footer-home__payments--division:last-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
39
desafio-5/src/components/Footer/style/footerBy.module.scss
Normal file
39
desafio-5/src/components/Footer/style/footerBy.module.scss
Normal file
@ -0,0 +1,39 @@
|
||||
.footer-home__creators {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer-home__creators-powered,
|
||||
.footer-home__creators-developed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
text-decoration: none;
|
||||
color: var(--whiet-100);
|
||||
}
|
||||
|
||||
.footer-home__creators-powered svg,
|
||||
.footer-home__creators-developed svg {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.footer-home__creators-developed {
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.footer-home__creators {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.footer-home__creators {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
26
desafio-5/src/components/Footer/style/payFlags.module.scss
Normal file
26
desafio-5/src/components/Footer/style/payFlags.module.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.footer-home__payments-band{
|
||||
padding: 0 7px;
|
||||
}
|
||||
.footer-home__payments-band:first-child{
|
||||
padding: 0 7px 0 0;
|
||||
}
|
||||
.footer-home__payments-band--vtexPci{
|
||||
margin-left: 7px;
|
||||
padding: 0 0 0 10px;
|
||||
border-left: 1px solid var(--gray-400);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.footer-home__payments-band{
|
||||
max-width: 30px;
|
||||
padding: 0 5px;
|
||||
|
||||
|
||||
}
|
||||
.footer-home__payments-band:first-child{
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
.footer-home__payments-band--vtexPci{
|
||||
max-width: 45px;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 655 B After Width: | Height: | Size: 655 B |
|
Before Width: | Height: | Size: 638 B After Width: | Height: | Size: 638 B |
|
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 650 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
import style from "../../styles/header/inputMenuHeader.module.scss"
|
||||
import buscaIcon from "../../assets/icones/Vectorbuscaicon.svg";
|
||||
import style from "../styles/inputMenuHeader.module.scss"
|
||||
import buscaIcon from "../assets/icons/Vectorbuscaicon.svg";
|
||||
|
||||
interface IView{
|
||||
view: string
|
||||
@ -1,35 +1,30 @@
|
||||
import React, { useContext } from "react";
|
||||
import style from "../../styles/header/submenu.module.scss";
|
||||
import { HeaderContext } from "../../contexts/HeaderContext";
|
||||
import fechaIcon from "../../assets/icones/fechaHamburgue.svg";
|
||||
|
||||
|
||||
|
||||
|
||||
import style from "../styles/submenu.module.scss";
|
||||
import { HeaderContext } from "../../../contexts/HeaderContext";
|
||||
import fechaIcon from "../assets/icons/fechaHamburgue.svg";
|
||||
|
||||
const Submenu = () => {
|
||||
|
||||
const { open, menu } = useContext(HeaderContext);
|
||||
|
||||
return (
|
||||
<div className={style["submenu"]}>
|
||||
<div className={style["container"]}>
|
||||
<div
|
||||
className={`${style["submenu-links"]} ${style["submenu-links--desktop"]}`}
|
||||
>
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
CURSOS
|
||||
</a>
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
SAIBA MAIS
|
||||
</a>
|
||||
return (
|
||||
<div className={style["submenu"]}>
|
||||
<div className={style["container"]}>
|
||||
<div
|
||||
className={`${style["submenu-links"]} ${style["submenu-links--desktop"]}`}
|
||||
>
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
CURSOS
|
||||
</a>
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
SAIBA MAIS
|
||||
</a>
|
||||
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
institucional
|
||||
</a>
|
||||
</div>
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
institucionais
|
||||
</a>
|
||||
</div>
|
||||
<div className={style["submenu--mobile"]}>
|
||||
</div>
|
||||
<div className={style["submenu--mobile"]}>
|
||||
<div
|
||||
onClick={() => menu(false)}
|
||||
className={`${style["submenu--absolute"]} ${
|
||||
@ -43,9 +38,7 @@ const Submenu = () => {
|
||||
>
|
||||
<a className={style["submenu-link-entre"]} href="#">
|
||||
ENTRAR
|
||||
|
||||
<img src={fechaIcon} alt="" onClick={() => menu(false)} />
|
||||
|
||||
</a>
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
CURSOS
|
||||
@ -54,13 +47,12 @@ const Submenu = () => {
|
||||
SAIBA MAIS
|
||||
</a>
|
||||
<a className={style["submenu-link"]} href="#">
|
||||
INSTIUCIONAL
|
||||
INSTIUCIONais
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Submenu };
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Submenu };
|
||||
36
desafio-5/src/components/Header/components/menuHeader.tsx
Normal file
36
desafio-5/src/components/Header/components/menuHeader.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React, { useContext } from "react";
|
||||
|
||||
import style from "../styles/headermenu.module.scss";
|
||||
import logo from "../assets/imgs/Logo-M3Academy 1m3academy-header.svg";
|
||||
import CartIcon from "../assets/icons/shoppingCart-icon.svg";
|
||||
import { ReactComponent as MenuIcon } from "../assets/icons/menuHamburguer-icon.svg";
|
||||
import { BuscaMenu } from "./BuscaMenu";
|
||||
import { HeaderContext } from "../../../contexts/HeaderContext";
|
||||
|
||||
const MenuHeader = () => {
|
||||
const { menu } = useContext(HeaderContext);
|
||||
return (
|
||||
<div className={style["container"]}>
|
||||
<div className={style["menu"]}>
|
||||
<div onClick={() => menu(true)} className={style["icon-menu"]}>
|
||||
<MenuIcon />
|
||||
</div>
|
||||
<a href="#" className={style["logo"]}>
|
||||
<img src={logo} alt="Logo M3" />
|
||||
</a>
|
||||
<BuscaMenu view="desktop" />
|
||||
<div className={style["header-links"]}>
|
||||
<a className={style["login"]} href="#">
|
||||
ENTRAR
|
||||
</a>
|
||||
<button className={style["cart"]}>
|
||||
<img src={CartIcon} alt="cart" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<BuscaMenu view="mobile" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MenuHeader };
|
||||
@ -1,26 +1,20 @@
|
||||
import React from "react";
|
||||
import React from "react";
|
||||
|
||||
import style from "../../styles/header/header.module.scss";
|
||||
import style from "../Header/styles/header.module.scss";
|
||||
|
||||
|
||||
|
||||
import { MenuHeader } from "./menuHeader";
|
||||
import { Submenu } from "./SubMenu"
|
||||
import { MenuHeader } from "./components/menuHeader";
|
||||
import { Submenu } from "./components/SubMenu";
|
||||
import { HeaderProvider } from "../../contexts/HeaderContext";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<HeaderProvider>
|
||||
<header className={style["header"]}>
|
||||
<MenuHeader />
|
||||
< Submenu />
|
||||
|
||||
return (
|
||||
<HeaderProvider>
|
||||
<header className={style["header"]}>
|
||||
<MenuHeader />
|
||||
<Submenu />
|
||||
</header>
|
||||
</HeaderProvider>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
</HeaderProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export { Header };
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
import React, { useContext } from "react";
|
||||
|
||||
import style from "../../styles/header/headermenu.module.scss";
|
||||
import logo from "../../assets/logos/Logo-M3Academy 1m3academy-header.svg";
|
||||
import CartIcon from "../../assets/icones/shoppingCart-icon.svg";
|
||||
import { ReactComponent as MenuIcon } from "../../assets/icones/menuHamburguer-icon.svg";
|
||||
import { BuscaMenu } from "./BuscaMenu";
|
||||
import { HeaderContext } from "../../contexts/HeaderContext";
|
||||
|
||||
|
||||
const MenuHeader = () => {
|
||||
const { menu } = useContext(HeaderContext);
|
||||
return (
|
||||
<div className={style["container"]}>
|
||||
<div className={style["menu"]}>
|
||||
<div onClick={() => menu(true)} className={style["icon-menu"]}>
|
||||
<MenuIcon />
|
||||
</div>
|
||||
<a href="#" className={style["logo"]}>
|
||||
<img src={logo} alt="Logo M3" />
|
||||
</a>
|
||||
< BuscaMenu view="desktop" />
|
||||
<div className={style["header-links"]}>
|
||||
<a className={style["login"]} href="#">
|
||||
ENTRAR
|
||||
</a>
|
||||
<button className={style["cart"]}>
|
||||
<img src={CartIcon} alt="cart" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<BuscaMenu view="mobile" />
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export { MenuHeader };
|
||||
@ -104,7 +104,7 @@
|
||||
}
|
||||
|
||||
.submenu-links--mobile .submenu-link {
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
padding: 10px 0;
|
||||
padding: 0 0 12px 16px;
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
}
|
||||
|
||||
.submenu-link-entre {
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
margin-bottom: 31px;
|
||||
|
||||
padding: 31px 0 31px 16px;
|
||||
@ -1,12 +1,14 @@
|
||||
import React from "react";
|
||||
|
||||
import { Header } from "../components/Header/Header";
|
||||
import { Header } from "../components/Header/header"
|
||||
import { Footer } from "../components/Footer/footer"
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
< Header />
|
||||
< Footer />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user