forked from M3-Academy/desafio-react-e-typescript
feat: Tamanho tablet criado
This commit is contained in:
parent
327e440e80
commit
9e5188cae3
4
public/assets/icons/logoM3M3Academy.svg
Normal file
4
public/assets/icons/logoM3M3Academy.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 29 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.0307 5.35268C16.5833 4.75927 16.0213 4.26577 15.3795 3.90269C14.7376 3.53961 14.0296 3.31466 13.2992 3.24175C12.5688 3.16883 11.8315 3.2495 11.1328 3.47877C10.4342 3.70803 9.78905 4.08103 9.23731 4.57469L8.76065 4.20515C5.48598 1.85175 0.900479 3.8502 0.471483 7.88112C0.34098 9.82309 0.307571 11.7706 0.371384 13.716C0.360856 13.9656 0.400742 14.2148 0.488564 14.4481C0.576387 14.6814 0.710272 14.8937 0.88191 15.072C1.05355 15.2503 1.25928 15.3907 1.48632 15.4845C1.71337 15.5782 1.95689 15.6234 2.20177 15.6172C2.44143 15.6161 2.6784 15.5657 2.89845 15.4688C3.11851 15.372 3.31709 15.2307 3.48227 15.0536C3.64746 14.8765 3.77583 14.6671 3.85968 14.4381C3.94352 14.209 3.98111 13.9651 3.97019 13.7209C3.97019 12.3205 3.97019 10.9201 3.97019 9.51489C3.96633 9.0983 3.99502 8.68206 4.05599 8.27012C4.13287 7.84849 4.3634 7.4722 4.70121 7.21691C5.03901 6.96162 5.45905 6.84627 5.87684 6.89406C6.28524 6.92547 6.66838 7.10775 6.95445 7.40673C7.24052 7.70571 7.40987 8.10086 7.43076 8.5181C7.45459 9.03351 7.43076 9.54893 7.43076 10.0643C7.43076 11.3188 7.43076 12.5733 7.43076 13.8278C7.42587 14.1917 7.53195 14.5481 7.73434 14.8478C7.93673 15.1475 8.22541 15.3755 8.56045 15.5005C9.77594 16.0159 11.0153 15.1115 11.0391 13.6868C11.0391 12.0288 11.0391 10.3707 11.0868 8.71259C11.1028 8.31178 11.2229 7.92249 11.4347 7.58452C11.6364 7.2865 11.9287 7.06453 12.2665 6.95292C12.6042 6.8413 12.9685 6.84625 13.3032 6.96699C13.6808 7.07493 14.0109 7.31116 14.2388 7.63656C14.4668 7.96196 14.579 8.35703 14.5569 8.75636C14.5569 10.4339 14.5569 12.1114 14.5569 13.7889C14.5569 14.0297 14.6033 14.268 14.6937 14.4904C14.784 14.7129 14.9163 14.9149 15.0832 15.0852C15.2501 15.2554 15.4482 15.3904 15.6662 15.4825C15.8842 15.5746 16.1179 15.6221 16.3539 15.6221C16.5899 15.6221 16.8236 15.5746 17.0416 15.4825C17.2596 15.3904 17.4577 15.2554 17.6246 15.0852C17.7914 14.9149 17.9238 14.7129 18.0141 14.4904C18.1044 14.268 18.1509 14.0297 18.1509 13.7889C18.1509 12.0725 18.1509 10.3853 18.1509 8.64452C18.1542 7.44943 17.7592 6.28868 17.0307 5.35268Z" fill="white"/>
|
||||
<path d="M26.035 6.32487L25.4678 6.08661C26.0302 5.63927 26.5641 5.25514 27.0407 4.81752C27.4642 4.4774 27.8298 4.06832 28.1228 3.60679C28.9808 1.97302 27.77 0.0718221 25.8491 0.0280605C24.0759 0.00374847 22.3075 0.00374847 20.5343 0.00374847C20.3171 -0.0115626 20.0992 0.0201443 19.8949 0.0967889C19.6905 0.173434 19.5044 0.293284 19.3486 0.448477C19.1929 0.60367 19.0711 0.790699 18.9912 0.997294C18.9113 1.20389 18.8751 1.42538 18.8851 1.64724C18.8638 1.87321 18.891 2.10119 18.9648 2.31538C19.0385 2.52956 19.157 2.72483 19.3121 2.88764C19.4671 3.05046 19.6551 3.17692 19.8628 3.25828C20.0706 3.33964 20.2932 3.37394 20.5152 3.3588C21.3828 3.3588 22.2503 3.3588 23.1178 3.3588C23.2656 3.40743 23.4181 3.40743 23.7041 3.40743C22.5268 4.37991 21.44 5.30376 20.3675 6.21789C19.6763 6.80138 19.4666 7.43836 19.7097 8.16285C19.8388 8.52047 20.0794 8.82497 20.3946 9.02963C20.7097 9.23429 21.082 9.3278 21.4543 9.29579C22.3742 9.29579 23.2989 9.29579 24.2189 9.29579C24.4252 9.25688 24.6374 9.26476 24.8404 9.31886C25.0434 9.37297 25.2322 9.47198 25.3935 9.60888C25.5548 9.74577 25.6846 9.91719 25.7736 10.111C25.8627 10.3048 25.9089 10.5162 25.9089 10.7302C25.9089 10.9442 25.8627 11.1556 25.7736 11.3494C25.6846 11.5432 25.5548 11.7146 25.3935 11.8515C25.2322 11.9884 25.0434 12.0874 24.8404 12.1415C24.6374 12.1956 24.4252 12.2035 24.2189 12.1646C23.0273 12.1646 21.8356 12.1646 20.6439 12.1646C20.2262 12.1876 19.833 12.3731 19.5453 12.6829C19.2576 12.9927 19.0972 13.4032 19.0972 13.83C19.0972 14.2567 19.2576 14.6672 19.5453 14.977C19.833 15.2868 20.2262 15.4723 20.6439 15.4954C21.888 15.4954 23.1369 15.4954 24.381 15.4954C25.4738 15.4671 26.5239 15.0565 27.3553 14.3323C28.1867 13.6082 28.7488 12.6145 28.9474 11.5179C29.1057 10.4443 28.9043 9.34753 28.3758 8.40513C27.8473 7.46273 27.0225 6.72978 26.035 6.32487Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
7
public/assets/icons/logoVTEXM3Academy.svg
Normal file
7
public/assets/icons/logoVTEXM3Academy.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg viewBox="0 0 46 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M33.3909 5.99083H31.7838V11.4557C31.7838 11.558 31.6953 11.6456 31.5921 11.6456H30.3535C30.2503 11.6456 30.1619 11.558 30.1619 11.4557V5.99083H28.5399C28.4957 5.99083 28.4367 5.97622 28.4072 5.94699C28.3778 5.91777 28.3483 5.87394 28.3483 5.81549V4.8511C28.3483 4.80727 28.363 4.74882 28.4072 4.7196C28.4367 4.69037 28.4957 4.66115 28.5399 4.67576H33.3909C33.4941 4.67576 33.5826 4.74882 33.5826 4.8511V5.81549C33.5826 5.91777 33.4941 5.99083 33.3909 5.99083Z" fill="white"/>
|
||||
<path d="M38.5662 11.6017C37.9322 11.6893 37.2834 11.7332 36.6494 11.7186C35.4256 11.7186 34.3492 11.4117 34.3492 9.70213V6.5898C34.3492 4.88021 35.4403 4.58797 36.6641 4.58797C37.2982 4.57336 37.9322 4.6172 38.5662 4.70487C38.6989 4.71948 38.7579 4.77793 38.7579 4.89482V5.77154C38.7579 5.87382 38.6694 5.96149 38.5662 5.96149H36.5757C36.1333 5.96149 35.9711 6.10761 35.9711 6.60441V7.4519H38.4925C38.5957 7.4519 38.6842 7.53957 38.6842 7.64186V8.53318C38.6842 8.63547 38.5957 8.72314 38.4925 8.72314H35.9711V9.71674C35.9711 10.1989 36.1333 10.3597 36.5757 10.3597H38.5662C38.6694 10.3597 38.7579 10.4473 38.7579 10.5496V11.4263C38.7579 11.5286 38.6989 11.5871 38.5662 11.6017Z" fill="white"/>
|
||||
<path d="M45.7027 11.6455H44.1988C44.0956 11.6601 43.9924 11.6016 43.9481 11.4993L42.6359 9.45367L41.4563 11.4555C41.3973 11.5724 41.3236 11.6455 41.2204 11.6455H39.8196C39.7901 11.6455 39.7459 11.6455 39.7164 11.6162C39.6869 11.587 39.6722 11.5578 39.6722 11.5139C39.6722 11.4847 39.6869 11.4701 39.6869 11.4555L41.7364 8.06555L39.6574 4.85094C39.6427 4.83632 39.6427 4.8071 39.6427 4.79249C39.6427 4.71943 39.7164 4.66098 39.7901 4.67559H41.3383C41.4415 4.67559 41.5153 4.76327 41.5742 4.85094L42.7833 6.75048L43.9629 4.85094C44.0071 4.74865 44.0956 4.69021 44.1988 4.67559H45.5995C45.6732 4.67559 45.747 4.71943 45.747 4.79249C45.747 4.8071 45.7322 4.83632 45.7322 4.85094L43.668 8.09477L45.8207 11.4555C45.8354 11.4847 45.8502 11.5139 45.8502 11.5432C45.8354 11.6016 45.7765 11.6455 45.7027 11.6455Z" fill="white"/>
|
||||
<path d="M26.0923 4.69055C26.0186 4.69055 25.9596 4.73439 25.9449 4.80745L24.5736 9.84854C24.5589 9.95082 24.5294 9.99466 24.4409 9.99466C24.3524 9.99466 24.323 9.95082 24.3082 9.84854L22.937 4.80745C22.9222 4.73439 22.8632 4.69055 22.7895 4.69055H21.433C21.3888 4.69055 21.3445 4.70516 21.3151 4.749C21.2856 4.77822 21.2708 4.82206 21.2856 4.86589C21.2856 4.86589 22.9665 10.6522 22.9812 10.7106C23.2024 11.3974 23.7479 11.7335 24.4409 11.7335C25.1044 11.7627 25.7089 11.3389 25.9006 10.7106C25.9301 10.6376 27.5668 4.86589 27.5668 4.86589C27.5815 4.82206 27.5668 4.77822 27.5373 4.749C27.5078 4.71978 27.4636 4.69055 27.4193 4.69055H26.0923Z" fill="white"/>
|
||||
<path d="M18.4251 0H4.31453C3.79847 0 3.32664 0.277625 3.07599 0.70137C2.81058 1.13973 2.79584 1.68037 3.03175 2.11872L4.44723 4.77808H1.88167C1.55729 4.77808 1.24766 4.93881 1.07072 5.21644C0.893786 5.49406 0.893786 5.84475 1.04123 6.13699L5.58257 14.6411C5.74476 14.9479 6.06914 15.1379 6.40826 15.1379C6.74739 15.1379 7.07177 14.9479 7.23396 14.6411L8.47251 12.3324L10.0207 15.2402C10.2713 15.7078 10.7727 16 11.3035 16C11.8343 16 12.3356 15.7078 12.5863 15.2402L19.6637 2.04566C19.8996 1.60731 19.8848 1.08128 19.6194 0.672146C19.3835 0.248402 18.9117 0 18.4251 0ZM12.1144 5.56712L9.01806 11.3242C8.91485 11.5288 8.70842 11.6457 8.47251 11.6457C8.23659 11.6457 8.03017 11.5142 7.92696 11.3242L4.87483 5.62557C4.78636 5.45023 4.78636 5.24566 4.88957 5.07032C4.99278 4.89498 5.18446 4.79269 5.37614 4.79269H11.6279C11.8195 4.79269 11.9965 4.88036 12.0849 5.0411C12.2029 5.20183 12.2029 5.40639 12.1144 5.56712Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
@ -67,7 +67,7 @@ export default function FooterBottom() {
|
||||
<span>Powered by</span>
|
||||
<img
|
||||
className={styles.logoVtexFooter}
|
||||
src="/assets/images/logoVTEXM3Academy.png"
|
||||
src="/assets/icons/logoVTEXM3Academy.svg"
|
||||
alt="Logo VTEX"
|
||||
/>
|
||||
</li>
|
||||
@ -75,7 +75,7 @@ export default function FooterBottom() {
|
||||
<span>Developed by</span>
|
||||
<img
|
||||
className={styles.logoM3Footer}
|
||||
src="/assets/images/logoM3M3Academy.png"
|
||||
src="/assets/icons/logoM3M3Academy.svg"
|
||||
alt="Logo M3"
|
||||
/>
|
||||
</li>
|
||||
|
||||
@ -24,7 +24,6 @@
|
||||
}
|
||||
|
||||
.footerPayments {
|
||||
// width: 36.94%;
|
||||
width: 399px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -83,10 +82,68 @@
|
||||
|
||||
.logoVtexFooter {
|
||||
width: 44.92px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.logoM3Footer {
|
||||
width: 28.66px;
|
||||
height: 15.65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.containerFooterBottom {
|
||||
padding: 19px 16px 15px 16px;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"payments"
|
||||
"address"
|
||||
"develop";
|
||||
gap: 15px;
|
||||
|
||||
.footerAdress {
|
||||
grid-area: address;
|
||||
width: 100%;
|
||||
max-width: 258px;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.footerPayments {
|
||||
grid-area: payments;
|
||||
width: max-content;
|
||||
|
||||
.footerPaymentsWrapper {
|
||||
div {
|
||||
gap: 11px;
|
||||
img {
|
||||
width: 30.27px;
|
||||
height: 16.97px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 20.36px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.footerPaymentsWrapperVtex {
|
||||
div {
|
||||
.vtexIcon {
|
||||
width: 45px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerDevelop {
|
||||
grid-area: develop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,79 @@
|
||||
import { useRef, useState } from "react";
|
||||
import styles from "./footerTop.module.scss";
|
||||
|
||||
export default function FooterTop() {
|
||||
const btnScrollTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
const footerLinks = {
|
||||
institucional: useRef<HTMLUListElement>(null),
|
||||
duvidas: useRef<HTMLUListElement>(null),
|
||||
faleConosco: useRef<HTMLUListElement>(null),
|
||||
};
|
||||
|
||||
const titleMenuFooter = {
|
||||
institucional: useRef<HTMLHeadingElement>(null),
|
||||
duvidas: useRef<HTMLHeadingElement>(null),
|
||||
faleConosco: useRef<HTMLHeadingElement>(null),
|
||||
};
|
||||
|
||||
const [openList, setOpenList] = useState({
|
||||
institucional: false,
|
||||
duvidas: false,
|
||||
faleConosco: false,
|
||||
});
|
||||
|
||||
const footerLinkToggle = (e: any) => {
|
||||
if (window.screen.width <= 1024) {
|
||||
if (e.target.textContent === "Institucional" && !openList.institucional) {
|
||||
titleMenuFooter.institucional.current?.classList.add(
|
||||
`${styles.titleActive}`
|
||||
);
|
||||
footerLinks.institucional.current?.classList.add(`${styles.active}`);
|
||||
setOpenList((prevState) => ({ ...prevState, institucional: true }));
|
||||
} else {
|
||||
titleMenuFooter.institucional.current?.classList.remove(
|
||||
`${styles.titleActive}`
|
||||
);
|
||||
footerLinks.institucional.current?.classList.remove(`${styles.active}`);
|
||||
setOpenList((prevState) => ({ ...prevState, institucional: false }));
|
||||
}
|
||||
|
||||
if (e.target.textContent === "Dúvidas" && !openList.duvidas) {
|
||||
titleMenuFooter.duvidas.current?.classList.add(`${styles.titleActive}`);
|
||||
footerLinks.duvidas.current?.classList.add(`${styles.active}`);
|
||||
setOpenList((prevState) => ({ ...prevState, duvidas: true }));
|
||||
} else {
|
||||
titleMenuFooter.duvidas.current?.classList.remove(
|
||||
`${styles.titleActive}`
|
||||
);
|
||||
footerLinks.duvidas.current?.classList.remove(`${styles.active}`);
|
||||
setOpenList((prevState) => ({ ...prevState, duvidas: false }));
|
||||
}
|
||||
|
||||
if (e.target.textContent === "Fale Conosco" && !openList.faleConosco) {
|
||||
titleMenuFooter.faleConosco.current?.classList.add(
|
||||
`${styles.titleActive}`
|
||||
);
|
||||
footerLinks.faleConosco.current?.classList.add(`${styles.active}`);
|
||||
setOpenList((prevState) => ({ ...prevState, faleConosco: true }));
|
||||
} else {
|
||||
titleMenuFooter.faleConosco.current?.classList.remove(
|
||||
`${styles.titleActive}`
|
||||
);
|
||||
footerLinks.faleConosco.current?.classList.remove(`${styles.active}`);
|
||||
setOpenList((prevState) => ({ ...prevState, faleConosco: false }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.containerFooterTop}>
|
||||
<div>
|
||||
<h4>Institucional</h4>
|
||||
<ul>
|
||||
<h4 ref={titleMenuFooter.institucional} onClick={footerLinkToggle}>
|
||||
Institucional
|
||||
</h4>
|
||||
<ul
|
||||
ref={footerLinks.institucional}
|
||||
className={styles.listLinksFooterTop}
|
||||
>
|
||||
<li>
|
||||
<a href="/">Quem Somos</a>
|
||||
</li>
|
||||
@ -31,8 +91,10 @@ export default function FooterTop() {
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Dúvidas</h4>
|
||||
<ul>
|
||||
<h4 ref={titleMenuFooter.duvidas} onClick={footerLinkToggle}>
|
||||
Dúvidas
|
||||
</h4>
|
||||
<ul ref={footerLinks.duvidas} className={styles.listLinksFooterTop}>
|
||||
<li>
|
||||
<a href="/">Entrega</a>
|
||||
</li>
|
||||
@ -48,8 +110,10 @@ export default function FooterTop() {
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.containerSupportClient}>
|
||||
<h4>Fale Conosco</h4>
|
||||
<ul>
|
||||
<h4 ref={titleMenuFooter.faleConosco} onClick={footerLinkToggle}>
|
||||
Fale Conosco
|
||||
</h4>
|
||||
<ul ref={footerLinks.faleConosco} className={styles.listLinksFooterTop}>
|
||||
<li className={styles.supportClient}>
|
||||
<span className={styles.titleSuportClient}>
|
||||
Atendimento Ao Consumidor
|
||||
@ -88,21 +152,6 @@ export default function FooterTop() {
|
||||
www.loremipsum.com
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.floatElementsFooter}>
|
||||
<div className={styles.whatsappIcon}>
|
||||
<a href="/">
|
||||
<img src="/assets/icons/whatsapp-icon.svg" alt="WhatsApp" />
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.topoSiteIcon}>
|
||||
<a onClick={btnScrollTop} href="#">
|
||||
<img
|
||||
src="/assets/icons/topo-site-icon.png"
|
||||
alt="Voltar para o topo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -64,31 +64,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
.floatElementsFooter {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 40px;
|
||||
|
||||
width: 2.6562%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.whatsappIcon,
|
||||
.topoSiteIcon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topoSiteIcon {
|
||||
a {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linkRevendedor {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.containerFooterTop {
|
||||
padding: 24px 16px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
div h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
text-transform: none;
|
||||
&::after {
|
||||
content: "+";
|
||||
display: inline-block;
|
||||
line-height: 8.28px;
|
||||
}
|
||||
|
||||
&.titleActive::after {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
|
||||
.listLinksFooterTop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.containerSocialIcons {
|
||||
width: max-content;
|
||||
|
||||
.wrapperSocialIcons {
|
||||
margin-bottom: 0;
|
||||
a {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linkSocial {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +1,38 @@
|
||||
import MenuNav from "../MenuNav/MenuNav";
|
||||
import styles from "./header.module.scss";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<img
|
||||
className={styles.logo}
|
||||
src="/assets/images/Logo-M3Academy.png"
|
||||
alt="Logo M3 Academy"
|
||||
/>
|
||||
<form className={styles.formSearch} action="#">
|
||||
<input
|
||||
type="search"
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder="Buscar..."
|
||||
<header>
|
||||
<div className={styles.containerHeader}>
|
||||
<div className={styles.menuToggle}>
|
||||
<div className={styles.toggleOne}></div>
|
||||
<div className={styles.toggleTwo}></div>
|
||||
<div className={styles.toggleThree}></div>
|
||||
</div>
|
||||
<img
|
||||
className={styles.logo}
|
||||
src="/assets/images/Logo-M3Academy.png"
|
||||
alt="Logo M3 Academy"
|
||||
/>
|
||||
<button type="submit">
|
||||
<img src="/assets/icons/search-icon.svg" alt="Buscar" />
|
||||
</button>
|
||||
</form>
|
||||
<div className={styles.entrarContainer}>
|
||||
<span>Entrar</span>
|
||||
<img src="/assets/icons/cart-icon.svg" alt="Carrinho" />
|
||||
<form className={styles.formSearch} action="#">
|
||||
<input
|
||||
type="search"
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button type="submit">
|
||||
<img src="/assets/icons/search-icon.svg" alt="Buscar" />
|
||||
</button>
|
||||
</form>
|
||||
<div className={styles.entrarContainer}>
|
||||
<span>Entrar</span>
|
||||
<img src="/assets/icons/cart-icon.svg" alt="Carrinho" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MenuNav />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.header {
|
||||
.containerHeader {
|
||||
background: var(--black);
|
||||
// height: 76px;
|
||||
|
||||
@ -7,6 +7,10 @@
|
||||
justify-content: space-between;
|
||||
padding: 0 100px;
|
||||
|
||||
.menuToggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 12.5925%;
|
||||
|
||||
@ -74,3 +78,70 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.containerHeader {
|
||||
padding: 0 16px;
|
||||
padding-top: 25px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"menuToggle logo cart"
|
||||
"search search search";
|
||||
grid-template-columns: 2.7343% 13.2812% 2.7343%;
|
||||
|
||||
.menuToggle {
|
||||
grid-area: menuToggle;
|
||||
display: block;
|
||||
width: 28px;
|
||||
|
||||
.toggleOne,
|
||||
.toggleTwo,
|
||||
.toggleThree {
|
||||
background: var(--white);
|
||||
height: 3.5px;
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
border-radius: 5px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
grid-area: logo;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.formSearch {
|
||||
grid-area: search;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
|
||||
margin: 25px 0;
|
||||
|
||||
input {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
padding-right: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.entrarContainer {
|
||||
grid-area: cart;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -184,29 +184,5 @@ export default function Contato() {
|
||||
)}
|
||||
</Form>
|
||||
</Formik>
|
||||
// <form action="#" className={styles.formContato}>
|
||||
// <h3>Preencha o formulário</h3>
|
||||
|
||||
// <label htmlFor="name">Nome</label>
|
||||
// <input type="text" id="name" placeholder="Seu nome completo" />
|
||||
// <label htmlFor="email">Email</label>
|
||||
// <input type="email" id="email" placeholder="Seu e-mail" />
|
||||
// <label htmlFor="cpf">CPF</label>
|
||||
// <input type="cpf" id="cpf" placeholder="000.000.000-00" />
|
||||
// <label htmlFor="dataNasc">Data de Nascimento</label>
|
||||
// <input type="text" id="dataNasc" placeholder="00.00.0000" />
|
||||
// <label htmlFor="phone">Telefone</label>
|
||||
// <input type="tel" id="phone" placeholder="(00) 00000-0000" />
|
||||
// <label htmlFor="instagram">Instagram</label>
|
||||
// <input type="text" id="instagram" placeholder="@seuuser" />
|
||||
// <div className={styles.containerTermos}>
|
||||
// <label htmlFor="termos">
|
||||
// <span className={styles.required}>* </span>
|
||||
// <span className={styles.termosAcept}>Declaro que li e aceito</span>
|
||||
// </label>
|
||||
// <input type="checkbox" id="termos" />
|
||||
// </div>
|
||||
// <button type="submit">Cadastre-se</button>
|
||||
// </form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,3 +18,18 @@
|
||||
color: var(--gray-500);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.contentInfo {
|
||||
padding: 0;
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,3 +81,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.containerInstitucional {
|
||||
padding: 0 16px;
|
||||
|
||||
.titleInstitucional {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.containerInfo {
|
||||
flex-direction: column;
|
||||
margin-bottom: 80px;
|
||||
nav {
|
||||
min-width: 100%;
|
||||
border: 0;
|
||||
height: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,3 +18,9 @@
|
||||
padding: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.menuNav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,3 +62,36 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.formNewsletter {
|
||||
padding: 16px;
|
||||
|
||||
.containerForm {
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.containerInputNewsletter {
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-top: 16px;
|
||||
padding: 17px 0;
|
||||
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,3 +30,7 @@ code {
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -1,17 +1,50 @@
|
||||
import styles from "./home.module.scss";
|
||||
import { useState } from "react";
|
||||
|
||||
import Footer from "../components/Footer/Footer";
|
||||
import Header from "../components/Header/Header";
|
||||
import Institucional from "../components/Institucional/Institucional";
|
||||
import MenuNav from "../components/MenuNav/MenuNav";
|
||||
import Newsletter from "../components/Newsletter/Newsletter";
|
||||
|
||||
function Home() {
|
||||
const [pageYPosition, setPageYPosition] = useState(0);
|
||||
|
||||
function getPageYAfterScroll() {
|
||||
setPageYPosition(window.scrollY);
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", getPageYAfterScroll);
|
||||
|
||||
const btnScrollTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.containerHome}>
|
||||
<Header />
|
||||
<MenuNav />
|
||||
<Institucional />
|
||||
<Footer />
|
||||
</>
|
||||
{pageYPosition > 140 && (
|
||||
<div className={styles.floatElementsFooter}>
|
||||
<div className={styles.whatsappIcon}>
|
||||
<a href="/">
|
||||
<img src="/assets/icons/whatsapp-icon.svg" alt="WhatsApp" />
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.topoSiteIcon}>
|
||||
<button onClick={btnScrollTop}>
|
||||
<img
|
||||
src="/assets/icons/topo-site-icon.png"
|
||||
alt="Voltar para o topo"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
37
src/pages/home.module.scss
Normal file
37
src/pages/home.module.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.containerHome {
|
||||
position: relative;
|
||||
|
||||
.floatElementsFooter {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 21px;
|
||||
|
||||
width: 2.6562%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.whatsappIcon,
|
||||
.topoSiteIcon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topoSiteIcon {
|
||||
button {
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.containerHome {
|
||||
.floatElementsFooter {
|
||||
width: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user