Styled Components

Minha resposta ao desafio ficou assim:

import styled from 'styled-components'
import fotoDestaque from './FotoDestaque.png'

export default function Banner() {

    const BannerEstilizado = styled.div`
        width: 100%;
        height: 328px;
        border-radius: 20px;
        opacity: 0.8;
        background: url(${fotoDestaque});
        background-size: cover;
        padding: 92px 64px;

        p {
            font-size: 40px;
            font-weight: 400;
            width: 300px;
            line-height: 1.2;
            user-select: none;
        }
    `

    return (
        <BannerEstilizado>
            <p>A galeria mais completa de fotos do espaço!</p>
        </BannerEstilizado>
    )
}

Mas para posicioná-lo direito, tive que fazer algumas mudanças no App.jsx. Ele ficou assim:

import styled from "styled-components"
import EstilosGlobais from './componentes/EstilosGlobais'
import Cabecalho from "./componentes/Cabecalho"
import BarraLateral from "./componentes/BarraLateral"
import Banner from "./componentes/Banner"

export default function App() {

  const FundoGradiente = styled.div`
    background: linear-gradient(175deg, #041833 4.16%, #04244F 48%, #154580 96.76%);
    width: 100%;
    min-height: 100dvh;
  `

  const Container = styled.div`
    width: min(90vh, 1440px);
    margin-inline: auto;
    display: flex;
    gap: 24px;
  `

  
  return (
    <FundoGradiente>
      <EstilosGlobais />
      <Cabecalho />
      <Container>
        <BarraLateral />
        <Banner />
      </Container>
    </FundoGradiente>
  )
}