[Sugestão] Minha resolução do rodape

eu tenho o index.js

import { Rodape } from "./Rodape";

export default Rodape

Rodape.js

import './Rodape.css'

export const Rodape = ()=>{
    return (
        <footer className='rodape'>
                <dvi className='redes-sociais'>
                    <a href="facebook.com" target="_blank"></a>
                    <img src='/imagens/fb.png' alt='Facebook'/>
                    <a href="twitter.com" target="_blank"></a>
                    <img src='/imagens/tw.png' alt='Twitter'/>
                    <a href="instagram.com" target="_blank"></a>
                    <img src='/imagens/ig.png' alt='Instagram'/>
                </dvi>
                <div className='logo'>
                    <img src='/imagens/logo.png' alt='Logo Organo' />
                </div>
                <div className='desenvolvido'>
                    <p>Desenvolvido por Alura.</p>
                </div>
        </footer>
    )
}

e o css:

:root{
    --primary-color: #fff;
    --background-color: #6278F7;
    --font-family: 'Montserrat', sans-serif;

}

.rodape{
    max-width: 100%;
    background-color: var(--background-color);
    background-image: url('/public/imagens/fundo.png');
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 80px;
}

.rodape .redes-sociais{
    margin: 32px;

}

.redes-sociais img{
    padding-right: 32px;
}

.rodape .logo{
   margin-right: 32px;

}

.rodape .desenvolvido{
    font-family: var(--font-family);
    color: var(--primary-color);
    font-weight: 200;
    margin-right: 0;

}

Das maneiras apresentadas de criar o componente eu gostei mais de utilizar um index.js e outro .js pra o componente. No css eu gosto de utilizar variaveis para cores, fontes e outras coisas. Não sei se é a melhor solução mas fiz sem olhar nenhum material, apenas o que lembrava, nem mesmo olhar outros arquivos do projeto.