Minha resolução do projeto

---componente rodapé---

import './Rodape.css'

const Rodape = () => {
  return (
    <footer className='container'>
      <div className="social-links">
        <a href="www.facebook.com/"><img src="/imagens/fb.png" alt="logo facebok" /></a>
        <a href="www.twitter.com/"><img src="/imagens/tw.png" alt="logo twitter" /></a>
        <a href="https://www.instagram.com/"><img src="/imagens/ig.png" alt="logo instagram" /></a>
      </div>
      <img className='image-logo' src="/imagens/logo.png" alt="logo organo" />
      <p>Desenvolvido por Alura</p>
    </footer>
  )
}

export default Rodape

---CSS---

.container { display: flex; align-items: center; justify-content: space-around; background-color: #6278f7; background-image: url(/public/imagens/fundo.png); background-position: top; background-size: cover; padding: 50px; color: #fff; }

.social-links { display: flex; gap: 20px; }

.social-links img { width: 20px; }

.image-logo { width: 100px; }

Projeto incrível, muito bacanas os desafio. Parabéns todos envolvidos, essas práticas são muito importantes. Foi legal criar componente com que foi aprendido.

Essa foi minha solução, pelo que vi está diferente, mais importante e conhecimento adquirido e ter alcançado o resultado proposto.

Obrigado Vinícios e Paulo!