Limpando estrutura da aplicação

Conceitos

Arquivos para Download (Layout, imagens e CSS)

Construção do HTML da primeira página

Limpar tudo o que usamos para explicação dos conceitos, Header e toda a parte html e useState no componente App

→ Copiar o o CSS(dowload) e colocar dentro do App.css

:root {
  --primary-color: #34CB79;
  --title-color: #322153;
  --text-color: #6C6C80;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #F0F0F5;
  -webkit-font-smoothing: antialiased;
  color: var(--text-color);
}

body, input, button {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--title-color);
  font-family: Ubuntu;
}

→ Pegar as fonts Roboto (regular) e Ubunto (bold) e inserir no index.html de /public

<link href="<https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@700&display=swap>" rel="stylesheet">

Agora vamos criar a nossa primeira página

→ Dentro de /src criar /pages e dentro dela /Home e index.tsx. Vamos adotar o padrão de que para cada página criamos uma pasta e um index dentro, assim ficará mais fácil isolar o css referente a cada página