[Sugestão] Resolução de cabeçalho e barra lateral

Cabeçalho:

import styled from 'styled-components'

const HeaderEstilizado= styled.header`
    padding:60px 0;
    display: flex;
    img{
      width: 212px;
    }
`

const Cabecalho = () => {
  return (
    <HeaderEstilizado>
        <img src='imagens/logo.png'/>
    </HeaderEstilizado>
  )
}


export default Cabecalho

Barra Lateral:

import styled from "styled-components"
import LinkBarraLateral from "../LinkBarraLateral" 

const ListaLinks = [
    {
        titulo:'Inicio',
        iconeAtivo:'./icones/home-ativo.png',
        iconeInativo:'./icones/home-inativo.png',
        ativo:true
    },
    {
        titulo:'Mais Vistas',
        iconeAtivo:'./icones/mais-vistas-ativo.png',
        iconeInativo:'./icones/mais-vistas-inativo.png',
        ativo:false
    },
    {
        titulo:'Mais Curtidas',
        iconeAtivo:'./icones/mais-curtidas-ativo.png',
        iconeInativo:'./icones/mais-curtidas-inativo.png',
        ativo:false
    },
    {
        titulo:'Novas',
        iconeAtivo:'./icones/novas-ativo.png',
        iconeInativo:'./icones/novas-inativo.png',
        ativo:false
    },
    {
        titulo:'Surpreenda-me',
        iconeAtivo:'./icones/surpreenda-me-ativo.png',
        iconeInativo:'./icones/surpreenda-me-inativo.png',
        ativo:false
    },
]

const ListaEstilizada = styled.ul`
    display: flex;
    gap: 28px;
    flex-direction: column;
    list-style: none;
    padding:0px;
    margin: 0px;
    width: 212px;

`

const BarraLateral = () => {
  return (
    <aside>
        <nav>
            <ListaEstilizada>
                {ListaLinks.map((lista,index) => <LinkBarraLateral 
                    key={index} 
                    iconeAtivo={lista.iconeAtivo} 
                    iconeInativo={lista.iconeInativo} 
                    titulo={lista.titulo} 
                    ativo={lista.ativo}/>)}
            </ListaEstilizada>
        </nav>
    </aside>
  )
}

export default BarraLateral

Banner:

// import ImgBanner from './public/banner.jpeg'

import styled from "styled-components"

const ImgBanner = styled.figure`
  border-radius: 20px;
  display:flex;
  align-items:center;
  flex-grow:1;
  min-height: 328px;
  max-width:100%;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;

`

const Img = styled.img`
  width: 100%;
  max-height: 328px;
  min-height: 328px;
  border-radius: 20px;
  object-fit: cover;
  transform:scaleX(-1);
`

const FigureCap = styled.figcaption`
    position: absolute;
    z-index: 2;
    color: #fff;
    font-size: 40px;
    width: 300px;
    margin: 0;
    padding: 92px 64px;
    line-height: 48px;
`

const Banner = ({ texto, bannerImage}) => {
  return (
    <>
      <ImgBanner className="bannerImage" $bannerImage={bannerImage}>
        <Img src={bannerImage}>

        </Img>
        <FigureCap>
          {texto}
          
        </FigureCap>
      </ImgBanner>
    </>
  )
}

export default Banner