Desafio: criando componentes

De forma temporaria, adicionado a pagina inicial um height: 83vh;

codigo footer

import styles from './Rodape.module.css'

const Rodape = () =>{
  return(
    <footer className={styles.rodape}>
      <h2>Desenvolvido por Alura</h2>
    </footer>
  )
}
export default Rodape

.rodape {
    display: flex;
    justify-content: center;
    background-color: var(--preto);
}

.rodape h2 {
    font-weight: 400;
    font-size: 18px;
    color: var(--branco);
}

Minha solução com styled-components

import styled from "styled-components";

const Rodape = () =>{
  return(
    <FooterStyle>
      <h2>Desenvolvido por Alura</h2>
    </FooterStyle>
  )
}
export default Rodape


const FooterStyle = styled.footer`
    display: flex;
    justify-content: center;
    background-color: var(--preto);

    h2 {
        font-weight: 400;
        font-size: 18px;
        color: var(--branco);
    }
`