Olá,
Segue minha solução para o rodapé:
// index.js
import './Rodape.css'
const Rodape = () => {
return (
<section className='rodape'>
<div className='logos'>
<a href='http://facebook.com'><img src='/img/fb.png' alt='Facebook logo'/></a>
<a href='http://twitter.com'><img src='/img/tw.png' alt='Twitter logo'/></a>
<a href='http://instagram.com/'><img src='/img/ig.png' alt='Instagram logo'/></a>
</div>
<img className='logo' src='/img/logo.png' alt='Logo organo' />
<p className='texto'>Desenvolvido por Alura.</p>
</section>
)
}
export default Rodape
// Rodape.css
.rodape {
background-color: #6278F7;
display: flex;
padding: 50px;
justify-content: space-around;
align-items: center;
background-image: url('../../../public/img/fundo.png');
}
.rodape .logos {
size: 80%;
width: 20%;
display: flex;
justify-content: space-around;
}
.rodape .texto {
color: white;
}