PatrickReisSantos/desafio-react-e-typescript-Patrick-Reis-Santos
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona infoAgencia 1280-2500px

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-01-08 14:45:17 -03:00
parent 55538c7348
commit 2aac46544f
4 changed files with 140 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/footer/footer.module.scss
View File

@ -64,6 +64,10 @@
justify-content: center;
align-items: center;
@media (max-width: 375px) {
gap: 11px;
}
.Pci {
@media (min-width: 280px) and (max-width: 1150px) {
height: 28px;

123
src/components/info-agencia/info-agencia.module.scss
View File

@ -1,48 +1,93 @@
.infoAgenciaContainer {
.infoAgencia {
width: 100%;
height: 239px;
display: flex;
}
align-items: center;
.infoAgenciaUl {
display: flex;
gap: 121px;
padding: 50px 100px;
}
.infoAgenciaContainer {
width: 100%;
max-width: 100%;
.socialIcons {
width: 35px;
height: 35px;
}
.infoAgenciaMainContainer {
display: flex;
justify-content: space-between;
margin: 50px 100px;
height: 139px;
.ulStyle {
display: flex;
flex-direction: column;
gap: 12px;
width: 155px;
list-style: none;
padding: 0;
margin: 0;
font-style: normal;
font-weight: 400;
font-size: 12px;
color: #303030;
}
@media (min-width: 2500px) {
height: 197px;
}
.infoAgenciaName {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #303030;
}
.institucionalInfosContainer {
width: 703px;
display: flex;
gap: 121px;
.socialMediaContainer {
display: flex;
flex-direction: column;
padding: 50px;
}
@media (min-width: 2500px) {
gap: 293px;
width: 1531px;
}
.socialMediaIconsContainer {
display: flex;
gap: 10px;
.institucionalInfosUl {
display: flex;
flex-direction: column;
gap: 12px;
width: 155px;
list-style: none;
padding: 0;
margin: 0;
font-style: normal;
font-weight: 400;
font-size: 12px;
color: #303030;
@media (min-width: 2500px) {
font-size: 24px;
width: 315px;
gap: 10px;
}
}
.infoAgenciaName {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #303030;
@media (min-width: 2500px) {
font-size: 28px;
}
}
}
}
.socialMedia {
display: flex;
flex-direction: column;
& span {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #303030;
@media (min-width: 2500px) {
font-size: 28px;
}
}
.socialMediaIconsContainer {
display: flex;
gap: 10px;
.socialIcons {
width: 35px;
height: 35px;
@media (min-width: 2500px) {
width: 70px;
height: 70px;
}
}
}
}
}
}

101
src/components/info-agencia/info-agencia.tsx
View File

@ -8,57 +8,58 @@ import youtube from "./assets/youtube.png";
export function InfoAgencia() {
return (
<div className={style.infoAgenciaContainer}>
<div className={style.infoAgenciaUl}>
<ul className={style.ulStyle}>
<li className={style.infoAgenciaName}>INSTITUCIONAL</li>
<li>Quem somos</li>
<li>Política de Privacidade</li>
<li>Segurança</li>
<li>Seja um Revendedor</li>
</ul>
<ul className={style.ulStyle}>
<li className={style.infoAgenciaName}>DÚVIDAS</li>
<li>Entrega</li>
<li>Pagamento</li>
<li>Trocas e Devoluções</li>
<li>Dúvidas Frequentes</li>
</ul>
<ul className={style.ulStyle}>
<li className={style.infoAgenciaName}>FALE CONOSCO</li>
<li>Atendimento ao Consumidor</li>
<li>(11) 4159 9504</li>
<li>Atendimento Online</li>
<li>(11) 9 9433-8825</li>
</ul>
</div>
<div className={style.socialMediaContainer}>
<div className={style.socialMediaIconsContainer}>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={facebook} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={instagram} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={twitter} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={youtube} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={linkedin} alt=""></img>
</a>
<div className={style.infoAgencia}>
<div className={style.infoAgenciaContainer}>
<div className={style.infoAgenciaMainContainer}>
<div className={style.institucionalInfosContainer}>
<ul className={style.institucionalInfosUl}>
<li className={style.infoAgenciaName}>INSTITUCIONAL</li>
<li>Quem somos</li>
<li>Política de Privacidade</li>
<li>Segurança</li>
<li>Seja um Revendedor</li>
</ul>
<ul className={style.institucionalInfosUl}>
<li className={style.infoAgenciaName}>DÚVIDAS</li>
<li>Entrega</li>
<li>Pagamento</li>
<li>Trocas e Devoluções</li>
<li>Dúvidas Frequentes</li>
</ul>
<ul className={style.institucionalInfosUl}>
<li className={style.infoAgenciaName}>INSTITUCIONAL</li>
<li>Atendimento ao Consumidor</li>
<li>Política de privacidade</li>
<li>Segurança</li>
<li>Seja um revendedor</li>
</ul>
</div>
<div className={style.socialMedia}>
<div className={style.socialMediaIconsContainer}>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={facebook} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={instagram} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={twitter} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={youtube} alt=""></img>
</a>
<a href="https://www.google.com.br/">
{" "}
<img className={style.socialIcons} src={linkedin} alt=""></img>
</a>
</div>
<span>www.loremipsum.com</span>
</div>
</div>
<span>www.loremipsum.com</span>
{/* <div>
<img src={youtube} alt="" />
</div> */}
</div>
</div>
);

2
src/components/main/main-content.tsx
View File

@ -31,7 +31,7 @@ export function MainContent() {
},
{ name: "Contato", content: <CustomForm /> },
];
const [content, setContent] = useState<string | JSX.Element>(arr[2].content);
const [content, setContent] = useState<string | JSX.Element>(arr[0].content);
return (
<div className={style.MainContainer}>
<nav className={style.NavContainer}>