feat: finish docs

apps/www/components/atoms/Header.vue

@@ -76,9 +76,9 @@ onMounted(() => {
           <nuxt-link to="/escreva-cursos">
             <AtomsHeaderLink title="Escreva cursos" />
           </nuxt-link>
-
-          <!-- <AtomsHeaderLink title="Documentação" /> -->
-
+          <nuxt-link to="/creators/estruturando-um-curso">
+            <AtomsHeaderLink title="Docs" />
+          </nuxt-link>
           <UPopover
             :popper="{ placement: 'bottom' }"
             class="[&>*]:block [&>*]:md:inline-flex"

apps/www/content/1.creators/1.estruturando-um-curso.md

@@ -4,6 +4,12 @@ description: Confira as melhores práticas para estruturar um curso e fazer os a
 icon: code-branch
 ---
 
+## Antes de tudo 👀
+
+Todos os cursos da menthor são open-source, isso significa que precisamos disponibilizar de alguma forma para as pessoas acessarem. Nossa escolha foi hospedar no GitHub, que é a plataforma que nosso time interno tem mais facilidade de trabalhar.
+
+Tudo o que for fazer como creator você precisará de uma conta no GitHub, então [clique aqui para criar a sua](https://github.com/signup?ref=menthor) antes de começar.
+
 ## Como estruturar um curso do zero 🤔
 
 O ideal para nós é que você escreva um curso da maneira que você se sinta mais confortável. Caso você esteja sem ideia ou precisa de uma ajuda para estruturar seu curso, acompanhe as dicas abaixo.
@@ -14,7 +20,7 @@ A primeira coisa que recomendamos para todos os creators é se basear nas trilha
 
 As trilhas do roadmap.sh são mais para você ter uma referêncial de material e tópicos para ensinar, então vamos para um exemplo.
 
-### Exemplo: Pensando na estrutura de um curso de CSS 🎨
+## Exemplo: Pensando na estrutura de um curso de CSS 🎨
 
 Primeiramente você vai abrir a [trilha de frontend](https://roadmap.sh/frontend) e vai identificar o tópico de CSS como na imagem abaixo.
 
@@ -24,7 +30,7 @@ Você pode perceber que temos um tópico para CSS básico, criando layouts e sit
 
 Em vez de ler todos os materiais recomendados, tenta passar o olho e identificar o que cada material ensina de melhor.
 
-### Abrindo uma issue no repositório da menthor 🐛
+## Abrindo uma issue no repositório da menthor 🐛
 
 Depois de ter escolhido um curso para lecionar e finalizado a estrutura, agora você vai abrir a sugestão do curso dentro do repositório de cursos da menthor.
 
@@ -81,4 +87,4 @@ Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
 ```
 
-🎉 Parabéns! Agora que a sugestão do curso está criada é só começar a escrever.
+> **Pronto, agora sua sugestão de curso está criada!** Lembre-se que nós poderemos sugerir mudanças na estrutura ou recomendar mais materiais, então fique atento à sua issue.

apps/www/content/1.creators/2.arquivos-e-pastas.md

@@ -0,0 +1,78 @@
+---
+title: Arquivos e Pastas
+description: Veja como fazer a estrutura inicial do curso, tópicos e aulas dentro da menthor.
+icon: folder-open
+---
+
+## Instalando o VSCode ⌨️
+
+Fique à vontade para usar seu editor de texto de preferência, mas, para facilitar a vida de quem não tem muita experiência, vamos recomendar usar o Visual Studio Code.
+
+Para começar, [clique aqui para baixar o VSCode](https://code.visualstudio.com/download) e selecione a opção de acordo com seu sistema operacional.
+
+Depois de instalar o VSCode, você vai precisar instalar o Git. Então [clique aqui para fazer download](https://git-scm.com/downloads) e instale também de acordo com seu sistema operacional.
+
+> O VSCode é um editor de texto, é tipo o Word só que voltado para programadores. Já o Git é o que vai te ajudar a enviar suas atualizações para o GitHub, ou seja, você vai conseguir salvar o seu código usando comandos no terminal.
+
+## Fazendo fork do repositório 🍴
+
+A primeira coisa que precisamos fazer para escrever uma aula é baixar o repositório, isso significa que você vai ter acesso à todos os cursos e vai começar a escrever o seu no mesmo padrão dos cursos que já existem.
+
+Para isso, entre no [repositório de cursos](https://github.com/menthorlabs/courses) e clique em Fork (imagem abaixo).
+
+![Fazendo um fork do repositório de cursos da menthor](https://menthor-content.s3.sa-east-1.amazonaws.com/7c0b3834-458f-4cb6-a7d7-bf294c414f13)
+
+Depois disso só clicar em **Create fork**.
+
+> Ao criar um **fork** você está literalmente copiando um repositório público para o seu GitHub pessoal, então você pode fazer mudanças à vontade nesse repositório pessoal antes de abrir uma pull request.
+
+Copiar a url do seu repositório para fazer um clone no seu computador clicando aqui:
+
+![Fazendo um clone do repositório de cursos da menthor](https://menthor-content.s3.sa-east-1.amazonaws.com/4c8b88d7-a22c-4acc-9494-d74c9e8bb743)
+
+Agora abra o VSCode e abra o terminal pressionando <kbd>Ctrl</kbd> + <kbd>'</kbd>. Então digite o comando `git clone url_que_vc_copiou`, depois `cd courses` para acessar a pasta de cursos clonada e depois um `code .` para abrir os cursos em outra aba do VSCode.
+
+## Criando a estrutura de pastas 📂
+
+Para facilitar o ensino de como você deve estruturar as pastas, vou seguir o mesmo exemplo do tópico anterior da estrutura do curso de CSS Básico. Então faz de conta que o curso que estamos criando tem esses tópicos e essas aulas:
+
+**Tópico 1: Introdução**
+- Aula 1: O que você vai aprender
+- Aula 2: Antes de começar
+
+**Tópico 2: CSS Básico**
+- Aula 1: Criando o primeiro estilo
+- Aula 2: Diferença de id e classe
+- Aula 3: Principais propriedades
+
+Para isso, você vai abrir a pasta content e criar os arquivos nessa estrutura:
+
+![Estrutura de arquivos ao criar um curso na menthor](https://menthor-content.s3.sa-east-1.amazonaws.com/e5e2f40f-9a6b-40ca-91fe-0eae02d8eaed)
+
+Então aqui nós temos a pasta "pai" do curso chamada `css-basico`, dentro dela temos os dois tópicos chamados `1.introducao` e `2.css-basico` e dentro de cada tópico temos os arquivos markdown que vamos escrever as aulas.
+
+Perceba que em todas as pastas possuem um arquivo `_dir.yml`, esse arquivo contém algumas informações de contempla o curso em si ou um tópico. O `_dir.yml` dos tópicos só contém o nome do tópico (que vai aparecer na plataforma), já o do curso contém algumas informações:
+
+- **image:** Imagem do curso (nós usamos um prompt para o midjourney gerar imagens semelhantes, solicite uma imagem no canal `#creators`)
+- **title:** Nome do curso (máximo 32 caracteres)
+- **description:** Descrição do curso (máximo 120 caracteres)
+- **tags:** Aqui vai ser um array que pode conter os seguintes valores (ethers, github, html, nuxt, playwright, solidity, supabase, tailwind, turborepo, vercel, vue), se precisar de um valor que não tem aqui (ex: react) nos sinalize no canal do discord `#creators`
+- **areas:** Aqui vai ser um array que pode conter os seguintes valores (front-end, back-end, devops, full-stack, android, postgresql, ai, blockchain, qa, ux, interview)
+- **level:** Aqui vai ser um dos seguintes leveis (easy, intermediate, advanced, expert)
+- **discordRole:** Aqui vai ser o id do canal do discord para os alunos tirarem dúvidas (solicite no canal `#creators`)
+
+> Se você não tem acesso ao canal `#creators` no nosso discord, [entre no nosso discord](https://discord.gg/8BCByyXxq8) e pingue @Bernardo Simonassi no canal #geral.
+
+Então seu arquivo `_dir.yml` dentro da pasta do curso vai ficar mais ou menos assim:
+
+```md
+image: https://raw.githubusercontent.com/menthorlabs/courses/main/images/html-basico/html-course.png
+title: CSS, Flexbox e Grid
+description: Estilize sites e aplicações de forma profissional
+tags: ["html", "css"]
+areas: ["front-end"]
+level: easy
+discordRole: "1154384585937916075"
+```
+
+> **Parabéns, agora a estrutura do seu curso está pronta!** Se algo não ficou muito claro não deixe de nos chamar no discord.

apps/www/content/1.creators/3.escrevendo-aulas.md

@@ -0,0 +1,83 @@
+---
+title: Escrevendo Aulas
+description: Entenda todos os detalhes na hora de escrever as aulas em markdown.
+icon: feather
+---
+
+## Estrutura inicial da aula 🚀
+
+Todas as aulas, ou seja, os arquivos com extensão `.md` podem ter essas três propriedades:
+
+- **title**: Título da aula (sugerimos no máximo 32 caracteres)
+- **submissionDescription**: Descrição da tarefa
+- **submissionContent**: Tipo de tarefa na qual deve ser **Image** (enviar imagem) ou **Content** (escrever um texto)
+
+As propriedades `submissionDescription` e `submissionContent` são opcionais, então apague elas completamente se não quiser colocar tarefa numa aula específica.
+
+Uma aula sem tarefa deve seguir essa estrutura:
+
+```md
+---
+title: Título da aula
+---
+
+Conteúdo da aula em markdown
+```
+
+Uma aula com tarefa de **enviar imagem** deve seguir a seguinte estrutura:
+
+```md [1.criando-o-primeiro-estilo.md]
+---
+title: Criando o primeiro estilo
+submissionDescription: Estilize um botão html e envie um print de como ficou
+submissionContent: Image
+---
+
+Conteúdo da aula em markdown
+```
+
+Uma aula com tarefa de **escrever um texto** deve seguir a seguinte estrutura:
+
+```md [2.diferenca-de-id-e-classe.md]
+---
+title: Diferença de id e classe
+submissionDescription: Explique qual a diferença de id ao criar estilos para as tags HTML
+submissionContent: Content
+---
+
+Conteúdo da aula em markdown
+```
+
+## Escrevendo aulas com markdown 🤯
+
+[Markdown](https://medium.com/walternascimentobarroso-pt/curso-r%C3%A1pido-de-markdown-4af49e3bfa65) é um tipo de sintaxe que ajuda a estilizar o conteúdo sem precisar de uma interface tipo o Word ou Google Docs, ou seja, somente com texto você consegue adicionar negrito, itálico, bloco de código, títulos, etc.
+
+> Confira todos os principais elementos markdown para te ajudar a escrever as aulas [clicando aqui](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).
+
+### Adicionando imagens 🖼️
+
+Ao se tornar um creator, você terá acesso exclusivo à página de creators dentro da menthor. Dentro dessa página você terá 10 GB gratuitos de armazenamento para subir imagens, então todas as imagens das aulas você deverá subir lá.
+
+> Caso ainda não tenha acesso à aba de creators dentro da menthor, pingue o **@Bernardo Simonassi** no discord e solicite.
+
+Ao fazer upload da imagem, você terá a opção de copiar a url:
+
+![Copiando a url de uma imagem na menthor.io](https://menthor-content.s3.sa-east-1.amazonaws.com/9d655307-a276-442c-b149-3fa01623da68)
+
+Depois de fazer isso é só usar a url com o comando markdown:
+
+```md
+![Descrição da imagem](url-da-imagem)
+```
+
+### Adicionando vídeos 🎥
+
+Nós recomendamos que faça upload dos seus vídeos em alguma plataforma como vimeo ou youtube que dê para compartilhar um iframe.
+
+Para vídeo de youtube, por exemplo, seria só adicionar o iframe dentro da aula:
+
+```md
+<iframe width="560" height="315" src="https://www.youtube.com/embed/1hHPZaUM78k?si=HT4uodqNdgWXKfBf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+```
+
+> **Show, agora você tem tudo o que precisa para escrever as aulas!** 

apps/www/content/1.creators/4.finalizando-o-curso.md

@@ -0,0 +1,37 @@
+---
+title: Finalizando o Curso
+description: Confira essas dicas ao terminar de escrever todas as aulas e finalizar o curso para a menthor.
+icon: tasks
+---
+
+## Salve as atualizações constantemente 💾
+
+Lembre-se de sempre salvar seu progresso de escrita do curso no GitHub, para isso é só rodar os três comandos abaixo em sequência no terminal:
+
+1. `git add .`
+2. `git commit -m "curso atualizado"`
+3. `git push`
+
+Esses comandos faz com que as atualizações que fez na sua máquina sejam salvas no GitHub, ou seja, serão salvas na nuvem e você poderá acessar novamente caso formate o computador por exemplo.
+
+Sempre que fizer isso você poderá ver como o seu markdown será renderizado e **corrigir os bugs antes de enviar para revisão**. Para isso é só ir nos seus repositórios do GitHub, abrir um arquivo `.md` e visualizar como foi renderizado lá.
+
+<a href="https://menthor-content.s3.sa-east-1.amazonaws.com/0411ddab-acf2-4190-9280-e9fbf8c28010" target="_blank">
+<img
+  src="https://menthor-content.s3.sa-east-1.amazonaws.com/0411ddab-acf2-4190-9280-e9fbf8c28010"
+  alt="Curso da menthor renderizado no GitHub"
+  width="100%"
+/>
+</a>
+
+## Finalizando o curso e enviando para revisão
+
+Para enviar o curso para revisão, você deverá [abrir as pull requests da menthor](https://github.com/menthorlabs/courses/pulls), clicar em **New pull request** e seguir as seguintes etapas:
+
+1. Clique em compare accross forks
+2. Selecione o seu repositório com o seu fork
+3. Clique em create pull request
+
+![Como enviar um curso novo para revisão](https://menthor-content.s3.sa-east-1.amazonaws.com/ce0fc545-b350-4152-a60f-3204b46b77ee)
+
+> **Incrível!** Agora você enviou o curso para revisão e vamos tentar dar todos os feedbacks de melhoria em até uma semana. Caso ninguém tenha feito a revisão ainda, pingue o **@Bernardo Simonassi** no discord da menthor.

apps/www/content/1.creators/5.suporte-para-alunos.md

@@ -0,0 +1,19 @@
+---
+title: Suporte para Alunos
+description: Entenda como os alunos vão tirar dúvidas sobre as aulas do seu curso.
+icon: life-ring
+---
+
+## Todo o suporte será feito através do Discord
+
+O nosso objetivo é tirar a carga de dar suporte para os alunos para os creators. Isso significa que **qualquer creator ou aluno pode tirar as dúvidas de outro aluno**, ou seja, é a comunidade se ajudando da melhor maneira.
+
+Isso funciona da seguinte forma, dentro da menthor os alunos conseguem se **matricular** em cada curso, depois de matriculado nós recomendamos ele habilitar o curso dentro do discord. Ao habilitar o curso ele receberá um cargo daquele curso e terá acesso ao canal de dúvidas do curso, veja um exemplo:
+
+![Cada aluno da menthor terá um cargo para cada curso](https://menthor-content.s3.sa-east-1.amazonaws.com/18a25c87-a994-4f41-a137-5d5e88ff792e)
+
+Nesse caso significa que o aluno Bernardo se matriculou em dois cursos (HTML Básico e Twitter Descentralizado) e os canais foram liberados dentro do discord.
+
+Esses canais são um pouco diferente, eles não são um chat normal, eles são um lugar para **criar publicações**. Então cada aluno poderá publicar suas dúvidas lá e, todos os alunos e creators com acesso aquele curso poderão ajudá-los.
+
+> Se você chegou até aqui e ainda não tem acesso ao nosso discord, [clique aqui](https://discord.gg/8BCByyXxq8).

apps/www/content/2.alunos/1.aprendizagem.md

@@ -1,7 +1,7 @@
 ---
 title: Aprendizagem
-description: Veja como extrair o máximo da plataforma
+description: Extraia o máximo da plataforma e contribua com a comunidade
 icon: user-graduate
 ---
 
-aprendizagem
+Em breve...