Design-do-Sistema-e-Mockups.md

 | [Home](home) | [Planejamento](planejamento) | [Arquitetura Geral](arquitetura-geral) | [Front End](front-end) | [Banco de Dados](banco-de-dados) | [Design do Sistema e Mockups](design-do-sistema-e-mockups) | [Infraestrutura e Orçamento](infraestrutura-e-orçamento) | [Fluxo e Versionamento](fluxo-e-versionamento) |
 | :----------: | :---------------------------------: | :-------------------------------------: | :----------------------: | :---------------------------: | :-------------------------------------------: | :----------------------------------------: | :-------------------------: |
 
-# Design do Sistema e Mockups
-
-## Descrição
+# Descrição
 
 Esta seção detalhará todas as decisões de Design do Sistema, incluindo as escolhas da equipe e as solicitações dos Stakeholders. Uma das principais demandas dos clientes foi a implementação de uma funcionalidade que permita alternar entre os modos claro e escuro no design das telas. A seguir, apresentaremos o design desenvolvido com base nessa recomendação.
 
-## Sumário
-
-- [Descrição](#descrição)
-- [Sumário](#sumário)
-- [Protótipos de Alto Nível](#protótipos-de-alto-nível)
-
-## Protótipos de Alto Nível
+# Protótipos de Alto Nível
 
 Os mockups foram feitos na ferramenta Figma e podem ser encontrados em [Figma - HoorTech](https://www.figma.com/design/c3wzpE9gPxspHP1vo7mTrG/HoorTech-Mockup?node-id=0-1&node-type=canvas&t=YZWl0egUQSYd3EgE-0).
 
-### Modo Claro
+## Modo Claro
 
-#### Sem Vídeo do Usuário
+### Sem Vídeo do Usuário
 
 <div style="display: flex; flex-wrap: wrap; gap: 10px;">
   <img src="uploads/images/tela1.png" width="30%" height="auto" >
 </div>
 
-#### Com Vídeo e Legendas
+### Com Vídeo e Legendas
 
 <div style="display: flex; flex-wrap: wrap; gap: 10px;">
   <img src="uploads/images/tela2.png" width="30%" height="auto" >
@@ -33,15 +25,15 @@ Os mockups foram feitos na ferramenta Figma e podem ser encontrados em [Figma -
   <img src="uploads/images/tela4.png" width="30%" height="auto" >
 </div>
 
-### Modo Escuro
+## Modo Escuro
 
-#### Sem Vídeo do Usuário
+### Sem Vídeo do Usuário
 
 <div style="display: flex; flex-wrap: wrap; gap: 10px;">
   <img src="uploads/images/tela5.png" width="30%" height="auto" >
 </div>
 
-#### Com Vídeo e Legendas
+### Com Vídeo e Legendas
 
 <div style="display: flex; flex-wrap: wrap; gap: 10px;">
   <img src="uploads/images/tela6.png" width="30%" height="auto" >