diff --git a/src/pages/pt-BR/installation.md b/src/pages/pt-BR/installation.md
index 8096c8f..320b4db 100644
--- a/src/pages/pt-BR/installation.md
+++ b/src/pages/pt-BR/installation.md
@@ -5,49 +5,262 @@ layout: ../../layouts/MainLayout.astro
url: installation
date: 2022-02-16T13:20:25.269Z
---
+## **Firebolt Client**
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-Sed flavum. Stridore nato, Alcandrumque desint ostendit derat, longoque, eadem
-iunxit miserum pedum pectora. Liberat sine pignus cupit, ferit mihi venias
-amores, et quod, maduere haec _gravi_ contentusque heros. Qui suae attonitas.
-
-_Acta caelo_ ego, hoc illi ferroque, qui fluitque Achillis deiecerat erat
-inhospita arasque ad sume et aquis summo. Fugerat ipse iam. Funeris Iuno Danaos
-est inroravere aurum foret nati aeque tetigisset! Esse ad tibi queritur [Sol sub
-est](http://iusserat.net/) pugno solitoque movet coercuit solent caput te?
-
-Crescit sint petit gemellos gemino, et _gemma deus sub_ Surrentino frena
-principiis statione. Soporiferam secunda nulli Tereus is _Aeolidae cepit_, tua
-peregrinosque illam parvis, deerit sub et times sedant.
-
-## Apium haec candida mea movebo obsuntque descendat
-
-Furti lucos cum iussa quid temptanti gravitate animus: vocat
-[ira](http://rediere.com/): illa. Primis aeternus, illi cinguntur ad mugitus
-aevo repentinos nec.
-
-Transcurrere tenens in _litore_ tuti plebe circumspicit viventi quoque mox
-troades medio mea locuta gradus perque sic unguibus
-[gramen](http://quantoque.io/). Effetus celerique nomina quoque. Ire gemino est.
-Eurus quaerenti: et lacus, tibi ignorant tertia omnes subscribi ducentem sedit
-experientia sine ludunt multae. Ponderis memor purasque, ut armenta corpora
-efferre: praeterea infantem in virgam verso.
-
-- Revellit quoniam vulnerat dique respicit
-- Modo illis
-- Nec victoria quodque
-- Spectans si vitis iussorum corpora quas
-
-Tibi igni, iamque, sum arsuro patet et Talibus cecidere: levati Atlas villosa
-dubium conparentis litem volentem nec? Iuga tenent, passi cumque generosior
-luminis, quique mea aequora ingens bracchia furor, respiramen eram: in. Caelebs
-et passu Phaethonta alumna orbem rapuit inplet [adfusaeque
-oculis](http://www.virum.net/ille-miserae.html) paene. Casus mea cingebant idque
-suis nymphe ut arae potuit et non, inmota erat foret, facta manu arvum.
-
-Fugam nec stridentemque undis te solet mentemque Phrygibus fulvae adhuc quam
-cernimus est! Aper iube dederat adsere iamque mortale ita cornua si fundamina
-quem caperet, iubeas stolidae pedesque intrarunt navigat triformis. Undas terque
-digitos satis in nautae sternuntur curam, iaculum ignoscere _pianda dominique
-nostra_ vivacemque teneraque!
+Primeiramente vamos instalar o pacote do *firebolt* *client* no projeto:
+
+```shell
+yarn add @iq-firebolt/client
+# ou
+npm install @iq-firebolt/client --save
+```
+
+Para começar a usar o *firebolt*, primeiro precisamos configurar o *provider*, nele podemos passar algumas configurações para conectar o *client* com o formulário configurado previamente.
+
+### Provider
+
+Para configurar o provider do *firebolt* vamos usar a função *`createFireboltProvider`* do pacote `@iq-firebolt/client`
+
+```javascript
+// config.js
+import { createFireboltProvider } from "@iq-firebolt/client"
+
+export const withFirebolt = createFireboltProvider({
+ formAccess: {
+ root: "https://firebolt-api-endpoint",
+ formName: "sample",
+ },
+ withHistory: true,
+});
+```
+
+Essa função recebe como parâmetro um objeto que podemos passar algumas informações para configurar o *firebolt client* no projeto e nos retorna um *high-order component (HOC)* que devemos encapsular a aplicação/componente que iremos renderizar o formulário
+
+```asp
+| Atributos | Valor | Descrição |
+| | Padrão | |
+|----------------------|---------------------------------------------------------|
+| formAccess | null | Obejto que recebe a configuração de acesso ao |
+| | | firebolt-api |
+|----------------------|---------------------------------------------------------|
+| formAccess.root | null | Url de acesso ao firebolt-api |
+|----------------------|---------------------------------------------------------|
+| formAccess.formName | null | Nome do formulário configurado no firebolt-api |
+|----------------------|---------------------------------------------------------|
+| withHistory | false | Transições de passos gera um push no history |
+| | | do browser, podendo ser utilizado a navegação |
+| | | padrão do browser para navegar entre passos |
+|----------------------|---------------------------------------------------------|
+| stepQueryParam | step | Nome do query param que indica o passo atual |
+| | | ex. ?step=primeiro_passo |
+|----------------------|---------------------------------------------------------|
+| debug | false | Permite degubar um passo do formulário |
+| | | passando o query param debug-step com o nome |
+| | | do passo a ser debugado ex. ?debug-step=step |
+```
+
+```javascript
+// app.js
+import { withFirebolt } = './config.js'
+
+const App = () => {
+ return
Hello Firebolt
+}
+
+export default withFirebolt(App)
+```
+
+### Wizard
+
+Semelhante ao `Switch` do `react-router`, sua função é renderizar um passo de cada vez. Com ele é possível definir um componente para cada passo do formulário ou um componente padrão para ser utilizado na maioria dos passos. Além disso também é responsável por executar alguns *callbacks* em algumas situações especificas do formulário e pela renderização de um *fallback* durante a transição entre passos do formulário.
+
+```javascript
+// app.js
+import { Wizard } from "@iq-firebolt/client";
+import { withFirebolt } = './config.js'
+
+import MyLoader from 'components/MyLoader.js'
+
+const App = () => {
+ return (
+
+ )
+}
+
+export default withFirebolt(App)
+```
+
+* `fallback:` Recebe um componente que é renderizado durante a transição de passos;
+* `onFinishForm:` *Callback* executado ao finalizar o ultimo passo do formulário, recebe um *payload* como argumento;
+* `onConnectionError:` *Callback* executado quando ocorre algum problema de conexão entre o *firebolt-client* e o *firebolt-api*;
+* `onBeforeChangeStep:` *Callback* executado ao receber os dados de um novo passo. Esse *callback* interrompe o redirecionamento para o próximo passo do formulário, recebendo informações do ultimo passo executado *(leavingStep)* e do próximo passo a ser renderizado *(enteringStep)* e uma função que libera a renderização do próximo passo do formulário *(proceed)*;
+* `onChangeStep:` *Callback* executado após a transição entre passos do formulário.
+
+### Step
+
+Semelhante ao `Route` do `react-router`, sua função é a renderização de um componente para um passo do formulário. É possível com ele definir um componente *default* para todos os passos e também componentes específicos para cada passo do formulário.
+
+```javascript
+// app.js
+import { Wizard } from "@iq-firebolt/client";
+import { withFirebolt } = './config.js'
+
+import MyLoader from 'components/MyLoader.js'
+import DefaultTemplate from "components/DefaultTemplate.js"
+import SummaryTemplate from "components/SummaryTemplate.js"
+
+const App = () => {
+ const { Step } = Wizard
+
+ return (
+
+ )
+}
+
+export default withFirebolt(App)
+```
+
+* `match:` Identificador do passo para ser renderizado o componente. Recebe como parâmetro um `*` , como um *wildcard* para todos os passos, ou um objeto com um atributo `slug` que recebe o nome específico do passo.
+* `component:` Componente que deve ser renderizado no passo do formulário.
+
+Todo componente recebe utilizado para renderizar um passo do formulário recebe uma propriedade *`fireboltStep`* que contem algumas informações do passo em questão.
+
+```javascript
+// components/DefaultTemplate.js
+const DefaultTemplate = ({ fireboltStep }) => {
+ function goToNextStep(){
+ fireboltStep.goNextStep({ cpf: "030.136.450-83" })
+ }
+
+ return (
+
+
Step title
+
+
+ )
+}
+
+
+export default DefaultTemplate
+```
+
+Propriedades do `fireboltStep`
+
+* `slug:` Identificador do passo atual;
+* `friendlyName:` Nome amigável para o passo atual definido no *JSON* do formulário;
+* `fields:` Descreve os campos do passo atual do formulário;
+* `type:` Tipo do passo atual, pode ser *form* ou *custom;*
+* `capturedData:` Dados capturados dos passos já executados do formulário;
+* `position:` Numero da posição do passo atual em relação ao total de passos;
+* `remoteErrors:` Recebe os erros de validação dos campos do formulário ao executar a função de transição de passo;
+* `formFlowMetadata:` Dados gerais sobre o formulário como total de passos, nome e slug dos passos e etc;
+* `goNextStep:` Função de transição de passo do formulário, recebe como argumento um objeto chave-valor com o *slug* do campo e o valor a ser enviado para o *firebolt-api*;
+* `goPreviousStep:` Função de transição para o passo anterior do formulário;
+* `clearSession:` Função que reseta o formulário.
+
+### FireboltForm
+
+Sua função é mapear e renderizar o formulário combinando ele com as possíveis inserções de conteúdo entre campos do formulário.
+
+```javascript
+// components/DefaultTemplate.js
+import { FireboltForm } from "@iq-firebolt/client";
+
+const DefaultTemplate = ({ fireboltStep }) => {
+ function goToNextStep(){
+ fireboltStep.goNextStep({ cpf: "030.136.450-83" })
+ }
+
+ return (
+
+
Step title
+
+
+
+ )
+}
+
+
+export default DefaultTemplate
+```
+
+Propriedades do `FireboltForm`
+
+* `schema:` Recebe o JSON Schema que descreve os campos necessários para o passo do formulário;
+* `className:` Nome da classe customizada a ser adicionada ao elemento *form*;
+* `theme:` Tema customizado para utilizar componentes diferentes para a renderização de campos do formulário;
+* `autoFill:` Recebe um objeto chave-valor com o *slug* do campo e o valor que deve ser preenchido automaticamente no campo do formulário;
+* `remoteErrors:` Recebe os erros de validação dos campos do formulário, pode ser usado para forçar um erro ou repassar os erros que vieram da *firebolt-api*;
+* `previousBtnText:` Texto rederizado no botão padrão de voltar passo do formulário;
+* `submitBtnText:` Texto rederizado no botão padrão de avançar/submeter passo do formulário;
+* `customActionsChild:` Permite passar um componente para lidar com o envio ou regressão do formulário;
+* `onChange:` *Callback* executado sempre que ocorre alguma alteração nos dados do formulário, recebe como argumento o payload atualizado dos campos do formulário;
+* `onFocusField:` Callback executado sempre que um campo é focado, recebe como argumento informações sobre o campo focado;
+* `onGoBack:` Função executada ao clicar no botão de voltar passo do formulário;
+* `onSubmit:` Função executada ao clicar no botão de submeter o passo do formulário.
+
+#### Insert
+
+Permite inserir componentes entre campos que são gerados pelo `FireboltForm`. Podemos inserir antes ou depois dos campos.
+
+```javascript
+// components/DefaultTemplate.js
+import { FireboltForm } from "@iq-firebolt/client";
+
+const DefaultTemplate = ({ fireboltStep }) => {
+ function goToNextStep(){
+ fireboltStep.goNextStep({ cpf: "030.136.450-83" })
+ }
+
+ return (
+
+ )
+}
+
+
+export default DefaultTemplate
+```
+
+podemos inserir com referencia ao primeiro, ultimo ou pelo nome do campo no formulário.
+
+* `after:` Renderiza a marcação antes da referência;
+* `before:` Renderiza a marcação depois da referência;
+* `render:` Componente ou marcação que deve ser renderizada.
\ No newline at end of file