[Dúvida] Aonde eu coloco a responsividade no projeto?

Olá, Kayo.

Tudo bem?

Pelo que entendi, você está com dúvidas sobre onde aplicar a constante Container que define os estilos responsivos utilizando styled-components.

No caso, você pode utilizar essa constante Container em qualquer componente da sua aplicação onde você queira aplicar esses estilos responsivos. Por exemplo, se você tem um componente App e deseja que ele tenha esses estilos, você pode importar a constante Container no arquivo do componente App e utilizá-la no código.

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  /* Estilos para todas as telas */
  width: 100%;

  @media (min-width: 768px) {
    /* Estilos para telas a partir de 768px */
    width: 80%;
  }

  @media (min-width: 1200px) {
    /* Estilos para telas a partir de 1200px */
    width: 60%;
  }
`;

const App = () => {
  return (
    <Container>
      {/* Conteúdo do componente */}
    </Container>
  );
}

export default App;

Dessa forma, o componente App terá os estilos definidos na constante Container e esses estilos serão aplicados de forma responsiva, de acordo com as regras definidas nas media queries.

Espero ter ajudado e bons estudos!

No caso eu teria que ir em cada componente da minha aplição e colocar assim como está o figma, para tornar a mesma responsiva? https://www.figma.com/file/2LFVvhAwy08j6kCaPcnOzs/SpaceApp-%7C-React%3A-arquivos-est%C3%A1ticos-com-integra%C3%A7%C3%A3o-de-conceito-%C3%A1rea-de-component?type=design&mode=design