BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): adicionando header-bottom

Browse Source 
home
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-12-29 18:08:31 -03:00
parent c89199f762
commit 87ee812346
21 changed files with 215 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/imgs/boleto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 816 B

BIN
src/assets/imgs/diners.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/imgs/elo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 888 B

BIN
src/assets/imgs/hiper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 745 B

BIN
src/assets/imgs/m3-logo-footer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 448 B

BIN
src/assets/imgs/master.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 739 B

BIN
src/assets/imgs/pagseguro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 888 B

BIN
src/assets/imgs/visa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1000 B

BIN
src/assets/imgs/vtex-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 552 B

BIN
src/assets/imgs/vtex-pci-200.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

5
src/components/Footer/Footer.module.scss Normal file
View File

@ -0,0 +1,5 @@
.footer {
position: absolute;
bottom: 0;
width: 100%;
}

12
src/components/Footer/Footer.tsx Normal file
View File

@ -0,0 +1,12 @@
import { FooterBottom } from './FooterBottom/FooterBottom';
import styles from './Footer.module.scss';
const Footer = () => {
return (
<footer className={styles['footer']}>
<FooterBottom />
</footer>
)
}
export { Footer }

82
src/components/Footer/FooterBottom/FooterBottom.module.scss Normal file
View File

@ -0,0 +1,82 @@
@import '../../../variaveis';
.footer__bottom {
width: calc(100% - 200px);
height: 34px;
padding: 15px 100px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-black;
&__paragrafo {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
color: $color-white;
}
&__payments {
display: flex;
justify-content: center;
align-items: center;
&__cards{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
&__card {
margin-right: 12px;
img {
width: 35px;
}
}
}
&__divider {
width: 1px;
height: 24px;
background: $color-primary-400;
margin-right: 12px;
}
}
&__development {
display: flex;
align-items: center;
justify-content: center;
&__logo{
margin-right: 13px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
span {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
color: $color-white;
margin-right: 13px;
}
img {
height: 16px;
}
}
}
}

66
src/components/Footer/FooterBottom/FooterBottom.tsx Normal file
View File

@ -0,0 +1,66 @@
import styles from './FooterBottom.module.scss'
import boleto from '../../../assets/imgs/boleto.png';
import diners from '../../../assets/imgs/diners.png';
import elo from '../../../assets/imgs/elo.png';
import hiper from '../../../assets/imgs/hiper.png';
import master from '../../../assets/imgs/master.png';
import pagseguro from '../../../assets/imgs/pagseguro.png';
import visa from '../../../assets/imgs/visa.png';
import vtex from '../../../assets/imgs/vtex-pci-200.png';
import vtexLogo from '../../../assets/imgs/vtex-logo.png';
import m3Logo from '../../../assets/imgs/m3-logo-footer.png';
const FooterBottom = () => {
return (
<div className={styles['footer__bottom']}>
<p className={styles['footer__bottom__paragrafo']}>
Lorem ipsum dolor sit amet, consectetur adipiscing <br/>
elit, sed do eiusmod tempor
</p>
<div className={styles['footer__bottom__payments']}>
<ul className={styles['footer__bottom__payments__cards']}>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={master} alt="Cartão Mastercard" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={visa} alt="Cartão Visa" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={diners} alt="Cartão American Express" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={elo} alt="Cartão Elo" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={hiper} alt="Cartão Hipercard" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={pagseguro} alt="PagSeguro" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={boleto} alt="Boleto" />
</li>
</ul>
<div className={styles['footer__bottom__payments__divider']}></div>
<ul className={styles['footer__bottom__payments__security']}>
<li className={styles['footer__bottom__payments-cards__card']}>
<img src={vtex} alt="Vtex PCI - SECURITY" />
</li>
</ul>
</div>
<div className={styles['footer__bottom__development']}>
<a className={styles['footer__bottom__development__logo']} href="https://vtex.com/" rel='noreferrer' target="_blank" title="M3">
<span>Powered By</span>
<img src={vtexLogo} alt='Logo Vtex'/>
</a>
<a className={styles['footer__bottom__development__logo']} href="http://m3ecommerce.com/" rel='noreferrer' target="_blank" title="VTEX">
<span>Developed By</span>
<img src={m3Logo} alt='Logo M3'/>
</a>
</div>
</div>
)
}
export { FooterBottom }

31
src/components/Header/Header.tsx
View File

@ -1,31 +1,12 @@
import logo from '../../assets/imgs/m3-acdemy-logo.png'
import cart from '../../assets/imgs/cart-icon-header.png'
import styles from './Header.module.scss'
import { HeaderMobile } from "./HeaderMobile/HeaderMobile"
import { HeaderDesktop } from './HeaderDesktop/HeaderDesktop'
const Header = () => {
return (
<header className={styles['header']}>
<div className={styles['header-top']}>
<img src={logo} alt="Logo M3" className={styles['header-top__logo']}/>
<input placeholder='Buscar...' className={styles['header-top__input']}/>
<div className={styles['header-top__log-cart']}>
<a href='/' className={styles['header-top__log']}>
ENTRAR
</a>
<a href='/' className={styles['header-top__cart']}>
<img src={cart} alt='Img do Carrinho' />
</a>
</div>
</div>
<div className={styles['header-bottom']}>
<nav className={styles['header-bottom__list']}>
<a href="/" className={styles['header-bottom__list__items-menu']}>CURSOS</a>
<a href="/" className={styles['header-bottom__list__items-menu']}>SAIBA MAIS</a>
<a href="/" className={styles['header-bottom__list__items-menu']}>INSTITUCIONAIS</a>
</nav>
</div>
</header>
<>
<HeaderDesktop />
<HeaderMobile />
</>
)
}

4
src/components/Header/Header.module.scss → src/components/Header/HeaderDesktop/HeaderDesktop.module.scss
View File

@ -1,4 +1,4 @@
@import '../../_variaveis.scss';
@import '../../../variaveis';
.header {
width: 100%;
@ -39,7 +39,7 @@
width: 25%;
height: 12px;
background-image: url("../../assets/imgs/search-icon-header.png");
background-image: url("../../../assets/imgs/search-icon-header.png");
background-size: 18px;
background-repeat: no-repeat;
background-position: bottom 50% right 16px;

32
src/components/Header/HeaderDesktop/HeaderDesktop.tsx Normal file
View File

@ -0,0 +1,32 @@
import logo from '../../../assets/imgs/m3-acdemy-logo.png'
import cart from '../../../assets/imgs/cart-icon-header.png'
import styles from './HeaderDesktop.module.scss'
const HeaderDesktop = () => {
return (
<header className={styles['header']}>
<div className={styles['header-top']}>
<img src={logo} alt="Logo M3" className={styles['header-top__logo']}/>
<input placeholder='Buscar...' className={styles['header-top__input']}/>
<div className={styles['header-top__log-cart']}>
<a href='/' className={styles['header-top__log']}>
ENTRAR
</a>
<a href='/' className={styles['header-top__cart']}>
<img src={cart} alt='Img do Carrinho' />
</a>
</div>
</div>
<div className={styles['header-bottom']}>
<nav className={styles['header-bottom__list']}>
<a href="/" className={styles['header-bottom__list__items-menu']}>CURSOS</a>
<a href="/" className={styles['header-bottom__list__items-menu']}>SAIBA MAIS</a>
<a href="/" className={styles['header-bottom__list__items-menu']}>INSTITUCIONAIS</a>
</nav>
</div>
</header>
)
}
export { HeaderDesktop }

5
src/components/HeaderMobile/HeaderMobile.module.scss → src/components/Header/HeaderMobile/HeaderMobile.module.scss
View File

@ -1,4 +1,4 @@
@import '../../_variaveis.scss';
@import '../../../variaveis';
.header-mobile {
display: none;
@ -9,7 +9,6 @@
@media #{$mq-tablet}, #{$mq-mobile} {
display: block;
}
&__top {
@ -38,7 +37,7 @@
height: 12px;
margin-top: 25px;
background-image: url("../../assets/imgs/search-icon-header.png");
background-image: url("../../../assets/imgs/search-icon-header.png");
background-size: 18px;
background-repeat: no-repeat;
background-position: bottom 50% right 16px;

8
src/components/HeaderMobile/HeaderMobile.tsx → src/components/Header/HeaderMobile/HeaderMobile.tsx
View File

@ -2,10 +2,10 @@ import { useState } from 'react';
import styles from './HeaderMobile.module.scss'
import { MenuMobile } from '../MenuMobile/MenuMobile';
import hamburger from '../../assets/imgs/menu-hamburger-header.png'
import logo from '../../assets/imgs/m3-acdemy-logo.png'
import cart from '../../assets/imgs/cart-icon-header.png'
import { MenuMobile } from '../../MenuMobile/MenuMobile';
import hamburger from '../../../assets/imgs/menu-hamburger-header.png'
import logo from '../../../assets/imgs/m3-acdemy-logo.png'
import cart from '../../../assets/imgs/cart-icon-header.png'
const HeaderMobile = () => {
const [menuIsVisible, setMenuIsVisible] = useState(false);

2
src/components/MenuMobile/MenuMobile.scss
View File

@ -1,4 +1,4 @@
@import '../../variaveis';
@import '../../variaveis.scss';
.container-menu {
position: absolute;

6
src/pages/Home.tsx
View File

@ -1,15 +1,15 @@
import React from 'react';
import { Footer } from '../components/Footer/Footer';
import { Header } from '../components/Header/Header';
import { HeaderMobile } from '../components/HeaderMobile/HeaderMobile';
import './Home.scss';
function Home() {
return (
< >
<>
<Header />
<HeaderMobile />
<Footer />
</>
);
}