diff --git a/README.md b/README.md
index ef0e127..730a51a 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,94 @@ Básicamente sou alguem leigo quando o assunto é JS, e as documentações dos f
Caso goste, fique a vontade para usar o meu modelo.
+## Estrutura
+
+```bash
+app/
+├── App.tsx
+├── assets/
+│ ├── icons/
+│ └── images/
+├── components/
+├── constants/
+├── data/
+├── main.tsx
+├── pages/
+├── redux/
+├── routers/
+├── services/
+├── styles/
+│ ├── colors/
+│ ├── fonts/
+│ └── global.css
+├── tests/
+│ └── mocks/
+├── types/
+└── utils/
+
+docs/
+└── README.txt
+
+public/
+├── index.html
+└── ...
+
+.gitignore
+eslint.config.js
+package.json
+tsconfig.app.json
+tsconfig.json
+tsconfig.node.json
+vite.config.ts
+README.md
+```
+
+### app/
+
+- **App.tsx**: Componente principal da aplicação.
+- **assets/**: Contém ícones e imagens utilizados na aplicação.
+ - **icons/**: Ícones da aplicação.
+ - **images/**: Imagens da aplicação.
+- **components/**: Componentes reutilizáveis da aplicação.
+- **constants/**: Constantes utilizadas na aplicação.
+- **data/**: Dados persistidos (arquivos .json, .txt, etc).
+- **main.tsx**: Ponto de entrada da aplicação React.
+- **pages/**: Páginas da aplicação.
+- **redux/**: Configuração do Redux para gerenciamento de estado.
+- **routers/**: Configuração das rotas da aplicação.
+- **services/**: Serviços da aplicação (ex: chamadas de API).
+- **styles/**: Estilos da aplicação.
+ - **colors/**: Definições de cores.
+ - **fonts/**: Definições de fontes.
+ - **global.css**: Estilos globais da aplicação.
+- **tests/**: Testes da aplicação.
+ - **mocks/**: Dados de mocks para testes.
+- **types/**: Definições de tipos TypeScript.
+- **utils/**: Funções utilitárias.
+
+### docs/
+
+- **README.txt**: Documentação da aplicação.
+
+### public/
+
+- Arquivos públicos da aplicação.
+
+### Configuração e Build
+
+- **.gitignore**: Arquivos e diretórios ignorados pelo Git.
+- **eslint.config.js**: Configuração do ESLint.
+- **index.html**: Arquivo HTML principal.
+- **package.json**: Dependências e scripts do projeto.
+- **tsconfig.app.json**: Configuração do TypeScript para a aplicação.
+- **tsconfig.json**: Configuração principal do TypeScript.
+- **tsconfig.node.json**: Configuração do TypeScript para Node.js.
+- **vite.config.ts**: Configuração do Vite.
+
+### Raiz do Projeto
+
+- **README.md**: Documentação principal do projeto.
+
## Vite
O Vite é uma ferramenta de build e servidor de desenvolvimento frontend que se destaca pela sua extrema velocidade e simplicidade. Ele visa proporcionar uma experiência de desenvolvimento mais ágil e eficiente, principalmente para aplicações web modernas.
@@ -23,6 +111,7 @@ O Vite é uma ferramenta de build e servidor de desenvolvimento frontend que se
## Bibliotecas Usadas neste Template
- Axios: Uso de Requsições HTTP com Qualidade e Facilidade
+- Styles-Components: Facilidade de Estilizar Componentes, com qualidade de desenvolvimento
## OBS
diff --git a/app/App.tsx b/app/App.tsx
new file mode 100644
index 0000000..81d0848
--- /dev/null
+++ b/app/App.tsx
@@ -0,0 +1,9 @@
+function App() {
+ return (
+
+
Bem vindo ao meu Template
+
+ )
+}
+
+export default App
diff --git a/app/assets/icons/index.ts b/app/assets/icons/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/app/assets/images/index.ts b/app/assets/images/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/react.svg b/app/assets/react.svg
similarity index 100%
rename from src/assets/react.svg
rename to app/assets/react.svg
diff --git a/app/components/README.txt b/app/components/README.txt
new file mode 100644
index 0000000..a9eaf1a
--- /dev/null
+++ b/app/components/README.txt
@@ -0,0 +1 @@
+Crie seus componentes nesta pasta
\ No newline at end of file
diff --git a/app/constants/README.txt b/app/constants/README.txt
new file mode 100644
index 0000000..cc7095f
--- /dev/null
+++ b/app/constants/README.txt
@@ -0,0 +1 @@
+Crie suas constantes nesta pasta
\ No newline at end of file
diff --git a/app/data/README.txt b/app/data/README.txt
new file mode 100644
index 0000000..e5aa566
--- /dev/null
+++ b/app/data/README.txt
@@ -0,0 +1 @@
+Coloque seus dados persistidos aqui! (arquivos.json, .txt e afins)
\ No newline at end of file
diff --git a/src/main.tsx b/app/main.tsx
similarity index 90%
rename from src/main.tsx
rename to app/main.tsx
index bef5202..4aff025 100644
--- a/src/main.tsx
+++ b/app/main.tsx
@@ -1,6 +1,5 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
-import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
diff --git a/app/pages/README.txt b/app/pages/README.txt
new file mode 100644
index 0000000..d84b997
--- /dev/null
+++ b/app/pages/README.txt
@@ -0,0 +1 @@
+Crie suas páginas nesta pasta
\ No newline at end of file
diff --git a/app/redux/README.txt b/app/redux/README.txt
new file mode 100644
index 0000000..91f6bf7
--- /dev/null
+++ b/app/redux/README.txt
@@ -0,0 +1 @@
+Configure seu redux aqui
\ No newline at end of file
diff --git a/app/routers/README.txt b/app/routers/README.txt
new file mode 100644
index 0000000..4535b73
--- /dev/null
+++ b/app/routers/README.txt
@@ -0,0 +1 @@
+Crie suas rotas de navegação entre páginas nesta pasta
\ No newline at end of file
diff --git a/app/services/README.txt b/app/services/README.txt
new file mode 100644
index 0000000..e0c07d9
--- /dev/null
+++ b/app/services/README.txt
@@ -0,0 +1 @@
+Crie seus serviços nesta pasta
\ No newline at end of file
diff --git a/app/styles/colors/index.ts b/app/styles/colors/index.ts
new file mode 100644
index 0000000..500348b
--- /dev/null
+++ b/app/styles/colors/index.ts
@@ -0,0 +1,47 @@
+const COLORS = {
+ inputBackgroundColor: "#caa165",
+ inputBorderColor: "#977a50",
+ logoColor: "#582000",
+ logoColorStrong: "#370e03",
+ black:"#000000",
+}
+
+/**
+Ajusta o brilho de uma cor hexadecimal.
+
+* Args:
+ - hex: Cor hexadecimal a ser ajustada.
+ - percent: Porcentagem de ajuste. Valores positivos aumentam o brilho e valores negativos diminuem.
+
+* Returns:
+ - Cor hexadecimal ajustada com o brilho.
+ **/
+export function adjustBrightness(hex: string, percent: number): string {
+ // Remove o símbolo # se estiver presente
+ hex = hex.replace(/^#/, '');
+
+ // Converte a cor hexadecimal para RGB
+ let r = parseInt(hex.substring(0, 2), 16);
+ let g = parseInt(hex.substring(2, 4), 16);
+ let b = parseInt(hex.substring(4, 6), 16);
+
+ // Ajusta o brilho
+ r = Math.min(255, Math.max(0, r + (r * percent) / 100));
+ g = Math.min(255, Math.max(0, g + (g * percent) / 100));
+ b = Math.min(255, Math.max(0, b + (b * percent) / 100));
+
+ // Converte de volta para hexadecimal
+ const newHex = (
+ (1 << 24) +
+ (r << 16) +
+ (g << 8) +
+ b
+ )
+ .toString(16)
+ .slice(1)
+ .toUpperCase();
+
+ return `#${newHex}`;
+ }
+
+export default COLORS;
\ No newline at end of file
diff --git a/app/styles/fonts/index.ts b/app/styles/fonts/index.ts
new file mode 100644
index 0000000..c0e78b6
--- /dev/null
+++ b/app/styles/fonts/index.ts
@@ -0,0 +1,17 @@
+export const SIZES = { // 1 rem -> 16px
+ label: "1.4rem",
+ title: "1.8rem",
+ section: "3.0rem"
+}
+
+export const WEIGHTS = {
+ bold: "800",
+ regular: "400",
+ light: "300"
+}
+
+export const FONTS = {
+ primary: "Roboto, sans-serif",
+ secondary: "Montserrat, sans-serif"
+}
+
diff --git a/app/styles/global.css b/app/styles/global.css
new file mode 100644
index 0000000..3c6bd8c
--- /dev/null
+++ b/app/styles/global.css
@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+SA:wght@100..400&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+p {
+ font-family: "Roboto", serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+ font-variation-settings:
+ "wdth" 100;
+}
\ No newline at end of file
diff --git a/app/tests/README.txt b/app/tests/README.txt
new file mode 100644
index 0000000..66de2fe
--- /dev/null
+++ b/app/tests/README.txt
@@ -0,0 +1 @@
+Coloque seus testes aqui
\ No newline at end of file
diff --git a/app/tests/mocks/README.txt b/app/tests/mocks/README.txt
new file mode 100644
index 0000000..aecae00
--- /dev/null
+++ b/app/tests/mocks/README.txt
@@ -0,0 +1 @@
+Coloque seus dados de mocks aqui
\ No newline at end of file
diff --git a/app/types/README.txt b/app/types/README.txt
new file mode 100644
index 0000000..4fc0ebc
--- /dev/null
+++ b/app/types/README.txt
@@ -0,0 +1 @@
+Coloque seus tipos de dados aqui
\ No newline at end of file
diff --git a/app/utils/README.txt b/app/utils/README.txt
new file mode 100644
index 0000000..9368713
--- /dev/null
+++ b/app/utils/README.txt
@@ -0,0 +1 @@
+Adicione suas funções úties (Conversões de tipos, formatos, etc) aqui
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/app/vite-env.d.ts
similarity index 100%
rename from src/vite-env.d.ts
rename to app/vite-env.d.ts
diff --git a/docs/README.txt b/docs/README.txt
new file mode 100644
index 0000000..e03c81d
--- /dev/null
+++ b/docs/README.txt
@@ -0,0 +1 @@
+Coloque a documentação de sua aplicação aqui
\ No newline at end of file
diff --git a/index.html b/index.html
index e4b78ea..754e157 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,6 @@
-
+