Utilizei um array de objetos para tentar diminuir o código JSX repetido.
const Rodape = () =>
{
const redesSociais = [
{
nome: "Facebook",
src: "/imagens/fb.png",
href: "https://facebook.com"
},
{
nome: "Twitter",
src: "/imagens/tw.png",
href: "https://twitter.com"
},
{
nome: "Instagram",
src: "/imagens/ig.png",
href: "https://instagram.com"
}
];
return (
<footer className='redesSociais'>
<section>
<ul className='listaDeRedes'>
{redesSociais.map((rede) => {
return (
<li key={rede.nome}>
<a href={rede.href} target='_blank'>
<img src={rede.src} alt={rede.nome}></img>
</a>
</li>
)
})}
</ul>
</section>
O restante do footer é praticamente igual.