Desafio banner

Olá, Ariel! Tudo bem?

Para criar um menu lateral ao lado de um banner, você pode usar styled-components para organizar seus componentes em um layout flexível.

Vou te mostrar um exemplo de como você pode fazer isso:

import styled from "styled-components";

const Container = styled.div`
  display: flex;
`;

const Sidebar = styled.div`
  width: 250px;
  background-color: #1a1a2e;
  color: #fff;
  padding: 20px;
`;

const StyledBanner = styled.div`
  flex: 1;
  position: relative;
`;

const StyledImagem = styled.img`
  width: 100%;
  border-radius: 20px;
`;

const StyledTitle = styled.h1`
  position: absolute;
  padding: 64px;
  font-weight: 400;
  font-size: 40px;
  color: #FFFFFF;
  width: 300px;
`;

const App = () => {
  return (
    <Container>
      <Sidebar>
        <h2>Menu</h2>
        <ul>
          <li>Início</li>
          <li>Mais vistas</li>
          <li>Mais curtidas</li>
          <li>Novas</li>
          <li>Surpreenda-me</li>
        </ul>
      </Sidebar>
      <StyledBanner>
        <StyledImagem src="images/Foto destaque.png" alt="Foto destaque" />
        <StyledTitle>A galeria mais completa de fotos do espaço!</StyledTitle>
      </StyledBanner>
    </Container>
  );
};

export default App;

Neste exemplo, o Container é um div flexível que contém o Sidebar e o StyledBanner.

O Sidebar é fixo em largura e o StyledBanner ocupa o restante do espaço disponível.

Espero ter ajudado e fico à disposição se precisar.

Abraço e bons estudos!