fix: ajusta o main para telas 4k

This commit is contained in:
Leonardo Pereira Rocha 2023-01-20 16:05:35 -03:00
parent 4d52c222a4
commit ac2a81edb9
14 changed files with 253 additions and 13 deletions

View File

@ -0,0 +1,14 @@
import React from "react";
import { MenuFooterMobile } from "./MenuFooterMobile";
import { MenuFooterMobile2 } from "./MenuFooterMobile2";
const FooterTopMobile = () => {
return (
<div>
<MenuFooterMobile />
<MenuFooterMobile2 />
</div>
);
};
export { FooterTopMobile };

View File

@ -5,7 +5,6 @@ import { MenuInfo } from "../components/MenuInfo";
import { FormCustom } from "../components/FormCustom";
import home from "../assets/home.svg";
import seta from "../assets/seta.svg";
import line from "../assets/Line.svg";
const items = [
{
@ -68,9 +67,9 @@ const Main = () => {
return (
<div className={styles.app}>
<div className={styles.mainIcon}>
<img src={home} alt="imagem de uma casa" />
<img src={seta} alt="imagem de uma seta" />
<p>INSTITUCIONAL</p>
<img className={styles.IconHouse} src={home} alt="imagem de uma casa" />
<img className={styles.IconSeta} src={seta} alt="imagem de uma seta" />
<p className={styles.IconText}>INSTITUCIONAL</p>
</div>
<h1 className={styles.mainTitle}>Institucional</h1>
<div className={styles.itemBox}>

View File

@ -0,0 +1,35 @@
import React, { useState } from "react";
import styles from "../style/MenuFooterMobile.module.scss";
const MenuFooterMobile = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className={styles.container}>
<button className={styles.button} onClick={() => setIsOpen(!isOpen)}>
<div className={styles.buttonName}>Institucional</div>{" "}
<div className={styles.butttonOption}>{isOpen ? "-" : "+"}</div>
</button>
{isOpen && (
<ul className={styles.list}>
<a href="/">
<li className={styles.listItem}>Quem Somos</li>
</a>
<a href="/">
<li className={styles.listItem}>Política De Privacidade</li>
</a>
<a href="/">
<li className={styles.listItem}>Segurança</li>
</a>
<a href="/">
<li className={styles.listItem}>Seja Um Revendedor</li>
</a>
</ul>
)}
</div>
);
};
export { MenuFooterMobile };

View File

@ -0,0 +1,35 @@
import React, { useState } from "react";
import styles from "../style/MenuFooterMobile.module.scss";
const MenuFooterMobile2 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className={styles.container}>
<button className={styles.button} onClick={() => setIsOpen(!isOpen)}>
<div className={styles.buttonName}>Dúvidas</div>{" "}
<div className={styles.butttonOption}>{isOpen ? "-" : "+"}</div>
</button>
{isOpen && (
<ul className={styles.list}>
<a href="/">
<li className={styles.listItem}>Entrega</li>
</a>
<a href="/">
<li className={styles.listItem}>Pagamento</li>
</a>
<a href="/">
<li className={styles.listItem}>Trocas e Devoluções</li>
</a>
<a href="/">
<li className={styles.listItem}>Dúvidas Frequentes</li>
</a>
</ul>
)}
</div>
);
};
export { MenuFooterMobile2 };

View File

@ -1,8 +1,9 @@
import React from "react";
import styles from "../style/MenuInfo.module.scss";
const MenuInfo = () => {
return (
<div>
<div className={styles.text}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

View File

@ -1,10 +1,8 @@
import * as Yup from "yup";
export default Yup.object().shape({
name: Yup.string()
.required("*Campo Obrigatório")
.min(3, "*Nome Inválido"),
email: Yup.string().required("*Campo Obrigatório").email("Email Inválido"),
name: Yup.string().required("*Campo Obrigatório").min(3, "*Nome Inválido"),
email: Yup.string().required("*Campo Obrigatório").email("*Email Inválido"),
cpf: Yup.string().required("*Campo Obrigatório"),
telefone: Yup.string().required("*Campo Obrigatório"),
termo: Yup.string().required(""),

View File

@ -8,6 +8,7 @@ import { HeaderMobile } from "../components/HeaderMobile";
import { Newsletter } from "../components/Newsletter";
import { FooterMenu } from "../components/Footer/FooterMenu";
import { FooterBottom } from "../components/Footer/FooterBottom";
import { FooterTopMobile } from "../components/FooterTopMobile";
const Home = () => {
return (
@ -18,6 +19,7 @@ const Home = () => {
<Main />
<Newsletter />
<FooterMenu />
<FooterTopMobile />
<FooterBottom />
</>
);

View File

@ -25,15 +25,33 @@
align-items: center;
margin-left: 100px;
color: #7d7d7d;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 32px;
line-height: 38px;
max-width: 351px;
color: #7d7d7d;
margin-bottom: 20px;
}
}
.accordionTitle.active {
background-color: black;
color: white;
@media (min-width: 2500px) {
}
width: 590px;
height: 58px;
}
.accordionContent {
margin-left: 50px;
width: 748px;
max-height: 50px;
@media (min-width: 2500px) {
margin-left: 150px;
}
}

View File

@ -2,12 +2,13 @@
background: #000;
color: white;
margin-top: 64px;
height: 64px;
.footerBox {
display: flex;
justify-content: space-between;
margin: 0 0 0 100px;
max-width: 80%;
max-width: 100%;
}
.footerText {

View File

@ -1,8 +1,14 @@
.border {
border-top: 1px solid black;
@media (max-width: 1024px) {
margin-bottom: 25px;
}
}
.links_wrapper {
@media (max-width: 1024px) {
display: none;
}
display: flex;
justify-content: space-between;
margin: 50px 0 0 100px;

View File

@ -81,7 +81,6 @@
display: flex;
align-self: center;
}
p,
.linkEnter {
margin: 0 0 0 8px;
font-style: normal;

View File

@ -8,31 +8,73 @@
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 80px;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 48px;
line-height: 56px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
}
h2 {
height: 28px;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
display: flex;
align-items: center;
color: #292929;
@media (min-width: 2500px) {
font-size: 48px;
line-height: 56px;
color: #292929;
}
}
.boxPagamento {
margin-top: -50px;
height: 500px;
@media (min-width: 2500px) {
margin-top: -90px;
}
}
.boxEntrega {
margin-top: -100px;
@media (min-width: 2500px) {
margin-top: -140px;
}
}
.boxTroca {
margin-top: -150px;
@media (min-width: 2500px) {
margin-top: -190px;
}
}
.boxSegurança {
margin-top: -200px;
@media (min-width: 2500px) {
margin-top: -240px;
}
}
.boxContato {
margin-top: -250px;
@media (min-width: 2500px) {
margin-top: -290px;
}
}
.itemBox {
height: 512px;
height: 585px;
}
.mainIcon {
@ -40,12 +82,31 @@
margin-left: 100px;
display: flex;
gap: 10px;
.IconHouse {
@media (min-width: 2500px) {
width: 31.22px;
height: 31.25px;
}
}
.IconSeta {
@media (min-width: 2500px) {
width: 8.9px;
margin-top: 10px;
height: 15.62px;
}
}
p {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #c4c4c4;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
margin: 0;
}
}
}

View File

@ -0,0 +1,52 @@
.container {
margin-bottom: 12px;
}
.button {
padding: 0;
width: 100%;
display: flex;
justify-content: space-between;
border: none;
background: transparent;
.buttonName {
margin-left: 16px;
cursor: pointer;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #303030;
}
.butttonOption {
color: #303030;
width: 7.8px;
height: 8.28px;
cursor: pointer;
margin-right: 16px;
}
}
.list {
list-style-type: none;
padding: 0;
margin-left: 16px;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: #303030;
}
.listItem {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: #303030;
}

View File

@ -0,0 +1,19 @@
.text {
width: 748px;
height: 223px;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: #7d7d7d;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 30px;
color: #7d7d7d;
width: 1680px;
height: 376px;
}
}