From efe774e185f487237646c85a645ecb33a00833b5 Mon Sep 17 00:00:00 2001
From: omattaeus <gomesduartedev@gmail.com>
Date: Thu, 2 Jan 2025 17:34:36 -0300
Subject: [PATCH 1/7] fazendo correcoes na largura dos botoes

---
 .deco/blocks/Comparativo%20Home.json          |  11 +-
 .deco/blocks/Comparativo%20de%20Planos.json   |   2 +-
 .../Lista%20de%20Integra%C3%A7%C3%B5es.json   |  14 ++-
 ...C3%ADtulo%20com%20Navega%C3%A7%C3%A3o.json |   6 +-
 ...C3%A1gina%20-%20Integra%C3%A7%C3%B5es.json |  11 ++
 .../blocks/Tipos%20de%20Estabelecimentos.json |   3 +-
 ...-Integra%25C3%25A7%25C3%25B5es-320736.json |   5 +-
 components/ui/Button/index.tsx                | 115 +++++++++++-------
 components/ui/Content/Dropdown/index.tsx      |  18 ++-
 components/ui/Content/TitleMedium/index.tsx   |  32 ++++-
 sections/Final/Button/ButtonComponent.tsx     |  88 ++++++++------
 sections/Final/Content/Dropdown.tsx           |   1 -
 sections/Final/Content/ParentComponent.tsx    |   8 +-
 sections/Final/Content/TitleMedium.tsx        |  16 ++-
 sections/MultiSection.tsx                     |   2 +-
 tailwind.config.ts                            |   4 +
 16 files changed, 234 insertions(+), 102 deletions(-)
 create mode 100644 .deco/blocks/T%C3%ADtulo%20da%20P%C3%A1gina%20-%20Integra%C3%A7%C3%B5es.json

diff --git a/.deco/blocks/Comparativo%20Home.json b/.deco/blocks/Comparativo%20Home.json
index 395113a..75fab21 100644
--- a/.deco/blocks/Comparativo%20Home.json
+++ b/.deco/blocks/Comparativo%20Home.json
@@ -104,7 +104,8 @@
               "tamanho": "Máximo (100%)",
               "title": "Compare os planos",
               "text": "Compare os planos",
-              "link": "/compare"
+              "link": "/compare",
+              "tamanhoDesktop": "Mínimo (Tamanho do conteúdo)"
             },
             "title": "Compare os planos"
           }
@@ -189,7 +190,9 @@
               "buttonTheme": "Secondary white",
               "title": "Veja em detalhes",
               "text": "Veja em detalhes",
-              "link": "/detalhes"
+              "link": "/detalhes",
+              "tamanho": "Máximo (100%)",
+              "tamanhoDesktop": "Mínimo (Tamanho do conteúdo)"
             },
             "title": "Veja em detalhes"
           }
@@ -249,7 +252,9 @@
               "buttonTheme": "Secondary white",
               "title": "Veja a lista completa",
               "text": "Veja a lista completa",
-              "link": "/lista"
+              "link": "/lista",
+              "tamanho": "Máximo (100%)",
+              "tamanhoDesktop": "Mínimo (Tamanho do conteúdo)"
             },
             "title": "Veja a lista completa"
           }
diff --git a/.deco/blocks/Comparativo%20de%20Planos.json b/.deco/blocks/Comparativo%20de%20Planos.json
index 453104e..9bf2909 100644
--- a/.deco/blocks/Comparativo%20de%20Planos.json
+++ b/.deco/blocks/Comparativo%20de%20Planos.json
@@ -203,7 +203,7 @@
             "link": "plano-total",
             "buttonTheme": "Secondary white"
           },
-          "price": "A partir de
R$ 000,00"
+          "price": "A partir de
R$ 00,00"
         }
       },
       "title": "Comparação"
diff --git a/.deco/blocks/Lista%20de%20Integra%C3%A7%C3%B5es.json b/.deco/blocks/Lista%20de%20Integra%C3%A7%C3%B5es.json
index ceea37a..0701de9 100644
--- a/.deco/blocks/Lista%20de%20Integra%C3%A7%C3%B5es.json
+++ b/.deco/blocks/Lista%20de%20Integra%C3%A7%C3%B5es.json
@@ -42,7 +42,19 @@
         ],
         "title": "Por categoria",
         "dropdownText": "Por categoria",
-        "arrowIcon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/5b84cd87-7621-407f-8007-45aea2d586c0/arrow_down_2.svg"
+        "arrowIcon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/5b84cd87-7621-407f-8007-45aea2d586c0/arrow_down_2.svg",
+        "logos": [
+          {
+            "category": "Delivery",
+            "title": "Delivery",
+            "logo": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/3e40e849-3e79-4675-8942-ed279da4edc1/brand_delivery_much_new.png"
+          },
+          {
+            "category": "Delivery",
+            "title": "Delivery",
+            "logo": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/d71881ca-5a78-46c6-8491-2313249a8a67/delivery_direto_integracion.png"
+          }
+        ]
       },
       "title": "Dropdown"
     },
diff --git a/.deco/blocks/T%C3%ADtulo%20com%20Navega%C3%A7%C3%A3o.json b/.deco/blocks/T%C3%ADtulo%20com%20Navega%C3%A7%C3%A3o.json
index ea509f1..1fd0ea5 100644
--- a/.deco/blocks/T%C3%ADtulo%20com%20Navega%C3%A7%C3%A3o.json
+++ b/.deco/blocks/T%C3%ADtulo%20com%20Navega%C3%A7%C3%A3o.json
@@ -8,11 +8,13 @@
         "menu": [
           {
             "name": "Planos",
-            "url": "/planos"
+            "url": "/planos",
+            "status": false
           },
           {
             "name": "Opcionais",
-            "url": "/opcionais"
+            "url": "/opcionais",
+            "status": true
           },
           {
             "name": "Integrações",
diff --git a/.deco/blocks/T%C3%ADtulo%20da%20P%C3%A1gina%20-%20Integra%C3%A7%C3%B5es.json b/.deco/blocks/T%C3%ADtulo%20da%20P%C3%A1gina%20-%20Integra%C3%A7%C3%B5es.json
new file mode 100644
index 0000000..5060c3f
--- /dev/null
+++ b/.deco/blocks/T%C3%ADtulo%20da%20P%C3%A1gina%20-%20Integra%C3%A7%C3%B5es.json
@@ -0,0 +1,11 @@
+{
+  "__resolveType": "site/sections/Final/Content/TitleMedium.tsx",
+  "content": "Os principais serviços estão na Linked",
+  "colorTheme": "White",
+  "colorThemeBg": "Primary",
+  "containerWidth": "Largura Limitada (327px)",
+  "textAlignment": "Left",
+  "fontSize": "28px",
+  "contentAlignment": "Start",
+  "paddingTop": "Espacamento (91px)"
+}
\ No newline at end of file
diff --git a/.deco/blocks/Tipos%20de%20Estabelecimentos.json b/.deco/blocks/Tipos%20de%20Estabelecimentos.json
index 5b2505d..9e22155 100644
--- a/.deco/blocks/Tipos%20de%20Estabelecimentos.json
+++ b/.deco/blocks/Tipos%20de%20Estabelecimentos.json
@@ -10,7 +10,8 @@
         "textAlignment": "Left",
         "fontSize": "22px",
         "containerWidth": "Largura Limitada (343px)",
-        "paddingTop": "Espacamento (40px)"
+        "paddingTop": "Espacamento (40px)",
+        "contentAlignment": "Start"
       },
       "title": "Título"
     },
diff --git a/.deco/blocks/pages-Integra%25C3%25A7%25C3%25B5es-320736.json b/.deco/blocks/pages-Integra%25C3%25A7%25C3%25B5es-320736.json
index 921ed26..2b3f82b 100644
--- a/.deco/blocks/pages-Integra%25C3%25A7%25C3%25B5es-320736.json
+++ b/.deco/blocks/pages-Integra%25C3%25A7%25C3%25B5es-320736.json
@@ -6,7 +6,10 @@
       "__resolveType": "Navbar"
     },
     {
-      "__resolveType": "Título com Navegação"
+      "__resolveType": "Tabs"
+    },
+    {
+      "__resolveType": "Título da Página - Integrações"
     },
     {
       "__resolveType": "Lista de Integrações"
diff --git a/components/ui/Button/index.tsx b/components/ui/Button/index.tsx
index d950ada..ebe9c85 100644
--- a/components/ui/Button/index.tsx
+++ b/components/ui/Button/index.tsx
@@ -4,7 +4,6 @@ import type { JSX } from "preact";
 // import IconComponent from "../Icons/IconGrid.tsx";
 // import Script, { type Props } from "./script.tsx";
 
-
 // | "Primary dark"
 // | "Primary white"
 // | "secondary dark"
@@ -14,61 +13,87 @@ import type { JSX } from "preact";
 // | "fab"
 
 function setWidth(value) {
-    switch (value) {
-      case "Máximo (100%)":
-        return "w-full";
-
-      case "Mínimo (Tamanho do conteúdo)":
-        return "w-fit";
-        
-      default:
-        return "";
-    }
+  switch (value) {
+    case "Máximo (100%)":
+      return "w-full";
+
+    case "Mínimo (Tamanho do conteúdo)":
+      return "w-fit";
+
+    default:
+      return "";
+  }
 }
+
+function setWidthDesktop(value) {
+  switch (value) {
+    case "Máximo (100%)":
+      return "w-full";
+
+    case "Mínimo (Tamanho do conteúdo)":
+      return "w-fit";
+
+    default:
+      return "";
+  }
+}
+
 function setClass(value) {
-    switch (value) {
-      case "Primary dark":
-        return "bg-accent text-primary border border-accent py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
-  
-      case "Primary white":
-        return "bg-primary text-accent border border-primary py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
-  
-      case "Secondary dark":
-        return "bg-transparent text-accent border border-accent py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
-
-      case "Secondary white":
-        return "bg-transparent text-primary border border-primary py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
-  
-      case "Link dark":
-        return "text-accent underline text-center";
-
-      case "Link white":
-        return "text-primary underline text-center";
-
-      case "Faq":
-        return "bg-accent border border-accent h-[56px] w-[56px] md:h-[64px] md:w-[64px] rounded-full flex items-center justify-center text-center";
-
-      case "Nenhuma estilização":
-        return "";
-  
-      default:
-        return "";
-    }
+  switch (value) {
+    case "Primary dark":
+      return "bg-accent text-primary border border-accent py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
+
+    case "Primary white":
+      return "bg-primary text-accent border border-primary py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
+
+    case "Secondary dark":
+      return "bg-transparent text-accent border border-accent py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
+
+    case "Secondary white":
+      return "bg-transparent text-primary border border-primary py-2.5 px-5 md:py-[14px] md:px-[22px] text-center justify-center";
+
+    case "Link dark":
+      return "text-accent underline text-center";
+
+    case "Link white":
+      return "text-primary underline text-center";
+
+    case "Faq":
+      return "bg-accent border border-accent h-[56px] w-[56px] md:h-[64px] md:w-[64px] rounded-full flex items-center justify-center text-center";
+
+    case "Nenhuma estilização":
+      return "";
+
+    default:
+      return "";
+  }
 }
 
-function ButtonComponent({ text, link, icon, buttonTheme, tamanho }: JSX.IntrinsicElements["div"]) {
+function ButtonComponent(
+  { text, link, icon, buttonTheme, tamanho, tamanhoDesktop }:
+    JSX.IntrinsicElements["div"],
+) {
   return (
     <>
-      <div className="flex justify-center">
-        <div className="w-full max-w-[706px] px-4 md:px-0">
-          <a href={link} className={`${setClass(buttonTheme)} ${setWidth(tamanho)} flex gap-3 rounded-[10px] text-base md:text-lg font-semibold`}>
-              {text}{icon}
+      <div className="flex items-center justify-center">
+        <div
+          className={`${setClass(buttonTheme)} ${setWidth(tamanho) || ""} lg:${
+            setWidthDesktop(tamanhoDesktop) || ""
+          } max-w-[706px] mx-4 md:mx-0 rounded-lg`}
+        >
+          <a
+            href={link}
+            className="flex items-center justify-center gap-3 rounded-[10px] text-base md:text-lg font-semibold text-center"
+          >
+            {text}
+            {icon}
           </a>
         </div>
       </div>
+
       {/* <Script /> */}
     </>
   );
 }
 
-export default ButtonComponent;
\ No newline at end of file
+export default ButtonComponent;
diff --git a/components/ui/Content/Dropdown/index.tsx b/components/ui/Content/Dropdown/index.tsx
index 3b7019c..33e9625 100644
--- a/components/ui/Content/Dropdown/index.tsx
+++ b/components/ui/Content/Dropdown/index.tsx
@@ -56,22 +56,30 @@ export interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
 function Dropdown({
   dropdownText = "",
   arrowIcon,
-  button,
+  button = [],
   onCategoryChange,
 }: JSX.IntrinsicElements["div"] & Props) {
   const isOpen = useSignal(false);
 
   const handleChange = (event: Event) => {
     const selectedValue = (event.target as HTMLSelectElement).value;
-    console.log(`Valor selecionado no Dropdown: ${selectedValue}`);
-    onCategoryChange?.(selectedValue);
+    console.log(`[Dropdown] Valor selecionado: ${selectedValue}`);
+    if (onCategoryChange) {
+      onCategoryChange(selectedValue);
+    } else {
+      console.warn("[Dropdown] onCategoryChange não foi passado.");
+    }
   };
 
   const handleToggle = () => {
     isOpen.value = !isOpen.value;
-    console.log(`Dropdown ${isOpen.value ? "aberto" : "fechado"}`);
+    console.log(
+      `[Dropdown] Estado do dropdown: ${isOpen.value ? "Aberto" : "Fechado"}`,
+    );
   };
 
+  console.log("[Dropdown] Botões recebidos:", button);
+
   return (
     <div className="w-full flex justify-center">
       <div className="w-full max-w-[706px] px-4 md:px-0 mt-10 relative">
@@ -86,7 +94,7 @@ function Dropdown({
           >
             {dropdownText}
           </option>
-          {button?.map((filteredCategories, index) => (
+          {button.map((filteredCategories, index) => (
             <option key={index} value={filteredCategories.name}>
               {filteredCategories.name}
             </option>
diff --git a/components/ui/Content/TitleMedium/index.tsx b/components/ui/Content/TitleMedium/index.tsx
index cfd32db..db206d9 100644
--- a/components/ui/Content/TitleMedium/index.tsx
+++ b/components/ui/Content/TitleMedium/index.tsx
@@ -21,6 +21,35 @@ function setClass(value: string) {
   }
 }
 
+// Implemente a seção
+function setClassBackground(value: string) {
+  switch (value) {
+    case "Primary":
+      return "bg-primary";
+
+    case "Secondary":
+      return "bg-secondary";
+
+    case "White":
+      return "bg-white";
+
+    case "Light":
+      return "bg-light";
+
+    case "Sacramento-State":
+      return "bg-sacramentoState";
+
+    case "Sacramento-State-10":
+      return "bg-sacramentoState-10";
+
+    case "Mint-Cream":
+      return "bg-mintCream";
+
+    default:
+      return "bg-primary";
+  }
+}
+
 function setAlignment(value: string) {
   switch (value) {
     case "Left":
@@ -92,6 +121,7 @@ function TitleMedium(
   {
     content,
     colorTheme,
+    colorThemeBg,
     alignment,
     fontSize,
     containerWidth,
@@ -103,7 +133,7 @@ function TitleMedium(
 ) {
   return (
     <div
-      className={`flex ${setAlignmentContent(contentAlignment)} items-center`}
+      className={`flex ${setAlignmentContent(contentAlignment)} ${setClassBackground(colorThemeBg)} items-center`}
     >
       <div
         className={`${
diff --git a/sections/Final/Button/ButtonComponent.tsx b/sections/Final/Button/ButtonComponent.tsx
index c480fd0..d078e2d 100644
--- a/sections/Final/Button/ButtonComponent.tsx
+++ b/sections/Final/Button/ButtonComponent.tsx
@@ -6,41 +6,49 @@ import { WorkLink } from "https://esm.sh/v135/aws-sdk@2.1585.0/clients/all.js";
  * @title {{{title}}}
  */
 export interface Props {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do botão
-     */
-    text: string;
-    /**
-     * @title Link
-     * @description Escreva o link de redirecionamento
-     */
-    link: string;
-    /**
-     * @title Icone
-     * @description Selecione o ícone que deseja
-     */
-    icon?: string;
-    /**
-     * @title Botão
-     * @description Selecione o tipo de botão que deseja
-     */
-    buttonTheme?:
-        | "Primary dark"
-        | "Primary white"
-        | "Secondary dark"
-        | "Secondary white"
-        | "Link dark"
-        | "Link white"
-        | "Faq"
-        | "Nenhuma estilização"
-        
-    /**
-     * @title Tamanho do botão
-     * @description Selecione o tamanho do botão
-     */
-    tamanho?: 
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do botão
+   */
+  text: string;
+  /**
+   * @title Link
+   * @description Escreva o link de redirecionamento
+   */
+  link: string;
+  /**
+   * @title Icone
+   * @description Selecione o ícone que deseja
+   */
+  icon?: string;
+  /**
+   * @title Botão
+   * @description Selecione o tipo de botão que deseja
+   */
+  buttonTheme?:
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
+
+  /**
+   * @title Tamanho do botão
+   * @description Selecione o tamanho do botão
+   */
+  tamanho?:
+    | "Máximo (100%)"
+    | "Mínimo (Tamanho do conteúdo)";
+
+  /**
+   * @title Tamanho do botão (Desktop)
+   * @description Selecione o tamanho do botão
+   */
+  tamanhoDesktop?:
     | "Máximo (100%)"
     | "Mínimo (Tamanho do conteúdo)";
 }
@@ -51,8 +59,16 @@ export default function Section({
   icon = "",
   buttonTheme = "Primary dark",
   tamanho = "Máximo (100%)",
+  tamanhoDesktop = "Máximo (100%)",
 }: Props) {
   return (
-    <ButtonComponent text={text} icon={icon} link={link} buttonTheme={buttonTheme} tamanhp={tamanho} />
+    <ButtonComponent
+      text={text}
+      icon={icon}
+      link={link}
+      buttonTheme={buttonTheme}
+      tamanho={tamanho}
+      tamanhoDesktop={tamanhoDesktop}
+    />
   );
 }
diff --git a/sections/Final/Content/Dropdown.tsx b/sections/Final/Content/Dropdown.tsx
index a5bebb2..29bd1bc 100644
--- a/sections/Final/Content/Dropdown.tsx
+++ b/sections/Final/Content/Dropdown.tsx
@@ -46,7 +46,6 @@ export interface Props {
      * @description Insira as categorias de integração filtradas
      */
     button?: filteredCategories[];
-
     /**
      * @title Função de Mudança de Categoria
      * @description Função chamada ao mudar a categoria no Dropdown
diff --git a/sections/Final/Content/ParentComponent.tsx b/sections/Final/Content/ParentComponent.tsx
index 3d82fc9..7a0b743 100644
--- a/sections/Final/Content/ParentComponent.tsx
+++ b/sections/Final/Content/ParentComponent.tsx
@@ -6,12 +6,14 @@ function ParentComponent({ title, dropdownText, arrowIcon, button, logos }) {
     const [selectedCategory, setSelectedCategory] = useState("");
 
     const handleCategoryChange = (category: string) => {
-        console.log(`Categoria selecionada: ${category}`);
+        console.log(`[ParentComponent] Categoria selecionada: ${category}`);
         setSelectedCategory(category);
     };
 
+    console.log("[ParentComponent] Categoria atual:", selectedCategory);
+
     return (
-        <>
+        <div className="w-full flex flex-col items-center">
             <Dropdown
                 dropdownText={dropdownText}
                 arrowIcon={arrowIcon}
@@ -23,7 +25,7 @@ function ParentComponent({ title, dropdownText, arrowIcon, button, logos }) {
                 logos={logos}
                 selectedCategory={selectedCategory}
             />
-        </>
+        </div>
     );
 }
 
diff --git a/sections/Final/Content/TitleMedium.tsx b/sections/Final/Content/TitleMedium.tsx
index 13e78f6..3f8e1b0 100644
--- a/sections/Final/Content/TitleMedium.tsx
+++ b/sections/Final/Content/TitleMedium.tsx
@@ -25,6 +25,18 @@ export interface Props {
     | "Sacramento-State"
     | "Sacramento-State-10"
     | "Mint-Cream";
+  /**
+   * @title Tema de Cor (Background)
+   * @description Escolha o tema de cor de fundo
+   */
+  colorThemeBg:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
   /**
    * @title Tamanho da Fonte
    * @description Escolha o tamanho da fonte (22px, 28px ou 32px)
@@ -65,6 +77,7 @@ export interface Props {
 export default function Section({
   content,
   colorTheme,
+  colorThemeBg,
   textAlignment,
   fontSize = "28px",
   containerWidth = "Largura Limitada (290px)",
@@ -75,6 +88,7 @@ export default function Section({
     <TitleMedium
       content={content}
       colorTheme={colorTheme}
+      colorThemeBg={colorThemeBg}
       alignment={textAlignment}
       fontSize={fontSize}
       containerWidth={containerWidth}
@@ -82,4 +96,4 @@ export default function Section({
       paddingTop={paddingTop}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/sections/MultiSection.tsx b/sections/MultiSection.tsx
index 0df05a9..0f3642f 100644
--- a/sections/MultiSection.tsx
+++ b/sections/MultiSection.tsx
@@ -121,7 +121,7 @@ export default function MultiSection(
     );
   } else {
     return (
-      <div className={`${setClass(background)}`}>
+      <div className={`${setClass(background)} py-6 md:py-10`}>
         {sections?.map((item) => (
           LoadComponent(item.section)
         ))}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e6b6eed..e7e2402 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -64,6 +64,10 @@ export default {
       container: {
         center: true,
       },
+      safelist: [
+        "w-full",
+        "w-fit",
+      ],
     },
   },
 };

From 68e1d0e6abb24b00666b00c3009de515acc35ca1 Mon Sep 17 00:00:00 2001
From: omattaeus <gomesduartedev@gmail.com>
Date: Mon, 6 Jan 2025 14:52:45 -0300
Subject: [PATCH 2/7] fazendo pull da main

---
 .deco/blocks/pages-testeDropdown-157275.json  |  89 +++++++
 components/ui/Content/Dropdown/index.tsx      |  60 +++--
 .../ui/Content/DropdownWithLogos/index.tsx    | 201 ++++++++++++++++
 manifest.gen.ts                               | 222 +++++++++---------
 sections/Final/Content/DropdownWithLogos.tsx  | 100 ++++++++
 5 files changed, 531 insertions(+), 141 deletions(-)
 create mode 100644 .deco/blocks/pages-testeDropdown-157275.json
 create mode 100644 components/ui/Content/DropdownWithLogos/index.tsx
 create mode 100644 sections/Final/Content/DropdownWithLogos.tsx

diff --git a/.deco/blocks/pages-testeDropdown-157275.json b/.deco/blocks/pages-testeDropdown-157275.json
new file mode 100644
index 0000000..6ebd9dd
--- /dev/null
+++ b/.deco/blocks/pages-testeDropdown-157275.json
@@ -0,0 +1,89 @@
+{
+  "name": "testeDropdown",
+  "path": "/drop",
+  "sections": [
+    {
+      "__resolveType": "Navbar"
+    },
+    {
+      "__resolveType": "Navegação entre Planos, Opcionais e Integrações"
+    },
+    {
+      "__resolveType": "site/sections/Final/Content/TitleMedium.tsx",
+      "content": "Os principais serviços estão na Linked",
+      "colorTheme": "White",
+      "colorThemeBg": "Primary",
+      "containerWidth": "Largura Limitada (327px)"
+    },
+    {
+      "__resolveType": "site/sections/MultiSection.tsx",
+      "background": "White",
+      "sections": [
+        {
+          "section": {
+            "__resolveType": "site/sections/Final/Content/Paragraph.tsx",
+            "colorTheme": "Primary",
+            "textAlignment": "Left",
+            "content": "Nossa lista aumenta a cada dia. 
Confira todas as integrações:"
+          },
+          "title": "Parágrafo no Topo do Bloco"
+        },
+        {
+          "section": {
+            "__resolveType": "site/sections/Final/Content/DropdownWithLogos.tsx",
+            "button": [
+              {
+                "title": "Delivery",
+                "name": "Delivery",
+                "id": "1"
+              },
+              {
+                "title": "Cardápio digital",
+                "name": "Cardápio digital",
+                "id": "2"
+              }
+            ],
+            "logos": [
+              {
+                "category": "Delivery",
+                "title": "Delivery",
+                "logo": [
+                  "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/3e40e849-3e79-4675-8942-ed279da4edc1/brand_delivery_much_new.png",
+                  "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/d71881ca-5a78-46c6-8491-2313249a8a67/delivery_direto_integracion.png",
+                  "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/645bca49-be80-492b-b96b-2824c4024330/brand_ifood_new.png",
+                  "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/2029070d-c66f-4ef5-bee2-98ed76d29ab7/brand_prefiro_delivery.png"
+                ],
+                "id": "5"
+              },
+              {
+                "logo": [
+                  "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/5521161e-867c-4a2b-8039-447d4594b572/abrahao_integracion.png",
+                  "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/50e5609f-c84d-406c-b72b-317b89c16bd4/brand_ahoy.png"
+                ],
+                "category": "Cardápio digital",
+                "title": "Cardápio digital",
+                "id": "2"
+              }
+            ],
+            "dropdownText": "Por categoria",
+            "arrowIcon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/linked1/5b84cd87-7621-407f-8007-45aea2d586c0/arrow_down_2.svg"
+          },
+          "title": "Dropdown Com Logos"
+        }
+      ]
+    },
+    {
+      "__resolveType": "duvidas"
+    },
+    {
+      "__resolveType": "Footer"
+    },
+    {
+      "__resolveType": "FixedSection"
+    }
+  ],
+  "seo": {
+    "__resolveType": "website/sections/Seo/SeoV2.tsx"
+  },
+  "__resolveType": "website/pages/Page.tsx"
+}
\ No newline at end of file
diff --git a/components/ui/Content/Dropdown/index.tsx b/components/ui/Content/Dropdown/index.tsx
index 33e9625..8414de3 100644
--- a/components/ui/Content/Dropdown/index.tsx
+++ b/components/ui/Content/Dropdown/index.tsx
@@ -57,55 +57,37 @@ function Dropdown({
   dropdownText = "",
   arrowIcon,
   button = [],
-  onCategoryChange,
-}: JSX.IntrinsicElements["div"] & Props) {
-  const isOpen = useSignal(false);
+  logos = [],
+}: Props) {
+  const selectedCategory = useSignal<string>("");
 
   const handleChange = (event: Event) => {
     const selectedValue = (event.target as HTMLSelectElement).value;
-    console.log(`[Dropdown] Valor selecionado: ${selectedValue}`);
-    if (onCategoryChange) {
-      onCategoryChange(selectedValue);
-    } else {
-      console.warn("[Dropdown] onCategoryChange não foi passado.");
-    }
+    selectedCategory.value = selectedValue;
   };
 
-  const handleToggle = () => {
-    isOpen.value = !isOpen.value;
-    console.log(
-      `[Dropdown] Estado do dropdown: ${isOpen.value ? "Aberto" : "Fechado"}`,
-    );
-  };
-
-  console.log("[Dropdown] Botões recebidos:", button);
+  const filteredLogos = logos.filter(
+    (logo) => logo.category === selectedCategory.value,
+  );
 
   return (
-    <div className="w-full flex justify-center">
+    <div className="w-full flex flex-col items-center">
       <div className="w-full max-w-[706px] px-4 md:px-0 mt-10 relative">
         <select
           className="w-full pl-2 py-[13.5px] border-b border-sacramentoState rounded-t-lg text-sacramentoState bg-sacramentoState-10 cursor-pointer appearance-none pr-10 bg-[#e9f1ef]"
           onChange={handleChange}
-          onClick={handleToggle}
         >
-          <option
-            value=""
-            className="text-sacramentoState-80 text-lg font-sans font-normal leading-tight-21"
-          >
+          <option value="" className="text-sacramentoState-80">
             {dropdownText}
           </option>
-          {button.map((filteredCategories, index) => (
-            <option key={index} value={filteredCategories.name}>
-              {filteredCategories.name}
+          {button.map((category, index) => (
+            <option key={index} value={category.name}>
+              {category.name}
             </option>
           ))}
         </select>
         {arrowIcon && (
-          <div
-            className={`absolute pr-2 right-4 top-1/2 transform -translate-y-1/2 pointer-events-none transition-transform duration-300 ${
-              isOpen.value ? "rotate-180" : "rotate-0"
-            }`}
-          >
+          <div className="absolute pr-2 right-4 top-1/2 transform -translate-y-1/2 pointer-events-none">
             <img
               className="w-6 h-6"
               src={arrowIcon || ""}
@@ -115,6 +97,22 @@ function Dropdown({
           </div>
         )}
       </div>
+      <div className="w-full mt-6 flex flex-wrap justify-center gap-4">
+        {filteredLogos.length > 0
+          ? (
+            filteredLogos.map((logo, index) => (
+              <div
+                key={index}
+                className="w-24 h-24 flex justify-center items-center"
+              >
+                <img src={logo.logo} alt={logo.title} className="max-w-full" />
+              </div>
+            ))
+          )
+          : (
+            <p className=""></p>
+          )}
+      </div>
     </div>
   );
 }
diff --git a/components/ui/Content/DropdownWithLogos/index.tsx b/components/ui/Content/DropdownWithLogos/index.tsx
new file mode 100644
index 0000000..3018cfe
--- /dev/null
+++ b/components/ui/Content/DropdownWithLogos/index.tsx
@@ -0,0 +1,201 @@
+import { useSignal } from "@preact/signals";
+import type { JSX } from "preact";
+import { ImageWidget } from "apps/admin/widgets.ts";
+
+/**
+ * @title {{{title}}}
+ */
+export interface FilteredCategories {
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+
+  /**
+   * @title Nome
+   * @description Nome da categoria filtrada
+   */
+  name: string;
+
+  /**
+   * @title ID da Categoria
+   * @description ID único associado à categoria
+   */
+  id: string;
+}
+
+/**
+ * @title {{{title}}}
+ */
+export interface Logos {
+  /**
+   * @title Nome da Categoria
+   * @description Nome da categoria a qual o logo pertence
+   */
+  category: string;
+
+  /**
+   * @title Nome do Logo
+   * @description Título do logo
+   */
+  title: string;
+
+  /**
+   * @title Imagens
+   * @description Adicione as imagens do logotipo
+   */
+  logo: ImageWidget[];
+
+  /**
+   * @title ID único do logo
+   * @description ID único associado ao logo e suas imagens
+   */
+  id: string;
+}
+
+/**
+ * @title {{{title}}}
+ */
+export interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @title Texto do Dropdown
+   * @description Insira o texto do dropdown
+   */
+  dropdownText: string;
+
+  /**
+   * @title Ícone de Seta
+   * @description Insira o ícone de seta
+   */
+  arrowIcon: ImageWidget;
+
+  /**
+   * @title Categorias Filtradas
+   * @description Insira as categorias de integração filtradas
+   */
+  button?: FilteredCategories[];
+
+  /**
+   * @title Logos
+   * @description Lista de logos associados às categorias
+   */
+  logos: Logos[];
+}
+
+function DropdownWithLogos({
+  dropdownText = "",
+  arrowIcon,
+  button = [],
+  logos = [],
+}: Props) {
+  const selectedId = useSignal<string>("");
+
+  // Função chamada quando o valor do dropdown muda
+  const handleChange = (event: Event) => {
+    console.log("Mudou!");
+    const selectedValue = (event.target as HTMLSelectElement).value;
+    selectedId.value = selectedValue.toString();
+    console.log(selectedId.value);
+  };
+
+  // Filtra os logos com base no valor selecionado
+  const filteredLogos = selectedId.value === ""
+    ? logos // Se nenhum valor foi selecionado, retorna todos os logos
+    : logos.filter((logo) => logo.id === selectedId.value); // Caso contrário, filtra os logos pelo id
+
+  console.log(filteredLogos);
+
+  // Filtra as categorias com base no valor selecionado
+  const filteredCategories = button.filter((category) =>
+    category.id === selectedId.value // Filtra as categorias pelo id correspondente
+  );
+
+  console.log(filteredCategories);
+
+  return (
+    <div className="w-full flex flex-col items-center">
+      <div className="w-full max-w-[706px] px-4 md:px-0 my-10 relative">
+        <select
+          className="w-full pl-2 py-[13.5px] border-b border-sacramentoState rounded-t-lg text-sacramentoState bg-sacramentoState-10 cursor-pointer appearance-none pr-10 bg-[#e9f1ef]"
+          onChange={handleChange}
+        >
+          <option value="all" className="text-sacramentoState-80">
+            {dropdownText || "Por categoria"}
+          </option>
+          {button.map((category) => (
+            <option key={category.id} value={category.id}>
+              {category.title}
+            </option>
+          ))}
+          {logos.map((logo) => (
+            <option key={logo.id} value={logo.id}>
+              {logo.title}
+            </option>
+          ))}
+        </select>
+
+        {arrowIcon && (
+          <div className="absolute pr-2 right-4 top-1/2 transform -translate-y-1/2 pointer-events-none">
+            <img
+              className="w-6 h-6"
+              src={arrowIcon}
+              alt="Arrow Icon"
+              width={24}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Categorias Filtradas */}
+      <div className="w-full flex justify-center">
+        <div className="w-full max-w-[706px] grid gap-4 px-4 bg-white">
+          {filteredCategories.length > 0 &&
+            filteredCategories.map((category) => (
+              <div
+                key={category.id}
+                className="flex flex-col gap-2"
+              >
+                <p className="text-base font-normal text-sacramentoState">
+                  {category.title}
+                </p>
+              </div>
+            ))}
+        </div>
+      </div>
+
+      {/* Logos */}
+      <div className="w-full flex justify-center">
+        <div className="w-full max-w-[706px] grid gap-4 px-4 bg-white">
+          {filteredLogos.length > 0
+            ? (
+              filteredLogos.map((item) => (
+                <div key={item.id} className="flex flex-col space-y-4 gap-2">
+                  <p className="text-base font-normal text-sacramentoState">
+                    {item.title}
+                  </p>
+                  <div className="grid grid-cols-3 gap-2">
+                    {item.logo.map((image, imgIndex) => (
+                      <div
+                        key={imgIndex}
+                        className="border rounded-lg p-2 flex justify-center items-center"
+                      >
+                        <img
+                          className="w-24 h-24 object-contain"
+                          src={image}
+                          alt={`${item.title} Logo ${imgIndex + 1}`}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))
+            )
+            : <p className=""></p>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DropdownWithLogos;
diff --git a/manifest.gen.ts b/manifest.gen.ts
index 2beeecb..a0809a1 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -52,61 +52,62 @@ import * as $$$$$$42 from "./sections/Final/Content/ComparisonPlan.tsx";
 import * as $$$$$$43 from "./sections/Final/Content/Conection.tsx";
 import * as $$$$$$44 from "./sections/Final/Content/Doubts.tsx";
 import * as $$$$$$45 from "./sections/Final/Content/Dropdown.tsx";
-import * as $$$$$$46 from "./sections/Final/Content/Image.tsx";
-import * as $$$$$$47 from "./sections/Final/Content/Lead.tsx";
-import * as $$$$$$48 from "./sections/Final/Content/List.tsx";
-import * as $$$$$$49 from "./sections/Final/Content/LogoGroup.tsx";
-import * as $$$$$$50 from "./sections/Final/Content/OptionalCollapse.tsx";
-import * as $$$$$$51 from "./sections/Final/Content/OrderTracking.tsx";
-import * as $$$$$$52 from "./sections/Final/Content/Paragraph.tsx";
-import * as $$$$$$53 from "./sections/Final/Content/ParentComponent.tsx";
-import * as $$$$$$54 from "./sections/Final/Content/Product.tsx";
-import * as $$$$$$55 from "./sections/Final/Content/Spacer.tsx";
-import * as $$$$$$56 from "./sections/Final/Content/Title.tsx";
-import * as $$$$$$57 from "./sections/Final/Content/TitleMedium.tsx";
-import * as $$$$$$58 from "./sections/Final/DropDown/DropDownComponent.tsx";
-import * as $$$$$$63 from "./sections/Final/Form/fixedSectionForm.tsx";
-import * as $$$$$$59 from "./sections/Final/Form/Form.tsx";
-import * as $$$$$$60 from "./sections/Final/Form/InputRadio.tsx";
-import * as $$$$$$61 from "./sections/Final/Form/InputText.tsx";
-import * as $$$$$$62 from "./sections/Final/Form/TItleForm.tsx";
-import * as $$$$$$64 from "./sections/Final/Galery/GaleryContent.tsx";
-import * as $$$$$$65 from "./sections/Final/Galery/GaleryImages.tsx";
-import * as $$$$$$66 from "./sections/Final/Galery/GaleryPartners.tsx";
-import * as $$$$$$67 from "./sections/Final/Galery/GaleryTestimony.tsx";
-import * as $$$$$$68 from "./sections/Final/Headers/HeaderMedium.tsx";
-import * as $$$$$$69 from "./sections/Final/Headers/Openning.tsx";
-import * as $$$$$$70 from "./sections/Final/Headers/Tabs.tsx";
-import * as $$$$$$71 from "./sections/Final/Icons/IconGrid.tsx";
-import * as $$$$$$72 from "./sections/Final/Navbar/index.tsx";
-import * as $$$$$$73 from "./sections/Final/Navbar/script.tsx";
-import * as $$$$$$74 from "./sections/Final/Video/VideoContent.tsx";
-import * as $$$$$$75 from "./sections/Footer.tsx";
-import * as $$$$$$76 from "./sections/FormSection.tsx";
-import * as $$$$$$77 from "./sections/FormSteps.tsx";
-import * as $$$$$$78 from "./sections/Galery/GaleryContent.tsx";
-import * as $$$$$$79 from "./sections/Galery/GaleryTestimony.tsx";
-import * as $$$$$$80 from "./sections/Galery/GaleryWithLink.tsx";
-import * as $$$$$$81 from "./sections/Galery/ImageContent.tsx";
-import * as $$$$$$82 from "./sections/Headers/Offer.tsx";
-import * as $$$$$$83 from "./sections/Headers/OfferCupom.tsx";
-import * as $$$$$$84 from "./sections/Headers/Openning.tsx";
-import * as $$$$$$85 from "./sections/Headers/SubtitleWithShareIcon.tsx";
-import * as $$$$$$86 from "./sections/Headers/TitleArticle.tsx";
-import * as $$$$$$87 from "./sections/Headers/TitleError.tsx";
-import * as $$$$$$88 from "./sections/Headers/TitleIntegration.tsx";
-import * as $$$$$$89 from "./sections/Headers/TitleLarge.tsx";
-import * as $$$$$$90 from "./sections/Headers/TitleMedium.tsx";
-import * as $$$$$$91 from "./sections/Headers/TitleMonteSeuPlano.tsx";
-import * as $$$$$$92 from "./sections/Headers/TitlePlan.tsx";
-import * as $$$$$$93 from "./sections/Headers/TitleSegment.tsx";
-import * as $$$$$$94 from "./sections/Headers/TitleSuccess.tsx";
-import * as $$$$$$95 from "./sections/ModalContent.tsx";
-import * as $$$$$$96 from "./sections/MultiSection.tsx";
-import * as $$$$$$97 from "./sections/Navigation/Categorias.tsx";
-import * as $$$$$$98 from "./sections/Navigation/Navbar.tsx";
-import * as $$$$$$99 from "./sections/Navigation/Tabs.tsx";
-import * as $$$$$$100 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$46 from "./sections/Final/Content/DropdownWithLogos.tsx";
+import * as $$$$$$47 from "./sections/Final/Content/Image.tsx";
+import * as $$$$$$48 from "./sections/Final/Content/Lead.tsx";
+import * as $$$$$$49 from "./sections/Final/Content/List.tsx";
+import * as $$$$$$50 from "./sections/Final/Content/LogoGroup.tsx";
+import * as $$$$$$51 from "./sections/Final/Content/OptionalCollapse.tsx";
+import * as $$$$$$52 from "./sections/Final/Content/OrderTracking.tsx";
+import * as $$$$$$53 from "./sections/Final/Content/Paragraph.tsx";
+import * as $$$$$$54 from "./sections/Final/Content/ParentComponent.tsx";
+import * as $$$$$$55 from "./sections/Final/Content/Product.tsx";
+import * as $$$$$$56 from "./sections/Final/Content/Spacer.tsx";
+import * as $$$$$$57 from "./sections/Final/Content/Title.tsx";
+import * as $$$$$$58 from "./sections/Final/Content/TitleMedium.tsx";
+import * as $$$$$$59 from "./sections/Final/DropDown/DropDownComponent.tsx";
+import * as $$$$$$64 from "./sections/Final/Form/fixedSectionForm.tsx";
+import * as $$$$$$60 from "./sections/Final/Form/Form.tsx";
+import * as $$$$$$61 from "./sections/Final/Form/InputRadio.tsx";
+import * as $$$$$$62 from "./sections/Final/Form/InputText.tsx";
+import * as $$$$$$63 from "./sections/Final/Form/TItleForm.tsx";
+import * as $$$$$$65 from "./sections/Final/Galery/GaleryContent.tsx";
+import * as $$$$$$66 from "./sections/Final/Galery/GaleryImages.tsx";
+import * as $$$$$$67 from "./sections/Final/Galery/GaleryPartners.tsx";
+import * as $$$$$$68 from "./sections/Final/Galery/GaleryTestimony.tsx";
+import * as $$$$$$69 from "./sections/Final/Headers/HeaderMedium.tsx";
+import * as $$$$$$70 from "./sections/Final/Headers/Openning.tsx";
+import * as $$$$$$71 from "./sections/Final/Headers/Tabs.tsx";
+import * as $$$$$$72 from "./sections/Final/Icons/IconGrid.tsx";
+import * as $$$$$$73 from "./sections/Final/Navbar/index.tsx";
+import * as $$$$$$74 from "./sections/Final/Navbar/script.tsx";
+import * as $$$$$$75 from "./sections/Final/Video/VideoContent.tsx";
+import * as $$$$$$76 from "./sections/Footer.tsx";
+import * as $$$$$$77 from "./sections/FormSection.tsx";
+import * as $$$$$$78 from "./sections/FormSteps.tsx";
+import * as $$$$$$79 from "./sections/Galery/GaleryContent.tsx";
+import * as $$$$$$80 from "./sections/Galery/GaleryTestimony.tsx";
+import * as $$$$$$81 from "./sections/Galery/GaleryWithLink.tsx";
+import * as $$$$$$82 from "./sections/Galery/ImageContent.tsx";
+import * as $$$$$$83 from "./sections/Headers/Offer.tsx";
+import * as $$$$$$84 from "./sections/Headers/OfferCupom.tsx";
+import * as $$$$$$85 from "./sections/Headers/Openning.tsx";
+import * as $$$$$$86 from "./sections/Headers/SubtitleWithShareIcon.tsx";
+import * as $$$$$$87 from "./sections/Headers/TitleArticle.tsx";
+import * as $$$$$$88 from "./sections/Headers/TitleError.tsx";
+import * as $$$$$$89 from "./sections/Headers/TitleIntegration.tsx";
+import * as $$$$$$90 from "./sections/Headers/TitleLarge.tsx";
+import * as $$$$$$91 from "./sections/Headers/TitleMedium.tsx";
+import * as $$$$$$92 from "./sections/Headers/TitleMonteSeuPlano.tsx";
+import * as $$$$$$93 from "./sections/Headers/TitlePlan.tsx";
+import * as $$$$$$94 from "./sections/Headers/TitleSegment.tsx";
+import * as $$$$$$95 from "./sections/Headers/TitleSuccess.tsx";
+import * as $$$$$$96 from "./sections/ModalContent.tsx";
+import * as $$$$$$97 from "./sections/MultiSection.tsx";
+import * as $$$$$$98 from "./sections/Navigation/Categorias.tsx";
+import * as $$$$$$99 from "./sections/Navigation/Navbar.tsx";
+import * as $$$$$$100 from "./sections/Navigation/Tabs.tsx";
+import * as $$$$$$101 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -160,61 +161,62 @@ const manifest = {
     "site/sections/Final/Content/Conection.tsx": $$$$$$43,
     "site/sections/Final/Content/Doubts.tsx": $$$$$$44,
     "site/sections/Final/Content/Dropdown.tsx": $$$$$$45,
-    "site/sections/Final/Content/Image.tsx": $$$$$$46,
-    "site/sections/Final/Content/Lead.tsx": $$$$$$47,
-    "site/sections/Final/Content/List.tsx": $$$$$$48,
-    "site/sections/Final/Content/LogoGroup.tsx": $$$$$$49,
-    "site/sections/Final/Content/OptionalCollapse.tsx": $$$$$$50,
-    "site/sections/Final/Content/OrderTracking.tsx": $$$$$$51,
-    "site/sections/Final/Content/Paragraph.tsx": $$$$$$52,
-    "site/sections/Final/Content/ParentComponent.tsx": $$$$$$53,
-    "site/sections/Final/Content/Product.tsx": $$$$$$54,
-    "site/sections/Final/Content/Spacer.tsx": $$$$$$55,
-    "site/sections/Final/Content/Title.tsx": $$$$$$56,
-    "site/sections/Final/Content/TitleMedium.tsx": $$$$$$57,
-    "site/sections/Final/DropDown/DropDownComponent.tsx": $$$$$$58,
-    "site/sections/Final/Form/fixedSectionForm.tsx": $$$$$$63,
-    "site/sections/Final/Form/Form.tsx": $$$$$$59,
-    "site/sections/Final/Form/InputRadio.tsx": $$$$$$60,
-    "site/sections/Final/Form/InputText.tsx": $$$$$$61,
-    "site/sections/Final/Form/TItleForm.tsx": $$$$$$62,
-    "site/sections/Final/Galery/GaleryContent.tsx": $$$$$$64,
-    "site/sections/Final/Galery/GaleryImages.tsx": $$$$$$65,
-    "site/sections/Final/Galery/GaleryPartners.tsx": $$$$$$66,
-    "site/sections/Final/Galery/GaleryTestimony.tsx": $$$$$$67,
-    "site/sections/Final/Headers/HeaderMedium.tsx": $$$$$$68,
-    "site/sections/Final/Headers/Openning.tsx": $$$$$$69,
-    "site/sections/Final/Headers/Tabs.tsx": $$$$$$70,
-    "site/sections/Final/Icons/IconGrid.tsx": $$$$$$71,
-    "site/sections/Final/Navbar/index.tsx": $$$$$$72,
-    "site/sections/Final/Navbar/script.tsx": $$$$$$73,
-    "site/sections/Final/Video/VideoContent.tsx": $$$$$$74,
-    "site/sections/Footer.tsx": $$$$$$75,
-    "site/sections/FormSection.tsx": $$$$$$76,
-    "site/sections/FormSteps.tsx": $$$$$$77,
-    "site/sections/Galery/GaleryContent.tsx": $$$$$$78,
-    "site/sections/Galery/GaleryTestimony.tsx": $$$$$$79,
-    "site/sections/Galery/GaleryWithLink.tsx": $$$$$$80,
-    "site/sections/Galery/ImageContent.tsx": $$$$$$81,
-    "site/sections/Headers/Offer.tsx": $$$$$$82,
-    "site/sections/Headers/OfferCupom.tsx": $$$$$$83,
-    "site/sections/Headers/Openning.tsx": $$$$$$84,
-    "site/sections/Headers/SubtitleWithShareIcon.tsx": $$$$$$85,
-    "site/sections/Headers/TitleArticle.tsx": $$$$$$86,
-    "site/sections/Headers/TitleError.tsx": $$$$$$87,
-    "site/sections/Headers/TitleIntegration.tsx": $$$$$$88,
-    "site/sections/Headers/TitleLarge.tsx": $$$$$$89,
-    "site/sections/Headers/TitleMedium.tsx": $$$$$$90,
-    "site/sections/Headers/TitleMonteSeuPlano.tsx": $$$$$$91,
-    "site/sections/Headers/TitlePlan.tsx": $$$$$$92,
-    "site/sections/Headers/TitleSegment.tsx": $$$$$$93,
-    "site/sections/Headers/TitleSuccess.tsx": $$$$$$94,
-    "site/sections/ModalContent.tsx": $$$$$$95,
-    "site/sections/MultiSection.tsx": $$$$$$96,
-    "site/sections/Navigation/Categorias.tsx": $$$$$$97,
-    "site/sections/Navigation/Navbar.tsx": $$$$$$98,
-    "site/sections/Navigation/Tabs.tsx": $$$$$$99,
-    "site/sections/Theme/Theme.tsx": $$$$$$100,
+    "site/sections/Final/Content/DropdownWithLogos.tsx": $$$$$$46,
+    "site/sections/Final/Content/Image.tsx": $$$$$$47,
+    "site/sections/Final/Content/Lead.tsx": $$$$$$48,
+    "site/sections/Final/Content/List.tsx": $$$$$$49,
+    "site/sections/Final/Content/LogoGroup.tsx": $$$$$$50,
+    "site/sections/Final/Content/OptionalCollapse.tsx": $$$$$$51,
+    "site/sections/Final/Content/OrderTracking.tsx": $$$$$$52,
+    "site/sections/Final/Content/Paragraph.tsx": $$$$$$53,
+    "site/sections/Final/Content/ParentComponent.tsx": $$$$$$54,
+    "site/sections/Final/Content/Product.tsx": $$$$$$55,
+    "site/sections/Final/Content/Spacer.tsx": $$$$$$56,
+    "site/sections/Final/Content/Title.tsx": $$$$$$57,
+    "site/sections/Final/Content/TitleMedium.tsx": $$$$$$58,
+    "site/sections/Final/DropDown/DropDownComponent.tsx": $$$$$$59,
+    "site/sections/Final/Form/fixedSectionForm.tsx": $$$$$$64,
+    "site/sections/Final/Form/Form.tsx": $$$$$$60,
+    "site/sections/Final/Form/InputRadio.tsx": $$$$$$61,
+    "site/sections/Final/Form/InputText.tsx": $$$$$$62,
+    "site/sections/Final/Form/TItleForm.tsx": $$$$$$63,
+    "site/sections/Final/Galery/GaleryContent.tsx": $$$$$$65,
+    "site/sections/Final/Galery/GaleryImages.tsx": $$$$$$66,
+    "site/sections/Final/Galery/GaleryPartners.tsx": $$$$$$67,
+    "site/sections/Final/Galery/GaleryTestimony.tsx": $$$$$$68,
+    "site/sections/Final/Headers/HeaderMedium.tsx": $$$$$$69,
+    "site/sections/Final/Headers/Openning.tsx": $$$$$$70,
+    "site/sections/Final/Headers/Tabs.tsx": $$$$$$71,
+    "site/sections/Final/Icons/IconGrid.tsx": $$$$$$72,
+    "site/sections/Final/Navbar/index.tsx": $$$$$$73,
+    "site/sections/Final/Navbar/script.tsx": $$$$$$74,
+    "site/sections/Final/Video/VideoContent.tsx": $$$$$$75,
+    "site/sections/Footer.tsx": $$$$$$76,
+    "site/sections/FormSection.tsx": $$$$$$77,
+    "site/sections/FormSteps.tsx": $$$$$$78,
+    "site/sections/Galery/GaleryContent.tsx": $$$$$$79,
+    "site/sections/Galery/GaleryTestimony.tsx": $$$$$$80,
+    "site/sections/Galery/GaleryWithLink.tsx": $$$$$$81,
+    "site/sections/Galery/ImageContent.tsx": $$$$$$82,
+    "site/sections/Headers/Offer.tsx": $$$$$$83,
+    "site/sections/Headers/OfferCupom.tsx": $$$$$$84,
+    "site/sections/Headers/Openning.tsx": $$$$$$85,
+    "site/sections/Headers/SubtitleWithShareIcon.tsx": $$$$$$86,
+    "site/sections/Headers/TitleArticle.tsx": $$$$$$87,
+    "site/sections/Headers/TitleError.tsx": $$$$$$88,
+    "site/sections/Headers/TitleIntegration.tsx": $$$$$$89,
+    "site/sections/Headers/TitleLarge.tsx": $$$$$$90,
+    "site/sections/Headers/TitleMedium.tsx": $$$$$$91,
+    "site/sections/Headers/TitleMonteSeuPlano.tsx": $$$$$$92,
+    "site/sections/Headers/TitlePlan.tsx": $$$$$$93,
+    "site/sections/Headers/TitleSegment.tsx": $$$$$$94,
+    "site/sections/Headers/TitleSuccess.tsx": $$$$$$95,
+    "site/sections/ModalContent.tsx": $$$$$$96,
+    "site/sections/MultiSection.tsx": $$$$$$97,
+    "site/sections/Navigation/Categorias.tsx": $$$$$$98,
+    "site/sections/Navigation/Navbar.tsx": $$$$$$99,
+    "site/sections/Navigation/Tabs.tsx": $$$$$$100,
+    "site/sections/Theme/Theme.tsx": $$$$$$101,
   },
   "apps": {
     "site/apps/decohub.ts": $$$$$$$$$$$0,
diff --git a/sections/Final/Content/DropdownWithLogos.tsx b/sections/Final/Content/DropdownWithLogos.tsx
new file mode 100644
index 0000000..c9fa22f
--- /dev/null
+++ b/sections/Final/Content/DropdownWithLogos.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import DropdownWithLogos from "../../../components/ui/Content/DropdownWithLogos/index.tsx";
+import { ImageWidget } from "apps/admin/widgets.ts";
+
+/**
+ * @title {{{title}}}
+ */
+export interface FilteredCategories {
+    /**
+     * @title Título do Bloco
+     * @description Escreva o título do bloco
+     */
+    title: string;
+
+    /**
+     * @title Nome
+     * @description Nome da categoria filtrada
+     */
+    name: string;
+
+    /**
+     * @title ID da Categoria
+     * @description ID único associado à categoria
+     */
+    id: string;
+}
+
+/**
+ * @title {{{title}}}
+ */
+export interface Logos {
+    /**
+     * @title Nome da Categoria
+     * @description Nome da categoria a qual o logo pertence
+     */
+    category: string;
+
+    /**
+     * @title Nome do Logo
+     * @description Título do logo
+     */
+    title: string;
+
+    /**
+     * @title Imagens
+     * @description Adicione as imagens do logotipo
+     */
+    logo: ImageWidget[];
+
+    /**
+     * @title ID único do logo
+     * @description ID único associado ao logo e suas imagens
+     */
+    id: string;
+}
+
+/**
+ * @title {{{title}}}
+ */
+export interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @title Texto do Dropdown
+     * @description Insira o texto do dropdown
+     */
+    dropdownText: string;
+
+    /**
+     * @title Ícone de Seta
+     * @description Insira o ícone de seta
+     */
+    arrowIcon: ImageWidget;
+
+    /**
+     * @title Categorias Filtradas
+     * @description Insira as categorias de integração filtradas
+     */
+    button?: FilteredCategories[];
+
+    /**
+     * @title Logos
+     * @description Lista de logos associados às categorias
+     */
+    logos: Logos[];
+}
+
+export default function Section({
+    dropdownText = "",
+    arrowIcon = "",
+    button,
+    logos,
+}: Props) {
+    return (
+        <DropdownWithLogos
+            dropdownText={dropdownText}
+            arrowIcon={arrowIcon}
+            button={button}
+            logos={logos}
+        />
+    );
+}

From 365fb2bb10ceef1b7859486a656cfa8b8ff0e735 Mon Sep 17 00:00:00 2001
From: omattaeus <gomesduartedev@gmail.com>
Date: Tue, 7 Jan 2025 17:48:56 -0300
Subject: [PATCH 3/7] tentativa de rendezirar formulario

---
 .../blocks/Tipos%20de%20Estabelecimentos.json |   7 +-
 .../pages-My%2520New%2520Page-461078.json     |  26 ++-
 components/ui/Form/FixedSectionForm/index.tsx |  84 +++++----
 components/ui/Form/Input/index.tsx            |  25 ++-
 components/ui/Form/InputRadio/index.tsx       | 100 +++++-----
 components/ui/Form/TitleForm/index.tsx        |  52 +++---
 components/ui/Form/index.tsx                  |  52 +++---
 components/ui/Form/script.tsx                 |  89 ++++++---
 manifest.gen.ts                               | 176 +++++++++---------
 sections/FormSection.tsx                      |   4 +-
 sections/FormSteps.tsx                        |  11 +-
 11 files changed, 355 insertions(+), 271 deletions(-)

diff --git a/.deco/blocks/Tipos%20de%20Estabelecimentos.json b/.deco/blocks/Tipos%20de%20Estabelecimentos.json
index 9e22155..379ebea 100644
--- a/.deco/blocks/Tipos%20de%20Estabelecimentos.json
+++ b/.deco/blocks/Tipos%20de%20Estabelecimentos.json
@@ -11,7 +11,8 @@
         "fontSize": "22px",
         "containerWidth": "Largura Limitada (343px)",
         "paddingTop": "Espacamento (40px)",
-        "contentAlignment": "Start"
+        "contentAlignment": "Start",
+        "colorThemeBg": "White"
       },
       "title": "Título"
     },
@@ -96,7 +97,5 @@
       "title": "Categorias"
     }
   ],
-  "collapse": {
-    "title": "Soluções"
-  }
+  "collapse": {}
 }
\ No newline at end of file
diff --git a/.deco/blocks/pages-My%2520New%2520Page-461078.json b/.deco/blocks/pages-My%2520New%2520Page-461078.json
index b93ca20..8a6de76 100644
--- a/.deco/blocks/pages-My%2520New%2520Page-461078.json
+++ b/.deco/blocks/pages-My%2520New%2520Page-461078.json
@@ -21,8 +21,8 @@
                   "description": "Solicitar plano",
                   "content": "Primeiramente, qual o seu nome completo?"
                 },
-                "title": "Título do Formulario",
-                "text": "Primeiramente, qual o seu nome completo?",
+                "title": "Solicitar plano",
+                "text": "Solicitar plano",
                 "description": "Primeiramente, qual o seu nome completo?"
               },
               {
@@ -79,6 +79,17 @@
                 "title": "Por favor, diga o seu nome.",
                 "text": "Por favor, diga o seu nome.",
                 "description": "Por favor, diga o seu nome."
+              },
+              {
+                "section": {
+                  "__resolveType": "site/sections/Final/Form/fixedSectionForm.tsx",
+                  "description": "Se preferir, fale agora mesmo com um de nossos consultores",
+                  "highlight": " agora mesmo",
+                  "ImageWidget": "https://data.decoassets.com/linked1/09eab253-e3e1-495a-bb35-67e06333cd42/icon_whats_fixed.svg"
+                },
+                "title": "Seção Fixa",
+                "text": "Seção Fixa",
+                "description": "Seção Fixa"
               }
             ]
           },
@@ -121,6 +132,17 @@
                 "title": "Teste",
                 "text": "Teste",
                 "description": "Teste"
+              },
+              {
+                "section": {
+                  "__resolveType": "site/sections/Final/Form/fixedSectionForm.tsx",
+                  "description": "Se preferir, fale agora mesmo com um de nossos consultores",
+                  "highlight": "agora mesmo",
+                  "ImageWidget": "https://data.decoassets.com/linked1/09eab253-e3e1-495a-bb35-67e06333cd42/icon_whats_fixed.svg"
+                },
+                "title": "Seção Fixa",
+                "text": "Seção Fixa",
+                "description": "Seção Fixa"
               }
             ]
           },
diff --git a/components/ui/Form/FixedSectionForm/index.tsx b/components/ui/Form/FixedSectionForm/index.tsx
index 0c28620..307dbcb 100644
--- a/components/ui/Form/FixedSectionForm/index.tsx
+++ b/components/ui/Form/FixedSectionForm/index.tsx
@@ -1,5 +1,6 @@
 import { ImageWidget } from "apps/admin/widgets.ts";
 import Image from "apps/website/components/Image.tsx";
+import Script, { type Props } from "../script.tsx";
 import type { JSX } from "preact";
 
 export type Link = {
@@ -61,51 +62,56 @@ function FixedSectionForm({
     };
 
     return (
-        <section
-            id="fixed-section"
-            className="fixed bottom-0 left-0 w-full flex justify-center bg-white lg:hidden z-40"
-        >
-            <div className="flex flex-col flex-grow">
-                <div className="pr-4 mb-5 flex justify-end mt-auto">
-                    <div className="w-[56px] h-[56px] flex justify-center items-center rounded-full bg-sacramentoState cursor-pointer">
-                        <svg
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
+        <>
+            <div
+                id="fixed-section"
+                className="fixed bottom-0 left-0 w-full flex justify-center bg-white z-40"
+            >
+                <div className="flex flex-col flex-grow">
+                    <div className="pr-4 mb-5 flex justify-end mt-auto">
+                        <button
+                            id="botao"
+                            className="w-[56px] h-[56px] flex justify-center items-center rounded-full bg-sacramentoState cursor-pointer"
                         >
-                            <path
-                                d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z"
-                                fill="#3BEDB2"
-                            />
-                        </svg>
+                            <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z"
+                                    fill="#3BEDB2"
+                                />
+                            </svg>
+                        </button>
                     </div>
-                </div>
-
-                <div className="px-4 pt-[14px] pb-5 w-full flex justify-between items-center gap-x-4 shadow-top">
-                    <div className="w-full max-w-[236px] text-start">
-                        <p className="text-base font-sans font-normal text-sacramentoState-80">
-                            {getHighlightedText(description, highlight)}
-                        </p>
-                    </div>
-                    <div className="w-fit flex items-center">
-                        <div className="w-[92px] cursor-pointer">
-                            {ImageWidget && (
-                                <div className="w-full h-full px-5 py-2.5 flex justify-center items-center bg-darkMintCream rounded-[10px]">
-                                    <Image
-                                        src={ImageWidget}
-                                        alt="Section Image"
-                                        className="w-6 h-6"
-                                        width={24}
-                                    />
-                                </div>
-                            )}
+                    <div className="px-4 pt-[14px] pb-5 w-full flex justify-between items-center gap-x-4 shadow-top">
+                        <div className="w-full max-w-[236px] text-start">
+                            <p className="text-base font-sans font-normal text-sacramentoState-80">
+                                {getHighlightedText(description, highlight)}
+                            </p>
+                        </div>
+                        <div className="w-fit flex items-center">
+                            <div className="w-[92px] cursor-pointer">
+                                {ImageWidget && (
+                                    <div className="w-full h-full px-5 py-2.5 flex justify-center items-center bg-darkMintCream rounded-[10px]">
+                                        <Image
+                                            src={ImageWidget}
+                                            alt="Section Image"
+                                            className="w-6 h-6"
+                                            width={24}
+                                        />
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </section>
+            <Script />
+        </>
     );
 }
 
diff --git a/components/ui/Form/Input/index.tsx b/components/ui/Form/Input/index.tsx
index 9530ba1..98de3fc 100644
--- a/components/ui/Form/Input/index.tsx
+++ b/components/ui/Form/Input/index.tsx
@@ -1,3 +1,5 @@
+import Script, { type Props } from "../script.tsx";
+
 interface InputComponentProps {
   placeholder?: string;
   onValidate?: (isValid: boolean) => void;
@@ -12,17 +14,20 @@ function InputComponent({ placeholder, onValidate }: InputComponentProps) {
   };
 
   return (
-    <div className="px-4 pt-[60px] flex justify-center">
-      <div className="w-full max-w-[706px]">
-        <input
-          type="text"
-          placeholder={placeholder}
-          className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80 rounded-none"
-          onInput={handleChange}
-        />
+    <>
+      <div className="flex justify-center">
+        <div className="w-full max-w-[706px]">
+          <input
+            type="text"
+            placeholder={placeholder}
+            className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80 rounded-none"
+            onInput={handleChange}
+          />
+        </div>
       </div>
-    </div>
+      <Script />
+    </>
   );
 }
 
-export default InputComponent;
\ No newline at end of file
+export default InputComponent;
diff --git a/components/ui/Form/InputRadio/index.tsx b/components/ui/Form/InputRadio/index.tsx
index e0efe59..63bd507 100644
--- a/components/ui/Form/InputRadio/index.tsx
+++ b/components/ui/Form/InputRadio/index.tsx
@@ -1,4 +1,5 @@
 import type { JSX } from "preact";
+import Script, { type Props } from "../script.tsx";
 
 interface InputRadioComponentProps {
   text: string;
@@ -20,56 +21,59 @@ function InputRadioComponent({
   };
 
   return (
-    <div className="flex justify-center">
-      <div className="px-4 w-full max-w-[706px] grid gap-6">
-        <p className="text-lg text-sacramentoState font-semibold">{text}</p>
-        {inputRadio.map((item, index) => (
-          <div key={index} className="flex items-center gap-2">
-            <input
-              hidden
-              type="radio"
-              name={name}
-              id={`${name}-${item.label}-${index}`}
-              onChange={handleChange}
-              className="peer"
-            />
-            <svg
-              className="cursor-pointer peer-checked:hidden"
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="17"
-              viewBox="0 0 16 17"
-              fill="none"
-            >
-              <circle
-                cx="8"
-                cy="8.5"
-                r="7.5"
-                stroke="#003330"
-                strokeOpacity="0.1"
+    <>
+      <div className="flex justify-center">
+        <div className="px-4 w-full max-w-[706px] grid gap-6">
+          <p className="text-lg text-sacramentoState font-semibold">{text}</p>
+          {inputRadio.map((item, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <input
+                hidden
+                type="radio"
+                name={name}
+                id={`${name}-${item.label}-${index}`}
+                onChange={handleChange}
+                className="peer"
               />
-            </svg>
-            <svg
-              className="hidden cursor-pointer peer-checked:block"
-              width="16"
-              height="17"
-              viewBox="0 0 16 17"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle cx="8" cy="8.5" r="7.5" stroke="#003330" />
-              <circle cx="8" cy="8.5" r="5" fill="#3BEDB2" />
-            </svg>
-            <label
-              htmlFor={`${name}-${item.label}-${index}`}
-              className="cursor-pointer"
-            >
-              {item.label}
-            </label>
-          </div>
-        ))}
+              <svg
+                className="cursor-pointer peer-checked:hidden"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+              >
+                <circle
+                  cx="8"
+                  cy="8.5"
+                  r="7.5"
+                  stroke="#003330"
+                  strokeOpacity="0.1"
+                />
+              </svg>
+              <svg
+                className="hidden cursor-pointer peer-checked:block"
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle cx="8" cy="8.5" r="7.5" stroke="#003330" />
+                <circle cx="8" cy="8.5" r="5" fill="#3BEDB2" />
+              </svg>
+              <label
+                htmlFor={`${name}-${item.label}-${index}`}
+                className="cursor-pointer"
+              >
+                {item.label}
+              </label>
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
+      <Script />
+    </>
   );
 }
 
diff --git a/components/ui/Form/TitleForm/index.tsx b/components/ui/Form/TitleForm/index.tsx
index 302623b..23ef4ca 100644
--- a/components/ui/Form/TitleForm/index.tsx
+++ b/components/ui/Form/TitleForm/index.tsx
@@ -1,4 +1,5 @@
 import type { JSX } from "preact";
+import Script, { type Props } from "../script.tsx";
 
 function setClass(value: string) {
     switch (value) {
@@ -103,33 +104,38 @@ function TitleForm(
         & Props,
 ) {
     return (
-        <div
-            className={`flex ${
-                setAlignmentContent(contentAlignment)
-            } items-center`}
-        >
+        <>
             <div
-                className={`${
-                    setContainerWidth(containerWidth)
-                }  px-4 ${setPaddingTop(paddingTop)}`}
+                className={`flex ${
+                    setAlignmentContent(contentAlignment)
+                } items-center`}
             >
-                <div className="grid gap-y-2">
-                    <p className="text-sm font-sans font-light leading-tight-19 text-sacramentoState-80">
-                        {description}
-                    </p>
-                    <p
-                        className={`font-sans font-medium leading-tight-115 tracking-tight-0.56 ${
-                            setClass(
-                                colorTheme,
-                            )
-                        } ${setAlignment(alignment)} ${setFontSize(fontSize)}`}
-                    >
-                        {content}
-                    </p>
+                <div
+                    className={`${setContainerWidth(containerWidth)}  ${
+                        setPaddingTop(paddingTop)
+                    }`}
+                >
+                    <div className="grid gap-y-2">
+                        <p className="text-sm font-sans font-light leading-tight-19 text-sacramentoState-80">
+                            {description}
+                        </p>
+                        <p
+                            className={`font-sans font-medium leading-tight-115 tracking-tight-0.56 ${
+                                setClass(
+                                    colorTheme,
+                                )
+                            } ${setAlignment(alignment)} ${
+                                setFontSize(fontSize)
+                            }`}
+                        >
+                            {content}
+                        </p>
+                    </div>
                 </div>
             </div>
-        </div>
+            <Script />
+        </>
     );
 }
 
-export default TitleForm;
\ No newline at end of file
+export default TitleForm;
diff --git a/components/ui/Form/index.tsx b/components/ui/Form/index.tsx
index 4dbf4ed..971c953 100644
--- a/components/ui/Form/index.tsx
+++ b/components/ui/Form/index.tsx
@@ -18,52 +18,56 @@ function LoadComponent(
 }
 
 function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
-
   return (
     <>
-      <div className="flex justify-center">
+      <div data-form="formulario" className="flex justify-center overflow-y-hidden">
         <div className="h-dvh grid grid-rows-[80px_1fr_96px] w-full max-w-[706px]">
           <div className="grid grid-cols-[32px_minmax(137px,_1fr)_32px] items-center justify-between gap-4 px-4 py-6">
             <button>
-              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-                  <path d="M15.0531 16L19.7731 11.28C20.0214 11.0302 20.1608 10.6923 20.1608 10.34C20.1608 9.98777 20.0214 9.64983 19.7731 9.40001C19.6491 9.27504 19.5017 9.17585 19.3392 9.10816C19.1767 9.04047 19.0024 9.00562 18.8264 9.00562C18.6504 9.00562 18.4761 9.04047 18.3137 9.10816C18.1512 9.17585 18.0037 9.27504 17.8798 9.40001L12.2264 15.0533C12.1015 15.1773 12.0023 15.3248 11.9346 15.4872C11.8669 15.6497 11.832 15.824 11.832 16C11.832 16.176 11.8669 16.3503 11.9346 16.5128C12.0023 16.6753 12.1015 16.8227 12.2264 16.9467L17.8798 22.6667C18.0043 22.7903 18.1521 22.888 18.3146 22.9544C18.477 23.0207 18.651 23.0544 18.8264 23.0533C19.0019 23.0544 19.1759 23.0207 19.3383 22.9544C19.5008 22.888 19.6485 22.7903 19.7731 22.6667C20.0214 22.4169 20.1608 22.0789 20.1608 21.7267C20.1608 21.3744 20.0214 21.0365 19.7731 20.7867L15.0531 16Z" fill="#003330"/>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 32 32"
+                fill="none"
+              >
+                <path
+                  d="M15.0531 16L19.7731 11.28C20.0214 11.0302 20.1608 10.6923 20.1608 10.34C20.1608 9.98777 20.0214 9.64983 19.7731 9.40001C19.6491 9.27504 19.5017 9.17585 19.3392 9.10816C19.1767 9.04047 19.0024 9.00562 18.8264 9.00562C18.6504 9.00562 18.4761 9.04047 18.3137 9.10816C18.1512 9.17585 18.0037 9.27504 17.8798 9.40001L12.2264 15.0533C12.1015 15.1773 12.0023 15.3248 11.9346 15.4872C11.8669 15.6497 11.832 15.824 11.832 16C11.832 16.176 11.8669 16.3503 11.9346 16.5128C12.0023 16.6753 12.1015 16.8227 12.2264 16.9467L17.8798 22.6667C18.0043 22.7903 18.1521 22.888 18.3146 22.9544C18.477 23.0207 18.651 23.0544 18.8264 23.0533C19.0019 23.0544 19.1759 23.0207 19.3383 22.9544C19.5008 22.888 19.6485 22.7903 19.7731 22.6667C20.0214 22.4169 20.1608 22.0789 20.1608 21.7267C20.1608 21.3744 20.0214 21.0365 19.7731 20.7867L15.0531 16Z"
+                  fill="#003330"
+                />
               </svg>
             </button>
             <div className="flex justify-center items-center">
-                <div className={`w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full after:h-[5px] after:bg-[#3BEDB2] after:rounded-full after:block`}></div>
+              <div
+                className={`w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full after:h-[5px] after:bg-[#3BEDB2] after:rounded-full after:block`}
+              >
+              </div>
             </div>
           </div>
           <div className="px-6 py-6 border-y border-gray-100 flex flex-col gap-12 h-full overflow-auto">
             {sections?.map((item, index) => (
               // <div data-index={index} className="hidde">
-              <div data-index="formulario" className="hidde">
-                <div className="grid gap-2">
+              <div data-index={'campo-' + index} className="" key={index}>
+                {/* <div className="grid gap-2">
                   <h1 className="text-sm font-light text-primary">
-                    {/* {sections[currentStep.value].text} 1 */}
+                    {sections[currentStep.value].text} 1 *
                     Solicitar plano
                   </h1>
                   <h2 className="text-2xl font-semibold text-primary">
-                    {/* {sections[currentStep.value].description} */}
+                    {sections[currentStep.value].description}
                     Primeiramente, qual o seu nome completo?
                   </h2>
-                </div>
-                {/* // Renderizando o componente
-                // {LoadComponent(item.section)} */}
-                <LoadComponent 
+                </div> */}
+                {
+                  /* // Renderizando o componente
+                // {LoadComponent(item.section)} */
+                }
+                <LoadComponent
                   {...item.section}
-                  // value={inputValue}
-                  // onChange={handleInputChange}
-                />
+                /> 
               </div>
             ))}
           </div>
-          <div className="flex justify-end items-center px-4">
-            <button id="botao" className="flex justify-center items-center h-[56px] w-[56px] rounded-full bg-sacramentoState disabled:bg-sacramentoState-10">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z" fill="#3BEDB2"/>
-              </svg>
-            </button>
-          </div>
         </div>
       </div>
       <Script />
@@ -71,4 +75,4 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
   );
 }
 
-export default FormComponent;
+export default FormComponent;
\ No newline at end of file
diff --git a/components/ui/Form/script.tsx b/components/ui/Form/script.tsx
index 9219691..606d6fa 100644
--- a/components/ui/Form/script.tsx
+++ b/components/ui/Form/script.tsx
@@ -1,45 +1,84 @@
 import { useScript as useScript } from "@deco/deco/hooks";
 
-export interface Props { }
+export interface Props {}
 
-const setup = ({ }: Props) => {
-    
-  // document.addEventListener("DOMContentLoaded", function () {
-  //   // Obtenha todas as divs com data-index
-  //   const items = document.querySelectorAll(`[data-index="formulario"]`);
+const setup = ({}: Props) => {
+  let currentStep = 0;
 
-  //   let qtdSteps = items.length;
-    // let step = 0;
-    
-    // setTimeout(() => {
-    //   items[step].classList.remove("hidden");
-    // }, 2000);
+  const getFormPages = () => {
+    return Array.from(
+      document.querySelectorAll('[data-form="formulario"]'),
+    ) as HTMLElement[];
+  };
 
-  // });
+  let formPages = getFormPages();
+  const totalSteps = () => formPages.length;
 
-  // function handleNext() {
-  //   console.log('aqui');
-    
-  // }
+  const showCurrentPage = () => {
+    formPages.forEach((page, index) => {
+      if (index === currentStep) {
+        page.classList.add("block");
+        page.classList.remove("hidden");
+      } else {
+        page.classList.add("hidden");
+        page.classList.remove("block");
+      }
+    });
 
-  const button = document.getElementById('botao');
+    console.log(`Etapa atual: ${currentStep}`);
+    console.log(`Total de páginas: ${totalSteps()}`);
+  };
 
-  button?.addEventListener('click', function() {
-    alert('Botão clicado!');
+  const button = document.getElementById("botao") as HTMLButtonElement | null;
+
+  const attachButtonEvent = () => {
+    if (button) {
+      button.removeEventListener("click", handleNext);
+      button.addEventListener("click", handleNext);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentStep < totalSteps() - 1) {
+      currentStep++;
+      console.log(`Indo para a próxima etapa: ${currentStep}`);
+      showCurrentPage();
+
+      window.scrollTo({
+        top: formPages[currentStep].offsetTop,
+        behavior: "smooth",
+      });
+    } else {
+      alert("Você completou todos os formulários!");
+    }
+  };
+
+  attachButtonEvent();
+
+  const observer = new MutationObserver(() => {
+    console.log(
+      "Mudança detectada no DOM, atualizando páginas do formulário...",
+    );
+    formPages = getFormPages();
+    showCurrentPage();
+
+    attachButtonEvent();
   });
 
-}
+  observer.observe(document.body, { childList: true, subtree: true });
 
-function FormSteps(
-  { }: Props,
-) {
+  showCurrentPage();
+};
+
+function FormSteps({}: Props) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
-        __html: useScript(setup, { }),
+        __html: useScript(setup, {}),
       }}
     />
   );
 }
+
 export default FormSteps;
\ No newline at end of file
diff --git a/manifest.gen.ts b/manifest.gen.ts
index a0809a1..cf6f072 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -65,49 +65,51 @@ import * as $$$$$$55 from "./sections/Final/Content/Product.tsx";
 import * as $$$$$$56 from "./sections/Final/Content/Spacer.tsx";
 import * as $$$$$$57 from "./sections/Final/Content/Title.tsx";
 import * as $$$$$$58 from "./sections/Final/Content/TitleMedium.tsx";
-import * as $$$$$$59 from "./sections/Final/DropDown/DropDownComponent.tsx";
-import * as $$$$$$64 from "./sections/Final/Form/fixedSectionForm.tsx";
-import * as $$$$$$60 from "./sections/Final/Form/Form.tsx";
-import * as $$$$$$61 from "./sections/Final/Form/InputRadio.tsx";
-import * as $$$$$$62 from "./sections/Final/Form/InputText.tsx";
-import * as $$$$$$63 from "./sections/Final/Form/TItleForm.tsx";
-import * as $$$$$$65 from "./sections/Final/Galery/GaleryContent.tsx";
-import * as $$$$$$66 from "./sections/Final/Galery/GaleryImages.tsx";
-import * as $$$$$$67 from "./sections/Final/Galery/GaleryPartners.tsx";
-import * as $$$$$$68 from "./sections/Final/Galery/GaleryTestimony.tsx";
-import * as $$$$$$69 from "./sections/Final/Headers/HeaderMedium.tsx";
-import * as $$$$$$70 from "./sections/Final/Headers/Openning.tsx";
-import * as $$$$$$71 from "./sections/Final/Headers/Tabs.tsx";
-import * as $$$$$$72 from "./sections/Final/Icons/IconGrid.tsx";
-import * as $$$$$$73 from "./sections/Final/Navbar/index.tsx";
-import * as $$$$$$74 from "./sections/Final/Navbar/script.tsx";
-import * as $$$$$$75 from "./sections/Final/Video/VideoContent.tsx";
-import * as $$$$$$76 from "./sections/Footer.tsx";
-import * as $$$$$$77 from "./sections/FormSection.tsx";
-import * as $$$$$$78 from "./sections/FormSteps.tsx";
-import * as $$$$$$79 from "./sections/Galery/GaleryContent.tsx";
-import * as $$$$$$80 from "./sections/Galery/GaleryTestimony.tsx";
-import * as $$$$$$81 from "./sections/Galery/GaleryWithLink.tsx";
-import * as $$$$$$82 from "./sections/Galery/ImageContent.tsx";
-import * as $$$$$$83 from "./sections/Headers/Offer.tsx";
-import * as $$$$$$84 from "./sections/Headers/OfferCupom.tsx";
-import * as $$$$$$85 from "./sections/Headers/Openning.tsx";
-import * as $$$$$$86 from "./sections/Headers/SubtitleWithShareIcon.tsx";
-import * as $$$$$$87 from "./sections/Headers/TitleArticle.tsx";
-import * as $$$$$$88 from "./sections/Headers/TitleError.tsx";
-import * as $$$$$$89 from "./sections/Headers/TitleIntegration.tsx";
-import * as $$$$$$90 from "./sections/Headers/TitleLarge.tsx";
-import * as $$$$$$91 from "./sections/Headers/TitleMedium.tsx";
-import * as $$$$$$92 from "./sections/Headers/TitleMonteSeuPlano.tsx";
-import * as $$$$$$93 from "./sections/Headers/TitlePlan.tsx";
-import * as $$$$$$94 from "./sections/Headers/TitleSegment.tsx";
-import * as $$$$$$95 from "./sections/Headers/TitleSuccess.tsx";
-import * as $$$$$$96 from "./sections/ModalContent.tsx";
-import * as $$$$$$97 from "./sections/MultiSection.tsx";
-import * as $$$$$$98 from "./sections/Navigation/Categorias.tsx";
-import * as $$$$$$99 from "./sections/Navigation/Navbar.tsx";
-import * as $$$$$$100 from "./sections/Navigation/Tabs.tsx";
-import * as $$$$$$101 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$59 from "./sections/Final/Counter/Counter.tsx";
+import * as $$$$$$60 from "./sections/Final/Counter/script.tsx";
+import * as $$$$$$61 from "./sections/Final/DropDown/DropDownComponent.tsx";
+import * as $$$$$$66 from "./sections/Final/Form/fixedSectionForm.tsx";
+import * as $$$$$$62 from "./sections/Final/Form/Form.tsx";
+import * as $$$$$$63 from "./sections/Final/Form/InputRadio.tsx";
+import * as $$$$$$64 from "./sections/Final/Form/InputText.tsx";
+import * as $$$$$$65 from "./sections/Final/Form/TItleForm.tsx";
+import * as $$$$$$67 from "./sections/Final/Galery/GaleryContent.tsx";
+import * as $$$$$$68 from "./sections/Final/Galery/GaleryImages.tsx";
+import * as $$$$$$69 from "./sections/Final/Galery/GaleryPartners.tsx";
+import * as $$$$$$70 from "./sections/Final/Galery/GaleryTestimony.tsx";
+import * as $$$$$$71 from "./sections/Final/Headers/HeaderMedium.tsx";
+import * as $$$$$$72 from "./sections/Final/Headers/Openning.tsx";
+import * as $$$$$$73 from "./sections/Final/Headers/Tabs.tsx";
+import * as $$$$$$74 from "./sections/Final/Icons/IconGrid.tsx";
+import * as $$$$$$75 from "./sections/Final/Navbar/index.tsx";
+import * as $$$$$$76 from "./sections/Final/Navbar/script.tsx";
+import * as $$$$$$77 from "./sections/Final/Video/VideoContent.tsx";
+import * as $$$$$$78 from "./sections/Footer.tsx";
+import * as $$$$$$79 from "./sections/FormSection.tsx";
+import * as $$$$$$80 from "./sections/FormSteps.tsx";
+import * as $$$$$$81 from "./sections/Galery/GaleryContent.tsx";
+import * as $$$$$$82 from "./sections/Galery/GaleryTestimony.tsx";
+import * as $$$$$$83 from "./sections/Galery/GaleryWithLink.tsx";
+import * as $$$$$$84 from "./sections/Galery/ImageContent.tsx";
+import * as $$$$$$85 from "./sections/Headers/Offer.tsx";
+import * as $$$$$$86 from "./sections/Headers/OfferCupom.tsx";
+import * as $$$$$$87 from "./sections/Headers/Openning.tsx";
+import * as $$$$$$88 from "./sections/Headers/SubtitleWithShareIcon.tsx";
+import * as $$$$$$89 from "./sections/Headers/TitleArticle.tsx";
+import * as $$$$$$90 from "./sections/Headers/TitleError.tsx";
+import * as $$$$$$91 from "./sections/Headers/TitleIntegration.tsx";
+import * as $$$$$$92 from "./sections/Headers/TitleLarge.tsx";
+import * as $$$$$$93 from "./sections/Headers/TitleMedium.tsx";
+import * as $$$$$$94 from "./sections/Headers/TitleMonteSeuPlano.tsx";
+import * as $$$$$$95 from "./sections/Headers/TitlePlan.tsx";
+import * as $$$$$$96 from "./sections/Headers/TitleSegment.tsx";
+import * as $$$$$$97 from "./sections/Headers/TitleSuccess.tsx";
+import * as $$$$$$98 from "./sections/ModalContent.tsx";
+import * as $$$$$$99 from "./sections/MultiSection.tsx";
+import * as $$$$$$100 from "./sections/Navigation/Categorias.tsx";
+import * as $$$$$$101 from "./sections/Navigation/Navbar.tsx";
+import * as $$$$$$102 from "./sections/Navigation/Tabs.tsx";
+import * as $$$$$$103 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -174,49 +176,51 @@ const manifest = {
     "site/sections/Final/Content/Spacer.tsx": $$$$$$56,
     "site/sections/Final/Content/Title.tsx": $$$$$$57,
     "site/sections/Final/Content/TitleMedium.tsx": $$$$$$58,
-    "site/sections/Final/DropDown/DropDownComponent.tsx": $$$$$$59,
-    "site/sections/Final/Form/fixedSectionForm.tsx": $$$$$$64,
-    "site/sections/Final/Form/Form.tsx": $$$$$$60,
-    "site/sections/Final/Form/InputRadio.tsx": $$$$$$61,
-    "site/sections/Final/Form/InputText.tsx": $$$$$$62,
-    "site/sections/Final/Form/TItleForm.tsx": $$$$$$63,
-    "site/sections/Final/Galery/GaleryContent.tsx": $$$$$$65,
-    "site/sections/Final/Galery/GaleryImages.tsx": $$$$$$66,
-    "site/sections/Final/Galery/GaleryPartners.tsx": $$$$$$67,
-    "site/sections/Final/Galery/GaleryTestimony.tsx": $$$$$$68,
-    "site/sections/Final/Headers/HeaderMedium.tsx": $$$$$$69,
-    "site/sections/Final/Headers/Openning.tsx": $$$$$$70,
-    "site/sections/Final/Headers/Tabs.tsx": $$$$$$71,
-    "site/sections/Final/Icons/IconGrid.tsx": $$$$$$72,
-    "site/sections/Final/Navbar/index.tsx": $$$$$$73,
-    "site/sections/Final/Navbar/script.tsx": $$$$$$74,
-    "site/sections/Final/Video/VideoContent.tsx": $$$$$$75,
-    "site/sections/Footer.tsx": $$$$$$76,
-    "site/sections/FormSection.tsx": $$$$$$77,
-    "site/sections/FormSteps.tsx": $$$$$$78,
-    "site/sections/Galery/GaleryContent.tsx": $$$$$$79,
-    "site/sections/Galery/GaleryTestimony.tsx": $$$$$$80,
-    "site/sections/Galery/GaleryWithLink.tsx": $$$$$$81,
-    "site/sections/Galery/ImageContent.tsx": $$$$$$82,
-    "site/sections/Headers/Offer.tsx": $$$$$$83,
-    "site/sections/Headers/OfferCupom.tsx": $$$$$$84,
-    "site/sections/Headers/Openning.tsx": $$$$$$85,
-    "site/sections/Headers/SubtitleWithShareIcon.tsx": $$$$$$86,
-    "site/sections/Headers/TitleArticle.tsx": $$$$$$87,
-    "site/sections/Headers/TitleError.tsx": $$$$$$88,
-    "site/sections/Headers/TitleIntegration.tsx": $$$$$$89,
-    "site/sections/Headers/TitleLarge.tsx": $$$$$$90,
-    "site/sections/Headers/TitleMedium.tsx": $$$$$$91,
-    "site/sections/Headers/TitleMonteSeuPlano.tsx": $$$$$$92,
-    "site/sections/Headers/TitlePlan.tsx": $$$$$$93,
-    "site/sections/Headers/TitleSegment.tsx": $$$$$$94,
-    "site/sections/Headers/TitleSuccess.tsx": $$$$$$95,
-    "site/sections/ModalContent.tsx": $$$$$$96,
-    "site/sections/MultiSection.tsx": $$$$$$97,
-    "site/sections/Navigation/Categorias.tsx": $$$$$$98,
-    "site/sections/Navigation/Navbar.tsx": $$$$$$99,
-    "site/sections/Navigation/Tabs.tsx": $$$$$$100,
-    "site/sections/Theme/Theme.tsx": $$$$$$101,
+    "site/sections/Final/Counter/Counter.tsx": $$$$$$59,
+    "site/sections/Final/Counter/script.tsx": $$$$$$60,
+    "site/sections/Final/DropDown/DropDownComponent.tsx": $$$$$$61,
+    "site/sections/Final/Form/fixedSectionForm.tsx": $$$$$$66,
+    "site/sections/Final/Form/Form.tsx": $$$$$$62,
+    "site/sections/Final/Form/InputRadio.tsx": $$$$$$63,
+    "site/sections/Final/Form/InputText.tsx": $$$$$$64,
+    "site/sections/Final/Form/TItleForm.tsx": $$$$$$65,
+    "site/sections/Final/Galery/GaleryContent.tsx": $$$$$$67,
+    "site/sections/Final/Galery/GaleryImages.tsx": $$$$$$68,
+    "site/sections/Final/Galery/GaleryPartners.tsx": $$$$$$69,
+    "site/sections/Final/Galery/GaleryTestimony.tsx": $$$$$$70,
+    "site/sections/Final/Headers/HeaderMedium.tsx": $$$$$$71,
+    "site/sections/Final/Headers/Openning.tsx": $$$$$$72,
+    "site/sections/Final/Headers/Tabs.tsx": $$$$$$73,
+    "site/sections/Final/Icons/IconGrid.tsx": $$$$$$74,
+    "site/sections/Final/Navbar/index.tsx": $$$$$$75,
+    "site/sections/Final/Navbar/script.tsx": $$$$$$76,
+    "site/sections/Final/Video/VideoContent.tsx": $$$$$$77,
+    "site/sections/Footer.tsx": $$$$$$78,
+    "site/sections/FormSection.tsx": $$$$$$79,
+    "site/sections/FormSteps.tsx": $$$$$$80,
+    "site/sections/Galery/GaleryContent.tsx": $$$$$$81,
+    "site/sections/Galery/GaleryTestimony.tsx": $$$$$$82,
+    "site/sections/Galery/GaleryWithLink.tsx": $$$$$$83,
+    "site/sections/Galery/ImageContent.tsx": $$$$$$84,
+    "site/sections/Headers/Offer.tsx": $$$$$$85,
+    "site/sections/Headers/OfferCupom.tsx": $$$$$$86,
+    "site/sections/Headers/Openning.tsx": $$$$$$87,
+    "site/sections/Headers/SubtitleWithShareIcon.tsx": $$$$$$88,
+    "site/sections/Headers/TitleArticle.tsx": $$$$$$89,
+    "site/sections/Headers/TitleError.tsx": $$$$$$90,
+    "site/sections/Headers/TitleIntegration.tsx": $$$$$$91,
+    "site/sections/Headers/TitleLarge.tsx": $$$$$$92,
+    "site/sections/Headers/TitleMedium.tsx": $$$$$$93,
+    "site/sections/Headers/TitleMonteSeuPlano.tsx": $$$$$$94,
+    "site/sections/Headers/TitlePlan.tsx": $$$$$$95,
+    "site/sections/Headers/TitleSegment.tsx": $$$$$$96,
+    "site/sections/Headers/TitleSuccess.tsx": $$$$$$97,
+    "site/sections/ModalContent.tsx": $$$$$$98,
+    "site/sections/MultiSection.tsx": $$$$$$99,
+    "site/sections/Navigation/Categorias.tsx": $$$$$$100,
+    "site/sections/Navigation/Navbar.tsx": $$$$$$101,
+    "site/sections/Navigation/Tabs.tsx": $$$$$$102,
+    "site/sections/Theme/Theme.tsx": $$$$$$103,
   },
   "apps": {
     "site/apps/decohub.ts": $$$$$$$$$$$0,
diff --git a/sections/FormSection.tsx b/sections/FormSection.tsx
index 5fb59e8..ee98a68 100644
--- a/sections/FormSection.tsx
+++ b/sections/FormSection.tsx
@@ -29,7 +29,7 @@ function LoadComponent(
   );
 }
 
-export default function FormSection(
+function FormSection(
   { sections }: Props,
 ) {
     return (
@@ -40,3 +40,5 @@ export default function FormSection(
       </div>
     );
   }
+
+export default FormSection;
\ No newline at end of file
diff --git a/sections/FormSteps.tsx b/sections/FormSteps.tsx
index b4bdc1b..f41902a 100644
--- a/sections/FormSteps.tsx
+++ b/sections/FormSteps.tsx
@@ -30,17 +30,10 @@ export interface Props {
 }
 
 export default function FormSteps({ sections }: Props) {
-  if (!sections || sections.length === 0) {
-    return <div>Nenhum conteúdo encontrado</div>;
-  }
+  
   return (
     <div>
-      <FormStepsComponent
-        sections={sections.map((item) => ({
-          Component: item.section.Component,
-          props: item.section.props,
-        }))}
-      />
+      <FormStepsComponent sections={sections} />
     </div>
   );
 }
\ No newline at end of file

From 7a6754cf42603a9b801da7f435876b75f7fdff1c Mon Sep 17 00:00:00 2001
From: omattaeus <gomesduartedev@gmail.com>
Date: Wed, 8 Jan 2025 11:39:44 -0300
Subject: [PATCH 4/7] fazendo a troca de tela entre formularios

---
 .../pages-My%2520New%2520Page-461078.json     |  6 +-
 components/ui/Form/FixedSectionForm/index.tsx |  2 +-
 components/ui/Form/Input/index.tsx            |  2 -
 components/ui/Form/InputRadio/index.tsx       |  2 -
 components/ui/Form/TitleForm/index.tsx        |  2 -
 components/ui/Form/index.tsx                  | 29 ++++++----
 components/ui/Form/script.tsx                 | 57 +++++++++++++------
 7 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/.deco/blocks/pages-My%2520New%2520Page-461078.json b/.deco/blocks/pages-My%2520New%2520Page-461078.json
index 8a6de76..06366ee 100644
--- a/.deco/blocks/pages-My%2520New%2520Page-461078.json
+++ b/.deco/blocks/pages-My%2520New%2520Page-461078.json
@@ -19,7 +19,7 @@
                   "contentAlignment": "Start",
                   "paddingTop": "Espacamento (40px)",
                   "description": "Solicitar plano",
-                  "content": "Primeiramente, qual o seu nome completo?"
+                  "content": "Pagina 1"
                 },
                 "title": "Solicitar plano",
                 "text": "Solicitar plano",
@@ -63,7 +63,7 @@
                   "containerWidth": "Largura Limitada (327px)",
                   "contentAlignment": "Start",
                   "paddingTop": "Espacamento (40px)",
-                  "content": "Primeiramente, qual o seu nome completo?",
+                  "content": "Pagina 2",
                   "description": "Solicitar plano"
                 },
                 "title": "Título Formulario",
@@ -108,7 +108,7 @@
                   "containerWidth": "Largura Limitada (327px)",
                   "contentAlignment": "Start",
                   "paddingTop": "Espacamento (40px)",
-                  "content": "Primeiramente, qual o seu nome completo?",
+                  "content": "Pagina 3",
                   "description": "Solicitar plano"
                 },
                 "title": "Título Formulario",
diff --git a/components/ui/Form/FixedSectionForm/index.tsx b/components/ui/Form/FixedSectionForm/index.tsx
index 307dbcb..57447e4 100644
--- a/components/ui/Form/FixedSectionForm/index.tsx
+++ b/components/ui/Form/FixedSectionForm/index.tsx
@@ -115,4 +115,4 @@ function FixedSectionForm({
     );
 }
 
-export default FixedSectionForm;
+export default FixedSectionForm;
\ No newline at end of file
diff --git a/components/ui/Form/Input/index.tsx b/components/ui/Form/Input/index.tsx
index 98de3fc..cbb1c4c 100644
--- a/components/ui/Form/Input/index.tsx
+++ b/components/ui/Form/Input/index.tsx
@@ -1,4 +1,3 @@
-import Script, { type Props } from "../script.tsx";
 
 interface InputComponentProps {
   placeholder?: string;
@@ -25,7 +24,6 @@ function InputComponent({ placeholder, onValidate }: InputComponentProps) {
           />
         </div>
       </div>
-      <Script />
     </>
   );
 }
diff --git a/components/ui/Form/InputRadio/index.tsx b/components/ui/Form/InputRadio/index.tsx
index 63bd507..ac50b1b 100644
--- a/components/ui/Form/InputRadio/index.tsx
+++ b/components/ui/Form/InputRadio/index.tsx
@@ -1,5 +1,4 @@
 import type { JSX } from "preact";
-import Script, { type Props } from "../script.tsx";
 
 interface InputRadioComponentProps {
   text: string;
@@ -72,7 +71,6 @@ function InputRadioComponent({
           ))}
         </div>
       </div>
-      <Script />
     </>
   );
 }
diff --git a/components/ui/Form/TitleForm/index.tsx b/components/ui/Form/TitleForm/index.tsx
index 23ef4ca..bea85e7 100644
--- a/components/ui/Form/TitleForm/index.tsx
+++ b/components/ui/Form/TitleForm/index.tsx
@@ -1,5 +1,4 @@
 import type { JSX } from "preact";
-import Script, { type Props } from "../script.tsx";
 
 function setClass(value: string) {
     switch (value) {
@@ -133,7 +132,6 @@ function TitleForm(
                     </div>
                 </div>
             </div>
-            <Script />
         </>
     );
 }
diff --git a/components/ui/Form/index.tsx b/components/ui/Form/index.tsx
index 971c953..b1e33b9 100644
--- a/components/ui/Form/index.tsx
+++ b/components/ui/Form/index.tsx
@@ -4,7 +4,6 @@ import type { JSX } from "preact";
 // import Image from "apps/website/components/Image.tsx";
 // import IconComponent from "../Icons/IconGrid.tsx";
 import Script, { type Props } from "./script.tsx";
-import { useState } from "preact/hooks";
 
 // Implemente a seção
 function LoadComponent(
@@ -20,10 +19,13 @@ function LoadComponent(
 function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
   return (
     <>
-      <div data-form="formulario" className="flex justify-center overflow-y-hidden">
+      <div
+        data-form="formulario"
+        className="flex justify-center overflow-y-hidden"
+      >
         <div className="h-dvh grid grid-rows-[80px_1fr_96px] w-full max-w-[706px]">
           <div className="grid grid-cols-[32px_minmax(137px,_1fr)_32px] items-center justify-between gap-4 px-4 py-6">
-            <button>
+            <button id="back">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="32"
@@ -38,17 +40,21 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
               </svg>
             </button>
             <div className="flex justify-center items-center">
-              <div
-                className={`w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full after:h-[5px] after:bg-[#3BEDB2] after:rounded-full after:block`}
-              >
+              <div className="w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full">
+                <div
+                  id="progress-bar"
+                  className="h-[5px] bg-[#3BEDB2] rounded-full block"
+                >
+                </div>
               </div>
             </div>
           </div>
           <div className="px-6 py-6 border-y border-gray-100 flex flex-col gap-12 h-full overflow-auto">
             {sections?.map((item, index) => (
               // <div data-index={index} className="hidde">
-              <div data-index={'campo-' + index} className="" key={index}>
-                {/* <div className="grid gap-2">
+              <div data-index={"campo-" + index} className="" key={index}>
+                {
+                  /* <div className="grid gap-2">
                   <h1 className="text-sm font-light text-primary">
                     {sections[currentStep.value].text} 1 *
                     Solicitar plano
@@ -57,14 +63,15 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
                     {sections[currentStep.value].description}
                     Primeiramente, qual o seu nome completo?
                   </h2>
-                </div> */}
+                </div> */
+                }
                 {
                   /* // Renderizando o componente
                 // {LoadComponent(item.section)} */
                 }
                 <LoadComponent
                   {...item.section}
-                /> 
+                />
               </div>
             ))}
           </div>
@@ -75,4 +82,4 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
   );
 }
 
-export default FormComponent;
\ No newline at end of file
+export default FormComponent;
diff --git a/components/ui/Form/script.tsx b/components/ui/Form/script.tsx
index 606d6fa..e4460f6 100644
--- a/components/ui/Form/script.tsx
+++ b/components/ui/Form/script.tsx
@@ -1,4 +1,4 @@
-import { useScript as useScript } from "@deco/deco/hooks";
+import { useScript } from "@deco/deco/hooks";
 
 export interface Props {}
 
@@ -11,10 +11,10 @@ const setup = ({}: Props) => {
     ) as HTMLElement[];
   };
 
-  let formPages = getFormPages();
-  const totalSteps = () => formPages.length;
+  const totalSteps = () => getFormPages().length;
 
   const showCurrentPage = () => {
+    const formPages = getFormPages();
     formPages.forEach((page, index) => {
       if (index === currentStep) {
         page.classList.add("block");
@@ -29,23 +29,27 @@ const setup = ({}: Props) => {
     console.log(`Total de páginas: ${totalSteps()}`);
   };
 
-  const button = document.getElementById("botao") as HTMLButtonElement | null;
+  const updateProgressBar = () => {
+    const progressBar = document.getElementById("progress-bar") as HTMLElement;
+    if (progressBar) {
+      const progress = (currentStep / (totalSteps() - 1)) * 100;
+      console.log("barra de progresso: " + progress);
 
-  const attachButtonEvent = () => {
-    if (button) {
-      button.removeEventListener("click", handleNext);
-      button.addEventListener("click", handleNext);
+      progressBar.style.width = `${progress}%`;
     }
   };
 
   const handleNext = () => {
+    const formPages = getFormPages();
+
     if (currentStep < totalSteps() - 1) {
       currentStep++;
       console.log(`Indo para a próxima etapa: ${currentStep}`);
       showCurrentPage();
+      updateProgressBar();
 
       window.scrollTo({
-        top: formPages[currentStep].offsetTop,
+        top: formPages[currentStep]?.offsetTop || 0,
         behavior: "smooth",
       });
     } else {
@@ -53,21 +57,38 @@ const setup = ({}: Props) => {
     }
   };
 
-  attachButtonEvent();
+  const handleBack = () => {
+    const formPages = getFormPages();
+
+    if (currentStep > 0) {
+      currentStep--;
+      console.log(`Voltando para a etapa anterior: ${currentStep}`);
+      showCurrentPage();
+      updateProgressBar();
 
-  const observer = new MutationObserver(() => {
-    console.log(
-      "Mudança detectada no DOM, atualizando páginas do formulário...",
-    );
-    formPages = getFormPages();
-    showCurrentPage();
+      window.scrollTo({
+        top: formPages[currentStep]?.offsetTop || 0,
+        behavior: "smooth",
+      });
+    } else {
+      alert("Você está na primeira etapa!");
+    }
+  };
 
-    attachButtonEvent();
+  document.addEventListener("click", (event) => {
+    if ((event.target as HTMLElement)?.id === "botao") {
+      handleNext();
+    }
   });
 
-  observer.observe(document.body, { childList: true, subtree: true });
+  document.addEventListener("click", (event) => {
+    if ((event.target as HTMLElement)?.id === "back") {
+      handleBack();
+    }
+  });
 
   showCurrentPage();
+  updateProgressBar();
 };
 
 function FormSteps({}: Props) {

From 7a69031bfb9881e54e29142bb393b2fcaf5e68c7 Mon Sep 17 00:00:00 2001
From: Giovanny Lisboa <giovanny.lisboa@gux.cx>
Date: Thu, 9 Jan 2025 14:09:52 -0300
Subject: [PATCH 5/7] ajustes

---
 .../pages-My%2520New%2520Page-461078.json     |  14 +-
 components/ui/Content/Benefits/index.tsx      |   2 +-
 .../ui/Content/ComparisonBody/index.tsx       |   2 +-
 .../ui/Content/ComparisonFooter/index.tsx     |  14 +-
 components/ui/Content/Conection/index.tsx     |   4 +-
 .../ui/Content/CustomDropdown/index.tsx       |   2 +-
 components/ui/Content/Dropdown/index.tsx      |   4 +-
 components/ui/Content/Lead/index.tsx          |  42 ++-
 components/ui/Content/List/index.tsx          |   2 +-
 components/ui/Content/LogoGroup/index.tsx     |   2 +-
 .../ui/Content/OptionalCollappse/index.tsx    |   2 +-
 components/ui/Content/Product/index.tsx       |  18 +-
 components/ui/Content/Title/index.tsx         |   4 +-
 components/ui/Content/TitleMedium/index.tsx   |   4 +-
 components/ui/Form/FixedSectionForm/index.tsx | 194 +++++-----
 components/ui/Form/Input/index.tsx            |   7 +-
 components/ui/Form/TitleForm/index.tsx        | 222 ++++++-----
 components/ui/Form/index.tsx                  |  10 +-
 components/ui/Form/script.tsx                 |  18 +-
 components/ui/Galery/GaleryImages/index.tsx   |   8 +-
 islands/Counter.tsx                           |  12 +-
 sections/Destaques/Duvidas.tsx                |  37 +-
 sections/Destaques/ModalContent.tsx           |  34 +-
 sections/Destaques/ModalWithSubTopic.tsx      | 114 +++---
 sections/Destaques/Suporte.tsx                |   3 +-
 sections/Final/Content/Benefits.tsx           | 144 +++----
 sections/Final/Content/Clients.tsx            |  96 ++---
 sections/Final/Content/Comparison.tsx         |   2 +-
 sections/Final/Content/ComparisonPlan.tsx     | 118 +++---
 sections/Final/Content/Doubts.tsx             |  94 ++---
 sections/Final/Content/Dropdown.tsx           | 100 ++---
 sections/Final/Content/DropdownWithLogos.tsx  | 134 +++----
 sections/Final/Content/Lead.tsx               |  99 +++--
 sections/Final/Content/OptionalCollapse.tsx   | 112 +++---
 sections/Final/Content/OrderTracking.tsx      | 110 +++---
 sections/Final/Content/ParentComponent.tsx    |  44 +--
 sections/Final/Content/Product.tsx            |  24 +-
 sections/Final/Content/Spacer.tsx             |  35 +-
 sections/Final/Counter/Counter.tsx            |   8 +-
 sections/Final/Counter/script.tsx             |  74 ++--
 sections/Final/DropDown/DropDownComponent.tsx |   2 +-
 sections/Final/Form/Form.tsx                  |  33 +-
 sections/Final/Form/InputRadio.tsx            |  52 +--
 sections/Final/Form/InputText.tsx             |  20 +-
 sections/Final/Form/TItleForm.tsx             | 166 ++++-----
 sections/Final/Form/fixedSectionForm.tsx      |  74 ++--
 sections/Final/Icons/IconGrid.tsx             |   2 +-
 sections/Final/Navbar/index.tsx               | 352 +++++++++---------
 sections/Final/Navbar/script.tsx              |  74 ++--
 sections/Footer.tsx                           |   2 -
 sections/FormSection.tsx                      |  21 +-
 sections/FormSteps.tsx                        |   8 +-
 sections/Galery/GaleryContent.tsx             |   2 +-
 sections/Headers/TitleIntegration.tsx         |   2 +-
 sections/Navigation/Navbar.tsx                |  76 ++--
 55 files changed, 1477 insertions(+), 1378 deletions(-)

diff --git a/.deco/blocks/pages-My%2520New%2520Page-461078.json b/.deco/blocks/pages-My%2520New%2520Page-461078.json
index 06366ee..39e3bdb 100644
--- a/.deco/blocks/pages-My%2520New%2520Page-461078.json
+++ b/.deco/blocks/pages-My%2520New%2520Page-461078.json
@@ -29,7 +29,8 @@
                 "section": {
                   "__resolveType": "site/sections/Final/Form/InputText.tsx",
                   "title": "Por favor, diga o seu nome.",
-                  "placeholder": "Por favor, diga o seu nome."
+                  "placeholder": "Por favor, diga o seu nome.",
+                  "name": "name"
                 },
                 "title": "Por favor, diga o seu nome.",
                 "text": "Por favor, diga o seu nome.",
@@ -73,12 +74,13 @@
               {
                 "section": {
                   "__resolveType": "site/sections/Final/Form/InputText.tsx",
-                  "title": "Por favor, diga o seu nome.",
-                  "placeholder": "Por favor, diga o seu nome."
+                  "title": "Por favor, diga o seu sobrenome.",
+                  "placeholder": "Por favor, diga o seu sobrenome.",
+                  "name": "lastname"
                 },
-                "title": "Por favor, diga o seu nome.",
-                "text": "Por favor, diga o seu nome.",
-                "description": "Por favor, diga o seu nome."
+                "title": "Por favor, diga o seu sobrenome.",
+                "text": "Por favor, diga o seu sobrenome.",
+                "description": "Por favor, diga o seu sobrenome."
               },
               {
                 "section": {
diff --git a/components/ui/Content/Benefits/index.tsx b/components/ui/Content/Benefits/index.tsx
index 84506b8..c1a1c55 100644
--- a/components/ui/Content/Benefits/index.tsx
+++ b/components/ui/Content/Benefits/index.tsx
@@ -228,4 +228,4 @@ function Benefits({ benefits, collapse, colorTheme }: Props) {
   }
 }
 
-export default Benefits;
\ No newline at end of file
+export default Benefits;
diff --git a/components/ui/Content/ComparisonBody/index.tsx b/components/ui/Content/ComparisonBody/index.tsx
index c5b9a67..2ed7c83 100644
--- a/components/ui/Content/ComparisonBody/index.tsx
+++ b/components/ui/Content/ComparisonBody/index.tsx
@@ -96,4 +96,4 @@ function ExampleComponent({ body }: JSX.IntrinsicElements["div"] & Props) {
   );
 }
 
-export default ExampleComponent;
\ No newline at end of file
+export default ExampleComponent;
diff --git a/components/ui/Content/ComparisonFooter/index.tsx b/components/ui/Content/ComparisonFooter/index.tsx
index 1bd9dd1..1f0f390 100644
--- a/components/ui/Content/ComparisonFooter/index.tsx
+++ b/components/ui/Content/ComparisonFooter/index.tsx
@@ -17,7 +17,12 @@ function ComparisonFooter(
               </div>
             )}
             {left.button && (
-              <ButtonComponent text={left.button.text} link={left.button.link} icon={left.button.icon} buttonTheme={left.button.buttonTheme} />
+              <ButtonComponent
+                text={left.button.text}
+                link={left.button.link}
+                icon={left.button.icon}
+                buttonTheme={left.button.buttonTheme}
+              />
             )}
           </div>
         )}
@@ -31,7 +36,12 @@ function ComparisonFooter(
               </div>
             )}
             {right.button && (
-              <ButtonComponent text={right.button.text} link={right.button.link} icon={right.button.icon} buttonTheme={right.button.buttonTheme} />
+              <ButtonComponent
+                text={right.button.text}
+                link={right.button.link}
+                icon={right.button.icon}
+                buttonTheme={right.button.buttonTheme}
+              />
             )}
           </div>
         )}
diff --git a/components/ui/Content/Conection/index.tsx b/components/ui/Content/Conection/index.tsx
index 7369543..9ea9ec8 100644
--- a/components/ui/Content/Conection/index.tsx
+++ b/components/ui/Content/Conection/index.tsx
@@ -38,7 +38,9 @@ function Conection({
         </div>
         <div class="absolute inset-0 flex justify-center items-center">
           <div
-            class={`w-16 h-16 lg:w-[70px] lg:h-[70px] ${setClass("bg", circleBackground)} ${
+            class={`w-16 h-16 lg:w-[70px] lg:h-[70px] ${
+              setClass("bg", circleBackground)
+            } ${
               setClass("text", colorText)
             } flex justify-center items-center rounded-full font-sans text-[32px] lg:text-[48px] font-medium leading-tight-35 tracking-tight-0.64`}
           >
diff --git a/components/ui/Content/CustomDropdown/index.tsx b/components/ui/Content/CustomDropdown/index.tsx
index 0b8a844..64329c6 100644
--- a/components/ui/Content/CustomDropdown/index.tsx
+++ b/components/ui/Content/CustomDropdown/index.tsx
@@ -110,4 +110,4 @@ function CustomDropdown({
   );
 }
 
-export default CustomDropdown;
\ No newline at end of file
+export default CustomDropdown;
diff --git a/components/ui/Content/Dropdown/index.tsx b/components/ui/Content/Dropdown/index.tsx
index 8414de3..30e2151 100644
--- a/components/ui/Content/Dropdown/index.tsx
+++ b/components/ui/Content/Dropdown/index.tsx
@@ -109,9 +109,7 @@ function Dropdown({
               </div>
             ))
           )
-          : (
-            <p className=""></p>
-          )}
+          : <p className=""></p>}
       </div>
     </div>
   );
diff --git a/components/ui/Content/Lead/index.tsx b/components/ui/Content/Lead/index.tsx
index ed5d01b..babd0e1 100644
--- a/components/ui/Content/Lead/index.tsx
+++ b/components/ui/Content/Lead/index.tsx
@@ -4,24 +4,36 @@ import type { JSX } from "preact";
 import ButtonComponent from "../../Button/index.tsx";
 import TitleComponent from "../Title/index.tsx";
 
-function Lead({ title, button, placeholder }: JSX.IntrinsicElements["div"] & Props) {
+function Lead(
+  { title, button, placeholder }: JSX.IntrinsicElements["div"] & Props,
+) {
   return (
     <>
-        <div className="flex justify-center">
-            <div className="w-full max-w-[706px] p-12 pb-24">
-                <TitleComponent content={title.content} color={title.colorTheme} alignment={title.textAlignment} />
-                <input
-                    name="email"
-                    // class="input input-bordered flex-grow"
-                    class="w-full pb-2 border-b-2 border-sacramentoState bg-transparent text-lg font-normal text-sacramentoState placeholder:text-sacramentoState-40"
-                    type="text"
-                    placeholder={placeholder}
-                />
-                <div className="pt-4">
-                    <ButtonComponent text={button.text} link={button.link} icon={button.icon} buttonTheme={button.buttonTheme} tamanho={button.tamanho} />
-                </div>
-            </div>
+      <div className="flex justify-center">
+        <div className="w-full max-w-[706px] p-12 pb-24">
+          <TitleComponent
+            content={title.content}
+            color={title.colorTheme}
+            alignment={title.textAlignment}
+          />
+          <input
+            name="email"
+            // class="input input-bordered flex-grow"
+            class="w-full pb-2 border-b-2 border-sacramentoState bg-transparent text-lg font-normal text-sacramentoState placeholder:text-sacramentoState-40"
+            type="text"
+            placeholder={placeholder}
+          />
+          <div className="pt-4">
+            <ButtonComponent
+              text={button.text}
+              link={button.link}
+              icon={button.icon}
+              buttonTheme={button.buttonTheme}
+              tamanho={button.tamanho}
+            />
+          </div>
         </div>
+      </div>
     </>
   );
 }
diff --git a/components/ui/Content/List/index.tsx b/components/ui/Content/List/index.tsx
index 7faf086..3f85615 100644
--- a/components/ui/Content/List/index.tsx
+++ b/components/ui/Content/List/index.tsx
@@ -50,4 +50,4 @@ function List({ items, colorTheme, isFirst, isLast }: Props) {
   );
 }
 
-export default List;
\ No newline at end of file
+export default List;
diff --git a/components/ui/Content/LogoGroup/index.tsx b/components/ui/Content/LogoGroup/index.tsx
index 09f5a42..a2b4cec 100644
--- a/components/ui/Content/LogoGroup/index.tsx
+++ b/components/ui/Content/LogoGroup/index.tsx
@@ -43,4 +43,4 @@ function LogoGroupComponent(
   );
 }
 
-export default LogoGroupComponent;
\ No newline at end of file
+export default LogoGroupComponent;
diff --git a/components/ui/Content/OptionalCollappse/index.tsx b/components/ui/Content/OptionalCollappse/index.tsx
index 82a2674..e3c5905 100644
--- a/components/ui/Content/OptionalCollappse/index.tsx
+++ b/components/ui/Content/OptionalCollappse/index.tsx
@@ -153,4 +153,4 @@ function OptionalCollappseComponent({ optional, colorTheme }: Props) {
   );
 }
 
-export default OptionalCollappseComponent;
\ No newline at end of file
+export default OptionalCollappseComponent;
diff --git a/components/ui/Content/Product/index.tsx b/components/ui/Content/Product/index.tsx
index 8070302..ac47167 100644
--- a/components/ui/Content/Product/index.tsx
+++ b/components/ui/Content/Product/index.tsx
@@ -24,7 +24,7 @@ function setClass(value) {
 
 function Product(
   { icon, title, description, button, colorTheme }:
-    & JSX.IntrinsicElements["div"]
+    JSX.IntrinsicElements["div"],
 ) {
   return (
     <>
@@ -63,7 +63,8 @@ function Product(
                 </p>
               )}
             </div>
-            {/* <div className="w-fit py-[13px] md:flex rounded-xl border-[1px] border-sacramentoState items-center justify-center gap-4">
+            {
+              /* <div className="w-fit py-[13px] md:flex rounded-xl border-[1px] border-sacramentoState items-center justify-center gap-4">
               <a
                 href={button.url}
                 target="_blank"
@@ -71,8 +72,15 @@ function Product(
                 className="w-max px-[32px] flex-none font-sans text-base font-semibold leading-tight-18 text-sacramentoState"
               >
                 {button.name}
-              </a> */}
-              <ButtonComponent text={button.text} link={button.link} icon={button.icon} buttonTheme={button.buttonTheme} tamanho={button.tamanho} />
+              </a> */
+            }
+            <ButtonComponent
+              text={button.text}
+              link={button.link}
+              icon={button.icon}
+              buttonTheme={button.buttonTheme}
+              tamanho={button.tamanho}
+            />
             {/* </div> */}
           </div>
         </div>
@@ -81,4 +89,4 @@ function Product(
   );
 }
 
-export default Product;
\ No newline at end of file
+export default Product;
diff --git a/components/ui/Content/Title/index.tsx b/components/ui/Content/Title/index.tsx
index 4b80e48..874342b 100644
--- a/components/ui/Content/Title/index.tsx
+++ b/components/ui/Content/Title/index.tsx
@@ -42,7 +42,9 @@ function Title(
       <div className="w-full flex justify-center">
         <div className="w-full px-4 pb-4 pt-10 md:px-0 md:py-8 w-full max-w-[706px]">
           <p
-            className={`text-[28px] md:text-5xl font-sans font-medium leading-tight-32 md:leading-tight-55 tracking-tight-0.56 md:tracking-tight-0.96 ${setColor(color)} ${setAlignment(alignment)}`}
+            className={`text-[28px] md:text-5xl font-sans font-medium leading-tight-32 md:leading-tight-55 tracking-tight-0.56 md:tracking-tight-0.96 ${
+              setColor(color)
+            } ${setAlignment(alignment)}`}
           >
             {content}
           </p>
diff --git a/components/ui/Content/TitleMedium/index.tsx b/components/ui/Content/TitleMedium/index.tsx
index db206d9..c0a7b40 100644
--- a/components/ui/Content/TitleMedium/index.tsx
+++ b/components/ui/Content/TitleMedium/index.tsx
@@ -133,7 +133,9 @@ function TitleMedium(
 ) {
   return (
     <div
-      className={`flex ${setAlignmentContent(contentAlignment)} ${setClassBackground(colorThemeBg)} items-center`}
+      className={`flex ${setAlignmentContent(contentAlignment)} ${
+        setClassBackground(colorThemeBg)
+      } items-center`}
     >
       <div
         className={`${
diff --git a/components/ui/Form/FixedSectionForm/index.tsx b/components/ui/Form/FixedSectionForm/index.tsx
index 57447e4..2e11a74 100644
--- a/components/ui/Form/FixedSectionForm/index.tsx
+++ b/components/ui/Form/FixedSectionForm/index.tsx
@@ -1,118 +1,116 @@
 import { ImageWidget } from "apps/admin/widgets.ts";
 import Image from "apps/website/components/Image.tsx";
-import Script, { type Props } from "../script.tsx";
 import type { JSX } from "preact";
 
 export type Link = {
-    /**
-     * @title Nome
-     * @description Nome visível para clique
-     */
-    name: string;
-    /**
-     * @title Destino
-     * @description Insira a URL ou o caminho de destino
-     */
-    url: string;
+  /**
+   * @title Nome
+   * @description Nome visível para clique
+   */
+  name: string;
+  /**
+   * @title Destino
+   * @description Insira a URL ou o caminho de destino
+   */
+  url: string;
 };
 
 export interface Props {
-    /**
-     * @title Descrição
-     * @description Insira a descrição
-     */
-    description?: string;
-    /**
-     * @title Palavra ou Frase com Cor
-     * @description Escreva a palavra ou frase com cor
-     */
-    highlight?: string;
-    /**
-     * @title Ícone do Botão
-     * @description Insisra o Ícone do Botão
-     */
-    ImageWidget: ImageWidget;
+  /**
+   * @title Descrição
+   * @description Insira a descrição
+   */
+  description?: string;
+  /**
+   * @title Palavra ou Frase com Cor
+   * @description Escreva a palavra ou frase com cor
+   */
+  highlight?: string;
+  /**
+   * @title Ícone do Botão
+   * @description Insisra o Ícone do Botão
+   */
+  ImageWidget: ImageWidget;
 }
 
 function FixedSectionForm({
-    description = "",
-    highlight = "",
-    ImageWidget = "",
+  description = "",
+  highlight = "",
+  ImageWidget = "",
 }: Props) {
-    const getHighlightedText = (text: string, highlight: string) => {
-        if (!highlight) return text;
+  const getHighlightedText = (text: string, highlight: string) => {
+    if (!highlight) return text;
 
-        const regex = new RegExp(`(${highlight})`, "giu");
+    const regex = new RegExp(`(${highlight})`, "giu");
 
-        const parts = text.split(regex);
+    const parts = text.split(regex);
 
-        return parts.map((part, index) => {
-            if (part.toLowerCase() === highlight.toLowerCase()) {
-                return (
-                    <span
-                        key={index}
-                        className="font-bold text-sacramentoState"
-                    >
-                        {part}
-                    </span>
-                );
-            }
-            return part;
-        });
-    };
+    return parts.map((part, index) => {
+      if (part.toLowerCase() === highlight.toLowerCase()) {
+        return (
+          <span
+            key={index}
+            className="font-bold text-sacramentoState"
+          >
+            {part}
+          </span>
+        );
+      }
+      return part;
+    });
+  };
 
-    return (
-        <>
-            <div
-                id="fixed-section"
-                className="fixed bottom-0 left-0 w-full flex justify-center bg-white z-40"
+  return (
+    <>
+      <div
+        id="fixed-section"
+        className="fixed bottom-0 left-0 w-full flex justify-center bg-white z-40"
+      >
+        <div className="flex flex-col flex-grow">
+          <div className="pr-4 mb-5 flex justify-end mt-auto">
+            <button
+              data-button="fixed"
+              className="w-[56px] h-[56px] flex justify-center items-center rounded-full bg-sacramentoState cursor-pointer"
             >
-                <div className="flex flex-col flex-grow">
-                    <div className="pr-4 mb-5 flex justify-end mt-auto">
-                        <button
-                            id="botao"
-                            className="w-[56px] h-[56px] flex justify-center items-center rounded-full bg-sacramentoState cursor-pointer"
-                        >
-                            <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z"
-                                    fill="#3BEDB2"
-                                />
-                            </svg>
-                        </button>
-                    </div>
-                    <div className="px-4 pt-[14px] pb-5 w-full flex justify-between items-center gap-x-4 shadow-top">
-                        <div className="w-full max-w-[236px] text-start">
-                            <p className="text-base font-sans font-normal text-sacramentoState-80">
-                                {getHighlightedText(description, highlight)}
-                            </p>
-                        </div>
-                        <div className="w-fit flex items-center">
-                            <div className="w-[92px] cursor-pointer">
-                                {ImageWidget && (
-                                    <div className="w-full h-full px-5 py-2.5 flex justify-center items-center bg-darkMintCream rounded-[10px]">
-                                        <Image
-                                            src={ImageWidget}
-                                            alt="Section Image"
-                                            className="w-6 h-6"
-                                            width={24}
-                                        />
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z"
+                  fill="#3BEDB2"
+                />
+              </svg>
+            </button>
+          </div>
+          <div className="px-4 pt-[14px] pb-5 w-full flex justify-between items-center gap-x-4 shadow-top">
+            <div className="w-full max-w-[236px] text-start">
+              <p className="text-base font-sans font-normal text-sacramentoState-80">
+                {getHighlightedText(description, highlight)}
+              </p>
             </div>
-            <Script />
-        </>
-    );
+            <div className="w-fit flex items-center">
+              <div className="w-[92px] cursor-pointer">
+                {ImageWidget && (
+                  <div className="w-full h-full px-5 py-2.5 flex justify-center items-center bg-darkMintCream rounded-[10px]">
+                    <Image
+                      src={ImageWidget}
+                      alt="Section Image"
+                      className="w-6 h-6"
+                      width={24}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
 
-export default FixedSectionForm;
\ No newline at end of file
+export default FixedSectionForm;
diff --git a/components/ui/Form/Input/index.tsx b/components/ui/Form/Input/index.tsx
index cbb1c4c..6192ed9 100644
--- a/components/ui/Form/Input/index.tsx
+++ b/components/ui/Form/Input/index.tsx
@@ -1,10 +1,12 @@
-
 interface InputComponentProps {
+  name?: string;
   placeholder?: string;
   onValidate?: (isValid: boolean) => void;
 }
 
-function InputComponent({ placeholder, onValidate }: InputComponentProps) {
+function InputComponent(
+  { name, placeholder, onValidate }: InputComponentProps,
+) {
   const handleChange = (e: Event) => {
     const input = e.target as HTMLInputElement;
     if (onValidate) {
@@ -17,6 +19,7 @@ function InputComponent({ placeholder, onValidate }: InputComponentProps) {
       <div className="flex justify-center">
         <div className="w-full max-w-[706px]">
           <input
+            data-campo={name}
             type="text"
             placeholder={placeholder}
             className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80 rounded-none"
diff --git a/components/ui/Form/TitleForm/index.tsx b/components/ui/Form/TitleForm/index.tsx
index bea85e7..9f2b47e 100644
--- a/components/ui/Form/TitleForm/index.tsx
+++ b/components/ui/Form/TitleForm/index.tsx
@@ -1,139 +1,135 @@
 import type { JSX } from "preact";
 
 function setClass(value: string) {
-    switch (value) {
-        case "primary":
-            return "text-primary";
-        case "Secondary":
-            return "text-secondary";
-        case "White":
-            return "text-white";
-        case "Accent":
-            return "text-accent";
-        case "Sacramento-State":
-            return "text-sacramentoState";
-        case "Sacramento-State-10":
-            return "text-sacramentoState-10";
-        case "Mint-Cream":
-            return "text-mintCream";
-        default:
-            return "text-primary";
-    }
+  switch (value) {
+    case "primary":
+      return "text-primary";
+    case "Secondary":
+      return "text-secondary";
+    case "White":
+      return "text-white";
+    case "Accent":
+      return "text-accent";
+    case "Sacramento-State":
+      return "text-sacramentoState";
+    case "Sacramento-State-10":
+      return "text-sacramentoState-10";
+    case "Mint-Cream":
+      return "text-mintCream";
+    default:
+      return "text-primary";
+  }
 }
 
 function setAlignment(value: string) {
-    switch (value) {
-        case "Left":
-            return "text-left";
-        case "Center":
-            return "text-center";
-        case "Right":
-            return "text-right";
-        default:
-            return "";
-    }
+  switch (value) {
+    case "Left":
+      return "text-left";
+    case "Center":
+      return "text-center";
+    case "Right":
+      return "text-right";
+    default:
+      return "";
+  }
 }
 
 function setAlignmentContent(value: string) {
-    switch (value) {
-        case "Start":
-            return "justify-start";
-        case "Center":
-            return "justify-center";
-        case "End":
-            return "justify-end";
-        default:
-            return "justify-start";
-    }
+  switch (value) {
+    case "Start":
+      return "justify-start";
+    case "Center":
+      return "justify-center";
+    case "End":
+      return "justify-end";
+    default:
+      return "justify-start";
+  }
 }
 
 function setFontSize(value: string): string {
-    switch (value) {
-        case "22px":
-            return "text-[22px]";
-        case "28px":
-            return "text-[28px]";
-        case "32px":
-            return "text-[32px]";
-        default:
-            return "text-[28px]";
-    }
+  switch (value) {
+    case "22px":
+      return "text-[22px]";
+    case "28px":
+      return "text-[28px]";
+    case "32px":
+      return "text-[32px]";
+    default:
+      return "text-[28px]";
+  }
 }
 
 function setContainerWidth(value: string): string {
-    switch (value) {
-        case "Largura Limitada (290px)":
-            return "max-w-[290px] w-full";
-        case "Largura Limitada (327px)":
-            return "max-w-[327px] w-full";
-        case "Largura Limitada (343px)":
-            return "max-w-[343px] w-full";
-        case "Largura Completa":
-            return "w-full";
-        default:
-            return "max-w-[327px] w-full";
-    }
+  switch (value) {
+    case "Largura Limitada (290px)":
+      return "max-w-[290px] w-full";
+    case "Largura Limitada (327px)":
+      return "max-w-[327px] w-full";
+    case "Largura Limitada (343px)":
+      return "max-w-[343px] w-full";
+    case "Largura Completa":
+      return "w-full";
+    default:
+      return "max-w-[327px] w-full";
+  }
 }
 
 function setPaddingTop(value: string): string {
-    switch (value) {
-        case "Espacamento (40px)":
-            return "pt-[40px]";
-        case "Espacamento (91px)":
-            return "pt-[91px]";
-        case "Espacamento (95px)":
-            return "pt-[95px] ";
-        default:
-            return "pt-[40px]";
-    }
+  switch (value) {
+    case "Espacamento (40px)":
+      return "pt-[40px]";
+    case "Espacamento (91px)":
+      return "pt-[91px]";
+    case "Espacamento (95px)":
+      return "pt-[95px] ";
+    default:
+      return "pt-[40px]";
+  }
 }
 
 function TitleForm(
-    {
-        description,
-        content,
-        colorTheme,
-        alignment,
-        fontSize,
-        containerWidth,
-        contentAlignment,
-        paddingTop,
-    }:
-        & JSX.IntrinsicElements["div"]
-        & Props,
+  {
+    description,
+    content,
+    colorTheme,
+    alignment,
+    fontSize,
+    containerWidth,
+    contentAlignment,
+    paddingTop,
+  }:
+    & JSX.IntrinsicElements["div"]
+    & Props,
 ) {
-    return (
-        <>
-            <div
-                className={`flex ${
-                    setAlignmentContent(contentAlignment)
-                } items-center`}
+  return (
+    <>
+      <div
+        className={`flex ${setAlignmentContent(contentAlignment)} items-center`}
+      >
+        <div
+          className={`${setContainerWidth(containerWidth)}  ${
+            setPaddingTop(paddingTop)
+          }`}
+        >
+          <div className="grid gap-y-2">
+            <p className="text-sm font-sans font-light leading-tight-19 text-sacramentoState-80">
+              {description}
+            </p>
+            <p
+              className={`font-sans font-medium leading-tight-115 tracking-tight-0.56 ${
+                setClass(
+                  colorTheme,
+                )
+              } ${setAlignment(alignment)} ${setFontSize(fontSize)}`}
             >
-                <div
-                    className={`${setContainerWidth(containerWidth)}  ${
-                        setPaddingTop(paddingTop)
-                    }`}
-                >
-                    <div className="grid gap-y-2">
-                        <p className="text-sm font-sans font-light leading-tight-19 text-sacramentoState-80">
-                            {description}
-                        </p>
-                        <p
-                            className={`font-sans font-medium leading-tight-115 tracking-tight-0.56 ${
-                                setClass(
-                                    colorTheme,
-                                )
-                            } ${setAlignment(alignment)} ${
-                                setFontSize(fontSize)
-                            }`}
-                        >
-                            {content}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </>
-    );
+              {content}
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
 
 export default TitleForm;
diff --git a/components/ui/Form/index.tsx b/components/ui/Form/index.tsx
index b1e33b9..de6ab7a 100644
--- a/components/ui/Form/index.tsx
+++ b/components/ui/Form/index.tsx
@@ -16,12 +16,14 @@ function LoadComponent(
   );
 }
 
-function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
+function FormComponent(
+  { sections, step }: JSX.IntrinsicElements["div"] & Props,
+) {
   return (
     <>
       <div
-        data-form="formulario"
         className="flex justify-center overflow-y-hidden"
+        data-step={step}
       >
         <div className="h-dvh grid grid-rows-[80px_1fr_96px] w-full max-w-[706px]">
           <div className="grid grid-cols-[32px_minmax(137px,_1fr)_32px] items-center justify-between gap-4 px-4 py-6">
@@ -52,7 +54,7 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
           <div className="px-6 py-6 border-y border-gray-100 flex flex-col gap-12 h-full overflow-auto">
             {sections?.map((item, index) => (
               // <div data-index={index} className="hidde">
-              <div data-index={"campo-" + index} className="" key={index}>
+              <div key={index}>
                 {
                   /* <div className="grid gap-2">
                   <h1 className="text-sm font-light text-primary">
@@ -77,7 +79,7 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
           </div>
         </div>
       </div>
-      <Script />
+      <Script step={step} />
     </>
   );
 }
diff --git a/components/ui/Form/script.tsx b/components/ui/Form/script.tsx
index e4460f6..3530f8c 100644
--- a/components/ui/Form/script.tsx
+++ b/components/ui/Form/script.tsx
@@ -1,8 +1,16 @@
 import { useScript } from "@deco/deco/hooks";
 
-export interface Props {}
+export interface Props {
+  step?: Number;
+}
+
+const setup = ({
+  step,
+}: Props) => {
+  // let stepElement = document.querySelectorAll(`[data-step=${step}]`),
+
+  // stepElement.querySelectorAll()
 
-const setup = ({}: Props) => {
   let currentStep = 0;
 
   const getFormPages = () => {
@@ -91,15 +99,15 @@ const setup = ({}: Props) => {
   updateProgressBar();
 };
 
-function FormSteps({}: Props) {
+function FormSteps({ step }: Props) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
-        __html: useScript(setup, {}),
+        __html: useScript(setup, { step }),
       }}
     />
   );
 }
 
-export default FormSteps;
\ No newline at end of file
+export default FormSteps;
diff --git a/components/ui/Galery/GaleryImages/index.tsx b/components/ui/Galery/GaleryImages/index.tsx
index 32f0eab..1a52240 100644
--- a/components/ui/Galery/GaleryImages/index.tsx
+++ b/components/ui/Galery/GaleryImages/index.tsx
@@ -19,7 +19,11 @@ function GaleryImages({ items }: JSX.IntrinsicElements["div"] & Props) {
               >
                 <article className="w-full flex flex-col border-t-2 border-white-20">
                   <div className="flex justify-center py-[26px] h-[274px] px-0">
-                    <Image className="w-full h-full object-cover rounded-2xl" src={item.image || ""} width={315} />
+                    <Image
+                      className="w-full h-full object-cover rounded-2xl"
+                      src={item.image || ""}
+                      width={315}
+                    />
                   </div>
                   <div className="w-full pl-0 text-left">
                     <p className="pl-[3px] text-base text-primary opacity-80 leading-tight-18 lg:leading-tight-22">
@@ -36,4 +40,4 @@ function GaleryImages({ items }: JSX.IntrinsicElements["div"] & Props) {
   );
 }
 
-export default GaleryImages;
\ No newline at end of file
+export default GaleryImages;
diff --git a/islands/Counter.tsx b/islands/Counter.tsx
index f972146..5134776 100644
--- a/islands/Counter.tsx
+++ b/islands/Counter.tsx
@@ -5,13 +5,19 @@ export default function Counter() {
 
   return (
     <div>
-      <button className="border rounded-full p-3 text-white border-white" onClick={() => setCount(count - 1)}>
+      <button
+        className="border rounded-full p-3 text-white border-white"
+        onClick={() => setCount(count - 1)}
+      >
         -
       </button>
       <span className="px-3 text-lg text-white">{count}</span>
-      <button className="border rounded-full p-3 text-white border-white" onClick={() => setCount(count + 1)}>
+      <button
+        className="border rounded-full p-3 text-white border-white"
+        onClick={() => setCount(count + 1)}
+      >
         +
       </button>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Destaques/Duvidas.tsx b/sections/Destaques/Duvidas.tsx
index 20e4b03..fef5f88 100644
--- a/sections/Destaques/Duvidas.tsx
+++ b/sections/Destaques/Duvidas.tsx
@@ -53,14 +53,14 @@ export interface Button {
    * @description Selecione o tipo de botão que deseja
    */
   buttonTheme?:
-      | "Primary dark"
-      | "Primary white"
-      | "Secondary dark"
-      | "Secondary white"
-      | "Link dark"
-      | "Link white"
-      | "Faq"
-      | "Nenhuma estilização"
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
 }
 
 export interface Props {
@@ -105,14 +105,20 @@ export default function Section({
         </div>
 
         <div className="grid gap-4">
-        {button?.map((btn, index) => (
-          <div key={index}>
-            <ButtonComponent text={btn.text} link={btn.link} icon={btn.icon} buttonTheme={btn.buttonTheme} />
-          </div>
-        ))}
+          {button?.map((btn, index) => (
+            <div key={index}>
+              <ButtonComponent
+                text={btn.text}
+                link={btn.link}
+                icon={btn.icon}
+                buttonTheme={btn.buttonTheme}
+              />
+            </div>
+          ))}
         </div>
 
-        {/* <div className="pb-24 px-4 w-full max-w md:max-w-[465px] flex flex-col rounded-xl items-center justify-center space-y-4">
+        {
+          /* <div className="pb-24 px-4 w-full max-w md:max-w-[465px] flex flex-col rounded-xl items-center justify-center space-y-4">
           {button?.map((btn, index) => (
             <div key={index} className="w-full max-w flex gap-x-[10px] justify-center cursor-pointer">
               <a
@@ -138,7 +144,8 @@ export default function Section({
               </a>
             </div>
           ))}
-        </div> */}
+        </div> */
+        }
       </div>
     </section>
   );
diff --git a/sections/Destaques/ModalContent.tsx b/sections/Destaques/ModalContent.tsx
index e2e92c4..a768928 100644
--- a/sections/Destaques/ModalContent.tsx
+++ b/sections/Destaques/ModalContent.tsx
@@ -110,17 +110,28 @@ export default function Section({
   return (
     <div>
       <div className="grid grid-cols-[32px_minmax(137px,_1fr)_32px] items-center justify-between gap-4 px-4 py-6">
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-          <path d="M15.0531 16L19.7731 11.28C20.0214 11.0302 20.1608 10.6923 20.1608 10.34C20.1608 9.98777 20.0214 9.64983 19.7731 9.40001C19.6491 9.27504 19.5017 9.17585 19.3392 9.10816C19.1767 9.04047 19.0024 9.00562 18.8264 9.00562C18.6504 9.00562 18.4761 9.04047 18.3137 9.10816C18.1512 9.17585 18.0037 9.27504 17.8798 9.40001L12.2264 15.0533C12.1015 15.1773 12.0023 15.3248 11.9346 15.4872C11.8669 15.6497 11.832 15.824 11.832 16C11.832 16.176 11.8669 16.3503 11.9346 16.5128C12.0023 16.6753 12.1015 16.8227 12.2264 16.9467L17.8798 22.6667C18.0043 22.7903 18.1521 22.888 18.3146 22.9544C18.477 23.0207 18.651 23.0544 18.8264 23.0533C19.0019 23.0544 19.1759 23.0207 19.3383 22.9544C19.5008 22.888 19.6485 22.7903 19.7731 22.6667C20.0214 22.4169 20.1608 22.0789 20.1608 21.7267C20.1608 21.3744 20.0214 21.0365 19.7731 20.7867L15.0531 16Z" fill="#003330"/>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+        >
+          <path
+            d="M15.0531 16L19.7731 11.28C20.0214 11.0302 20.1608 10.6923 20.1608 10.34C20.1608 9.98777 20.0214 9.64983 19.7731 9.40001C19.6491 9.27504 19.5017 9.17585 19.3392 9.10816C19.1767 9.04047 19.0024 9.00562 18.8264 9.00562C18.6504 9.00562 18.4761 9.04047 18.3137 9.10816C18.1512 9.17585 18.0037 9.27504 17.8798 9.40001L12.2264 15.0533C12.1015 15.1773 12.0023 15.3248 11.9346 15.4872C11.8669 15.6497 11.832 15.824 11.832 16C11.832 16.176 11.8669 16.3503 11.9346 16.5128C12.0023 16.6753 12.1015 16.8227 12.2264 16.9467L17.8798 22.6667C18.0043 22.7903 18.1521 22.888 18.3146 22.9544C18.477 23.0207 18.651 23.0544 18.8264 23.0533C19.0019 23.0544 19.1759 23.0207 19.3383 22.9544C19.5008 22.888 19.6485 22.7903 19.7731 22.6667C20.0214 22.4169 20.1608 22.0789 20.1608 21.7267C20.1608 21.3744 20.0214 21.0365 19.7731 20.7867L15.0531 16Z"
+            fill="#003330"
+          />
         </svg>
         <div className="flex justify-center items-center">
-          <div className="w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full after:w-[50px] after:h-[5px] after:bg-[#3BEDB2] after:rounded-full after:block"></div>
+          <div className="w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full after:w-[50px] after:h-[5px] after:bg-[#3BEDB2] after:rounded-full after:block">
+          </div>
         </div>
       </div>
       <div className="px-4 py-6 max-w-4xl mx-auto">
         {items.map((item, index) => (
           <div key={index} className="grid gap-12">
-            {/* {item.icon && (
+            {
+              /* {item.icon && (
               <Image
                 src={item.icon}
                 alt="Item Icon"
@@ -128,12 +139,15 @@ export default function Section({
                 height={40}
                 class="w-10 h-10 mb-4"
               />
-            )} */}
+            )} */
+            }
 
-            {item.header && ( 
+            {item.header && (
               <div className="grid gap-2">
                 <p className="text-sm font-light text-primary">Me Liga</p>
-                <p className="text-2xl font-semibold text-primary">{item.header}</p>
+                <p className="text-2xl font-semibold text-primary">
+                  {item.header}
+                </p>
               </div>
             )}
 
@@ -153,7 +167,11 @@ export default function Section({
                       //     }}
                       //   />
                       // </div>
-                      <input type="text" placeholder={ans} className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80" />
+                      <input
+                        type="text"
+                        placeholder={ans}
+                        className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80"
+                      />
                     ))}
                   </div>
                 ))}
diff --git a/sections/Destaques/ModalWithSubTopic.tsx b/sections/Destaques/ModalWithSubTopic.tsx
index c8f55f5..3f91d75 100644
--- a/sections/Destaques/ModalWithSubTopic.tsx
+++ b/sections/Destaques/ModalWithSubTopic.tsx
@@ -5,10 +5,10 @@ interface TableRow {
   checks?: boolean[];
 }
 
-interface Table{
+interface Table {
   columnName?: string[];
   header?: string[];
-  tableRows?:TableRow[];
+  tableRows?: TableRow[];
 }
 
 interface Tab {
@@ -23,8 +23,7 @@ export interface Item {
   descritiveInformative?: string[];
   topics?: string[];
   tabs?: Tab[];
-  table?:Table[];
-
+  table?: Table[];
 }
 
 interface Props {
@@ -41,48 +40,69 @@ export default function Section({
     <div className="font-[Public_Sans]">
       {items.map((item, index) => (
         <div key={index} className="mb-4">
-          <h2 className="text-[rgba(0,51,48,0.80)] text-[13.5px] font-normal mb-2">{item.header}</h2>
-          {item.descritiveTitle && item.descritiveTitle.map((question, qIndex) => (
-            <p key={qIndex} className="text-[#003330] text-[32px] font-medium">
-              {question}
-            </p>
-          ))}
-          {item.descritiveInformative && item.descritiveInformative.map((info, iIndex) => (
-            <p key={iIndex} className="self-stretch text-[rgba(0,51,48,0.80)] text-base font-normal leading-normal">
-              {info}
-            </p>
-          ))}
-          {item.topics && item.topics.map((topic, tIndex) => (
-            <p key={tIndex} className="text-[#003330] text-lg font-medium mt-2 mb-1">
-              • {topic}
-            </p>
-          ))}
-             <div className="mt-4">
-                 <div className="tabs tabs-boxed mb-4">
-                     {item.tabs.map((tab, tabIndex) => (
-                         <a key={tabIndex} className="tab">{tab.name}</a>
-                       ))}
-                   </div>
-                 {item.tabs.map((tab, tabIndex) => (
-                     <div key={tabIndex} className="mt-4">
-                         {tab.steps && tab.steps.length > 0 && (
-                     <div className="mb-4">
-                         {tab.steps.map((step, sIndex) => (
-                             <p key={sIndex} className="text-[#003330] text-base font-normal mb-2">
-                                 {sIndex + 1}. {step}
-                               </p>
-                           ))}
-                       </div>
-                   )}
-                 {tab.image && (
-                     <img src={tab.image} alt={tab.name || "Tab image"} className="max-w-full h-auto rounded-lg shadow-md" />
-                     )}
-                   </div>
-                     ))}
-               </div>
-                   )}
+          <h2 className="text-[rgba(0,51,48,0.80)] text-[13.5px] font-normal mb-2">
+            {item.header}
+          </h2>
+          {item.descritiveTitle &&
+            item.descritiveTitle.map((question, qIndex) => (
+              <p
+                key={qIndex}
+                className="text-[#003330] text-[32px] font-medium"
+              >
+                {question}
+              </p>
+            ))}
+          {item.descritiveInformative &&
+            item.descritiveInformative.map((info, iIndex) => (
+              <p
+                key={iIndex}
+                className="self-stretch text-[rgba(0,51,48,0.80)] text-base font-normal leading-normal"
+              >
+                {info}
+              </p>
+            ))}
+          {item.topics &&
+            item.topics.map((topic, tIndex) => (
+              <p
+                key={tIndex}
+                className="text-[#003330] text-lg font-medium mt-2 mb-1"
+              >
+                • {topic}
+              </p>
+            ))}
+          <div className="mt-4">
+            <div className="tabs tabs-boxed mb-4">
+              {item.tabs.map((tab, tabIndex) => (
+                <a key={tabIndex} className="tab">{tab.name}</a>
+              ))}
             </div>
-          ))}
+            {item.tabs.map((tab, tabIndex) => (
+              <div key={tabIndex} className="mt-4">
+                {tab.steps && tab.steps.length > 0 && (
+                  <div className="mb-4">
+                    {tab.steps.map((step, sIndex) => (
+                      <p
+                        key={sIndex}
+                        className="text-[#003330] text-base font-normal mb-2"
+                      >
+                        {sIndex + 1}. {step}
+                      </p>
+                    ))}
+                  </div>
+                )}
+                {tab.image && (
+                  <img
+                    src={tab.image}
+                    alt={tab.name || "Tab image"}
+                    className="max-w-full h-auto rounded-lg shadow-md"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+          )}
+        </div>
+      ))}
     </div>
-      );
- }
\ No newline at end of file
+  );
+}
diff --git a/sections/Destaques/Suporte.tsx b/sections/Destaques/Suporte.tsx
index 05cbe3d..3e7e65c 100644
--- a/sections/Destaques/Suporte.tsx
+++ b/sections/Destaques/Suporte.tsx
@@ -164,7 +164,8 @@ export default function Section({
             return (
               <div
                 key={index}
-                className={`${isOddSet && isLastItem ? "col-span-2 md:col-span-1" : "" // No último item ímpar, ocupa 2 colunas
+                className={`${
+                  isOddSet && isLastItem ? "col-span-2 md:col-span-1" : "" // No último item ímpar, ocupa 2 colunas
                 }`}
               >
                 <IconGroupComponent
diff --git a/sections/Final/Content/Benefits.tsx b/sections/Final/Content/Benefits.tsx
index f21c842..4a4efaf 100644
--- a/sections/Final/Content/Benefits.tsx
+++ b/sections/Final/Content/Benefits.tsx
@@ -7,92 +7,92 @@ import { Section } from "deco/blocks/section.ts";
  * @title {{{title}}}
  */
 export interface Item {
-    title: string;
-    /**
-     * @title Conteúdo
-     */
-    section: Section;
+  title: string;
+  /**
+   * @title Conteúdo
+   */
+  section: Section;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Benefits {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Ícone do Benefício
-     * @description Ícone do benefício do plano
-     */
-    iconBenefit?: ImageWidget;
-    /**
-     * @title Subtítulo Benefício
-     * @description Insira o subtítulo do benefício
-     */
-    subTitleBenefit?: string;
-    /**
-     * @title Descrição do Benefício
-     * @description Insira a descrição falando sobre o benefício
-     */
-    descriptionBenefit?: string;
-    /**
-     * @title Ícone (Fechado)
-     * @description Ícone exibido quando o collapse está fechado
-     * @conditional collapse.enable
-     */
-    closedIcon?: ImageWidget;
-    /**
-     * @title Ícone (Aberto)
-     * @description Ícone exibido quando o collapse está aberto
-     * @conditional collapse.enable
-     */
-    openIcon?: ImageWidget;
-    /**
-     * @title Conteúdo
-     */
-    sections?: Item[];
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Ícone do Benefício
+   * @description Ícone do benefício do plano
+   */
+  iconBenefit?: ImageWidget;
+  /**
+   * @title Subtítulo Benefício
+   * @description Insira o subtítulo do benefício
+   */
+  subTitleBenefit?: string;
+  /**
+   * @title Descrição do Benefício
+   * @description Insira a descrição falando sobre o benefício
+   */
+  descriptionBenefit?: string;
+  /**
+   * @title Ícone (Fechado)
+   * @description Ícone exibido quando o collapse está fechado
+   * @conditional collapse.enable
+   */
+  closedIcon?: ImageWidget;
+  /**
+   * @title Ícone (Aberto)
+   * @description Ícone exibido quando o collapse está aberto
+   * @conditional collapse.enable
+   */
+  openIcon?: ImageWidget;
+  /**
+   * @title Conteúdo
+   */
+  sections?: Item[];
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo da Dúvida
-     */
-    benefits: Benefits[];
-
-    collapse?: {
-        /**
-         * @title Ativar Collapse
-         * @description Habilitar comportamento de colapso
-         */
-        enable?: boolean;
-    };
+  /**
+   * @title Conteúdo da Dúvida
+   */
+  benefits: Benefits[];
 
+  collapse?: {
     /**
-     * @title Cor do Tema
+     * @title Ativar Collapse
+     * @description Habilitar comportamento de colapso
      */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+    enable?: boolean;
+  };
+
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section({
-    benefits,
-    collapse,
-    colorTheme,
+  benefits,
+  collapse,
+  colorTheme,
 }: Props) {
-    return (
-        <Benefits
-            benefits={benefits}
-            collapse={collapse}
-            colorTheme={colorTheme}
-        />
-    );
+  return (
+    <Benefits
+      benefits={benefits}
+      collapse={collapse}
+      colorTheme={colorTheme}
+    />
+  );
 }
diff --git a/sections/Final/Content/Clients.tsx b/sections/Final/Content/Clients.tsx
index ebbaf0d..bfc7694 100644
--- a/sections/Final/Content/Clients.tsx
+++ b/sections/Final/Content/Clients.tsx
@@ -6,58 +6,58 @@ import { ImageWidget } from "apps/admin/widgets.ts";
  * @title {{{title}}}
  */
 export interface Clients {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Ícone do Cliente
-     */
-    iconClient?: ImageWidget;
-    /**
-     * @title Nome
-     * @description Insira o nome do cliente
-     */
-    name?: string;
-    /**
-     * @title Tipo
-     * @description Insira o tipo de cliente
-     */
-    type?: string;
-    /**
-     * @title Cidade/Estado
-     * @description Insira a cidade e/ou estado do cliente
-     */
-    cityUf?: string;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Ícone do Cliente
+   */
+  iconClient?: ImageWidget;
+  /**
+   * @title Nome
+   * @description Insira o nome do cliente
+   */
+  name?: string;
+  /**
+   * @title Tipo
+   * @description Insira o tipo de cliente
+   */
+  type?: string;
+  /**
+   * @title Cidade/Estado
+   * @description Insira a cidade e/ou estado do cliente
+   */
+  cityUf?: string;
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo da Dúvida
-     */
-    clients: Clients[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo da Dúvida
+   */
+  clients: Clients[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section({
-    clients,
-    colorTheme,
+  clients,
+  colorTheme,
 }: Props) {
-    return (
-        <Clients
-            clients={clients}
-            colorTheme={colorTheme}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <Clients
+      clients={clients}
+      colorTheme={colorTheme}
+    />
+  );
+}
diff --git a/sections/Final/Content/Comparison.tsx b/sections/Final/Content/Comparison.tsx
index 1242a11..f6d89be 100644
--- a/sections/Final/Content/Comparison.tsx
+++ b/sections/Final/Content/Comparison.tsx
@@ -212,4 +212,4 @@ export default function Section({
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Content/ComparisonPlan.tsx b/sections/Final/Content/ComparisonPlan.tsx
index ae09289..0535610 100644
--- a/sections/Final/Content/ComparisonPlan.tsx
+++ b/sections/Final/Content/ComparisonPlan.tsx
@@ -2,72 +2,72 @@ import { ImageWidget } from "apps/admin/widgets.ts";
 import ComparisonPlan from "../../../components/ui/Content/ComparisonPlan/index.tsx";
 
 export interface BenefitsPlan {
-    /**
-     * @title Benefício do Plano
-     * @description Escreva o benefício do plano
-     */
-    benefitDescription?: string[];
+  /**
+   * @title Benefício do Plano
+   * @description Escreva o benefício do plano
+   */
+  benefitDescription?: string[];
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Props {
-    /**
-     * @title Título da Seção
-     * @description Escreva o título da seção
-     */
-    title: string;
-    /**
-     * @title Ícone do Plano Esquerdo
-     * @description Insira o ícone do plano da esquerda
-     */
-    leftPlanIcon: ImageWidget;
-    /**
-     * @title Nome do Plano Esquerdo
-     * @description Insira o nome do plano da esquerda
-     */
-    leftPlanName: string;
-    /**
-     * @title Benefícios do Plano Esquerdo
-     * @description Insira os benefícios do plano da esquerda
-     */
-    leftPlanBenefits: BenefitsPlan;
-    /**
-     * @title Ícone do Plano Direito
-     * @description Insira o ícone do plano da direita
-     */
-    rightPlanIcon: ImageWidget;
-    /**
-     * @title Nome do Plano Direito
-     * @description Insira o nome do plano da direita
-     */
-    rightPlanName: string;
-    /**
-     * @title Benefícios do Plano Direito
-     * @description Insira os benefícios do plano da direita
-     */
-    rightPlanBenefits: BenefitsPlan;
+  /**
+   * @title Título da Seção
+   * @description Escreva o título da seção
+   */
+  title: string;
+  /**
+   * @title Ícone do Plano Esquerdo
+   * @description Insira o ícone do plano da esquerda
+   */
+  leftPlanIcon: ImageWidget;
+  /**
+   * @title Nome do Plano Esquerdo
+   * @description Insira o nome do plano da esquerda
+   */
+  leftPlanName: string;
+  /**
+   * @title Benefícios do Plano Esquerdo
+   * @description Insira os benefícios do plano da esquerda
+   */
+  leftPlanBenefits: BenefitsPlan;
+  /**
+   * @title Ícone do Plano Direito
+   * @description Insira o ícone do plano da direita
+   */
+  rightPlanIcon: ImageWidget;
+  /**
+   * @title Nome do Plano Direito
+   * @description Insira o nome do plano da direita
+   */
+  rightPlanName: string;
+  /**
+   * @title Benefícios do Plano Direito
+   * @description Insira os benefícios do plano da direita
+   */
+  rightPlanBenefits: BenefitsPlan;
 }
 
 export default function Section({
-    title = "",
-    leftPlanIcon,
-    leftPlanName = "",
-    leftPlanBenefits,
-    rightPlanIcon,
-    rightPlanName = "",
-    rightPlanBenefits,
+  title = "",
+  leftPlanIcon,
+  leftPlanName = "",
+  leftPlanBenefits,
+  rightPlanIcon,
+  rightPlanName = "",
+  rightPlanBenefits,
 }: Props) {
-    return (
-        <ComparisonPlan
-            title={title}
-            leftPlanIcon={leftPlanIcon}
-            leftPlanName={leftPlanName}
-            leftPlanBenefits={leftPlanBenefits}
-            rightPlanIcon={rightPlanIcon}
-            rightPlanName={rightPlanName}
-            rightPlanBenefits={rightPlanBenefits}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <ComparisonPlan
+      title={title}
+      leftPlanIcon={leftPlanIcon}
+      leftPlanName={leftPlanName}
+      leftPlanBenefits={leftPlanBenefits}
+      rightPlanIcon={rightPlanIcon}
+      rightPlanName={rightPlanName}
+      rightPlanBenefits={rightPlanBenefits}
+    />
+  );
+}
diff --git a/sections/Final/Content/Doubts.tsx b/sections/Final/Content/Doubts.tsx
index b10f9e1..bd350d0 100644
--- a/sections/Final/Content/Doubts.tsx
+++ b/sections/Final/Content/Doubts.tsx
@@ -7,63 +7,63 @@ import { Section } from "deco/blocks/section.ts";
  * @title {{{title}}}
  */
 export interface Item {
-    title: string;
-    /**
-     * @title Conteúdo
-     */
-    section: Section;
+  title: string;
+  /**
+   * @title Conteúdo
+   */
+  section: Section;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Doubts {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Subtítulo da Dúvida
-     * @description Escreva aqui subtítulo da dúvida
-     */
-    subtitleDoubtAppear: string;
-    /**
-     * @title Descrição da Dúvida
-     * @description Escreva aqui a descrição da dúvida
-     */
-    descriptionHiddenDoubt: string;
-    /**
-     * @title Conteúdo
-     */
-    sections?: Item[];
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Subtítulo da Dúvida
+   * @description Escreva aqui subtítulo da dúvida
+   */
+  subtitleDoubtAppear: string;
+  /**
+   * @title Descrição da Dúvida
+   * @description Escreva aqui a descrição da dúvida
+   */
+  descriptionHiddenDoubt: string;
+  /**
+   * @title Conteúdo
+   */
+  sections?: Item[];
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo da Dúvida
-     */
-    doubt: Doubts[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo da Dúvida
+   */
+  doubt: Doubts[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section(
-    { doubt, colorTheme }: Props,
+  { doubt, colorTheme }: Props,
 ) {
-    return (
-        <DoubtsComponent
-            doubt={doubt}
-            colorTheme={colorTheme}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <DoubtsComponent
+      doubt={doubt}
+      colorTheme={colorTheme}
+    />
+  );
+}
diff --git a/sections/Final/Content/Dropdown.tsx b/sections/Final/Content/Dropdown.tsx
index 29bd1bc..82a9665 100644
--- a/sections/Final/Content/Dropdown.tsx
+++ b/sections/Final/Content/Dropdown.tsx
@@ -6,67 +6,67 @@ import { ImageWidget } from "apps/admin/widgets.ts";
  * @title {{{title}}}
  */
 export interface filteredCategories {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
 
-    /**
-     * @title Nome
-     * @description Nome da categoria filtrada
-     */
-    name: string;
+  /**
+   * @title Nome
+   * @description Nome da categoria filtrada
+   */
+  name: string;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Props {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
 
-    /**
-     * @title Texto do Dropdown
-     * @description Insira o texto do dropdown
-     */
-    dropdownText: string;
+  /**
+   * @title Texto do Dropdown
+   * @description Insira o texto do dropdown
+   */
+  dropdownText: string;
 
-    /**
-     * @title Ícone de Seta
-     * @description Insira o ícone de seta
-     */
-    arrowIcon: ImageWidget;
+  /**
+   * @title Ícone de Seta
+   * @description Insira o ícone de seta
+   */
+  arrowIcon: ImageWidget;
 
-    /**
-     * @title Categorias Filtradas
-     * @description Insira as categorias de integração filtradas
-     */
-    button?: filteredCategories[];
-    /**
-     * @title Função de Mudança de Categoria
-     * @description Função chamada ao mudar a categoria no Dropdown
-     */
-    onCategoryChange: (selected: string) => void;
+  /**
+   * @title Categorias Filtradas
+   * @description Insira as categorias de integração filtradas
+   */
+  button?: filteredCategories[];
+  /**
+   * @title Função de Mudança de Categoria
+   * @description Função chamada ao mudar a categoria no Dropdown
+   */
+  onCategoryChange: (selected: string) => void;
 }
 
 export default function Section({
-    title = "",
-    dropdownText = "",
-    arrowIcon,
-    button,
-    onCategoryChange,
+  title = "",
+  dropdownText = "",
+  arrowIcon,
+  button,
+  onCategoryChange,
 }: Props) {
-    return (
-        <Dropdown
-            title={title}
-            dropdownText={dropdownText}
-            arrowIcon={arrowIcon}
-            button={button}
-            onCategoryChange={onCategoryChange}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <Dropdown
+      title={title}
+      dropdownText={dropdownText}
+      arrowIcon={arrowIcon}
+      button={button}
+      onCategoryChange={onCategoryChange}
+    />
+  );
+}
diff --git a/sections/Final/Content/DropdownWithLogos.tsx b/sections/Final/Content/DropdownWithLogos.tsx
index c9fa22f..ef1b57d 100644
--- a/sections/Final/Content/DropdownWithLogos.tsx
+++ b/sections/Final/Content/DropdownWithLogos.tsx
@@ -6,95 +6,95 @@ import { ImageWidget } from "apps/admin/widgets.ts";
  * @title {{{title}}}
  */
 export interface FilteredCategories {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
 
-    /**
-     * @title Nome
-     * @description Nome da categoria filtrada
-     */
-    name: string;
+  /**
+   * @title Nome
+   * @description Nome da categoria filtrada
+   */
+  name: string;
 
-    /**
-     * @title ID da Categoria
-     * @description ID único associado à categoria
-     */
-    id: string;
+  /**
+   * @title ID da Categoria
+   * @description ID único associado à categoria
+   */
+  id: string;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Logos {
-    /**
-     * @title Nome da Categoria
-     * @description Nome da categoria a qual o logo pertence
-     */
-    category: string;
+  /**
+   * @title Nome da Categoria
+   * @description Nome da categoria a qual o logo pertence
+   */
+  category: string;
 
-    /**
-     * @title Nome do Logo
-     * @description Título do logo
-     */
-    title: string;
+  /**
+   * @title Nome do Logo
+   * @description Título do logo
+   */
+  title: string;
 
-    /**
-     * @title Imagens
-     * @description Adicione as imagens do logotipo
-     */
-    logo: ImageWidget[];
+  /**
+   * @title Imagens
+   * @description Adicione as imagens do logotipo
+   */
+  logo: ImageWidget[];
 
-    /**
-     * @title ID único do logo
-     * @description ID único associado ao logo e suas imagens
-     */
-    id: string;
+  /**
+   * @title ID único do logo
+   * @description ID único associado ao logo e suas imagens
+   */
+  id: string;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
-    /**
-     * @title Texto do Dropdown
-     * @description Insira o texto do dropdown
-     */
-    dropdownText: string;
+  /**
+   * @title Texto do Dropdown
+   * @description Insira o texto do dropdown
+   */
+  dropdownText: string;
 
-    /**
-     * @title Ícone de Seta
-     * @description Insira o ícone de seta
-     */
-    arrowIcon: ImageWidget;
+  /**
+   * @title Ícone de Seta
+   * @description Insira o ícone de seta
+   */
+  arrowIcon: ImageWidget;
 
-    /**
-     * @title Categorias Filtradas
-     * @description Insira as categorias de integração filtradas
-     */
-    button?: FilteredCategories[];
+  /**
+   * @title Categorias Filtradas
+   * @description Insira as categorias de integração filtradas
+   */
+  button?: FilteredCategories[];
 
-    /**
-     * @title Logos
-     * @description Lista de logos associados às categorias
-     */
-    logos: Logos[];
+  /**
+   * @title Logos
+   * @description Lista de logos associados às categorias
+   */
+  logos: Logos[];
 }
 
 export default function Section({
-    dropdownText = "",
-    arrowIcon = "",
-    button,
-    logos,
+  dropdownText = "",
+  arrowIcon = "",
+  button,
+  logos,
 }: Props) {
-    return (
-        <DropdownWithLogos
-            dropdownText={dropdownText}
-            arrowIcon={arrowIcon}
-            button={button}
-            logos={logos}
-        />
-    );
+  return (
+    <DropdownWithLogos
+      dropdownText={dropdownText}
+      arrowIcon={arrowIcon}
+      button={button}
+      logos={logos}
+    />
+  );
 }
diff --git a/sections/Final/Content/Lead.tsx b/sections/Final/Content/Lead.tsx
index 218dc72..2db940f 100644
--- a/sections/Final/Content/Lead.tsx
+++ b/sections/Final/Content/Lead.tsx
@@ -1,65 +1,64 @@
 import React from "react";
 import Lead from "../../../components/ui/Content/Lead/index.tsx";
 
-
 /**
  * @title {{{title}}}
  */
 export interface Title {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva aqui o seu conteúdo
-     */
-    content: string;
-    /**
-     * @title Alinhamento
-     * @format button-group
-     * @options site/loaders/icons.ts
-     */
-    textAlignment?: "Left" | "Center" | "Right";
-    colorTheme: "Primary" | "Secondary" | "White" | "Accent";
-  }
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva aqui o seu conteúdo
+   */
+  content: string;
+  /**
+   * @title Alinhamento
+   * @format button-group
+   * @options site/loaders/icons.ts
+   */
+  textAlignment?: "Left" | "Center" | "Right";
+  colorTheme: "Primary" | "Secondary" | "White" | "Accent";
+}
 
 /**
  * @title {{{title}}}
  */
 export interface Button {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do botão
-     */
-    text: string;
-    /**
-     * @title Link
-     * @description Escreva o link de redirecionamento
-     */
-    link: string;
-    /**
-     * @title Icone
-     * @description Selecione o ícone que deseja
-     */
-    icon?: string;
-    /**
-     * @title Botão
-     * @description Selecione o tipo de botão que deseja
-     */
-    buttonTheme?:
-        | "Primary dark"
-        | "Primary white"
-        | "Secondary dark"
-        | "Secondary white"
-        | "Link dark"
-        | "Link white"
-        | "Faq"
-        | "Nenhuma estilização"
-        
-    /**
-     * @title Tamanho do botão
-     * @description Selecione o tamanho do botão
-     */
-    tamanho?: 
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do botão
+   */
+  text: string;
+  /**
+   * @title Link
+   * @description Escreva o link de redirecionamento
+   */
+  link: string;
+  /**
+   * @title Icone
+   * @description Selecione o ícone que deseja
+   */
+  icon?: string;
+  /**
+   * @title Botão
+   * @description Selecione o tipo de botão que deseja
+   */
+  buttonTheme?:
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
+
+  /**
+   * @title Tamanho do botão
+   * @description Selecione o tamanho do botão
+   */
+  tamanho?:
     | "Máximo (100%)"
     | "Mínimo (Tamanho do conteúdo)";
 }
diff --git a/sections/Final/Content/OptionalCollapse.tsx b/sections/Final/Content/OptionalCollapse.tsx
index 5c8c6a1..13f0077 100644
--- a/sections/Final/Content/OptionalCollapse.tsx
+++ b/sections/Final/Content/OptionalCollapse.tsx
@@ -7,73 +7,73 @@ import { Section } from "deco/blocks/section.ts";
  * @title {{{title}}}
  */
 export interface Item {
-    title: string;
-    /**
-     * @title Conteúdo
-     */
-    section: Section;
+  title: string;
+  /**
+   * @title Conteúdo
+   */
+  section: Section;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Optional {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Ícone da Marca
-     * @description Ícone da marca no collapse
-     */
-    iconBrand?: ImageWidget;
-    /**
-     * @title Nome da Marca
-     * @description Insira o nome da marca
-     */
-    brandNameSubtitle?: string;
-    /**
-     * @title Ícone (Fechado)
-     * @description Ícone exibido quando o collapse está fechado
-     */
-    closedIcon?: ImageWidget;
-    /**
-     * @title Ícone (Aberto)
-     * @description Ícone exibido quando o collapse está aberto
-     */
-    openIcon?: ImageWidget;
-    /**
-     * @title Conteúdo
-     */
-    sections?: Item[];
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Ícone da Marca
+   * @description Ícone da marca no collapse
+   */
+  iconBrand?: ImageWidget;
+  /**
+   * @title Nome da Marca
+   * @description Insira o nome da marca
+   */
+  brandNameSubtitle?: string;
+  /**
+   * @title Ícone (Fechado)
+   * @description Ícone exibido quando o collapse está fechado
+   */
+  closedIcon?: ImageWidget;
+  /**
+   * @title Ícone (Aberto)
+   * @description Ícone exibido quando o collapse está aberto
+   */
+  openIcon?: ImageWidget;
+  /**
+   * @title Conteúdo
+   */
+  sections?: Item[];
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo de Opcional
-     */
-    optional: Optional[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo de Opcional
+   */
+  optional: Optional[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section(
-    { optional, colorTheme }: Props,
+  { optional, colorTheme }: Props,
 ) {
-    return (
-        <OptionalCollappseComponent
-            optional={optional}
-            colorTheme={colorTheme}
-        />
-    );
+  return (
+    <OptionalCollappseComponent
+      optional={optional}
+      colorTheme={colorTheme}
+    />
+  );
 }
diff --git a/sections/Final/Content/OrderTracking.tsx b/sections/Final/Content/OrderTracking.tsx
index cf3d5c5..9d12683 100644
--- a/sections/Final/Content/OrderTracking.tsx
+++ b/sections/Final/Content/OrderTracking.tsx
@@ -6,66 +6,66 @@ import OrderTracking from "../../../components/ui/Content/OrderTracking/index.ts
  * @title {{{title}}}
  */
 export interface OrderStatus {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Subtítulo do Status
-     * @description Escreva aqui subtítulo do status do pedido
-     */
-    subtitleOrderStatus: string;
-    /**
-     * @title Descrição do Status
-     * @description Escreva aqui a descrição do status do pedido
-     */
-    description: string;
-    /**
-     * @title Imagem do Status
-     * @description Insira aqui a imagem do status do pedido
-     */
-    imageStatus?: ImageWidget;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Subtítulo do Status
+   * @description Escreva aqui subtítulo do status do pedido
+   */
+  subtitleOrderStatus: string;
+  /**
+   * @title Descrição do Status
+   * @description Escreva aqui a descrição do status do pedido
+   */
+  description: string;
+  /**
+   * @title Imagem do Status
+   * @description Insira aqui a imagem do status do pedido
+   */
+  imageStatus?: ImageWidget;
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo do Status do Pedido
-     */
-    order: OrderStatus[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo do Status do Pedido
+   */
+  order: OrderStatus[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 
-    /**
-     * @title Cor do Tema do Ícone de Status
-     */
-    colorThemeBackgroundIcon:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Cor do Tema do Ícone de Status
+   */
+  colorThemeBackgroundIcon:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section(
-    { order, colorTheme, colorThemeBackgroundIcon }: Props,
+  { order, colorTheme, colorThemeBackgroundIcon }: Props,
 ) {
-    return (
-        <OrderTracking
-            order={order}
-            colorTheme={colorTheme}
-            colorThemeBackgroundIcon={colorThemeBackgroundIcon}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <OrderTracking
+      order={order}
+      colorTheme={colorTheme}
+      colorThemeBackgroundIcon={colorThemeBackgroundIcon}
+    />
+  );
+}
diff --git a/sections/Final/Content/ParentComponent.tsx b/sections/Final/Content/ParentComponent.tsx
index 7a0b743..9766609 100644
--- a/sections/Final/Content/ParentComponent.tsx
+++ b/sections/Final/Content/ParentComponent.tsx
@@ -3,30 +3,30 @@ import Dropdown from "../../../components/ui/Content/Dropdown/index.tsx";
 import LogoGroupComponent from "../../../components/ui/Content/LogoGroup/index.tsx";
 
 function ParentComponent({ title, dropdownText, arrowIcon, button, logos }) {
-    const [selectedCategory, setSelectedCategory] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("");
 
-    const handleCategoryChange = (category: string) => {
-        console.log(`[ParentComponent] Categoria selecionada: ${category}`);
-        setSelectedCategory(category);
-    };
+  const handleCategoryChange = (category: string) => {
+    console.log(`[ParentComponent] Categoria selecionada: ${category}`);
+    setSelectedCategory(category);
+  };
 
-    console.log("[ParentComponent] Categoria atual:", selectedCategory);
+  console.log("[ParentComponent] Categoria atual:", selectedCategory);
 
-    return (
-        <div className="w-full flex flex-col items-center">
-            <Dropdown
-                dropdownText={dropdownText}
-                arrowIcon={arrowIcon}
-                button={button}
-                onCategoryChange={handleCategoryChange}
-            />
-            <LogoGroupComponent
-                title={title}
-                logos={logos}
-                selectedCategory={selectedCategory}
-            />
-        </div>
-    );
+  return (
+    <div className="w-full flex flex-col items-center">
+      <Dropdown
+        dropdownText={dropdownText}
+        arrowIcon={arrowIcon}
+        button={button}
+        onCategoryChange={handleCategoryChange}
+      />
+      <LogoGroupComponent
+        title={title}
+        logos={logos}
+        selectedCategory={selectedCategory}
+      />
+    </div>
+  );
 }
 
-export default ParentComponent;
\ No newline at end of file
+export default ParentComponent;
diff --git a/sections/Final/Content/Product.tsx b/sections/Final/Content/Product.tsx
index 79c8cc9..743f30a 100644
--- a/sections/Final/Content/Product.tsx
+++ b/sections/Final/Content/Product.tsx
@@ -11,14 +11,14 @@ export interface Button {
    * @description Escreva o texto do botão
    */
   text: string;
-  
+
   /**
    * @title Tamanho do botão
    * @description Selecione o tamanho do botão
    */
-  tamanho?: 
-  | "Máximo (100%)"
-  | "Mínimo (Tamanho do conteúdo)";
+  tamanho?:
+    | "Máximo (100%)"
+    | "Mínimo (Tamanho do conteúdo)";
 
   /**
    * @title Link
@@ -35,14 +35,14 @@ export interface Button {
    * @description Selecione o tipo de botão que deseja
    */
   buttonTheme?:
-      | "Primary dark"
-      | "Primary white"
-      | "Secondary dark"
-      | "Secondary white"
-      | "Link dark"
-      | "Link white"
-      | "Faq"
-      | "Nenhuma estilização"
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
 }
 
 export interface Props {
diff --git a/sections/Final/Content/Spacer.tsx b/sections/Final/Content/Spacer.tsx
index 2df6256..5ea7e40 100644
--- a/sections/Final/Content/Spacer.tsx
+++ b/sections/Final/Content/Spacer.tsx
@@ -3,28 +3,29 @@ import Chip from "../../../components/ui/Content/Chip/index.tsx";
 import { ImageWidget } from "apps/admin/widgets.ts";
 
 export interface Props {
-    /**
-     * @title Alinhamento
-     * @description Selecione o alinhamento
-     */
-    contentAlign:
-      | "Vertical"
-      | "Horizontal"
+  /**
+   * @title Alinhamento
+   * @description Selecione o alinhamento
+   */
+  contentAlign:
+    | "Vertical"
+    | "Horizontal";
 }
 
 export default function Section({
-    contentAlign = "Vertical",
-  }: Props) {
+  contentAlign = "Vertical",
+}: Props) {
   return (
     <div className="flex justify-center">
-        <div className="w-full max-w-[706px] flex justify-center py-3">
-            { contentAlign == "Vertical" && (
-                <span className="block w-[1px] h-[111px] bg-sacramentoState-40"></span>
-            )}
-            { contentAlign == "Horizontal" && (
-                <span className="block h-[1px] w-full bg-white"></span>
-            )}
-        </div>
+      <div className="w-full max-w-[706px] flex justify-center py-3">
+        {contentAlign == "Vertical" && (
+          <span className="block w-[1px] h-[111px] bg-sacramentoState-40">
+          </span>
+        )}
+        {contentAlign == "Horizontal" && (
+          <span className="block h-[1px] w-full bg-white"></span>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/sections/Final/Counter/Counter.tsx b/sections/Final/Counter/Counter.tsx
index 6763d69..99cb531 100644
--- a/sections/Final/Counter/Counter.tsx
+++ b/sections/Final/Counter/Counter.tsx
@@ -2,15 +2,15 @@ import type { JSX } from "preact";
 import CounterComponent from "../../../islands/Counter.tsx";
 import Script, { type Props } from "./script.tsx";
 
-function Counter({ }: JSX.IntrinsicElements["div"] & Props) {
+function Counter({}: JSX.IntrinsicElements["div"] & Props) {
   return (
     <>
-    <div>
+      <div>
         <CounterComponent />
         <Script />
-    </div>
+      </div>
     </>
   );
 }
 
-export default Counter;
\ No newline at end of file
+export default Counter;
diff --git a/sections/Final/Counter/script.tsx b/sections/Final/Counter/script.tsx
index 185cdd7..e3a5e3c 100644
--- a/sections/Final/Counter/script.tsx
+++ b/sections/Final/Counter/script.tsx
@@ -1,53 +1,47 @@
 import { useScript as useScript } from "@deco/deco/hooks";
 
-export interface Props { }
-
-const setup = ({ }: Props) => {
-    
-    const toggleIcon = document.getElementById('toggle-icon')
-    const mobileMenu = document.getElementById('mobile-menu')
-    const hamburguerIcon = document.getElementById('hamburger-icon')
-    const closeIcon = document.getElementById('close-icon')
-    const body = document.querySelector('body')
-    // const heightElement1 = element1.getBoundingClientRect().height;
-    const nav = document.getElementById('nav')
-    const heightNav = nav?.getBoundingClientRect().height
-    
-    toggleIcon?.addEventListener('click', () => {
-
-        if (mobileMenu) {
-
-            const currentTop = globalThis.getComputedStyle(mobileMenu).top;
-
-            if (currentTop === '0px' && mobileMenu) {
-                mobileMenu.style.top = `${heightNav}px`;
-            } else {
-                mobileMenu.style.top = `0px`;
-            }
-    
-            mobileMenu?.classList.toggle('-translate-y-full')
-            mobileMenu?.classList.toggle('translate-y-0')
-            
-            hamburguerIcon?.classList.toggle('opacity-0')
-            closeIcon?.classList.toggle('opacity-0')
-            body?.classList.toggle('overflow-hidden')
-
-        }
-
-    });
-
-}
+export interface Props {}
+
+const setup = ({}: Props) => {
+  const toggleIcon = document.getElementById("toggle-icon");
+  const mobileMenu = document.getElementById("mobile-menu");
+  const hamburguerIcon = document.getElementById("hamburger-icon");
+  const closeIcon = document.getElementById("close-icon");
+  const body = document.querySelector("body");
+  // const heightElement1 = element1.getBoundingClientRect().height;
+  const nav = document.getElementById("nav");
+  const heightNav = nav?.getBoundingClientRect().height;
+
+  toggleIcon?.addEventListener("click", () => {
+    if (mobileMenu) {
+      const currentTop = globalThis.getComputedStyle(mobileMenu).top;
+
+      if (currentTop === "0px" && mobileMenu) {
+        mobileMenu.style.top = `${heightNav}px`;
+      } else {
+        mobileMenu.style.top = `0px`;
+      }
+
+      mobileMenu?.classList.toggle("-translate-y-full");
+      mobileMenu?.classList.toggle("translate-y-0");
+
+      hamburguerIcon?.classList.toggle("opacity-0");
+      closeIcon?.classList.toggle("opacity-0");
+      body?.classList.toggle("overflow-hidden");
+    }
+  });
+};
 
 function HeaderOnlyTextToWork(
-  { }: Props,
+  {}: Props,
 ) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
-        __html: useScript(setup, { }),
+        __html: useScript(setup, {}),
       }}
     />
   );
 }
-export default HeaderOnlyTextToWork;
\ No newline at end of file
+export default HeaderOnlyTextToWork;
diff --git a/sections/Final/DropDown/DropDownComponent.tsx b/sections/Final/DropDown/DropDownComponent.tsx
index aa0c159..588118e 100644
--- a/sections/Final/DropDown/DropDownComponent.tsx
+++ b/sections/Final/DropDown/DropDownComponent.tsx
@@ -41,4 +41,4 @@ export default function Section({
       hoverColor={hoverColor}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Form/Form.tsx b/sections/Final/Form/Form.tsx
index 913140e..8c5581e 100644
--- a/sections/Final/Form/Form.tsx
+++ b/sections/Final/Form/Form.tsx
@@ -5,29 +5,26 @@ import FormComponent from "../../../components/ui/Button/index.tsx";
  * @title {{{title}}}
  */
 export interface Input {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do input
-     */
-    placeholder: string;
-    /**
-     * @title ID
-     * @description Selecione o texto do input
-     */
-    id_input: string;
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do input
+   */
+  placeholder: string;
+  /**
+   * @title ID
+   * @description Selecione o texto do input
+   */
+  id_input: string;
 }
 /**
  * @title {{{title}}}
  */
 export interface Props {
-    title: string;
-    input: Input;
+  title: string;
+  input: Input;
 }
 
-export default function Section({
-}: Props) {
-  return (
-    <FormComponent />
-  );
+export default function Section({}: Props) {
+  return <FormComponent />;
 }
diff --git a/sections/Final/Form/InputRadio.tsx b/sections/Final/Form/InputRadio.tsx
index 6221a1d..7e93c38 100644
--- a/sections/Final/Form/InputRadio.tsx
+++ b/sections/Final/Form/InputRadio.tsx
@@ -2,37 +2,41 @@ import React from "react";
 import InputRadioComponent from "../../../components/ui/Form/InputRadio/index.tsx";
 
 export interface InputRadio {
-    /**
-     * @title Etiqueta
-     * @description Escreva a etiqueta do input
-     */
-    label: string;
+  /**
+   * @title Etiqueta
+   * @description Escreva a etiqueta do input
+   */
+  label: string;
 }
 
 export interface Props {
-    /**
-     * @title Texto 
-     * @description Escreva o título 
-     */
-    text: string;
-    /**
-     * @title Nome do formulário 
-     * @description Escreva o nome do formulário (Necessário que seja um nome único no site) 
-     */
-    name: string;
-    /**
-     * @title Input 
-     * @description Escreva o título 
-     */
-    inputRadio: InputRadio[];
+  /**
+   * @title Texto
+   * @description Escreva o título
+   */
+  text: string;
+  /**
+   * @title Nome do formulário
+   * @description Escreva o nome do formulário (Necessário que seja um nome único no site)
+   */
+  name: string;
+  /**
+   * @title Input
+   * @description Escreva o título
+   */
+  inputRadio: InputRadio[];
 }
 
 export default function Section({
-    text,
-    name,
-    inputRadio,
+  text,
+  name,
+  inputRadio,
 }: Props) {
   return (
-    <InputRadioComponent text={text} name={name} inputRadio={inputRadio} />
+    <InputRadioComponent
+      text={text}
+      name={name}
+      inputRadio={inputRadio}
+    />
   );
 }
diff --git a/sections/Final/Form/InputText.tsx b/sections/Final/Form/InputText.tsx
index 5c6c0a2..b8af449 100644
--- a/sections/Final/Form/InputText.tsx
+++ b/sections/Final/Form/InputText.tsx
@@ -5,20 +5,26 @@ import InputComponent from "../../../components/ui/Form/Input/index.tsx";
  * @title {{{title}}}
  */
 export interface Props {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do input
-     */
-    placeholder: string;
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do input
+   */
+  placeholder: string;
+  /**
+   * @title Chave
+   * @description Escreva o identificador do campo
+   */
+  name: string;
 }
 
 export default function Section({
   placeholder = "texto",
+  name = "name",
 }: Props) {
   return (
     <div>
-      <InputComponent placeholder={placeholder} />
+      <InputComponent placeholder={placeholder} name={name} />
     </div>
   );
 }
diff --git a/sections/Final/Form/TItleForm.tsx b/sections/Final/Form/TItleForm.tsx
index ea7cb38..531a160 100644
--- a/sections/Final/Form/TItleForm.tsx
+++ b/sections/Final/Form/TItleForm.tsx
@@ -2,91 +2,91 @@ import React from "react";
 import TitleForm from "../../../components/ui/Form/TitleForm/index.tsx";
 
 export interface Props {
-    /**
-     * @title Descrição
-     * @description Escreva aqui a descrição que ficara em cima do título
-     */
-    description?: string;
-    /**
-     * @title Texto
-     * @description Escreva aqui o seu conteúdo
-     */
-    content: string;
-    /**
-     * @title Alinhamento
-     * @format button-group
-     * @options site/loaders/icons.ts
-     */
-    textAlignment?: "Left" | "Center" | "Right";
-    /**
-     * @title Tema de Cor
-     * @description Escolha o tema de cor do texto
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
-    /**
-     * @title Tamanho da Fonte
-     * @description Escolha o tamanho da fonte (22px, 28px ou 32px)
-     * @format select
-     * @default 28px
-     */
-    fontSize?: "22px" | "28px" | "32px";
-    /**
-     * @title Largura do Contêiner
-     * @description Escolha como o contêiner será exibido: Largura Limitada (290px), Largura Limitada (327px), Largura Limitada (343px) ou largura completa.
-     * @format select
-     * @default Largura Limitada (327px)
-     */
-    containerWidth?:
-        | "Largura Limitada (290px)"
-        | "Largura Limitada (327px)"
-        | "Largura Limitada (343px)"
-        | "Largura Completa";
-    /**
-     * @title Alinhamento do Conteúdo
-     * @description Alinhe o conteúdo dentro do contêiner.
-     * @format select
-     * @default Start
-     */
-    contentAlignment?: "Start" | "Center" | "End";
-    /**
-     * @title Espaçamento Superior
-     * @description Defina o espaçamento do contêiner.
-     * @format select
-     * @default Espacamento (40px)
-     */
-    paddingTop?:
-        | "Espacamento (40px)"
-        | "Espacamento (91px)"
-        | "Espaçamento (95px)";
+  /**
+   * @title Descrição
+   * @description Escreva aqui a descrição que ficara em cima do título
+   */
+  description?: string;
+  /**
+   * @title Texto
+   * @description Escreva aqui o seu conteúdo
+   */
+  content: string;
+  /**
+   * @title Alinhamento
+   * @format button-group
+   * @options site/loaders/icons.ts
+   */
+  textAlignment?: "Left" | "Center" | "Right";
+  /**
+   * @title Tema de Cor
+   * @description Escolha o tema de cor do texto
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
+  /**
+   * @title Tamanho da Fonte
+   * @description Escolha o tamanho da fonte (22px, 28px ou 32px)
+   * @format select
+   * @default 28px
+   */
+  fontSize?: "22px" | "28px" | "32px";
+  /**
+   * @title Largura do Contêiner
+   * @description Escolha como o contêiner será exibido: Largura Limitada (290px), Largura Limitada (327px), Largura Limitada (343px) ou largura completa.
+   * @format select
+   * @default Largura Limitada (327px)
+   */
+  containerWidth?:
+    | "Largura Limitada (290px)"
+    | "Largura Limitada (327px)"
+    | "Largura Limitada (343px)"
+    | "Largura Completa";
+  /**
+   * @title Alinhamento do Conteúdo
+   * @description Alinhe o conteúdo dentro do contêiner.
+   * @format select
+   * @default Start
+   */
+  contentAlignment?: "Start" | "Center" | "End";
+  /**
+   * @title Espaçamento Superior
+   * @description Defina o espaçamento do contêiner.
+   * @format select
+   * @default Espacamento (40px)
+   */
+  paddingTop?:
+    | "Espacamento (40px)"
+    | "Espacamento (91px)"
+    | "Espaçamento (95px)";
 }
 
 export default function Section({
-    description,
-    content,
-    colorTheme,
-    textAlignment,
-    fontSize = "28px",
-    containerWidth = "Largura Limitada (327px)",
-    contentAlignment = "Start",
-    paddingTop = "Espacamento (40px)",
+  description,
+  content,
+  colorTheme,
+  textAlignment,
+  fontSize = "28px",
+  containerWidth = "Largura Limitada (327px)",
+  contentAlignment = "Start",
+  paddingTop = "Espacamento (40px)",
 }: Props) {
-    return (
-        <TitleForm
-            description={description}
-            content={content}
-            colorTheme={colorTheme}
-            alignment={textAlignment}
-            fontSize={fontSize}
-            containerWidth={containerWidth}
-            contentAlignment={contentAlignment}
-            paddingTop={paddingTop}
-        />
-    );
+  return (
+    <TitleForm
+      description={description}
+      content={content}
+      colorTheme={colorTheme}
+      alignment={textAlignment}
+      fontSize={fontSize}
+      containerWidth={containerWidth}
+      contentAlignment={contentAlignment}
+      paddingTop={paddingTop}
+    />
+  );
 }
diff --git a/sections/Final/Form/fixedSectionForm.tsx b/sections/Final/Form/fixedSectionForm.tsx
index 68a8d28..22c3818 100644
--- a/sections/Final/Form/fixedSectionForm.tsx
+++ b/sections/Final/Form/fixedSectionForm.tsx
@@ -3,48 +3,48 @@ import Image from "apps/website/components/Image.tsx";
 import FixedSectionForm from "../../../components/ui/Form/FixedSectionForm/index.tsx";
 
 export type Link = {
-    /**
-     * @title Nome
-     * @description Nome visível para clique
-     */
-    name: string;
-    /**
-     * @title Destino
-     * @description Insira a URL ou o caminho de destino
-     */
-    url: string;
+  /**
+   * @title Nome
+   * @description Nome visível para clique
+   */
+  name: string;
+  /**
+   * @title Destino
+   * @description Insira a URL ou o caminho de destino
+   */
+  url: string;
 };
 
 export interface Props {
-    /**
-     * @title Descrição
-     * @description Insira a descrição
-     */
-    description?: string;
-    /**
-     * @title Palavra ou Frase com Cor
-     * @description Escreva a palavra ou frase com cor
-     */
-    highlight?: string;
-    /**
-     * @title Ícone do Botão
-     * @description Insisra o Ícone do Botão
-     */
-    ImageWidget: ImageWidget;
+  /**
+   * @title Descrição
+   * @description Insira a descrição
+   */
+  description?: string;
+  /**
+   * @title Palavra ou Frase com Cor
+   * @description Escreva a palavra ou frase com cor
+   */
+  highlight?: string;
+  /**
+   * @title Ícone do Botão
+   * @description Insisra o Ícone do Botão
+   */
+  ImageWidget: ImageWidget;
 }
 
 export default function Section({
-    description = "",
-    highlight = "",
-    ImageWidget,
+  description = "",
+  highlight = "",
+  ImageWidget,
 }: Props) {
-    return (
-        <div>
-            <FixedSectionForm
-                description={description}
-                highlight={highlight}
-                ImageWidget={ImageWidget}
-            />
-        </div>
-    );
+  return (
+    <div>
+      <FixedSectionForm
+        description={description}
+        highlight={highlight}
+        ImageWidget={ImageWidget}
+      />
+    </div>
+  );
 }
diff --git a/sections/Final/Icons/IconGrid.tsx b/sections/Final/Icons/IconGrid.tsx
index 5ef6c7e..1201949 100644
--- a/sections/Final/Icons/IconGrid.tsx
+++ b/sections/Final/Icons/IconGrid.tsx
@@ -95,4 +95,4 @@ export default function Section({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Navbar/index.tsx b/sections/Final/Navbar/index.tsx
index 2933ef2..363b3d7 100644
--- a/sections/Final/Navbar/index.tsx
+++ b/sections/Final/Navbar/index.tsx
@@ -6,190 +6,190 @@ import ButtonComponent from "../Button/ButtonComponent.tsx";
 import Script, { type Props } from "./script.tsx";
 
 function Menu(
-    { logo, icon, close_icon, menu, button, subMenu, linkIcons }:
-        & JSX.IntrinsicElements["div"]
-        & Props,
+  { logo, icon, close_icon, menu, button, subMenu, linkIcons }:
+    & JSX.IntrinsicElements["div"]
+    & Props,
 ) {
-    return (
-        <>
-            <div>
-                <nav
-                    role="navigation"
-                    id="nav"
-                    className="inline-flex px-4 md:px-10 py-6 w-full justify-between items-center bg-sacramentoState border-b border-white-20 relative top-0 left-0 z-50"
-                >
-                    <div className="flex items-center">
-                        <a href="/">
-                            {logo && (
-                                <Image
-                                    className=""
-                                    src={logo || ""}
-                                    width={173.72}
-                                />
-                            )}
-                        </a>
-                    </div>
+  return (
+    <>
+      <div>
+        <nav
+          role="navigation"
+          id="nav"
+          className="inline-flex px-4 md:px-10 py-6 w-full justify-between items-center bg-sacramentoState border-b border-white-20 relative top-0 left-0 z-50"
+        >
+          <div className="flex items-center">
+            <a href="/">
+              {logo && (
+                <Image
+                  className=""
+                  src={logo || ""}
+                  width={173.72}
+                />
+              )}
+            </a>
+          </div>
 
-                    {/* Ícones de hambúrguer e fechar para mobile */}
-                    <div className="w-fit md:hidden flex items-center">
-                        {/* <input type="checkbox" id="menu-toggle" className="hidden" /> */}
-                        <button
-                            type="button"
-                            id="toggle-icon"
-                            className="focus:outline-none relative text-white h-[32px] w-[32px]"
-                        >
-                            <div
-                                id="hamburger-icon"
-                                className="absolute top-0 left-0 duration-500"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="32"
-                                    height="32"
-                                    viewBox="0 0 32 32"
-                                    fill="none"
-                                >
-                                    <path
-                                        d="M4 24H28"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                    <path
-                                        d="M4 16H28"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                    <path
-                                        d="M4 8H28"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                </svg>
-                            </div>
-                            <div
-                                id="close-icon"
-                                className="absolute top-0 left-0 duration-500 opacity-0"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="32"
-                                    height="32"
-                                    viewBox="0 0 32 32"
-                                    fill="none"
-                                >
-                                    <path
-                                        d="M24 8L8 24"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                    <path
-                                        d="M8 8L24 24"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                </svg>
-                            </div>
-                        </button>
-                    </div>
+          {/* Ícones de hambúrguer e fechar para mobile */}
+          <div className="w-fit md:hidden flex items-center">
+            {/* <input type="checkbox" id="menu-toggle" className="hidden" /> */}
+            <button
+              type="button"
+              id="toggle-icon"
+              className="focus:outline-none relative text-white h-[32px] w-[32px]"
+            >
+              <div
+                id="hamburger-icon"
+                className="absolute top-0 left-0 duration-500"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 32 32"
+                  fill="none"
+                >
+                  <path
+                    d="M4 24H28"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M4 16H28"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M4 8H28"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+              <div
+                id="close-icon"
+                className="absolute top-0 left-0 duration-500 opacity-0"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 32 32"
+                  fill="none"
+                >
+                  <path
+                    d="M24 8L8 24"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M8 8L24 24"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
 
-                    <div
-                        id="menu"
-                        className="hidden md:block 2xl:flex space-x-4 font-sans text-white font-light items-center whitespace-nowrap"
-                    >
-                        {menu?.map((item, index) => (
-                            <a key={index} href={item.url}>
-                                {item.name}
-                            </a>
-                        ))}
-                    </div>
+          <div
+            id="menu"
+            className="hidden md:block 2xl:flex space-x-4 font-sans text-white font-light items-center whitespace-nowrap"
+          >
+            {menu?.map((item, index) => (
+              <a key={index} href={item.url}>
+                {item.name}
+              </a>
+            ))}
+          </div>
 
-                    <div className="hidden md:block w-fit md:flex ml-8 bg-secondary rounded-xl items-center justify-center">
-                        {button?.slice(0, 1).map((btn, index) => (
-                            <ButtonComponent
-                                key={index}
-                                text={btn.text}
-                                link={btn.link}
-                                icon={btn.icon}
-                                buttonTheme={btn.buttonTheme}
-                            />
-                        ))}
-                    </div>
-                </nav>
+          <div className="hidden md:block w-fit md:flex ml-8 bg-secondary rounded-xl items-center justify-center">
+            {button?.slice(0, 1).map((btn, index) => (
+              <ButtonComponent
+                key={index}
+                text={btn.text}
+                link={btn.link}
+                icon={btn.icon}
+                buttonTheme={btn.buttonTheme}
+              />
+            ))}
+          </div>
+        </nav>
 
-                {/* Menu */}
-                <div
-                    id="mobile-menu"
-                    className="md:absolute fixed -translate-y-full duration-500 top-0 left-0 w-full h-screen bg-white md:bg-sacramentoState z-50 overflow-scroll z-[49]"
+        {/* Menu */}
+        <div
+          id="mobile-menu"
+          className="md:absolute fixed -translate-y-full duration-500 top-0 left-0 w-full h-screen bg-white md:bg-sacramentoState z-50 overflow-scroll z-[49]"
+        >
+          <div className="md:pt-10 p-4 grid gap-6 md:flex min-h-screen md:min-h-0 overflow-auto">
+            <div className="md:mb-[184px] md:h-fit md:w-full grid md:grid-cols-2 md:gap-x-[28px]">
+              {menu?.map((item, index) => (
+                <a
+                  key={index}
+                  href={item.url}
+                  className="flex justify-between py-[22px] md:py-8 md:text-white border-b border-sacramentoState-10 md:border-white-20"
                 >
-                    <div className="md:pt-10 p-4 grid gap-6 md:flex min-h-screen md:min-h-0 overflow-auto">
-                        <div className="md:mb-[184px] md:h-fit md:w-full grid md:grid-cols-2 md:gap-x-[28px]">
-                            {menu?.map((item, index) => (
-                                <a
-                                    key={index}
-                                    href={item.url}
-                                    className="flex justify-between py-[22px] md:py-8 md:text-white border-b border-sacramentoState-10 md:border-white-20"
-                                >
-                                    {item.name}
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                    >
-                                        <path
-                                            d="M14.83 11.2899L10.59 7.04995C10.497 6.95622 10.3864 6.88183 10.2646 6.83106C10.1427 6.78029 10.012 6.75415 9.88 6.75415C9.74799 6.75415 9.61729 6.78029 9.49543 6.83106C9.37357 6.88183 9.26297 6.95622 9.17 7.04995C8.98375 7.23731 8.87921 7.49076 8.87921 7.75495C8.87921 8.01913 8.98375 8.27259 9.17 8.45995L12.71 11.9999L9.17 15.5399C8.98375 15.7273 8.87921 15.9808 8.87921 16.2449C8.87921 16.5091 8.98375 16.7626 9.17 16.9499C9.26344 17.0426 9.37426 17.116 9.4961 17.1657C9.61794 17.2155 9.7484 17.2407 9.88 17.2399C10.0116 17.2407 10.1421 17.2155 10.2639 17.1657C10.3857 17.116 10.4966 17.0426 10.59 16.9499L14.83 12.7099C14.9237 12.617 14.9981 12.5064 15.0489 12.3845C15.0997 12.2627 15.1258 12.132 15.1258 11.9999C15.1258 11.8679 15.0997 11.7372 15.0489 11.6154C14.9981 11.4935 14.9237 11.3829 14.83 11.2899Z"
-                                            fill="#3BEDB2"
-                                        />
-                                    </svg>
-                                </a>
-                            ))}
-                        </div>
-                        <div className="md:w-[464px] md:h-fit grid gap-4 md:whitespace-nowrap">
-                            {/* Trazer component de botões */}
-                            {button?.map((btn, index) => (
-                                <ButtonComponent
-                                    text={btn.text}
-                                    link={btn.link}
-                                    icon={btn.icon}
-                                    buttonTheme={btn.buttonTheme}
-                                />
-                            ))}
-                        </div>
+                  {item.name}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <path
+                      d="M14.83 11.2899L10.59 7.04995C10.497 6.95622 10.3864 6.88183 10.2646 6.83106C10.1427 6.78029 10.012 6.75415 9.88 6.75415C9.74799 6.75415 9.61729 6.78029 9.49543 6.83106C9.37357 6.88183 9.26297 6.95622 9.17 7.04995C8.98375 7.23731 8.87921 7.49076 8.87921 7.75495C8.87921 8.01913 8.98375 8.27259 9.17 8.45995L12.71 11.9999L9.17 15.5399C8.98375 15.7273 8.87921 15.9808 8.87921 16.2449C8.87921 16.5091 8.98375 16.7626 9.17 16.9499C9.26344 17.0426 9.37426 17.116 9.4961 17.1657C9.61794 17.2155 9.7484 17.2407 9.88 17.2399C10.0116 17.2407 10.1421 17.2155 10.2639 17.1657C10.3857 17.116 10.4966 17.0426 10.59 16.9499L14.83 12.7099C14.9237 12.617 14.9981 12.5064 15.0489 12.3845C15.0997 12.2627 15.1258 12.132 15.1258 11.9999C15.1258 11.8679 15.0997 11.7372 15.0489 11.6154C14.9981 11.4935 14.9237 11.3829 14.83 11.2899Z"
+                      fill="#3BEDB2"
+                    />
+                  </svg>
+                </a>
+              ))}
+            </div>
+            <div className="md:w-[464px] md:h-fit grid gap-4 md:whitespace-nowrap">
+              {/* Trazer component de botões */}
+              {button?.map((btn, index) => (
+                <ButtonComponent
+                  text={btn.text}
+                  link={btn.link}
+                  icon={btn.icon}
+                  buttonTheme={btn.buttonTheme}
+                />
+              ))}
+            </div>
 
-                        {
-                            /* <div className="flex flex-wrap gap-8 py-8">
+            {
+              /* <div className="flex flex-wrap gap-8 py-8">
                             {/* Colocar botões */
-                        }
-                        {/* <ButtonComponent text={btn.text} link={btn.link} icon={btn.icon} buttonTheme={btn.buttonTheme} /> */}
-                        {/* </div> */}
-                    </div>
-                    <div className="md:relative md:bottom-0 md:pl-4 md:flex grid gap-8 py-8 pb-10 md:text-darkMintCream">
-                        {subMenu?.map((btn, index) => (
-                            <ButtonComponent
-                                key={index}
-                                text={btn.text}
-                                link={btn.link}
-                                icon={btn.icon}
-                                buttonTheme={btn.buttonTheme}
-                            />
-                        ))}
-                    </div>
-                </div>
-            </div>
-            <Script />
-        </>
-    );
+            }
+            {/* <ButtonComponent text={btn.text} link={btn.link} icon={btn.icon} buttonTheme={btn.buttonTheme} /> */}
+            {/* </div> */}
+          </div>
+          <div className="md:relative md:bottom-0 md:pl-4 md:flex grid gap-8 py-8 pb-10 md:text-darkMintCream">
+            {subMenu?.map((btn, index) => (
+              <ButtonComponent
+                key={index}
+                text={btn.text}
+                link={btn.link}
+                icon={btn.icon}
+                buttonTheme={btn.buttonTheme}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <Script />
+    </>
+  );
 }
 
 export default Menu;
diff --git a/sections/Final/Navbar/script.tsx b/sections/Final/Navbar/script.tsx
index 185cdd7..e3a5e3c 100644
--- a/sections/Final/Navbar/script.tsx
+++ b/sections/Final/Navbar/script.tsx
@@ -1,53 +1,47 @@
 import { useScript as useScript } from "@deco/deco/hooks";
 
-export interface Props { }
-
-const setup = ({ }: Props) => {
-    
-    const toggleIcon = document.getElementById('toggle-icon')
-    const mobileMenu = document.getElementById('mobile-menu')
-    const hamburguerIcon = document.getElementById('hamburger-icon')
-    const closeIcon = document.getElementById('close-icon')
-    const body = document.querySelector('body')
-    // const heightElement1 = element1.getBoundingClientRect().height;
-    const nav = document.getElementById('nav')
-    const heightNav = nav?.getBoundingClientRect().height
-    
-    toggleIcon?.addEventListener('click', () => {
-
-        if (mobileMenu) {
-
-            const currentTop = globalThis.getComputedStyle(mobileMenu).top;
-
-            if (currentTop === '0px' && mobileMenu) {
-                mobileMenu.style.top = `${heightNav}px`;
-            } else {
-                mobileMenu.style.top = `0px`;
-            }
-    
-            mobileMenu?.classList.toggle('-translate-y-full')
-            mobileMenu?.classList.toggle('translate-y-0')
-            
-            hamburguerIcon?.classList.toggle('opacity-0')
-            closeIcon?.classList.toggle('opacity-0')
-            body?.classList.toggle('overflow-hidden')
-
-        }
-
-    });
-
-}
+export interface Props {}
+
+const setup = ({}: Props) => {
+  const toggleIcon = document.getElementById("toggle-icon");
+  const mobileMenu = document.getElementById("mobile-menu");
+  const hamburguerIcon = document.getElementById("hamburger-icon");
+  const closeIcon = document.getElementById("close-icon");
+  const body = document.querySelector("body");
+  // const heightElement1 = element1.getBoundingClientRect().height;
+  const nav = document.getElementById("nav");
+  const heightNav = nav?.getBoundingClientRect().height;
+
+  toggleIcon?.addEventListener("click", () => {
+    if (mobileMenu) {
+      const currentTop = globalThis.getComputedStyle(mobileMenu).top;
+
+      if (currentTop === "0px" && mobileMenu) {
+        mobileMenu.style.top = `${heightNav}px`;
+      } else {
+        mobileMenu.style.top = `0px`;
+      }
+
+      mobileMenu?.classList.toggle("-translate-y-full");
+      mobileMenu?.classList.toggle("translate-y-0");
+
+      hamburguerIcon?.classList.toggle("opacity-0");
+      closeIcon?.classList.toggle("opacity-0");
+      body?.classList.toggle("overflow-hidden");
+    }
+  });
+};
 
 function HeaderOnlyTextToWork(
-  { }: Props,
+  {}: Props,
 ) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
-        __html: useScript(setup, { }),
+        __html: useScript(setup, {}),
       }}
     />
   );
 }
-export default HeaderOnlyTextToWork;
\ No newline at end of file
+export default HeaderOnlyTextToWork;
diff --git a/sections/Footer.tsx b/sections/Footer.tsx
index b962da7..7f4ad5e 100644
--- a/sections/Footer.tsx
+++ b/sections/Footer.tsx
@@ -62,7 +62,6 @@ export default function Footer({
     <footer className="bg-sacramentoState">
       <div className="w-full pt-[159px] text-center">
         <div className="text-center">
-
           <a href={linkedUrl} className="text-center">
             {brandLogoMobile && (
               <Image
@@ -84,7 +83,6 @@ export default function Footer({
               />
             )}
           </a>
-
         </div>
         <p className="pt-[22px] pb-[66px] font-light font-mono text-[11px] lg:text-xs leading-tight-14 lg:leading-tight-15 text-center text-mintCream">
           {rightsText}
diff --git a/sections/FormSection.tsx b/sections/FormSection.tsx
index ee98a68..c4ab815 100644
--- a/sections/FormSection.tsx
+++ b/sections/FormSection.tsx
@@ -21,7 +21,10 @@ export interface Props {
 // Implemente a seção
 function LoadComponent(
   { Component, props }: Section,
+  index,
 ) {
+  props.step = index;
+
   return (
     <div>
       <Component {...props} />
@@ -32,13 +35,13 @@ function LoadComponent(
 function FormSection(
   { sections }: Props,
 ) {
-    return (
-      <div>
-        {sections?.map((item) => (
-          LoadComponent(item.section)
-        ))}
-      </div>
-    );
-  }
+  return (
+    <div data-form="formulario">
+      {sections?.map((item, index) => (
+        LoadComponent(item.section, index)
+      ))}
+    </div>
+  );
+}
 
-export default FormSection;
\ No newline at end of file
+export default FormSection;
diff --git a/sections/FormSteps.tsx b/sections/FormSteps.tsx
index f41902a..e0508a6 100644
--- a/sections/FormSteps.tsx
+++ b/sections/FormSteps.tsx
@@ -27,13 +27,13 @@ export interface Props {
    * @title Conteúdo
    */
   sections?: Item[];
+  step?: Number;
 }
 
-export default function FormSteps({ sections }: Props) {
-  
+export default function FormSteps({ sections, step }: Props) {
   return (
     <div>
-      <FormStepsComponent sections={sections} />
+      <FormStepsComponent sections={sections} step={step} />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Galery/GaleryContent.tsx b/sections/Galery/GaleryContent.tsx
index 74f22f2..4ec0f70 100644
--- a/sections/Galery/GaleryContent.tsx
+++ b/sections/Galery/GaleryContent.tsx
@@ -77,4 +77,4 @@ export default function Section({
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Headers/TitleIntegration.tsx b/sections/Headers/TitleIntegration.tsx
index 4cd191d..1c973f4 100644
--- a/sections/Headers/TitleIntegration.tsx
+++ b/sections/Headers/TitleIntegration.tsx
@@ -71,7 +71,7 @@ export default function Section({
       }
       return part;
     });
-  }
+  };
   return (
     <section className="bg-sacramentoState flex justify-center">
       <div className="grid gap-3 md:text-center w-full max-w-[739px] px-4 pb-6 pt-8 md:py-12 md:px-10">
diff --git a/sections/Navigation/Navbar.tsx b/sections/Navigation/Navbar.tsx
index fa39b72..38e6c02 100644
--- a/sections/Navigation/Navbar.tsx
+++ b/sections/Navigation/Navbar.tsx
@@ -5,7 +5,6 @@ import Navbar from "../Final/Navbar/index.tsx";
 // import { useState } from "react";
 import { useEffect } from "react";
 
-
 /**
  * @title {{{title}}}
  */
@@ -44,36 +43,36 @@ export type IconLink = {
  * @title {{{title}}}
  */
 export type Button = {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do botão
-     */
-    text: string;
-    /**
-     * @title Link
-     * @description Escreva o link de redirecionamento
-     */
-    link: string;
-    /**
-     * @title Icone
-     * @description Selecione o ícone que deseja
-     */
-    icon?: string;
-    /**
-     * @title Botão
-     * @description Selecione o tipo de botão que deseja
-     */
-    buttonTheme?:
-        | "Primary dark"
-        | "Primary white"
-        | "Secondary dark"
-        | "Secondary white"
-        | "Link dark"
-        | "Link white"
-        | "Faq"
-        | "Nenhuma estilização"
-}
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do botão
+   */
+  text: string;
+  /**
+   * @title Link
+   * @description Escreva o link de redirecionamento
+   */
+  link: string;
+  /**
+   * @title Icone
+   * @description Selecione o ícone que deseja
+   */
+  icon?: string;
+  /**
+   * @title Botão
+   * @description Selecione o tipo de botão que deseja
+   */
+  buttonTheme?:
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
+};
 export interface Props {
   /**
    * @title Logo
@@ -100,7 +99,6 @@ export interface Props {
    * @description Insira os ícones e links que aparecerão no menu
    */
   linkIcons?: IconLink[];
-
 }
 
 export default function Section({
@@ -127,10 +125,16 @@ export default function Section({
       link: "/",
       icon: "",
       buttonTheme: "Primary dark",
-    }
+    },
   ],
 }: Props) {
-
   return (
-    <Navbar logo={logo} menu={menu} button={button} subMenu={subMenu} linkIcons={linkIcons} />
-  );}
\ No newline at end of file
+    <Navbar
+      logo={logo}
+      menu={menu}
+      button={button}
+      subMenu={subMenu}
+      linkIcons={linkIcons}
+    />
+  );
+}

From e839e6a1dac202c8c31ec068501865f5fc781eef Mon Sep 17 00:00:00 2001
From: omattaeus <gomesduartedev@gmail.com>
Date: Thu, 9 Jan 2025 18:07:31 -0300
Subject: [PATCH 6/7] fazendo formulario e tentativa da barra de progresso

---
 .../pages-My%2520New%2520Page-461078.json     |  14 +-
 components/ui/Content/Benefits/index.tsx      |   2 +-
 .../ui/Content/ComparisonBody/index.tsx       |   2 +-
 .../ui/Content/ComparisonFooter/index.tsx     |  14 +-
 components/ui/Content/Conection/index.tsx     |   4 +-
 .../ui/Content/CustomDropdown/index.tsx       |   2 +-
 components/ui/Content/Dropdown/index.tsx      |   6 +-
 components/ui/Content/Lead/index.tsx          |  42 ++-
 components/ui/Content/List/index.tsx          |   2 +-
 components/ui/Content/LogoGroup/index.tsx     |   2 +-
 .../ui/Content/OptionalCollappse/index.tsx    |   2 +-
 components/ui/Content/Product/index.tsx       |  18 +-
 components/ui/Content/Title/index.tsx         |   4 +-
 components/ui/Form/FixedSectionForm/index.tsx | 194 +++++-----
 components/ui/Form/Input/index.tsx            |   6 +-
 components/ui/Form/TitleForm/index.tsx        | 222 ++++++-----
 components/ui/Form/index.tsx                  |  15 +-
 components/ui/Form/script.tsx                 |  97 +++--
 components/ui/Galery/GaleryImages/index.tsx   |   8 +-
 islands/Counter.tsx                           |  12 +-
 sections/Destaques/Duvidas.tsx                |  37 +-
 sections/Destaques/ModalContent.tsx           |  34 +-
 sections/Destaques/ModalWithSubTopic.tsx      | 114 +++---
 sections/Destaques/Suporte.tsx                |   3 +-
 sections/Final/Content/Benefits.tsx           | 144 +++----
 sections/Final/Content/Clients.tsx            |  96 ++---
 sections/Final/Content/Comparison.tsx         |   2 +-
 sections/Final/Content/ComparisonPlan.tsx     | 118 +++---
 sections/Final/Content/Doubts.tsx             |  94 ++---
 sections/Final/Content/Dropdown.tsx           |  80 ++--
 sections/Final/Content/Lead.tsx               |  99 +++--
 sections/Final/Content/OptionalCollapse.tsx   | 112 +++---
 sections/Final/Content/OrderTracking.tsx      | 110 +++---
 sections/Final/Content/ParentComponent.tsx    |   4 +-
 sections/Final/Content/Product.tsx            |  24 +-
 sections/Final/Content/Spacer.tsx             |  35 +-
 sections/Final/Counter/Counter.tsx            |   8 +-
 sections/Final/Counter/script.tsx             |  74 ++--
 sections/Final/DropDown/DropDownComponent.tsx |   2 +-
 sections/Final/Form/Form.tsx                  |  33 +-
 sections/Final/Form/InputRadio.tsx            |  52 +--
 sections/Final/Form/InputText.tsx             |  20 +-
 sections/Final/Form/TItleForm.tsx             | 166 ++++-----
 sections/Final/Form/fixedSectionForm.tsx      |  74 ++--
 sections/Final/Icons/IconGrid.tsx             |   2 +-
 sections/Final/Navbar/index.tsx               | 352 +++++++++---------
 sections/Final/Navbar/script.tsx              |  74 ++--
 sections/Footer.tsx                           |   2 -
 sections/FormSection.tsx                      |  17 +-
 sections/FormSteps.tsx                        |   8 +-
 sections/Galery/GaleryContent.tsx             |   2 +-
 sections/Headers/TitleIntegration.tsx         |   2 +-
 sections/Navigation/Navbar.tsx                |  76 ++--
 53 files changed, 1413 insertions(+), 1325 deletions(-)

diff --git a/.deco/blocks/pages-My%2520New%2520Page-461078.json b/.deco/blocks/pages-My%2520New%2520Page-461078.json
index 06366ee..39e3bdb 100644
--- a/.deco/blocks/pages-My%2520New%2520Page-461078.json
+++ b/.deco/blocks/pages-My%2520New%2520Page-461078.json
@@ -29,7 +29,8 @@
                 "section": {
                   "__resolveType": "site/sections/Final/Form/InputText.tsx",
                   "title": "Por favor, diga o seu nome.",
-                  "placeholder": "Por favor, diga o seu nome."
+                  "placeholder": "Por favor, diga o seu nome.",
+                  "name": "name"
                 },
                 "title": "Por favor, diga o seu nome.",
                 "text": "Por favor, diga o seu nome.",
@@ -73,12 +74,13 @@
               {
                 "section": {
                   "__resolveType": "site/sections/Final/Form/InputText.tsx",
-                  "title": "Por favor, diga o seu nome.",
-                  "placeholder": "Por favor, diga o seu nome."
+                  "title": "Por favor, diga o seu sobrenome.",
+                  "placeholder": "Por favor, diga o seu sobrenome.",
+                  "name": "lastname"
                 },
-                "title": "Por favor, diga o seu nome.",
-                "text": "Por favor, diga o seu nome.",
-                "description": "Por favor, diga o seu nome."
+                "title": "Por favor, diga o seu sobrenome.",
+                "text": "Por favor, diga o seu sobrenome.",
+                "description": "Por favor, diga o seu sobrenome."
               },
               {
                 "section": {
diff --git a/components/ui/Content/Benefits/index.tsx b/components/ui/Content/Benefits/index.tsx
index 84506b8..c1a1c55 100644
--- a/components/ui/Content/Benefits/index.tsx
+++ b/components/ui/Content/Benefits/index.tsx
@@ -228,4 +228,4 @@ function Benefits({ benefits, collapse, colorTheme }: Props) {
   }
 }
 
-export default Benefits;
\ No newline at end of file
+export default Benefits;
diff --git a/components/ui/Content/ComparisonBody/index.tsx b/components/ui/Content/ComparisonBody/index.tsx
index c5b9a67..2ed7c83 100644
--- a/components/ui/Content/ComparisonBody/index.tsx
+++ b/components/ui/Content/ComparisonBody/index.tsx
@@ -96,4 +96,4 @@ function ExampleComponent({ body }: JSX.IntrinsicElements["div"] & Props) {
   );
 }
 
-export default ExampleComponent;
\ No newline at end of file
+export default ExampleComponent;
diff --git a/components/ui/Content/ComparisonFooter/index.tsx b/components/ui/Content/ComparisonFooter/index.tsx
index 1bd9dd1..1f0f390 100644
--- a/components/ui/Content/ComparisonFooter/index.tsx
+++ b/components/ui/Content/ComparisonFooter/index.tsx
@@ -17,7 +17,12 @@ function ComparisonFooter(
               </div>
             )}
             {left.button && (
-              <ButtonComponent text={left.button.text} link={left.button.link} icon={left.button.icon} buttonTheme={left.button.buttonTheme} />
+              <ButtonComponent
+                text={left.button.text}
+                link={left.button.link}
+                icon={left.button.icon}
+                buttonTheme={left.button.buttonTheme}
+              />
             )}
           </div>
         )}
@@ -31,7 +36,12 @@ function ComparisonFooter(
               </div>
             )}
             {right.button && (
-              <ButtonComponent text={right.button.text} link={right.button.link} icon={right.button.icon} buttonTheme={right.button.buttonTheme} />
+              <ButtonComponent
+                text={right.button.text}
+                link={right.button.link}
+                icon={right.button.icon}
+                buttonTheme={right.button.buttonTheme}
+              />
             )}
           </div>
         )}
diff --git a/components/ui/Content/Conection/index.tsx b/components/ui/Content/Conection/index.tsx
index 7369543..9ea9ec8 100644
--- a/components/ui/Content/Conection/index.tsx
+++ b/components/ui/Content/Conection/index.tsx
@@ -38,7 +38,9 @@ function Conection({
         </div>
         <div class="absolute inset-0 flex justify-center items-center">
           <div
-            class={`w-16 h-16 lg:w-[70px] lg:h-[70px] ${setClass("bg", circleBackground)} ${
+            class={`w-16 h-16 lg:w-[70px] lg:h-[70px] ${
+              setClass("bg", circleBackground)
+            } ${
               setClass("text", colorText)
             } flex justify-center items-center rounded-full font-sans text-[32px] lg:text-[48px] font-medium leading-tight-35 tracking-tight-0.64`}
           >
diff --git a/components/ui/Content/CustomDropdown/index.tsx b/components/ui/Content/CustomDropdown/index.tsx
index 0b8a844..64329c6 100644
--- a/components/ui/Content/CustomDropdown/index.tsx
+++ b/components/ui/Content/CustomDropdown/index.tsx
@@ -110,4 +110,4 @@ function CustomDropdown({
   );
 }
 
-export default CustomDropdown;
\ No newline at end of file
+export default CustomDropdown;
diff --git a/components/ui/Content/Dropdown/index.tsx b/components/ui/Content/Dropdown/index.tsx
index 8414de3..3963cad 100644
--- a/components/ui/Content/Dropdown/index.tsx
+++ b/components/ui/Content/Dropdown/index.tsx
@@ -109,12 +109,10 @@ function Dropdown({
               </div>
             ))
           )
-          : (
-            <p className=""></p>
-          )}
+          : <p className=""></p>}
       </div>
     </div>
   );
 }
 
-export default Dropdown;
+export default Dropdown;
\ No newline at end of file
diff --git a/components/ui/Content/Lead/index.tsx b/components/ui/Content/Lead/index.tsx
index ed5d01b..babd0e1 100644
--- a/components/ui/Content/Lead/index.tsx
+++ b/components/ui/Content/Lead/index.tsx
@@ -4,24 +4,36 @@ import type { JSX } from "preact";
 import ButtonComponent from "../../Button/index.tsx";
 import TitleComponent from "../Title/index.tsx";
 
-function Lead({ title, button, placeholder }: JSX.IntrinsicElements["div"] & Props) {
+function Lead(
+  { title, button, placeholder }: JSX.IntrinsicElements["div"] & Props,
+) {
   return (
     <>
-        <div className="flex justify-center">
-            <div className="w-full max-w-[706px] p-12 pb-24">
-                <TitleComponent content={title.content} color={title.colorTheme} alignment={title.textAlignment} />
-                <input
-                    name="email"
-                    // class="input input-bordered flex-grow"
-                    class="w-full pb-2 border-b-2 border-sacramentoState bg-transparent text-lg font-normal text-sacramentoState placeholder:text-sacramentoState-40"
-                    type="text"
-                    placeholder={placeholder}
-                />
-                <div className="pt-4">
-                    <ButtonComponent text={button.text} link={button.link} icon={button.icon} buttonTheme={button.buttonTheme} tamanho={button.tamanho} />
-                </div>
-            </div>
+      <div className="flex justify-center">
+        <div className="w-full max-w-[706px] p-12 pb-24">
+          <TitleComponent
+            content={title.content}
+            color={title.colorTheme}
+            alignment={title.textAlignment}
+          />
+          <input
+            name="email"
+            // class="input input-bordered flex-grow"
+            class="w-full pb-2 border-b-2 border-sacramentoState bg-transparent text-lg font-normal text-sacramentoState placeholder:text-sacramentoState-40"
+            type="text"
+            placeholder={placeholder}
+          />
+          <div className="pt-4">
+            <ButtonComponent
+              text={button.text}
+              link={button.link}
+              icon={button.icon}
+              buttonTheme={button.buttonTheme}
+              tamanho={button.tamanho}
+            />
+          </div>
         </div>
+      </div>
     </>
   );
 }
diff --git a/components/ui/Content/List/index.tsx b/components/ui/Content/List/index.tsx
index 7faf086..3f85615 100644
--- a/components/ui/Content/List/index.tsx
+++ b/components/ui/Content/List/index.tsx
@@ -50,4 +50,4 @@ function List({ items, colorTheme, isFirst, isLast }: Props) {
   );
 }
 
-export default List;
\ No newline at end of file
+export default List;
diff --git a/components/ui/Content/LogoGroup/index.tsx b/components/ui/Content/LogoGroup/index.tsx
index 09f5a42..a2b4cec 100644
--- a/components/ui/Content/LogoGroup/index.tsx
+++ b/components/ui/Content/LogoGroup/index.tsx
@@ -43,4 +43,4 @@ function LogoGroupComponent(
   );
 }
 
-export default LogoGroupComponent;
\ No newline at end of file
+export default LogoGroupComponent;
diff --git a/components/ui/Content/OptionalCollappse/index.tsx b/components/ui/Content/OptionalCollappse/index.tsx
index 82a2674..e3c5905 100644
--- a/components/ui/Content/OptionalCollappse/index.tsx
+++ b/components/ui/Content/OptionalCollappse/index.tsx
@@ -153,4 +153,4 @@ function OptionalCollappseComponent({ optional, colorTheme }: Props) {
   );
 }
 
-export default OptionalCollappseComponent;
\ No newline at end of file
+export default OptionalCollappseComponent;
diff --git a/components/ui/Content/Product/index.tsx b/components/ui/Content/Product/index.tsx
index 8070302..ac47167 100644
--- a/components/ui/Content/Product/index.tsx
+++ b/components/ui/Content/Product/index.tsx
@@ -24,7 +24,7 @@ function setClass(value) {
 
 function Product(
   { icon, title, description, button, colorTheme }:
-    & JSX.IntrinsicElements["div"]
+    JSX.IntrinsicElements["div"],
 ) {
   return (
     <>
@@ -63,7 +63,8 @@ function Product(
                 </p>
               )}
             </div>
-            {/* <div className="w-fit py-[13px] md:flex rounded-xl border-[1px] border-sacramentoState items-center justify-center gap-4">
+            {
+              /* <div className="w-fit py-[13px] md:flex rounded-xl border-[1px] border-sacramentoState items-center justify-center gap-4">
               <a
                 href={button.url}
                 target="_blank"
@@ -71,8 +72,15 @@ function Product(
                 className="w-max px-[32px] flex-none font-sans text-base font-semibold leading-tight-18 text-sacramentoState"
               >
                 {button.name}
-              </a> */}
-              <ButtonComponent text={button.text} link={button.link} icon={button.icon} buttonTheme={button.buttonTheme} tamanho={button.tamanho} />
+              </a> */
+            }
+            <ButtonComponent
+              text={button.text}
+              link={button.link}
+              icon={button.icon}
+              buttonTheme={button.buttonTheme}
+              tamanho={button.tamanho}
+            />
             {/* </div> */}
           </div>
         </div>
@@ -81,4 +89,4 @@ function Product(
   );
 }
 
-export default Product;
\ No newline at end of file
+export default Product;
diff --git a/components/ui/Content/Title/index.tsx b/components/ui/Content/Title/index.tsx
index 4b80e48..874342b 100644
--- a/components/ui/Content/Title/index.tsx
+++ b/components/ui/Content/Title/index.tsx
@@ -42,7 +42,9 @@ function Title(
       <div className="w-full flex justify-center">
         <div className="w-full px-4 pb-4 pt-10 md:px-0 md:py-8 w-full max-w-[706px]">
           <p
-            className={`text-[28px] md:text-5xl font-sans font-medium leading-tight-32 md:leading-tight-55 tracking-tight-0.56 md:tracking-tight-0.96 ${setColor(color)} ${setAlignment(alignment)}`}
+            className={`text-[28px] md:text-5xl font-sans font-medium leading-tight-32 md:leading-tight-55 tracking-tight-0.56 md:tracking-tight-0.96 ${
+              setColor(color)
+            } ${setAlignment(alignment)}`}
           >
             {content}
           </p>
diff --git a/components/ui/Form/FixedSectionForm/index.tsx b/components/ui/Form/FixedSectionForm/index.tsx
index 57447e4..dca1200 100644
--- a/components/ui/Form/FixedSectionForm/index.tsx
+++ b/components/ui/Form/FixedSectionForm/index.tsx
@@ -1,118 +1,116 @@
 import { ImageWidget } from "apps/admin/widgets.ts";
 import Image from "apps/website/components/Image.tsx";
-import Script, { type Props } from "../script.tsx";
 import type { JSX } from "preact";
 
 export type Link = {
-    /**
-     * @title Nome
-     * @description Nome visível para clique
-     */
-    name: string;
-    /**
-     * @title Destino
-     * @description Insira a URL ou o caminho de destino
-     */
-    url: string;
+  /**
+   * @title Nome
+   * @description Nome visível para clique
+   */
+  name: string;
+  /**
+   * @title Destino
+   * @description Insira a URL ou o caminho de destino
+   */
+  url: string;
 };
 
 export interface Props {
-    /**
-     * @title Descrição
-     * @description Insira a descrição
-     */
-    description?: string;
-    /**
-     * @title Palavra ou Frase com Cor
-     * @description Escreva a palavra ou frase com cor
-     */
-    highlight?: string;
-    /**
-     * @title Ícone do Botão
-     * @description Insisra o Ícone do Botão
-     */
-    ImageWidget: ImageWidget;
+  /**
+   * @title Descrição
+   * @description Insira a descrição
+   */
+  description?: string;
+  /**
+   * @title Palavra ou Frase com Cor
+   * @description Escreva a palavra ou frase com cor
+   */
+  highlight?: string;
+  /**
+   * @title Ícone do Botão
+   * @description Insisra o Ícone do Botão
+   */
+  ImageWidget: ImageWidget;
 }
 
 function FixedSectionForm({
-    description = "",
-    highlight = "",
-    ImageWidget = "",
+  description = "",
+  highlight = "",
+  ImageWidget = "",
 }: Props) {
-    const getHighlightedText = (text: string, highlight: string) => {
-        if (!highlight) return text;
+  const getHighlightedText = (text: string, highlight: string) => {
+    if (!highlight) return text;
 
-        const regex = new RegExp(`(${highlight})`, "giu");
+    const regex = new RegExp(`(${highlight})`, "giu");
 
-        const parts = text.split(regex);
+    const parts = text.split(regex);
 
-        return parts.map((part, index) => {
-            if (part.toLowerCase() === highlight.toLowerCase()) {
-                return (
-                    <span
-                        key={index}
-                        className="font-bold text-sacramentoState"
-                    >
-                        {part}
-                    </span>
-                );
-            }
-            return part;
-        });
-    };
+    return parts.map((part, index) => {
+      if (part.toLowerCase() === highlight.toLowerCase()) {
+        return (
+          <span
+            key={index}
+            className="font-bold text-sacramentoState"
+          >
+            {part}
+          </span>
+        );
+      }
+      return part;
+    });
+  };
 
-    return (
-        <>
-            <div
-                id="fixed-section"
-                className="fixed bottom-0 left-0 w-full flex justify-center bg-white z-40"
+  return (
+    <>
+      <div
+        id="fixed-section"
+        className="fixed bottom-0 left-0 w-full flex justify-center bg-white z-40"
+      >
+        <div className="flex flex-col flex-grow">
+          <div className="pr-4 mb-5 flex justify-end mt-auto">
+            <button
+              data-next="next"
+              className="w-[56px] h-[56px] flex justify-center items-center rounded-full bg-sacramentoState cursor-pointer"
             >
-                <div className="flex flex-col flex-grow">
-                    <div className="pr-4 mb-5 flex justify-end mt-auto">
-                        <button
-                            id="botao"
-                            className="w-[56px] h-[56px] flex justify-center items-center rounded-full bg-sacramentoState cursor-pointer"
-                        >
-                            <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z"
-                                    fill="#3BEDB2"
-                                />
-                            </svg>
-                        </button>
-                    </div>
-                    <div className="px-4 pt-[14px] pb-5 w-full flex justify-between items-center gap-x-4 shadow-top">
-                        <div className="w-full max-w-[236px] text-start">
-                            <p className="text-base font-sans font-normal text-sacramentoState-80">
-                                {getHighlightedText(description, highlight)}
-                            </p>
-                        </div>
-                        <div className="w-fit flex items-center">
-                            <div className="w-[92px] cursor-pointer">
-                                {ImageWidget && (
-                                    <div className="w-full h-full px-5 py-2.5 flex justify-center items-center bg-darkMintCream rounded-[10px]">
-                                        <Image
-                                            src={ImageWidget}
-                                            alt="Section Image"
-                                            className="w-6 h-6"
-                                            width={24}
-                                        />
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z"
+                  fill="#3BEDB2"
+                />
+              </svg>
+            </button>
+          </div>
+          <div className="px-4 pt-[14px] pb-5 w-full flex justify-between items-center gap-x-4 shadow-top">
+            <div className="w-full max-w-[236px] text-start">
+              <p className="text-base font-sans font-normal text-sacramentoState-80">
+                {getHighlightedText(description, highlight)}
+              </p>
             </div>
-            <Script />
-        </>
-    );
+            <div className="w-fit flex items-center">
+              <div className="w-[92px] cursor-pointer">
+                {ImageWidget && (
+                  <div className="w-full h-full px-5 py-2.5 flex justify-center items-center bg-darkMintCream rounded-[10px]">
+                    <Image
+                      src={ImageWidget}
+                      alt="Section Image"
+                      className="w-6 h-6"
+                      width={24}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
 
-export default FixedSectionForm;
\ No newline at end of file
+export default FixedSectionForm;
diff --git a/components/ui/Form/Input/index.tsx b/components/ui/Form/Input/index.tsx
index cbb1c4c..3899dcd 100644
--- a/components/ui/Form/Input/index.tsx
+++ b/components/ui/Form/Input/index.tsx
@@ -1,10 +1,13 @@
 
 interface InputComponentProps {
+  name?: string;
   placeholder?: string;
   onValidate?: (isValid: boolean) => void;
 }
 
-function InputComponent({ placeholder, onValidate }: InputComponentProps) {
+function InputComponent(
+  { name, placeholder, onValidate }: InputComponentProps,
+) {
   const handleChange = (e: Event) => {
     const input = e.target as HTMLInputElement;
     if (onValidate) {
@@ -17,6 +20,7 @@ function InputComponent({ placeholder, onValidate }: InputComponentProps) {
       <div className="flex justify-center">
         <div className="w-full max-w-[706px]">
           <input
+            data-campo={name}
             type="text"
             placeholder={placeholder}
             className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80 rounded-none"
diff --git a/components/ui/Form/TitleForm/index.tsx b/components/ui/Form/TitleForm/index.tsx
index bea85e7..9f2b47e 100644
--- a/components/ui/Form/TitleForm/index.tsx
+++ b/components/ui/Form/TitleForm/index.tsx
@@ -1,139 +1,135 @@
 import type { JSX } from "preact";
 
 function setClass(value: string) {
-    switch (value) {
-        case "primary":
-            return "text-primary";
-        case "Secondary":
-            return "text-secondary";
-        case "White":
-            return "text-white";
-        case "Accent":
-            return "text-accent";
-        case "Sacramento-State":
-            return "text-sacramentoState";
-        case "Sacramento-State-10":
-            return "text-sacramentoState-10";
-        case "Mint-Cream":
-            return "text-mintCream";
-        default:
-            return "text-primary";
-    }
+  switch (value) {
+    case "primary":
+      return "text-primary";
+    case "Secondary":
+      return "text-secondary";
+    case "White":
+      return "text-white";
+    case "Accent":
+      return "text-accent";
+    case "Sacramento-State":
+      return "text-sacramentoState";
+    case "Sacramento-State-10":
+      return "text-sacramentoState-10";
+    case "Mint-Cream":
+      return "text-mintCream";
+    default:
+      return "text-primary";
+  }
 }
 
 function setAlignment(value: string) {
-    switch (value) {
-        case "Left":
-            return "text-left";
-        case "Center":
-            return "text-center";
-        case "Right":
-            return "text-right";
-        default:
-            return "";
-    }
+  switch (value) {
+    case "Left":
+      return "text-left";
+    case "Center":
+      return "text-center";
+    case "Right":
+      return "text-right";
+    default:
+      return "";
+  }
 }
 
 function setAlignmentContent(value: string) {
-    switch (value) {
-        case "Start":
-            return "justify-start";
-        case "Center":
-            return "justify-center";
-        case "End":
-            return "justify-end";
-        default:
-            return "justify-start";
-    }
+  switch (value) {
+    case "Start":
+      return "justify-start";
+    case "Center":
+      return "justify-center";
+    case "End":
+      return "justify-end";
+    default:
+      return "justify-start";
+  }
 }
 
 function setFontSize(value: string): string {
-    switch (value) {
-        case "22px":
-            return "text-[22px]";
-        case "28px":
-            return "text-[28px]";
-        case "32px":
-            return "text-[32px]";
-        default:
-            return "text-[28px]";
-    }
+  switch (value) {
+    case "22px":
+      return "text-[22px]";
+    case "28px":
+      return "text-[28px]";
+    case "32px":
+      return "text-[32px]";
+    default:
+      return "text-[28px]";
+  }
 }
 
 function setContainerWidth(value: string): string {
-    switch (value) {
-        case "Largura Limitada (290px)":
-            return "max-w-[290px] w-full";
-        case "Largura Limitada (327px)":
-            return "max-w-[327px] w-full";
-        case "Largura Limitada (343px)":
-            return "max-w-[343px] w-full";
-        case "Largura Completa":
-            return "w-full";
-        default:
-            return "max-w-[327px] w-full";
-    }
+  switch (value) {
+    case "Largura Limitada (290px)":
+      return "max-w-[290px] w-full";
+    case "Largura Limitada (327px)":
+      return "max-w-[327px] w-full";
+    case "Largura Limitada (343px)":
+      return "max-w-[343px] w-full";
+    case "Largura Completa":
+      return "w-full";
+    default:
+      return "max-w-[327px] w-full";
+  }
 }
 
 function setPaddingTop(value: string): string {
-    switch (value) {
-        case "Espacamento (40px)":
-            return "pt-[40px]";
-        case "Espacamento (91px)":
-            return "pt-[91px]";
-        case "Espacamento (95px)":
-            return "pt-[95px] ";
-        default:
-            return "pt-[40px]";
-    }
+  switch (value) {
+    case "Espacamento (40px)":
+      return "pt-[40px]";
+    case "Espacamento (91px)":
+      return "pt-[91px]";
+    case "Espacamento (95px)":
+      return "pt-[95px] ";
+    default:
+      return "pt-[40px]";
+  }
 }
 
 function TitleForm(
-    {
-        description,
-        content,
-        colorTheme,
-        alignment,
-        fontSize,
-        containerWidth,
-        contentAlignment,
-        paddingTop,
-    }:
-        & JSX.IntrinsicElements["div"]
-        & Props,
+  {
+    description,
+    content,
+    colorTheme,
+    alignment,
+    fontSize,
+    containerWidth,
+    contentAlignment,
+    paddingTop,
+  }:
+    & JSX.IntrinsicElements["div"]
+    & Props,
 ) {
-    return (
-        <>
-            <div
-                className={`flex ${
-                    setAlignmentContent(contentAlignment)
-                } items-center`}
+  return (
+    <>
+      <div
+        className={`flex ${setAlignmentContent(contentAlignment)} items-center`}
+      >
+        <div
+          className={`${setContainerWidth(containerWidth)}  ${
+            setPaddingTop(paddingTop)
+          }`}
+        >
+          <div className="grid gap-y-2">
+            <p className="text-sm font-sans font-light leading-tight-19 text-sacramentoState-80">
+              {description}
+            </p>
+            <p
+              className={`font-sans font-medium leading-tight-115 tracking-tight-0.56 ${
+                setClass(
+                  colorTheme,
+                )
+              } ${setAlignment(alignment)} ${setFontSize(fontSize)}`}
             >
-                <div
-                    className={`${setContainerWidth(containerWidth)}  ${
-                        setPaddingTop(paddingTop)
-                    }`}
-                >
-                    <div className="grid gap-y-2">
-                        <p className="text-sm font-sans font-light leading-tight-19 text-sacramentoState-80">
-                            {description}
-                        </p>
-                        <p
-                            className={`font-sans font-medium leading-tight-115 tracking-tight-0.56 ${
-                                setClass(
-                                    colorTheme,
-                                )
-                            } ${setAlignment(alignment)} ${
-                                setFontSize(fontSize)
-                            }`}
-                        >
-                            {content}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </>
-    );
+              {content}
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
 
 export default TitleForm;
diff --git a/components/ui/Form/index.tsx b/components/ui/Form/index.tsx
index b1e33b9..9fa7e7e 100644
--- a/components/ui/Form/index.tsx
+++ b/components/ui/Form/index.tsx
@@ -4,6 +4,7 @@ import type { JSX } from "preact";
 // import Image from "apps/website/components/Image.tsx";
 // import IconComponent from "../Icons/IconGrid.tsx";
 import Script, { type Props } from "./script.tsx";
+import { withDefaultFacets } from "apps/vtex/utils/intelligentSearch.ts";
 
 // Implemente a seção
 function LoadComponent(
@@ -16,16 +17,18 @@ function LoadComponent(
   );
 }
 
-function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
+function FormComponent(
+  { sections, step }: JSX.IntrinsicElements["div"] & Props,
+) {
   return (
     <>
       <div
-        data-form="formulario"
         className="flex justify-center overflow-y-hidden"
+        data-step={String(step)}
       >
         <div className="h-dvh grid grid-rows-[80px_1fr_96px] w-full max-w-[706px]">
           <div className="grid grid-cols-[32px_minmax(137px,_1fr)_32px] items-center justify-between gap-4 px-4 py-6">
-            <button id="back">
+            <button data-back="back">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="32"
@@ -42,7 +45,7 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
             <div className="flex justify-center items-center">
               <div className="w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full">
                 <div
-                  id="progress-bar"
+                  data-bar="progress"
                   className="h-[5px] bg-[#3BEDB2] rounded-full block"
                 >
                 </div>
@@ -52,7 +55,7 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
           <div className="px-6 py-6 border-y border-gray-100 flex flex-col gap-12 h-full overflow-auto">
             {sections?.map((item, index) => (
               // <div data-index={index} className="hidde">
-              <div data-index={"campo-" + index} className="" key={index}>
+              <div key={index}>
                 {
                   /* <div className="grid gap-2">
                   <h1 className="text-sm font-light text-primary">
@@ -77,7 +80,7 @@ function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
           </div>
         </div>
       </div>
-      <Script />
+      <Script step={step} />
     </>
   );
 }
diff --git a/components/ui/Form/script.tsx b/components/ui/Form/script.tsx
index e4460f6..31f243b 100644
--- a/components/ui/Form/script.tsx
+++ b/components/ui/Form/script.tsx
@@ -1,105 +1,102 @@
 import { useScript } from "@deco/deco/hooks";
 
-export interface Props {}
+export interface Props {
+  step?: number;
+}
 
-const setup = ({}: Props) => {
+const setup = (_: Props) => {
+  const stepElement = Array.from(document.querySelectorAll("[data-step]"));
   let currentStep = 0;
 
-  const getFormPages = () => {
-    return Array.from(
-      document.querySelectorAll('[data-form="formulario"]'),
-    ) as HTMLElement[];
-  };
+  const totalSteps = () => stepElement.length;
 
-  const totalSteps = () => getFormPages().length;
-
-  const showCurrentPage = () => {
-    const formPages = getFormPages();
-    formPages.forEach((page, index) => {
-      if (index === currentStep) {
-        page.classList.add("block");
-        page.classList.remove("hidden");
-      } else {
-        page.classList.add("hidden");
-        page.classList.remove("block");
-      }
+  const showCurrentPage = (): void => {
+    stepElement.forEach((page, index) => {
+      page.classList.toggle("block", index === currentStep);
+      page.classList.toggle("hidden", index !== currentStep);
     });
-
     console.log(`Etapa atual: ${currentStep}`);
-    console.log(`Total de páginas: ${totalSteps()}`);
   };
 
   const updateProgressBar = () => {
-    const progressBar = document.getElementById("progress-bar") as HTMLElement;
-    if (progressBar) {
-      const progress = (currentStep / (totalSteps() - 1)) * 100;
-      console.log("barra de progresso: " + progress);
+    const progressBar = document.querySelector('[data-bar="progress"]') as HTMLElement; 
+    const total = totalSteps();
+
+    console.log("TOTAL: " + total);
 
-      progressBar.style.width = `${progress}%`;
+    if (!progressBar.style.background) {
+      progressBar.style.width = "15%";
+      console.log("aqui")
     }
+
+    const progress = (currentStep / (total - 1)) * 100;
+    console.log("Barra de progresso: " + progress);
+
+    progressBar.style.background = "#000000";
+    progressBar.style.width = `${progress}%`;
   };
 
   const handleNext = () => {
-    const formPages = getFormPages();
-
-    if (currentStep < totalSteps() - 1) {
+    const total = totalSteps();
+    if (currentStep < total - 1) {
       currentStep++;
       console.log(`Indo para a próxima etapa: ${currentStep}`);
       showCurrentPage();
       updateProgressBar();
 
-      window.scrollTo({
-        top: formPages[currentStep]?.offsetTop || 0,
+      globalThis.scrollTo({
+        top: stepElement[currentStep]?.offsetTop || 0,
         behavior: "smooth",
       });
     } else {
-      alert("Você completou todos os formulários!");
+      console.log("Você completou todos os formulários!");
     }
   };
 
   const handleBack = () => {
-    const formPages = getFormPages();
-
     if (currentStep > 0) {
       currentStep--;
       console.log(`Voltando para a etapa anterior: ${currentStep}`);
       showCurrentPage();
       updateProgressBar();
 
-      window.scrollTo({
-        top: formPages[currentStep]?.offsetTop || 0,
+      globalThis.scrollTo({
+        top: stepElement[currentStep]?.offsetTop || 0,
         behavior: "smooth",
       });
     } else {
-      alert("Você está na primeira etapa!");
+      console.log("Você está na primeira etapa!");
     }
   };
 
-  document.addEventListener("click", (event) => {
-    if ((event.target as HTMLElement)?.id === "botao") {
-      handleNext();
-    }
-  });
+  const bindEvents = () => {
+    const nextButtons = document.querySelectorAll('[data-next="next"]');
+    const backButtons = document.querySelectorAll('[data-back="back"]');
 
-  document.addEventListener("click", (event) => {
-    if ((event.target as HTMLElement)?.id === "back") {
-      handleBack();
-    }
-  });
+    nextButtons.forEach((button) => {
+      button.addEventListener("click", handleNext);
+    });
 
+    backButtons.forEach((button) => {
+      button.addEventListener("click", handleBack);
+    });
+  };
+
+  bindEvents();
   showCurrentPage();
   updateProgressBar();
 };
 
-function FormSteps({}: Props) {
+
+function FormSteps({ step }: Props) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
-        __html: useScript(setup, {}),
+        __html: useScript(setup, { step }),
       }}
     />
   );
 }
 
-export default FormSteps;
\ No newline at end of file
+export default FormSteps;
diff --git a/components/ui/Galery/GaleryImages/index.tsx b/components/ui/Galery/GaleryImages/index.tsx
index 32f0eab..1a52240 100644
--- a/components/ui/Galery/GaleryImages/index.tsx
+++ b/components/ui/Galery/GaleryImages/index.tsx
@@ -19,7 +19,11 @@ function GaleryImages({ items }: JSX.IntrinsicElements["div"] & Props) {
               >
                 <article className="w-full flex flex-col border-t-2 border-white-20">
                   <div className="flex justify-center py-[26px] h-[274px] px-0">
-                    <Image className="w-full h-full object-cover rounded-2xl" src={item.image || ""} width={315} />
+                    <Image
+                      className="w-full h-full object-cover rounded-2xl"
+                      src={item.image || ""}
+                      width={315}
+                    />
                   </div>
                   <div className="w-full pl-0 text-left">
                     <p className="pl-[3px] text-base text-primary opacity-80 leading-tight-18 lg:leading-tight-22">
@@ -36,4 +40,4 @@ function GaleryImages({ items }: JSX.IntrinsicElements["div"] & Props) {
   );
 }
 
-export default GaleryImages;
\ No newline at end of file
+export default GaleryImages;
diff --git a/islands/Counter.tsx b/islands/Counter.tsx
index f972146..5134776 100644
--- a/islands/Counter.tsx
+++ b/islands/Counter.tsx
@@ -5,13 +5,19 @@ export default function Counter() {
 
   return (
     <div>
-      <button className="border rounded-full p-3 text-white border-white" onClick={() => setCount(count - 1)}>
+      <button
+        className="border rounded-full p-3 text-white border-white"
+        onClick={() => setCount(count - 1)}
+      >
         -
       </button>
       <span className="px-3 text-lg text-white">{count}</span>
-      <button className="border rounded-full p-3 text-white border-white" onClick={() => setCount(count + 1)}>
+      <button
+        className="border rounded-full p-3 text-white border-white"
+        onClick={() => setCount(count + 1)}
+      >
         +
       </button>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Destaques/Duvidas.tsx b/sections/Destaques/Duvidas.tsx
index 20e4b03..fef5f88 100644
--- a/sections/Destaques/Duvidas.tsx
+++ b/sections/Destaques/Duvidas.tsx
@@ -53,14 +53,14 @@ export interface Button {
    * @description Selecione o tipo de botão que deseja
    */
   buttonTheme?:
-      | "Primary dark"
-      | "Primary white"
-      | "Secondary dark"
-      | "Secondary white"
-      | "Link dark"
-      | "Link white"
-      | "Faq"
-      | "Nenhuma estilização"
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
 }
 
 export interface Props {
@@ -105,14 +105,20 @@ export default function Section({
         </div>
 
         <div className="grid gap-4">
-        {button?.map((btn, index) => (
-          <div key={index}>
-            <ButtonComponent text={btn.text} link={btn.link} icon={btn.icon} buttonTheme={btn.buttonTheme} />
-          </div>
-        ))}
+          {button?.map((btn, index) => (
+            <div key={index}>
+              <ButtonComponent
+                text={btn.text}
+                link={btn.link}
+                icon={btn.icon}
+                buttonTheme={btn.buttonTheme}
+              />
+            </div>
+          ))}
         </div>
 
-        {/* <div className="pb-24 px-4 w-full max-w md:max-w-[465px] flex flex-col rounded-xl items-center justify-center space-y-4">
+        {
+          /* <div className="pb-24 px-4 w-full max-w md:max-w-[465px] flex flex-col rounded-xl items-center justify-center space-y-4">
           {button?.map((btn, index) => (
             <div key={index} className="w-full max-w flex gap-x-[10px] justify-center cursor-pointer">
               <a
@@ -138,7 +144,8 @@ export default function Section({
               </a>
             </div>
           ))}
-        </div> */}
+        </div> */
+        }
       </div>
     </section>
   );
diff --git a/sections/Destaques/ModalContent.tsx b/sections/Destaques/ModalContent.tsx
index e2e92c4..a768928 100644
--- a/sections/Destaques/ModalContent.tsx
+++ b/sections/Destaques/ModalContent.tsx
@@ -110,17 +110,28 @@ export default function Section({
   return (
     <div>
       <div className="grid grid-cols-[32px_minmax(137px,_1fr)_32px] items-center justify-between gap-4 px-4 py-6">
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-          <path d="M15.0531 16L19.7731 11.28C20.0214 11.0302 20.1608 10.6923 20.1608 10.34C20.1608 9.98777 20.0214 9.64983 19.7731 9.40001C19.6491 9.27504 19.5017 9.17585 19.3392 9.10816C19.1767 9.04047 19.0024 9.00562 18.8264 9.00562C18.6504 9.00562 18.4761 9.04047 18.3137 9.10816C18.1512 9.17585 18.0037 9.27504 17.8798 9.40001L12.2264 15.0533C12.1015 15.1773 12.0023 15.3248 11.9346 15.4872C11.8669 15.6497 11.832 15.824 11.832 16C11.832 16.176 11.8669 16.3503 11.9346 16.5128C12.0023 16.6753 12.1015 16.8227 12.2264 16.9467L17.8798 22.6667C18.0043 22.7903 18.1521 22.888 18.3146 22.9544C18.477 23.0207 18.651 23.0544 18.8264 23.0533C19.0019 23.0544 19.1759 23.0207 19.3383 22.9544C19.5008 22.888 19.6485 22.7903 19.7731 22.6667C20.0214 22.4169 20.1608 22.0789 20.1608 21.7267C20.1608 21.3744 20.0214 21.0365 19.7731 20.7867L15.0531 16Z" fill="#003330"/>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+        >
+          <path
+            d="M15.0531 16L19.7731 11.28C20.0214 11.0302 20.1608 10.6923 20.1608 10.34C20.1608 9.98777 20.0214 9.64983 19.7731 9.40001C19.6491 9.27504 19.5017 9.17585 19.3392 9.10816C19.1767 9.04047 19.0024 9.00562 18.8264 9.00562C18.6504 9.00562 18.4761 9.04047 18.3137 9.10816C18.1512 9.17585 18.0037 9.27504 17.8798 9.40001L12.2264 15.0533C12.1015 15.1773 12.0023 15.3248 11.9346 15.4872C11.8669 15.6497 11.832 15.824 11.832 16C11.832 16.176 11.8669 16.3503 11.9346 16.5128C12.0023 16.6753 12.1015 16.8227 12.2264 16.9467L17.8798 22.6667C18.0043 22.7903 18.1521 22.888 18.3146 22.9544C18.477 23.0207 18.651 23.0544 18.8264 23.0533C19.0019 23.0544 19.1759 23.0207 19.3383 22.9544C19.5008 22.888 19.6485 22.7903 19.7731 22.6667C20.0214 22.4169 20.1608 22.0789 20.1608 21.7267C20.1608 21.3744 20.0214 21.0365 19.7731 20.7867L15.0531 16Z"
+            fill="#003330"
+          />
         </svg>
         <div className="flex justify-center items-center">
-          <div className="w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full after:w-[50px] after:h-[5px] after:bg-[#3BEDB2] after:rounded-full after:block"></div>
+          <div className="w-full max-w-[137px] h-[5px] bg-sacramentoState-10 rounded-full after:w-[50px] after:h-[5px] after:bg-[#3BEDB2] after:rounded-full after:block">
+          </div>
         </div>
       </div>
       <div className="px-4 py-6 max-w-4xl mx-auto">
         {items.map((item, index) => (
           <div key={index} className="grid gap-12">
-            {/* {item.icon && (
+            {
+              /* {item.icon && (
               <Image
                 src={item.icon}
                 alt="Item Icon"
@@ -128,12 +139,15 @@ export default function Section({
                 height={40}
                 class="w-10 h-10 mb-4"
               />
-            )} */}
+            )} */
+            }
 
-            {item.header && ( 
+            {item.header && (
               <div className="grid gap-2">
                 <p className="text-sm font-light text-primary">Me Liga</p>
-                <p className="text-2xl font-semibold text-primary">{item.header}</p>
+                <p className="text-2xl font-semibold text-primary">
+                  {item.header}
+                </p>
               </div>
             )}
 
@@ -153,7 +167,11 @@ export default function Section({
                       //     }}
                       //   />
                       // </div>
-                      <input type="text" placeholder={ans} className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80" />
+                      <input
+                        type="text"
+                        placeholder={ans}
+                        className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80"
+                      />
                     ))}
                   </div>
                 ))}
diff --git a/sections/Destaques/ModalWithSubTopic.tsx b/sections/Destaques/ModalWithSubTopic.tsx
index c8f55f5..3f91d75 100644
--- a/sections/Destaques/ModalWithSubTopic.tsx
+++ b/sections/Destaques/ModalWithSubTopic.tsx
@@ -5,10 +5,10 @@ interface TableRow {
   checks?: boolean[];
 }
 
-interface Table{
+interface Table {
   columnName?: string[];
   header?: string[];
-  tableRows?:TableRow[];
+  tableRows?: TableRow[];
 }
 
 interface Tab {
@@ -23,8 +23,7 @@ export interface Item {
   descritiveInformative?: string[];
   topics?: string[];
   tabs?: Tab[];
-  table?:Table[];
-
+  table?: Table[];
 }
 
 interface Props {
@@ -41,48 +40,69 @@ export default function Section({
     <div className="font-[Public_Sans]">
       {items.map((item, index) => (
         <div key={index} className="mb-4">
-          <h2 className="text-[rgba(0,51,48,0.80)] text-[13.5px] font-normal mb-2">{item.header}</h2>
-          {item.descritiveTitle && item.descritiveTitle.map((question, qIndex) => (
-            <p key={qIndex} className="text-[#003330] text-[32px] font-medium">
-              {question}
-            </p>
-          ))}
-          {item.descritiveInformative && item.descritiveInformative.map((info, iIndex) => (
-            <p key={iIndex} className="self-stretch text-[rgba(0,51,48,0.80)] text-base font-normal leading-normal">
-              {info}
-            </p>
-          ))}
-          {item.topics && item.topics.map((topic, tIndex) => (
-            <p key={tIndex} className="text-[#003330] text-lg font-medium mt-2 mb-1">
-              • {topic}
-            </p>
-          ))}
-             <div className="mt-4">
-                 <div className="tabs tabs-boxed mb-4">
-                     {item.tabs.map((tab, tabIndex) => (
-                         <a key={tabIndex} className="tab">{tab.name}</a>
-                       ))}
-                   </div>
-                 {item.tabs.map((tab, tabIndex) => (
-                     <div key={tabIndex} className="mt-4">
-                         {tab.steps && tab.steps.length > 0 && (
-                     <div className="mb-4">
-                         {tab.steps.map((step, sIndex) => (
-                             <p key={sIndex} className="text-[#003330] text-base font-normal mb-2">
-                                 {sIndex + 1}. {step}
-                               </p>
-                           ))}
-                       </div>
-                   )}
-                 {tab.image && (
-                     <img src={tab.image} alt={tab.name || "Tab image"} className="max-w-full h-auto rounded-lg shadow-md" />
-                     )}
-                   </div>
-                     ))}
-               </div>
-                   )}
+          <h2 className="text-[rgba(0,51,48,0.80)] text-[13.5px] font-normal mb-2">
+            {item.header}
+          </h2>
+          {item.descritiveTitle &&
+            item.descritiveTitle.map((question, qIndex) => (
+              <p
+                key={qIndex}
+                className="text-[#003330] text-[32px] font-medium"
+              >
+                {question}
+              </p>
+            ))}
+          {item.descritiveInformative &&
+            item.descritiveInformative.map((info, iIndex) => (
+              <p
+                key={iIndex}
+                className="self-stretch text-[rgba(0,51,48,0.80)] text-base font-normal leading-normal"
+              >
+                {info}
+              </p>
+            ))}
+          {item.topics &&
+            item.topics.map((topic, tIndex) => (
+              <p
+                key={tIndex}
+                className="text-[#003330] text-lg font-medium mt-2 mb-1"
+              >
+                • {topic}
+              </p>
+            ))}
+          <div className="mt-4">
+            <div className="tabs tabs-boxed mb-4">
+              {item.tabs.map((tab, tabIndex) => (
+                <a key={tabIndex} className="tab">{tab.name}</a>
+              ))}
             </div>
-          ))}
+            {item.tabs.map((tab, tabIndex) => (
+              <div key={tabIndex} className="mt-4">
+                {tab.steps && tab.steps.length > 0 && (
+                  <div className="mb-4">
+                    {tab.steps.map((step, sIndex) => (
+                      <p
+                        key={sIndex}
+                        className="text-[#003330] text-base font-normal mb-2"
+                      >
+                        {sIndex + 1}. {step}
+                      </p>
+                    ))}
+                  </div>
+                )}
+                {tab.image && (
+                  <img
+                    src={tab.image}
+                    alt={tab.name || "Tab image"}
+                    className="max-w-full h-auto rounded-lg shadow-md"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+          )}
+        </div>
+      ))}
     </div>
-      );
- }
\ No newline at end of file
+  );
+}
diff --git a/sections/Destaques/Suporte.tsx b/sections/Destaques/Suporte.tsx
index 05cbe3d..3e7e65c 100644
--- a/sections/Destaques/Suporte.tsx
+++ b/sections/Destaques/Suporte.tsx
@@ -164,7 +164,8 @@ export default function Section({
             return (
               <div
                 key={index}
-                className={`${isOddSet && isLastItem ? "col-span-2 md:col-span-1" : "" // No último item ímpar, ocupa 2 colunas
+                className={`${
+                  isOddSet && isLastItem ? "col-span-2 md:col-span-1" : "" // No último item ímpar, ocupa 2 colunas
                 }`}
               >
                 <IconGroupComponent
diff --git a/sections/Final/Content/Benefits.tsx b/sections/Final/Content/Benefits.tsx
index f21c842..4a4efaf 100644
--- a/sections/Final/Content/Benefits.tsx
+++ b/sections/Final/Content/Benefits.tsx
@@ -7,92 +7,92 @@ import { Section } from "deco/blocks/section.ts";
  * @title {{{title}}}
  */
 export interface Item {
-    title: string;
-    /**
-     * @title Conteúdo
-     */
-    section: Section;
+  title: string;
+  /**
+   * @title Conteúdo
+   */
+  section: Section;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Benefits {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Ícone do Benefício
-     * @description Ícone do benefício do plano
-     */
-    iconBenefit?: ImageWidget;
-    /**
-     * @title Subtítulo Benefício
-     * @description Insira o subtítulo do benefício
-     */
-    subTitleBenefit?: string;
-    /**
-     * @title Descrição do Benefício
-     * @description Insira a descrição falando sobre o benefício
-     */
-    descriptionBenefit?: string;
-    /**
-     * @title Ícone (Fechado)
-     * @description Ícone exibido quando o collapse está fechado
-     * @conditional collapse.enable
-     */
-    closedIcon?: ImageWidget;
-    /**
-     * @title Ícone (Aberto)
-     * @description Ícone exibido quando o collapse está aberto
-     * @conditional collapse.enable
-     */
-    openIcon?: ImageWidget;
-    /**
-     * @title Conteúdo
-     */
-    sections?: Item[];
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Ícone do Benefício
+   * @description Ícone do benefício do plano
+   */
+  iconBenefit?: ImageWidget;
+  /**
+   * @title Subtítulo Benefício
+   * @description Insira o subtítulo do benefício
+   */
+  subTitleBenefit?: string;
+  /**
+   * @title Descrição do Benefício
+   * @description Insira a descrição falando sobre o benefício
+   */
+  descriptionBenefit?: string;
+  /**
+   * @title Ícone (Fechado)
+   * @description Ícone exibido quando o collapse está fechado
+   * @conditional collapse.enable
+   */
+  closedIcon?: ImageWidget;
+  /**
+   * @title Ícone (Aberto)
+   * @description Ícone exibido quando o collapse está aberto
+   * @conditional collapse.enable
+   */
+  openIcon?: ImageWidget;
+  /**
+   * @title Conteúdo
+   */
+  sections?: Item[];
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo da Dúvida
-     */
-    benefits: Benefits[];
-
-    collapse?: {
-        /**
-         * @title Ativar Collapse
-         * @description Habilitar comportamento de colapso
-         */
-        enable?: boolean;
-    };
+  /**
+   * @title Conteúdo da Dúvida
+   */
+  benefits: Benefits[];
 
+  collapse?: {
     /**
-     * @title Cor do Tema
+     * @title Ativar Collapse
+     * @description Habilitar comportamento de colapso
      */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+    enable?: boolean;
+  };
+
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section({
-    benefits,
-    collapse,
-    colorTheme,
+  benefits,
+  collapse,
+  colorTheme,
 }: Props) {
-    return (
-        <Benefits
-            benefits={benefits}
-            collapse={collapse}
-            colorTheme={colorTheme}
-        />
-    );
+  return (
+    <Benefits
+      benefits={benefits}
+      collapse={collapse}
+      colorTheme={colorTheme}
+    />
+  );
 }
diff --git a/sections/Final/Content/Clients.tsx b/sections/Final/Content/Clients.tsx
index ebbaf0d..bfc7694 100644
--- a/sections/Final/Content/Clients.tsx
+++ b/sections/Final/Content/Clients.tsx
@@ -6,58 +6,58 @@ import { ImageWidget } from "apps/admin/widgets.ts";
  * @title {{{title}}}
  */
 export interface Clients {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Ícone do Cliente
-     */
-    iconClient?: ImageWidget;
-    /**
-     * @title Nome
-     * @description Insira o nome do cliente
-     */
-    name?: string;
-    /**
-     * @title Tipo
-     * @description Insira o tipo de cliente
-     */
-    type?: string;
-    /**
-     * @title Cidade/Estado
-     * @description Insira a cidade e/ou estado do cliente
-     */
-    cityUf?: string;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Ícone do Cliente
+   */
+  iconClient?: ImageWidget;
+  /**
+   * @title Nome
+   * @description Insira o nome do cliente
+   */
+  name?: string;
+  /**
+   * @title Tipo
+   * @description Insira o tipo de cliente
+   */
+  type?: string;
+  /**
+   * @title Cidade/Estado
+   * @description Insira a cidade e/ou estado do cliente
+   */
+  cityUf?: string;
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo da Dúvida
-     */
-    clients: Clients[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo da Dúvida
+   */
+  clients: Clients[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section({
-    clients,
-    colorTheme,
+  clients,
+  colorTheme,
 }: Props) {
-    return (
-        <Clients
-            clients={clients}
-            colorTheme={colorTheme}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <Clients
+      clients={clients}
+      colorTheme={colorTheme}
+    />
+  );
+}
diff --git a/sections/Final/Content/Comparison.tsx b/sections/Final/Content/Comparison.tsx
index 1242a11..f6d89be 100644
--- a/sections/Final/Content/Comparison.tsx
+++ b/sections/Final/Content/Comparison.tsx
@@ -212,4 +212,4 @@ export default function Section({
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Content/ComparisonPlan.tsx b/sections/Final/Content/ComparisonPlan.tsx
index ae09289..0535610 100644
--- a/sections/Final/Content/ComparisonPlan.tsx
+++ b/sections/Final/Content/ComparisonPlan.tsx
@@ -2,72 +2,72 @@ import { ImageWidget } from "apps/admin/widgets.ts";
 import ComparisonPlan from "../../../components/ui/Content/ComparisonPlan/index.tsx";
 
 export interface BenefitsPlan {
-    /**
-     * @title Benefício do Plano
-     * @description Escreva o benefício do plano
-     */
-    benefitDescription?: string[];
+  /**
+   * @title Benefício do Plano
+   * @description Escreva o benefício do plano
+   */
+  benefitDescription?: string[];
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Props {
-    /**
-     * @title Título da Seção
-     * @description Escreva o título da seção
-     */
-    title: string;
-    /**
-     * @title Ícone do Plano Esquerdo
-     * @description Insira o ícone do plano da esquerda
-     */
-    leftPlanIcon: ImageWidget;
-    /**
-     * @title Nome do Plano Esquerdo
-     * @description Insira o nome do plano da esquerda
-     */
-    leftPlanName: string;
-    /**
-     * @title Benefícios do Plano Esquerdo
-     * @description Insira os benefícios do plano da esquerda
-     */
-    leftPlanBenefits: BenefitsPlan;
-    /**
-     * @title Ícone do Plano Direito
-     * @description Insira o ícone do plano da direita
-     */
-    rightPlanIcon: ImageWidget;
-    /**
-     * @title Nome do Plano Direito
-     * @description Insira o nome do plano da direita
-     */
-    rightPlanName: string;
-    /**
-     * @title Benefícios do Plano Direito
-     * @description Insira os benefícios do plano da direita
-     */
-    rightPlanBenefits: BenefitsPlan;
+  /**
+   * @title Título da Seção
+   * @description Escreva o título da seção
+   */
+  title: string;
+  /**
+   * @title Ícone do Plano Esquerdo
+   * @description Insira o ícone do plano da esquerda
+   */
+  leftPlanIcon: ImageWidget;
+  /**
+   * @title Nome do Plano Esquerdo
+   * @description Insira o nome do plano da esquerda
+   */
+  leftPlanName: string;
+  /**
+   * @title Benefícios do Plano Esquerdo
+   * @description Insira os benefícios do plano da esquerda
+   */
+  leftPlanBenefits: BenefitsPlan;
+  /**
+   * @title Ícone do Plano Direito
+   * @description Insira o ícone do plano da direita
+   */
+  rightPlanIcon: ImageWidget;
+  /**
+   * @title Nome do Plano Direito
+   * @description Insira o nome do plano da direita
+   */
+  rightPlanName: string;
+  /**
+   * @title Benefícios do Plano Direito
+   * @description Insira os benefícios do plano da direita
+   */
+  rightPlanBenefits: BenefitsPlan;
 }
 
 export default function Section({
-    title = "",
-    leftPlanIcon,
-    leftPlanName = "",
-    leftPlanBenefits,
-    rightPlanIcon,
-    rightPlanName = "",
-    rightPlanBenefits,
+  title = "",
+  leftPlanIcon,
+  leftPlanName = "",
+  leftPlanBenefits,
+  rightPlanIcon,
+  rightPlanName = "",
+  rightPlanBenefits,
 }: Props) {
-    return (
-        <ComparisonPlan
-            title={title}
-            leftPlanIcon={leftPlanIcon}
-            leftPlanName={leftPlanName}
-            leftPlanBenefits={leftPlanBenefits}
-            rightPlanIcon={rightPlanIcon}
-            rightPlanName={rightPlanName}
-            rightPlanBenefits={rightPlanBenefits}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <ComparisonPlan
+      title={title}
+      leftPlanIcon={leftPlanIcon}
+      leftPlanName={leftPlanName}
+      leftPlanBenefits={leftPlanBenefits}
+      rightPlanIcon={rightPlanIcon}
+      rightPlanName={rightPlanName}
+      rightPlanBenefits={rightPlanBenefits}
+    />
+  );
+}
diff --git a/sections/Final/Content/Doubts.tsx b/sections/Final/Content/Doubts.tsx
index b10f9e1..bd350d0 100644
--- a/sections/Final/Content/Doubts.tsx
+++ b/sections/Final/Content/Doubts.tsx
@@ -7,63 +7,63 @@ import { Section } from "deco/blocks/section.ts";
  * @title {{{title}}}
  */
 export interface Item {
-    title: string;
-    /**
-     * @title Conteúdo
-     */
-    section: Section;
+  title: string;
+  /**
+   * @title Conteúdo
+   */
+  section: Section;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Doubts {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Subtítulo da Dúvida
-     * @description Escreva aqui subtítulo da dúvida
-     */
-    subtitleDoubtAppear: string;
-    /**
-     * @title Descrição da Dúvida
-     * @description Escreva aqui a descrição da dúvida
-     */
-    descriptionHiddenDoubt: string;
-    /**
-     * @title Conteúdo
-     */
-    sections?: Item[];
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Subtítulo da Dúvida
+   * @description Escreva aqui subtítulo da dúvida
+   */
+  subtitleDoubtAppear: string;
+  /**
+   * @title Descrição da Dúvida
+   * @description Escreva aqui a descrição da dúvida
+   */
+  descriptionHiddenDoubt: string;
+  /**
+   * @title Conteúdo
+   */
+  sections?: Item[];
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo da Dúvida
-     */
-    doubt: Doubts[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo da Dúvida
+   */
+  doubt: Doubts[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section(
-    { doubt, colorTheme }: Props,
+  { doubt, colorTheme }: Props,
 ) {
-    return (
-        <DoubtsComponent
-            doubt={doubt}
-            colorTheme={colorTheme}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <DoubtsComponent
+      doubt={doubt}
+      colorTheme={colorTheme}
+    />
+  );
+}
diff --git a/sections/Final/Content/Dropdown.tsx b/sections/Final/Content/Dropdown.tsx
index 29bd1bc..a3de7c0 100644
--- a/sections/Final/Content/Dropdown.tsx
+++ b/sections/Final/Content/Dropdown.tsx
@@ -6,40 +6,40 @@ import { ImageWidget } from "apps/admin/widgets.ts";
  * @title {{{title}}}
  */
 export interface filteredCategories {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
 
-    /**
-     * @title Nome
-     * @description Nome da categoria filtrada
-     */
-    name: string;
+  /**
+   * @title Nome
+   * @description Nome da categoria filtrada
+   */
+  name: string;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Props {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
 
-    /**
-     * @title Texto do Dropdown
-     * @description Insira o texto do dropdown
-     */
-    dropdownText: string;
+  /**
+   * @title Texto do Dropdown
+   * @description Insira o texto do dropdown
+   */
+  dropdownText: string;
 
-    /**
-     * @title Ícone de Seta
-     * @description Insira o ícone de seta
-     */
-    arrowIcon: ImageWidget;
+  /**
+   * @title Ícone de Seta
+   * @description Insira o ícone de seta
+   */
+  arrowIcon: ImageWidget;
 
     /**
      * @title Categorias Filtradas
@@ -54,19 +54,19 @@ export interface Props {
 }
 
 export default function Section({
-    title = "",
-    dropdownText = "",
-    arrowIcon,
-    button,
-    onCategoryChange,
+  title = "",
+  dropdownText = "",
+  arrowIcon,
+  button,
+  onCategoryChange,
 }: Props) {
-    return (
-        <Dropdown
-            title={title}
-            dropdownText={dropdownText}
-            arrowIcon={arrowIcon}
-            button={button}
-            onCategoryChange={onCategoryChange}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <Dropdown
+      title={title}
+      dropdownText={dropdownText}
+      arrowIcon={arrowIcon}
+      button={button}
+      onCategoryChange={onCategoryChange}
+    />
+  );
+}
diff --git a/sections/Final/Content/Lead.tsx b/sections/Final/Content/Lead.tsx
index 218dc72..2db940f 100644
--- a/sections/Final/Content/Lead.tsx
+++ b/sections/Final/Content/Lead.tsx
@@ -1,65 +1,64 @@
 import React from "react";
 import Lead from "../../../components/ui/Content/Lead/index.tsx";
 
-
 /**
  * @title {{{title}}}
  */
 export interface Title {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva aqui o seu conteúdo
-     */
-    content: string;
-    /**
-     * @title Alinhamento
-     * @format button-group
-     * @options site/loaders/icons.ts
-     */
-    textAlignment?: "Left" | "Center" | "Right";
-    colorTheme: "Primary" | "Secondary" | "White" | "Accent";
-  }
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva aqui o seu conteúdo
+   */
+  content: string;
+  /**
+   * @title Alinhamento
+   * @format button-group
+   * @options site/loaders/icons.ts
+   */
+  textAlignment?: "Left" | "Center" | "Right";
+  colorTheme: "Primary" | "Secondary" | "White" | "Accent";
+}
 
 /**
  * @title {{{title}}}
  */
 export interface Button {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do botão
-     */
-    text: string;
-    /**
-     * @title Link
-     * @description Escreva o link de redirecionamento
-     */
-    link: string;
-    /**
-     * @title Icone
-     * @description Selecione o ícone que deseja
-     */
-    icon?: string;
-    /**
-     * @title Botão
-     * @description Selecione o tipo de botão que deseja
-     */
-    buttonTheme?:
-        | "Primary dark"
-        | "Primary white"
-        | "Secondary dark"
-        | "Secondary white"
-        | "Link dark"
-        | "Link white"
-        | "Faq"
-        | "Nenhuma estilização"
-        
-    /**
-     * @title Tamanho do botão
-     * @description Selecione o tamanho do botão
-     */
-    tamanho?: 
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do botão
+   */
+  text: string;
+  /**
+   * @title Link
+   * @description Escreva o link de redirecionamento
+   */
+  link: string;
+  /**
+   * @title Icone
+   * @description Selecione o ícone que deseja
+   */
+  icon?: string;
+  /**
+   * @title Botão
+   * @description Selecione o tipo de botão que deseja
+   */
+  buttonTheme?:
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
+
+  /**
+   * @title Tamanho do botão
+   * @description Selecione o tamanho do botão
+   */
+  tamanho?:
     | "Máximo (100%)"
     | "Mínimo (Tamanho do conteúdo)";
 }
diff --git a/sections/Final/Content/OptionalCollapse.tsx b/sections/Final/Content/OptionalCollapse.tsx
index 5c8c6a1..13f0077 100644
--- a/sections/Final/Content/OptionalCollapse.tsx
+++ b/sections/Final/Content/OptionalCollapse.tsx
@@ -7,73 +7,73 @@ import { Section } from "deco/blocks/section.ts";
  * @title {{{title}}}
  */
 export interface Item {
-    title: string;
-    /**
-     * @title Conteúdo
-     */
-    section: Section;
+  title: string;
+  /**
+   * @title Conteúdo
+   */
+  section: Section;
 }
 
 /**
  * @title {{{title}}}
  */
 export interface Optional {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Ícone da Marca
-     * @description Ícone da marca no collapse
-     */
-    iconBrand?: ImageWidget;
-    /**
-     * @title Nome da Marca
-     * @description Insira o nome da marca
-     */
-    brandNameSubtitle?: string;
-    /**
-     * @title Ícone (Fechado)
-     * @description Ícone exibido quando o collapse está fechado
-     */
-    closedIcon?: ImageWidget;
-    /**
-     * @title Ícone (Aberto)
-     * @description Ícone exibido quando o collapse está aberto
-     */
-    openIcon?: ImageWidget;
-    /**
-     * @title Conteúdo
-     */
-    sections?: Item[];
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Ícone da Marca
+   * @description Ícone da marca no collapse
+   */
+  iconBrand?: ImageWidget;
+  /**
+   * @title Nome da Marca
+   * @description Insira o nome da marca
+   */
+  brandNameSubtitle?: string;
+  /**
+   * @title Ícone (Fechado)
+   * @description Ícone exibido quando o collapse está fechado
+   */
+  closedIcon?: ImageWidget;
+  /**
+   * @title Ícone (Aberto)
+   * @description Ícone exibido quando o collapse está aberto
+   */
+  openIcon?: ImageWidget;
+  /**
+   * @title Conteúdo
+   */
+  sections?: Item[];
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo de Opcional
-     */
-    optional: Optional[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo de Opcional
+   */
+  optional: Optional[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section(
-    { optional, colorTheme }: Props,
+  { optional, colorTheme }: Props,
 ) {
-    return (
-        <OptionalCollappseComponent
-            optional={optional}
-            colorTheme={colorTheme}
-        />
-    );
+  return (
+    <OptionalCollappseComponent
+      optional={optional}
+      colorTheme={colorTheme}
+    />
+  );
 }
diff --git a/sections/Final/Content/OrderTracking.tsx b/sections/Final/Content/OrderTracking.tsx
index cf3d5c5..9d12683 100644
--- a/sections/Final/Content/OrderTracking.tsx
+++ b/sections/Final/Content/OrderTracking.tsx
@@ -6,66 +6,66 @@ import OrderTracking from "../../../components/ui/Content/OrderTracking/index.ts
  * @title {{{title}}}
  */
 export interface OrderStatus {
-    /**
-     * @title Título do Bloco
-     * @description Escreva o título do bloco
-     */
-    title: string;
-    /**
-     * @title Subtítulo do Status
-     * @description Escreva aqui subtítulo do status do pedido
-     */
-    subtitleOrderStatus: string;
-    /**
-     * @title Descrição do Status
-     * @description Escreva aqui a descrição do status do pedido
-     */
-    description: string;
-    /**
-     * @title Imagem do Status
-     * @description Insira aqui a imagem do status do pedido
-     */
-    imageStatus?: ImageWidget;
+  /**
+   * @title Título do Bloco
+   * @description Escreva o título do bloco
+   */
+  title: string;
+  /**
+   * @title Subtítulo do Status
+   * @description Escreva aqui subtítulo do status do pedido
+   */
+  subtitleOrderStatus: string;
+  /**
+   * @title Descrição do Status
+   * @description Escreva aqui a descrição do status do pedido
+   */
+  description: string;
+  /**
+   * @title Imagem do Status
+   * @description Insira aqui a imagem do status do pedido
+   */
+  imageStatus?: ImageWidget;
 }
 
 export interface Props {
-    /**
-     * @title Conteúdo do Status do Pedido
-     */
-    order: OrderStatus[];
-    /**
-     * @title Cor do Tema
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Conteúdo do Status do Pedido
+   */
+  order: OrderStatus[];
+  /**
+   * @title Cor do Tema
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 
-    /**
-     * @title Cor do Tema do Ícone de Status
-     */
-    colorThemeBackgroundIcon:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
+  /**
+   * @title Cor do Tema do Ícone de Status
+   */
+  colorThemeBackgroundIcon:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
 }
 
 export default function Section(
-    { order, colorTheme, colorThemeBackgroundIcon }: Props,
+  { order, colorTheme, colorThemeBackgroundIcon }: Props,
 ) {
-    return (
-        <OrderTracking
-            order={order}
-            colorTheme={colorTheme}
-            colorThemeBackgroundIcon={colorThemeBackgroundIcon}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <OrderTracking
+      order={order}
+      colorTheme={colorTheme}
+      colorThemeBackgroundIcon={colorThemeBackgroundIcon}
+    />
+  );
+}
diff --git a/sections/Final/Content/ParentComponent.tsx b/sections/Final/Content/ParentComponent.tsx
index 7a0b743..8c90411 100644
--- a/sections/Final/Content/ParentComponent.tsx
+++ b/sections/Final/Content/ParentComponent.tsx
@@ -3,7 +3,7 @@ import Dropdown from "../../../components/ui/Content/Dropdown/index.tsx";
 import LogoGroupComponent from "../../../components/ui/Content/LogoGroup/index.tsx";
 
 function ParentComponent({ title, dropdownText, arrowIcon, button, logos }) {
-    const [selectedCategory, setSelectedCategory] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("");
 
     const handleCategoryChange = (category: string) => {
         console.log(`[ParentComponent] Categoria selecionada: ${category}`);
@@ -29,4 +29,4 @@ function ParentComponent({ title, dropdownText, arrowIcon, button, logos }) {
     );
 }
 
-export default ParentComponent;
\ No newline at end of file
+export default ParentComponent;
diff --git a/sections/Final/Content/Product.tsx b/sections/Final/Content/Product.tsx
index 79c8cc9..743f30a 100644
--- a/sections/Final/Content/Product.tsx
+++ b/sections/Final/Content/Product.tsx
@@ -11,14 +11,14 @@ export interface Button {
    * @description Escreva o texto do botão
    */
   text: string;
-  
+
   /**
    * @title Tamanho do botão
    * @description Selecione o tamanho do botão
    */
-  tamanho?: 
-  | "Máximo (100%)"
-  | "Mínimo (Tamanho do conteúdo)";
+  tamanho?:
+    | "Máximo (100%)"
+    | "Mínimo (Tamanho do conteúdo)";
 
   /**
    * @title Link
@@ -35,14 +35,14 @@ export interface Button {
    * @description Selecione o tipo de botão que deseja
    */
   buttonTheme?:
-      | "Primary dark"
-      | "Primary white"
-      | "Secondary dark"
-      | "Secondary white"
-      | "Link dark"
-      | "Link white"
-      | "Faq"
-      | "Nenhuma estilização"
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
 }
 
 export interface Props {
diff --git a/sections/Final/Content/Spacer.tsx b/sections/Final/Content/Spacer.tsx
index 2df6256..5ea7e40 100644
--- a/sections/Final/Content/Spacer.tsx
+++ b/sections/Final/Content/Spacer.tsx
@@ -3,28 +3,29 @@ import Chip from "../../../components/ui/Content/Chip/index.tsx";
 import { ImageWidget } from "apps/admin/widgets.ts";
 
 export interface Props {
-    /**
-     * @title Alinhamento
-     * @description Selecione o alinhamento
-     */
-    contentAlign:
-      | "Vertical"
-      | "Horizontal"
+  /**
+   * @title Alinhamento
+   * @description Selecione o alinhamento
+   */
+  contentAlign:
+    | "Vertical"
+    | "Horizontal";
 }
 
 export default function Section({
-    contentAlign = "Vertical",
-  }: Props) {
+  contentAlign = "Vertical",
+}: Props) {
   return (
     <div className="flex justify-center">
-        <div className="w-full max-w-[706px] flex justify-center py-3">
-            { contentAlign == "Vertical" && (
-                <span className="block w-[1px] h-[111px] bg-sacramentoState-40"></span>
-            )}
-            { contentAlign == "Horizontal" && (
-                <span className="block h-[1px] w-full bg-white"></span>
-            )}
-        </div>
+      <div className="w-full max-w-[706px] flex justify-center py-3">
+        {contentAlign == "Vertical" && (
+          <span className="block w-[1px] h-[111px] bg-sacramentoState-40">
+          </span>
+        )}
+        {contentAlign == "Horizontal" && (
+          <span className="block h-[1px] w-full bg-white"></span>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/sections/Final/Counter/Counter.tsx b/sections/Final/Counter/Counter.tsx
index 6763d69..99cb531 100644
--- a/sections/Final/Counter/Counter.tsx
+++ b/sections/Final/Counter/Counter.tsx
@@ -2,15 +2,15 @@ import type { JSX } from "preact";
 import CounterComponent from "../../../islands/Counter.tsx";
 import Script, { type Props } from "./script.tsx";
 
-function Counter({ }: JSX.IntrinsicElements["div"] & Props) {
+function Counter({}: JSX.IntrinsicElements["div"] & Props) {
   return (
     <>
-    <div>
+      <div>
         <CounterComponent />
         <Script />
-    </div>
+      </div>
     </>
   );
 }
 
-export default Counter;
\ No newline at end of file
+export default Counter;
diff --git a/sections/Final/Counter/script.tsx b/sections/Final/Counter/script.tsx
index 185cdd7..e3a5e3c 100644
--- a/sections/Final/Counter/script.tsx
+++ b/sections/Final/Counter/script.tsx
@@ -1,53 +1,47 @@
 import { useScript as useScript } from "@deco/deco/hooks";
 
-export interface Props { }
-
-const setup = ({ }: Props) => {
-    
-    const toggleIcon = document.getElementById('toggle-icon')
-    const mobileMenu = document.getElementById('mobile-menu')
-    const hamburguerIcon = document.getElementById('hamburger-icon')
-    const closeIcon = document.getElementById('close-icon')
-    const body = document.querySelector('body')
-    // const heightElement1 = element1.getBoundingClientRect().height;
-    const nav = document.getElementById('nav')
-    const heightNav = nav?.getBoundingClientRect().height
-    
-    toggleIcon?.addEventListener('click', () => {
-
-        if (mobileMenu) {
-
-            const currentTop = globalThis.getComputedStyle(mobileMenu).top;
-
-            if (currentTop === '0px' && mobileMenu) {
-                mobileMenu.style.top = `${heightNav}px`;
-            } else {
-                mobileMenu.style.top = `0px`;
-            }
-    
-            mobileMenu?.classList.toggle('-translate-y-full')
-            mobileMenu?.classList.toggle('translate-y-0')
-            
-            hamburguerIcon?.classList.toggle('opacity-0')
-            closeIcon?.classList.toggle('opacity-0')
-            body?.classList.toggle('overflow-hidden')
-
-        }
-
-    });
-
-}
+export interface Props {}
+
+const setup = ({}: Props) => {
+  const toggleIcon = document.getElementById("toggle-icon");
+  const mobileMenu = document.getElementById("mobile-menu");
+  const hamburguerIcon = document.getElementById("hamburger-icon");
+  const closeIcon = document.getElementById("close-icon");
+  const body = document.querySelector("body");
+  // const heightElement1 = element1.getBoundingClientRect().height;
+  const nav = document.getElementById("nav");
+  const heightNav = nav?.getBoundingClientRect().height;
+
+  toggleIcon?.addEventListener("click", () => {
+    if (mobileMenu) {
+      const currentTop = globalThis.getComputedStyle(mobileMenu).top;
+
+      if (currentTop === "0px" && mobileMenu) {
+        mobileMenu.style.top = `${heightNav}px`;
+      } else {
+        mobileMenu.style.top = `0px`;
+      }
+
+      mobileMenu?.classList.toggle("-translate-y-full");
+      mobileMenu?.classList.toggle("translate-y-0");
+
+      hamburguerIcon?.classList.toggle("opacity-0");
+      closeIcon?.classList.toggle("opacity-0");
+      body?.classList.toggle("overflow-hidden");
+    }
+  });
+};
 
 function HeaderOnlyTextToWork(
-  { }: Props,
+  {}: Props,
 ) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
-        __html: useScript(setup, { }),
+        __html: useScript(setup, {}),
       }}
     />
   );
 }
-export default HeaderOnlyTextToWork;
\ No newline at end of file
+export default HeaderOnlyTextToWork;
diff --git a/sections/Final/DropDown/DropDownComponent.tsx b/sections/Final/DropDown/DropDownComponent.tsx
index aa0c159..588118e 100644
--- a/sections/Final/DropDown/DropDownComponent.tsx
+++ b/sections/Final/DropDown/DropDownComponent.tsx
@@ -41,4 +41,4 @@ export default function Section({
       hoverColor={hoverColor}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Form/Form.tsx b/sections/Final/Form/Form.tsx
index 913140e..8c5581e 100644
--- a/sections/Final/Form/Form.tsx
+++ b/sections/Final/Form/Form.tsx
@@ -5,29 +5,26 @@ import FormComponent from "../../../components/ui/Button/index.tsx";
  * @title {{{title}}}
  */
 export interface Input {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do input
-     */
-    placeholder: string;
-    /**
-     * @title ID
-     * @description Selecione o texto do input
-     */
-    id_input: string;
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do input
+   */
+  placeholder: string;
+  /**
+   * @title ID
+   * @description Selecione o texto do input
+   */
+  id_input: string;
 }
 /**
  * @title {{{title}}}
  */
 export interface Props {
-    title: string;
-    input: Input;
+  title: string;
+  input: Input;
 }
 
-export default function Section({
-}: Props) {
-  return (
-    <FormComponent />
-  );
+export default function Section({}: Props) {
+  return <FormComponent />;
 }
diff --git a/sections/Final/Form/InputRadio.tsx b/sections/Final/Form/InputRadio.tsx
index 6221a1d..7e93c38 100644
--- a/sections/Final/Form/InputRadio.tsx
+++ b/sections/Final/Form/InputRadio.tsx
@@ -2,37 +2,41 @@ import React from "react";
 import InputRadioComponent from "../../../components/ui/Form/InputRadio/index.tsx";
 
 export interface InputRadio {
-    /**
-     * @title Etiqueta
-     * @description Escreva a etiqueta do input
-     */
-    label: string;
+  /**
+   * @title Etiqueta
+   * @description Escreva a etiqueta do input
+   */
+  label: string;
 }
 
 export interface Props {
-    /**
-     * @title Texto 
-     * @description Escreva o título 
-     */
-    text: string;
-    /**
-     * @title Nome do formulário 
-     * @description Escreva o nome do formulário (Necessário que seja um nome único no site) 
-     */
-    name: string;
-    /**
-     * @title Input 
-     * @description Escreva o título 
-     */
-    inputRadio: InputRadio[];
+  /**
+   * @title Texto
+   * @description Escreva o título
+   */
+  text: string;
+  /**
+   * @title Nome do formulário
+   * @description Escreva o nome do formulário (Necessário que seja um nome único no site)
+   */
+  name: string;
+  /**
+   * @title Input
+   * @description Escreva o título
+   */
+  inputRadio: InputRadio[];
 }
 
 export default function Section({
-    text,
-    name,
-    inputRadio,
+  text,
+  name,
+  inputRadio,
 }: Props) {
   return (
-    <InputRadioComponent text={text} name={name} inputRadio={inputRadio} />
+    <InputRadioComponent
+      text={text}
+      name={name}
+      inputRadio={inputRadio}
+    />
   );
 }
diff --git a/sections/Final/Form/InputText.tsx b/sections/Final/Form/InputText.tsx
index 5c6c0a2..b8af449 100644
--- a/sections/Final/Form/InputText.tsx
+++ b/sections/Final/Form/InputText.tsx
@@ -5,20 +5,26 @@ import InputComponent from "../../../components/ui/Form/Input/index.tsx";
  * @title {{{title}}}
  */
 export interface Props {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do input
-     */
-    placeholder: string;
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do input
+   */
+  placeholder: string;
+  /**
+   * @title Chave
+   * @description Escreva o identificador do campo
+   */
+  name: string;
 }
 
 export default function Section({
   placeholder = "texto",
+  name = "name",
 }: Props) {
   return (
     <div>
-      <InputComponent placeholder={placeholder} />
+      <InputComponent placeholder={placeholder} name={name} />
     </div>
   );
 }
diff --git a/sections/Final/Form/TItleForm.tsx b/sections/Final/Form/TItleForm.tsx
index ea7cb38..531a160 100644
--- a/sections/Final/Form/TItleForm.tsx
+++ b/sections/Final/Form/TItleForm.tsx
@@ -2,91 +2,91 @@ import React from "react";
 import TitleForm from "../../../components/ui/Form/TitleForm/index.tsx";
 
 export interface Props {
-    /**
-     * @title Descrição
-     * @description Escreva aqui a descrição que ficara em cima do título
-     */
-    description?: string;
-    /**
-     * @title Texto
-     * @description Escreva aqui o seu conteúdo
-     */
-    content: string;
-    /**
-     * @title Alinhamento
-     * @format button-group
-     * @options site/loaders/icons.ts
-     */
-    textAlignment?: "Left" | "Center" | "Right";
-    /**
-     * @title Tema de Cor
-     * @description Escolha o tema de cor do texto
-     */
-    colorTheme:
-        | "Primary"
-        | "Secondary"
-        | "White"
-        | "Accent"
-        | "Sacramento-State"
-        | "Sacramento-State-10"
-        | "Mint-Cream";
-    /**
-     * @title Tamanho da Fonte
-     * @description Escolha o tamanho da fonte (22px, 28px ou 32px)
-     * @format select
-     * @default 28px
-     */
-    fontSize?: "22px" | "28px" | "32px";
-    /**
-     * @title Largura do Contêiner
-     * @description Escolha como o contêiner será exibido: Largura Limitada (290px), Largura Limitada (327px), Largura Limitada (343px) ou largura completa.
-     * @format select
-     * @default Largura Limitada (327px)
-     */
-    containerWidth?:
-        | "Largura Limitada (290px)"
-        | "Largura Limitada (327px)"
-        | "Largura Limitada (343px)"
-        | "Largura Completa";
-    /**
-     * @title Alinhamento do Conteúdo
-     * @description Alinhe o conteúdo dentro do contêiner.
-     * @format select
-     * @default Start
-     */
-    contentAlignment?: "Start" | "Center" | "End";
-    /**
-     * @title Espaçamento Superior
-     * @description Defina o espaçamento do contêiner.
-     * @format select
-     * @default Espacamento (40px)
-     */
-    paddingTop?:
-        | "Espacamento (40px)"
-        | "Espacamento (91px)"
-        | "Espaçamento (95px)";
+  /**
+   * @title Descrição
+   * @description Escreva aqui a descrição que ficara em cima do título
+   */
+  description?: string;
+  /**
+   * @title Texto
+   * @description Escreva aqui o seu conteúdo
+   */
+  content: string;
+  /**
+   * @title Alinhamento
+   * @format button-group
+   * @options site/loaders/icons.ts
+   */
+  textAlignment?: "Left" | "Center" | "Right";
+  /**
+   * @title Tema de Cor
+   * @description Escolha o tema de cor do texto
+   */
+  colorTheme:
+    | "Primary"
+    | "Secondary"
+    | "White"
+    | "Accent"
+    | "Sacramento-State"
+    | "Sacramento-State-10"
+    | "Mint-Cream";
+  /**
+   * @title Tamanho da Fonte
+   * @description Escolha o tamanho da fonte (22px, 28px ou 32px)
+   * @format select
+   * @default 28px
+   */
+  fontSize?: "22px" | "28px" | "32px";
+  /**
+   * @title Largura do Contêiner
+   * @description Escolha como o contêiner será exibido: Largura Limitada (290px), Largura Limitada (327px), Largura Limitada (343px) ou largura completa.
+   * @format select
+   * @default Largura Limitada (327px)
+   */
+  containerWidth?:
+    | "Largura Limitada (290px)"
+    | "Largura Limitada (327px)"
+    | "Largura Limitada (343px)"
+    | "Largura Completa";
+  /**
+   * @title Alinhamento do Conteúdo
+   * @description Alinhe o conteúdo dentro do contêiner.
+   * @format select
+   * @default Start
+   */
+  contentAlignment?: "Start" | "Center" | "End";
+  /**
+   * @title Espaçamento Superior
+   * @description Defina o espaçamento do contêiner.
+   * @format select
+   * @default Espacamento (40px)
+   */
+  paddingTop?:
+    | "Espacamento (40px)"
+    | "Espacamento (91px)"
+    | "Espaçamento (95px)";
 }
 
 export default function Section({
-    description,
-    content,
-    colorTheme,
-    textAlignment,
-    fontSize = "28px",
-    containerWidth = "Largura Limitada (327px)",
-    contentAlignment = "Start",
-    paddingTop = "Espacamento (40px)",
+  description,
+  content,
+  colorTheme,
+  textAlignment,
+  fontSize = "28px",
+  containerWidth = "Largura Limitada (327px)",
+  contentAlignment = "Start",
+  paddingTop = "Espacamento (40px)",
 }: Props) {
-    return (
-        <TitleForm
-            description={description}
-            content={content}
-            colorTheme={colorTheme}
-            alignment={textAlignment}
-            fontSize={fontSize}
-            containerWidth={containerWidth}
-            contentAlignment={contentAlignment}
-            paddingTop={paddingTop}
-        />
-    );
+  return (
+    <TitleForm
+      description={description}
+      content={content}
+      colorTheme={colorTheme}
+      alignment={textAlignment}
+      fontSize={fontSize}
+      containerWidth={containerWidth}
+      contentAlignment={contentAlignment}
+      paddingTop={paddingTop}
+    />
+  );
 }
diff --git a/sections/Final/Form/fixedSectionForm.tsx b/sections/Final/Form/fixedSectionForm.tsx
index 68a8d28..22c3818 100644
--- a/sections/Final/Form/fixedSectionForm.tsx
+++ b/sections/Final/Form/fixedSectionForm.tsx
@@ -3,48 +3,48 @@ import Image from "apps/website/components/Image.tsx";
 import FixedSectionForm from "../../../components/ui/Form/FixedSectionForm/index.tsx";
 
 export type Link = {
-    /**
-     * @title Nome
-     * @description Nome visível para clique
-     */
-    name: string;
-    /**
-     * @title Destino
-     * @description Insira a URL ou o caminho de destino
-     */
-    url: string;
+  /**
+   * @title Nome
+   * @description Nome visível para clique
+   */
+  name: string;
+  /**
+   * @title Destino
+   * @description Insira a URL ou o caminho de destino
+   */
+  url: string;
 };
 
 export interface Props {
-    /**
-     * @title Descrição
-     * @description Insira a descrição
-     */
-    description?: string;
-    /**
-     * @title Palavra ou Frase com Cor
-     * @description Escreva a palavra ou frase com cor
-     */
-    highlight?: string;
-    /**
-     * @title Ícone do Botão
-     * @description Insisra o Ícone do Botão
-     */
-    ImageWidget: ImageWidget;
+  /**
+   * @title Descrição
+   * @description Insira a descrição
+   */
+  description?: string;
+  /**
+   * @title Palavra ou Frase com Cor
+   * @description Escreva a palavra ou frase com cor
+   */
+  highlight?: string;
+  /**
+   * @title Ícone do Botão
+   * @description Insisra o Ícone do Botão
+   */
+  ImageWidget: ImageWidget;
 }
 
 export default function Section({
-    description = "",
-    highlight = "",
-    ImageWidget,
+  description = "",
+  highlight = "",
+  ImageWidget,
 }: Props) {
-    return (
-        <div>
-            <FixedSectionForm
-                description={description}
-                highlight={highlight}
-                ImageWidget={ImageWidget}
-            />
-        </div>
-    );
+  return (
+    <div>
+      <FixedSectionForm
+        description={description}
+        highlight={highlight}
+        ImageWidget={ImageWidget}
+      />
+    </div>
+  );
 }
diff --git a/sections/Final/Icons/IconGrid.tsx b/sections/Final/Icons/IconGrid.tsx
index 5ef6c7e..1201949 100644
--- a/sections/Final/Icons/IconGrid.tsx
+++ b/sections/Final/Icons/IconGrid.tsx
@@ -95,4 +95,4 @@ export default function Section({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Navbar/index.tsx b/sections/Final/Navbar/index.tsx
index 2933ef2..363b3d7 100644
--- a/sections/Final/Navbar/index.tsx
+++ b/sections/Final/Navbar/index.tsx
@@ -6,190 +6,190 @@ import ButtonComponent from "../Button/ButtonComponent.tsx";
 import Script, { type Props } from "./script.tsx";
 
 function Menu(
-    { logo, icon, close_icon, menu, button, subMenu, linkIcons }:
-        & JSX.IntrinsicElements["div"]
-        & Props,
+  { logo, icon, close_icon, menu, button, subMenu, linkIcons }:
+    & JSX.IntrinsicElements["div"]
+    & Props,
 ) {
-    return (
-        <>
-            <div>
-                <nav
-                    role="navigation"
-                    id="nav"
-                    className="inline-flex px-4 md:px-10 py-6 w-full justify-between items-center bg-sacramentoState border-b border-white-20 relative top-0 left-0 z-50"
-                >
-                    <div className="flex items-center">
-                        <a href="/">
-                            {logo && (
-                                <Image
-                                    className=""
-                                    src={logo || ""}
-                                    width={173.72}
-                                />
-                            )}
-                        </a>
-                    </div>
+  return (
+    <>
+      <div>
+        <nav
+          role="navigation"
+          id="nav"
+          className="inline-flex px-4 md:px-10 py-6 w-full justify-between items-center bg-sacramentoState border-b border-white-20 relative top-0 left-0 z-50"
+        >
+          <div className="flex items-center">
+            <a href="/">
+              {logo && (
+                <Image
+                  className=""
+                  src={logo || ""}
+                  width={173.72}
+                />
+              )}
+            </a>
+          </div>
 
-                    {/* Ícones de hambúrguer e fechar para mobile */}
-                    <div className="w-fit md:hidden flex items-center">
-                        {/* <input type="checkbox" id="menu-toggle" className="hidden" /> */}
-                        <button
-                            type="button"
-                            id="toggle-icon"
-                            className="focus:outline-none relative text-white h-[32px] w-[32px]"
-                        >
-                            <div
-                                id="hamburger-icon"
-                                className="absolute top-0 left-0 duration-500"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="32"
-                                    height="32"
-                                    viewBox="0 0 32 32"
-                                    fill="none"
-                                >
-                                    <path
-                                        d="M4 24H28"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                    <path
-                                        d="M4 16H28"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                    <path
-                                        d="M4 8H28"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                </svg>
-                            </div>
-                            <div
-                                id="close-icon"
-                                className="absolute top-0 left-0 duration-500 opacity-0"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="32"
-                                    height="32"
-                                    viewBox="0 0 32 32"
-                                    fill="none"
-                                >
-                                    <path
-                                        d="M24 8L8 24"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                    <path
-                                        d="M8 8L24 24"
-                                        stroke="#3BEDB2"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                </svg>
-                            </div>
-                        </button>
-                    </div>
+          {/* Ícones de hambúrguer e fechar para mobile */}
+          <div className="w-fit md:hidden flex items-center">
+            {/* <input type="checkbox" id="menu-toggle" className="hidden" /> */}
+            <button
+              type="button"
+              id="toggle-icon"
+              className="focus:outline-none relative text-white h-[32px] w-[32px]"
+            >
+              <div
+                id="hamburger-icon"
+                className="absolute top-0 left-0 duration-500"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 32 32"
+                  fill="none"
+                >
+                  <path
+                    d="M4 24H28"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M4 16H28"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M4 8H28"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+              <div
+                id="close-icon"
+                className="absolute top-0 left-0 duration-500 opacity-0"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 32 32"
+                  fill="none"
+                >
+                  <path
+                    d="M24 8L8 24"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M8 8L24 24"
+                    stroke="#3BEDB2"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
 
-                    <div
-                        id="menu"
-                        className="hidden md:block 2xl:flex space-x-4 font-sans text-white font-light items-center whitespace-nowrap"
-                    >
-                        {menu?.map((item, index) => (
-                            <a key={index} href={item.url}>
-                                {item.name}
-                            </a>
-                        ))}
-                    </div>
+          <div
+            id="menu"
+            className="hidden md:block 2xl:flex space-x-4 font-sans text-white font-light items-center whitespace-nowrap"
+          >
+            {menu?.map((item, index) => (
+              <a key={index} href={item.url}>
+                {item.name}
+              </a>
+            ))}
+          </div>
 
-                    <div className="hidden md:block w-fit md:flex ml-8 bg-secondary rounded-xl items-center justify-center">
-                        {button?.slice(0, 1).map((btn, index) => (
-                            <ButtonComponent
-                                key={index}
-                                text={btn.text}
-                                link={btn.link}
-                                icon={btn.icon}
-                                buttonTheme={btn.buttonTheme}
-                            />
-                        ))}
-                    </div>
-                </nav>
+          <div className="hidden md:block w-fit md:flex ml-8 bg-secondary rounded-xl items-center justify-center">
+            {button?.slice(0, 1).map((btn, index) => (
+              <ButtonComponent
+                key={index}
+                text={btn.text}
+                link={btn.link}
+                icon={btn.icon}
+                buttonTheme={btn.buttonTheme}
+              />
+            ))}
+          </div>
+        </nav>
 
-                {/* Menu */}
-                <div
-                    id="mobile-menu"
-                    className="md:absolute fixed -translate-y-full duration-500 top-0 left-0 w-full h-screen bg-white md:bg-sacramentoState z-50 overflow-scroll z-[49]"
+        {/* Menu */}
+        <div
+          id="mobile-menu"
+          className="md:absolute fixed -translate-y-full duration-500 top-0 left-0 w-full h-screen bg-white md:bg-sacramentoState z-50 overflow-scroll z-[49]"
+        >
+          <div className="md:pt-10 p-4 grid gap-6 md:flex min-h-screen md:min-h-0 overflow-auto">
+            <div className="md:mb-[184px] md:h-fit md:w-full grid md:grid-cols-2 md:gap-x-[28px]">
+              {menu?.map((item, index) => (
+                <a
+                  key={index}
+                  href={item.url}
+                  className="flex justify-between py-[22px] md:py-8 md:text-white border-b border-sacramentoState-10 md:border-white-20"
                 >
-                    <div className="md:pt-10 p-4 grid gap-6 md:flex min-h-screen md:min-h-0 overflow-auto">
-                        <div className="md:mb-[184px] md:h-fit md:w-full grid md:grid-cols-2 md:gap-x-[28px]">
-                            {menu?.map((item, index) => (
-                                <a
-                                    key={index}
-                                    href={item.url}
-                                    className="flex justify-between py-[22px] md:py-8 md:text-white border-b border-sacramentoState-10 md:border-white-20"
-                                >
-                                    {item.name}
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                    >
-                                        <path
-                                            d="M14.83 11.2899L10.59 7.04995C10.497 6.95622 10.3864 6.88183 10.2646 6.83106C10.1427 6.78029 10.012 6.75415 9.88 6.75415C9.74799 6.75415 9.61729 6.78029 9.49543 6.83106C9.37357 6.88183 9.26297 6.95622 9.17 7.04995C8.98375 7.23731 8.87921 7.49076 8.87921 7.75495C8.87921 8.01913 8.98375 8.27259 9.17 8.45995L12.71 11.9999L9.17 15.5399C8.98375 15.7273 8.87921 15.9808 8.87921 16.2449C8.87921 16.5091 8.98375 16.7626 9.17 16.9499C9.26344 17.0426 9.37426 17.116 9.4961 17.1657C9.61794 17.2155 9.7484 17.2407 9.88 17.2399C10.0116 17.2407 10.1421 17.2155 10.2639 17.1657C10.3857 17.116 10.4966 17.0426 10.59 16.9499L14.83 12.7099C14.9237 12.617 14.9981 12.5064 15.0489 12.3845C15.0997 12.2627 15.1258 12.132 15.1258 11.9999C15.1258 11.8679 15.0997 11.7372 15.0489 11.6154C14.9981 11.4935 14.9237 11.3829 14.83 11.2899Z"
-                                            fill="#3BEDB2"
-                                        />
-                                    </svg>
-                                </a>
-                            ))}
-                        </div>
-                        <div className="md:w-[464px] md:h-fit grid gap-4 md:whitespace-nowrap">
-                            {/* Trazer component de botões */}
-                            {button?.map((btn, index) => (
-                                <ButtonComponent
-                                    text={btn.text}
-                                    link={btn.link}
-                                    icon={btn.icon}
-                                    buttonTheme={btn.buttonTheme}
-                                />
-                            ))}
-                        </div>
+                  {item.name}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <path
+                      d="M14.83 11.2899L10.59 7.04995C10.497 6.95622 10.3864 6.88183 10.2646 6.83106C10.1427 6.78029 10.012 6.75415 9.88 6.75415C9.74799 6.75415 9.61729 6.78029 9.49543 6.83106C9.37357 6.88183 9.26297 6.95622 9.17 7.04995C8.98375 7.23731 8.87921 7.49076 8.87921 7.75495C8.87921 8.01913 8.98375 8.27259 9.17 8.45995L12.71 11.9999L9.17 15.5399C8.98375 15.7273 8.87921 15.9808 8.87921 16.2449C8.87921 16.5091 8.98375 16.7626 9.17 16.9499C9.26344 17.0426 9.37426 17.116 9.4961 17.1657C9.61794 17.2155 9.7484 17.2407 9.88 17.2399C10.0116 17.2407 10.1421 17.2155 10.2639 17.1657C10.3857 17.116 10.4966 17.0426 10.59 16.9499L14.83 12.7099C14.9237 12.617 14.9981 12.5064 15.0489 12.3845C15.0997 12.2627 15.1258 12.132 15.1258 11.9999C15.1258 11.8679 15.0997 11.7372 15.0489 11.6154C14.9981 11.4935 14.9237 11.3829 14.83 11.2899Z"
+                      fill="#3BEDB2"
+                    />
+                  </svg>
+                </a>
+              ))}
+            </div>
+            <div className="md:w-[464px] md:h-fit grid gap-4 md:whitespace-nowrap">
+              {/* Trazer component de botões */}
+              {button?.map((btn, index) => (
+                <ButtonComponent
+                  text={btn.text}
+                  link={btn.link}
+                  icon={btn.icon}
+                  buttonTheme={btn.buttonTheme}
+                />
+              ))}
+            </div>
 
-                        {
-                            /* <div className="flex flex-wrap gap-8 py-8">
+            {
+              /* <div className="flex flex-wrap gap-8 py-8">
                             {/* Colocar botões */
-                        }
-                        {/* <ButtonComponent text={btn.text} link={btn.link} icon={btn.icon} buttonTheme={btn.buttonTheme} /> */}
-                        {/* </div> */}
-                    </div>
-                    <div className="md:relative md:bottom-0 md:pl-4 md:flex grid gap-8 py-8 pb-10 md:text-darkMintCream">
-                        {subMenu?.map((btn, index) => (
-                            <ButtonComponent
-                                key={index}
-                                text={btn.text}
-                                link={btn.link}
-                                icon={btn.icon}
-                                buttonTheme={btn.buttonTheme}
-                            />
-                        ))}
-                    </div>
-                </div>
-            </div>
-            <Script />
-        </>
-    );
+            }
+            {/* <ButtonComponent text={btn.text} link={btn.link} icon={btn.icon} buttonTheme={btn.buttonTheme} /> */}
+            {/* </div> */}
+          </div>
+          <div className="md:relative md:bottom-0 md:pl-4 md:flex grid gap-8 py-8 pb-10 md:text-darkMintCream">
+            {subMenu?.map((btn, index) => (
+              <ButtonComponent
+                key={index}
+                text={btn.text}
+                link={btn.link}
+                icon={btn.icon}
+                buttonTheme={btn.buttonTheme}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <Script />
+    </>
+  );
 }
 
 export default Menu;
diff --git a/sections/Final/Navbar/script.tsx b/sections/Final/Navbar/script.tsx
index 185cdd7..e3a5e3c 100644
--- a/sections/Final/Navbar/script.tsx
+++ b/sections/Final/Navbar/script.tsx
@@ -1,53 +1,47 @@
 import { useScript as useScript } from "@deco/deco/hooks";
 
-export interface Props { }
-
-const setup = ({ }: Props) => {
-    
-    const toggleIcon = document.getElementById('toggle-icon')
-    const mobileMenu = document.getElementById('mobile-menu')
-    const hamburguerIcon = document.getElementById('hamburger-icon')
-    const closeIcon = document.getElementById('close-icon')
-    const body = document.querySelector('body')
-    // const heightElement1 = element1.getBoundingClientRect().height;
-    const nav = document.getElementById('nav')
-    const heightNav = nav?.getBoundingClientRect().height
-    
-    toggleIcon?.addEventListener('click', () => {
-
-        if (mobileMenu) {
-
-            const currentTop = globalThis.getComputedStyle(mobileMenu).top;
-
-            if (currentTop === '0px' && mobileMenu) {
-                mobileMenu.style.top = `${heightNav}px`;
-            } else {
-                mobileMenu.style.top = `0px`;
-            }
-    
-            mobileMenu?.classList.toggle('-translate-y-full')
-            mobileMenu?.classList.toggle('translate-y-0')
-            
-            hamburguerIcon?.classList.toggle('opacity-0')
-            closeIcon?.classList.toggle('opacity-0')
-            body?.classList.toggle('overflow-hidden')
-
-        }
-
-    });
-
-}
+export interface Props {}
+
+const setup = ({}: Props) => {
+  const toggleIcon = document.getElementById("toggle-icon");
+  const mobileMenu = document.getElementById("mobile-menu");
+  const hamburguerIcon = document.getElementById("hamburger-icon");
+  const closeIcon = document.getElementById("close-icon");
+  const body = document.querySelector("body");
+  // const heightElement1 = element1.getBoundingClientRect().height;
+  const nav = document.getElementById("nav");
+  const heightNav = nav?.getBoundingClientRect().height;
+
+  toggleIcon?.addEventListener("click", () => {
+    if (mobileMenu) {
+      const currentTop = globalThis.getComputedStyle(mobileMenu).top;
+
+      if (currentTop === "0px" && mobileMenu) {
+        mobileMenu.style.top = `${heightNav}px`;
+      } else {
+        mobileMenu.style.top = `0px`;
+      }
+
+      mobileMenu?.classList.toggle("-translate-y-full");
+      mobileMenu?.classList.toggle("translate-y-0");
+
+      hamburguerIcon?.classList.toggle("opacity-0");
+      closeIcon?.classList.toggle("opacity-0");
+      body?.classList.toggle("overflow-hidden");
+    }
+  });
+};
 
 function HeaderOnlyTextToWork(
-  { }: Props,
+  {}: Props,
 ) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
-        __html: useScript(setup, { }),
+        __html: useScript(setup, {}),
       }}
     />
   );
 }
-export default HeaderOnlyTextToWork;
\ No newline at end of file
+export default HeaderOnlyTextToWork;
diff --git a/sections/Footer.tsx b/sections/Footer.tsx
index b962da7..7f4ad5e 100644
--- a/sections/Footer.tsx
+++ b/sections/Footer.tsx
@@ -62,7 +62,6 @@ export default function Footer({
     <footer className="bg-sacramentoState">
       <div className="w-full pt-[159px] text-center">
         <div className="text-center">
-
           <a href={linkedUrl} className="text-center">
             {brandLogoMobile && (
               <Image
@@ -84,7 +83,6 @@ export default function Footer({
               />
             )}
           </a>
-
         </div>
         <p className="pt-[22px] pb-[66px] font-light font-mono text-[11px] lg:text-xs leading-tight-14 lg:leading-tight-15 text-center text-mintCream">
           {rightsText}
diff --git a/sections/FormSection.tsx b/sections/FormSection.tsx
index ee98a68..73b4350 100644
--- a/sections/FormSection.tsx
+++ b/sections/FormSection.tsx
@@ -21,7 +21,10 @@ export interface Props {
 // Implemente a seção
 function LoadComponent(
   { Component, props }: Section,
+  index,
 ) {
+  props.step = index;
+
   return (
     <div>
       <Component {...props} />
@@ -32,13 +35,13 @@ function LoadComponent(
 function FormSection(
   { sections }: Props,
 ) {
-    return (
-      <div>
-        {sections?.map((item) => (
-          LoadComponent(item.section)
+  return (
+      <div data-form="formulario">
+        {sections?.map((item, index) => (
+          LoadComponent(item.section, index)
         ))}
       </div>
-    );
-  }
+  );
+}
 
-export default FormSection;
\ No newline at end of file
+export default FormSection;
diff --git a/sections/FormSteps.tsx b/sections/FormSteps.tsx
index f41902a..e0508a6 100644
--- a/sections/FormSteps.tsx
+++ b/sections/FormSteps.tsx
@@ -27,13 +27,13 @@ export interface Props {
    * @title Conteúdo
    */
   sections?: Item[];
+  step?: Number;
 }
 
-export default function FormSteps({ sections }: Props) {
-  
+export default function FormSteps({ sections, step }: Props) {
   return (
     <div>
-      <FormStepsComponent sections={sections} />
+      <FormStepsComponent sections={sections} step={step} />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Galery/GaleryContent.tsx b/sections/Galery/GaleryContent.tsx
index 74f22f2..4ec0f70 100644
--- a/sections/Galery/GaleryContent.tsx
+++ b/sections/Galery/GaleryContent.tsx
@@ -77,4 +77,4 @@ export default function Section({
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/sections/Headers/TitleIntegration.tsx b/sections/Headers/TitleIntegration.tsx
index 4cd191d..1c973f4 100644
--- a/sections/Headers/TitleIntegration.tsx
+++ b/sections/Headers/TitleIntegration.tsx
@@ -71,7 +71,7 @@ export default function Section({
       }
       return part;
     });
-  }
+  };
   return (
     <section className="bg-sacramentoState flex justify-center">
       <div className="grid gap-3 md:text-center w-full max-w-[739px] px-4 pb-6 pt-8 md:py-12 md:px-10">
diff --git a/sections/Navigation/Navbar.tsx b/sections/Navigation/Navbar.tsx
index fa39b72..38e6c02 100644
--- a/sections/Navigation/Navbar.tsx
+++ b/sections/Navigation/Navbar.tsx
@@ -5,7 +5,6 @@ import Navbar from "../Final/Navbar/index.tsx";
 // import { useState } from "react";
 import { useEffect } from "react";
 
-
 /**
  * @title {{{title}}}
  */
@@ -44,36 +43,36 @@ export type IconLink = {
  * @title {{{title}}}
  */
 export type Button = {
-    title: string;
-    /**
-     * @title Texto
-     * @description Escreva o texto do botão
-     */
-    text: string;
-    /**
-     * @title Link
-     * @description Escreva o link de redirecionamento
-     */
-    link: string;
-    /**
-     * @title Icone
-     * @description Selecione o ícone que deseja
-     */
-    icon?: string;
-    /**
-     * @title Botão
-     * @description Selecione o tipo de botão que deseja
-     */
-    buttonTheme?:
-        | "Primary dark"
-        | "Primary white"
-        | "Secondary dark"
-        | "Secondary white"
-        | "Link dark"
-        | "Link white"
-        | "Faq"
-        | "Nenhuma estilização"
-}
+  title: string;
+  /**
+   * @title Texto
+   * @description Escreva o texto do botão
+   */
+  text: string;
+  /**
+   * @title Link
+   * @description Escreva o link de redirecionamento
+   */
+  link: string;
+  /**
+   * @title Icone
+   * @description Selecione o ícone que deseja
+   */
+  icon?: string;
+  /**
+   * @title Botão
+   * @description Selecione o tipo de botão que deseja
+   */
+  buttonTheme?:
+    | "Primary dark"
+    | "Primary white"
+    | "Secondary dark"
+    | "Secondary white"
+    | "Link dark"
+    | "Link white"
+    | "Faq"
+    | "Nenhuma estilização";
+};
 export interface Props {
   /**
    * @title Logo
@@ -100,7 +99,6 @@ export interface Props {
    * @description Insira os ícones e links que aparecerão no menu
    */
   linkIcons?: IconLink[];
-
 }
 
 export default function Section({
@@ -127,10 +125,16 @@ export default function Section({
       link: "/",
       icon: "",
       buttonTheme: "Primary dark",
-    }
+    },
   ],
 }: Props) {
-
   return (
-    <Navbar logo={logo} menu={menu} button={button} subMenu={subMenu} linkIcons={linkIcons} />
-  );}
\ No newline at end of file
+    <Navbar
+      logo={logo}
+      menu={menu}
+      button={button}
+      subMenu={subMenu}
+      linkIcons={linkIcons}
+    />
+  );
+}

From 4b36db0b03a830e9175c796f0b40fbccec0a357d Mon Sep 17 00:00:00 2001
From: omattaeus <gomesduartedev@gmail.com>
Date: Fri, 10 Jan 2025 17:52:13 -0300
Subject: [PATCH 7/7] correcao na barra de progresso form, animacao oppening

---
 .deco/blocks/Abertura%20Home.json             |  17 ++-
 .../pages-My%2520New%2520Page-461078.json     |   2 +-
 components/ui/Content/BigNumber/index.tsx     |   6 -
 components/ui/Content/Openning/index.tsx      |  95 ++++++++++++++++
 components/ui/Content/Openning/script.tsx     |  65 +++++++++++
 components/ui/Form/FixedSectionForm/index.tsx |  64 +----------
 components/ui/Form/Input/index.tsx            |  12 +-
 components/ui/Form/InputRadio/index.tsx       | 107 ++++++++----------
 components/ui/Form/index.tsx                  |  32 +-----
 components/ui/Form/script.tsx                 |  78 +++++++++----
 components/ui/Galery/GaleryContent/index.tsx  |  12 +-
 components/ui/Galery/GaleryContent/script.tsx |  63 +++++++++++
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 sections/Final/Form/InputRadio.tsx            |   6 +-
 sections/Final/Headers/Openning.tsx           | 101 +++++------------
 sections/FormSection.tsx                      |  16 +--
 sections/FormSteps.tsx                        |   2 +-
 tailwind.css                                  |  15 +++
 19 files changed, 417 insertions(+), 286 deletions(-)
 create mode 100644 components/ui/Content/Openning/index.tsx
 create mode 100644 components/ui/Content/Openning/script.tsx
 create mode 100644 components/ui/Galery/GaleryContent/script.tsx

diff --git a/.deco/blocks/Abertura%20Home.json b/.deco/blocks/Abertura%20Home.json
index 604e8be..ad18759 100644
--- a/.deco/blocks/Abertura%20Home.json
+++ b/.deco/blocks/Abertura%20Home.json
@@ -2,5 +2,20 @@
   "__resolveType": "site/sections/Final/Headers/Openning.tsx",
   "title": "Gestão inteligente para sonhar mais",
   "highlight": "sonhar mais",
-  "subtitleDescription": "A Linked entende as dores do seu negócio e pode te ajudar a economizar e lucrar"
+  "subtitleDescription": "A Linked entende as dores do seu negócio e pode te ajudar a economizar e lucrar",
+  "open": [
+    {
+      "title": "Gestão inteligente para sonhar mais",
+      "highlight": "sonhar mais",
+      "subtitleDescription": "A Linked entende as dores do seu negócio e pode te ajudar a economizar e lucrar"
+    },
+    {
+      "title": "Gestão inteligente para sonhar mais",
+      "highlight": "sonhar mais"
+    },
+    {
+      "title": "Gestão inteligente para sonhar mais",
+      "highlight": "sonhar mais"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/.deco/blocks/pages-My%2520New%2520Page-461078.json b/.deco/blocks/pages-My%2520New%2520Page-461078.json
index 39e3bdb..a5b69b1 100644
--- a/.deco/blocks/pages-My%2520New%2520Page-461078.json
+++ b/.deco/blocks/pages-My%2520New%2520Page-461078.json
@@ -129,7 +129,7 @@
                     }
                   ],
                   "text": "Teste",
-                  "name": "Teste"
+                  "name": "radio"
                 },
                 "title": "Teste",
                 "text": "Teste",
diff --git a/components/ui/Content/BigNumber/index.tsx b/components/ui/Content/BigNumber/index.tsx
index 1962358..925e1fa 100644
--- a/components/ui/Content/BigNumber/index.tsx
+++ b/components/ui/Content/BigNumber/index.tsx
@@ -29,12 +29,6 @@ function setClass(value: string) {
   }
 }
 
-/* Descrição do component
-*asdasd
-*asd
-*asd
-*/
-
 function BigNumber(
   { number, description, colorTheme }: JSX.IntrinsicElements["div"] & Props,
 ) {
diff --git a/components/ui/Content/Openning/index.tsx b/components/ui/Content/Openning/index.tsx
new file mode 100644
index 0000000..a68bced
--- /dev/null
+++ b/components/ui/Content/Openning/index.tsx
@@ -0,0 +1,95 @@
+import Script, { type Props } from "./script.tsx";
+
+export interface Open {
+  /**
+   * @title Título
+   * @description Escreva aqui o título da abertura
+   */
+  title?: string;
+  /**
+   * @title Palavra ou Frase com Cor
+   * @description Escreva a palavra ou frase com cor
+   */
+  highlight?: string;
+  /**
+   * @title Subtítulo
+   * @description Escreva aqui o subtítulo da abertura
+   */
+  subtitleDescription?: string;
+}
+
+/**
+ * @title {{{title}}}
+ */
+export interface Props {
+  /**
+   * @title Título do Bloco
+   * @description Escreva aqui o título do bloco
+   */
+  title?: string;
+  /**
+   * @title Títulos de Abertura
+   * @description Lista de títulos de abertura com suas propriedades
+   */
+  open?: Open[];
+}
+
+export default function Section({
+  title = "",
+  open = [],
+}: Props) {
+  const getHighlightedText = (text: string, highlight?: string) => {
+    if (!highlight) return text;
+
+    const parts = text.split(new RegExp(`(${highlight})`, "gi"));
+    return parts.map((part, index) =>
+      part.toLowerCase() === highlight.toLowerCase()
+        ? (
+          <span key={index} className="text-accent">
+            {part}
+          </span>
+        )
+        : part
+    );
+  };
+
+  return (
+    <>
+      <div className="bg-sacramentoState h-[80vh] flex">
+        <div className="ml-4 md:ml-10 w-full flex flex-col items-start justify-center">
+          {open.map((item, index) => (
+            <div
+              key={index}
+              data-slide={String(index)}
+              className={`pt-[10px] md:pt-[21px] w-full
+                ${
+                index === 0
+                  ? "block slide-in-left"
+                  : "slide-in-left hidden"
+              }
+                transition-all duration-800 ease-out`}
+            >
+              <div className="grid gap-y-[14px]">
+                {item.title && (
+                  <div className="max-w-[320px] md:max-w-[548px]">
+                    <p className="font-sans text-white font-medium text-[32px] lg:text-[64px] leading-tight-35 lg:leading-tight-70 tracking-tight-2 fade-in-animation">
+                      {getHighlightedText(item.title, item.highlight)}
+                    </p>
+                  </div>
+                )}
+                {item.subtitleDescription && (
+                  <div className="pr-10 md:pr-0 w-full !max-w-none">
+                    <p className="text-base md:text-lg font-sans font-normal leading-tight-18 md:leading-tight-25 text-white-80 fade-in-animation">
+                      {item.subtitleDescription}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <Script />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/components/ui/Content/Openning/script.tsx b/components/ui/Content/Openning/script.tsx
new file mode 100644
index 0000000..b0ec8b8
--- /dev/null
+++ b/components/ui/Content/Openning/script.tsx
@@ -0,0 +1,65 @@
+import { useScript } from "@deco/deco/hooks";
+
+export interface Props {}
+
+const setup = () => {
+  let currentIndex = 0;
+  const slides = Array.from(document.querySelectorAll("[data-slide]"));
+  const totalSlides = slides.length;
+
+  console.log("TOTAL SLIDES: " + totalSlides);
+
+  const showSlide = (index: number) => {
+    slides.forEach((slide, idx) => {
+      if (idx === index) {
+        slide.classList.remove("translate-x-full", "opacity-0", "hidden");
+        slide.classList.add("translate-x-0", "opacity-100", "block");
+      } else {
+        slide.classList.remove("translate-x-0", "opacity-100", "block");
+        slide.classList.add("translate-x-full", "opacity-0", "hidden");
+      }
+    });
+  };
+
+  const nextSlide = () => {
+    currentIndex = (currentIndex + 1) % totalSlides;
+    console.log("INDEX ATUAL: " + currentIndex);
+    showSlide(currentIndex);
+  };
+
+  const prevSlide = () => {
+    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
+    console.log("INDEX ATUAL: " + currentIndex);
+    showSlide(currentIndex);
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    if (slides.length === 0) return;
+
+    showSlide(currentIndex);
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowRight") {
+        nextSlide();
+      }
+      if (event.key === "ArrowLeft") {
+        prevSlide();
+      }
+    });
+
+    setInterval(nextSlide, 5000);
+  });
+};
+
+function Open({}: Props) {
+  return (
+    <script
+      type="module"
+      dangerouslySetInnerHTML={{
+        __html: useScript(setup, {}),
+      }}
+    />
+  );
+}
+
+export default Open;
\ No newline at end of file
diff --git a/components/ui/Form/FixedSectionForm/index.tsx b/components/ui/Form/FixedSectionForm/index.tsx
index 41cb56b..176d64a 100644
--- a/components/ui/Form/FixedSectionForm/index.tsx
+++ b/components/ui/Form/FixedSectionForm/index.tsx
@@ -13,16 +13,6 @@ export type Link = {
    * @description Insira a URL ou o caminho de destino
    */
   url: string;
-  /**
-   * @title Nome
-   * @description Nome visível para clique
-   */
-  name: string;
-  /**
-   * @title Destino
-   * @description Insira a URL ou o caminho de destino
-   */
-  url: string;
 };
 
 export interface Props {
@@ -38,22 +28,7 @@ export interface Props {
   highlight?: string;
   /**
    * @title Ícone do Botão
-   * @description Insisra o Ícone do Botão
-   */
-  ImageWidget: ImageWidget;
-  /**
-   * @title Descrição
-   * @description Insira a descrição
-   */
-  description?: string;
-  /**
-   * @title Palavra ou Frase com Cor
-   * @description Escreva a palavra ou frase com cor
-   */
-  highlight?: string;
-  /**
-   * @title Ícone do Botão
-   * @description Insisra o Ícone do Botão
+   * @description Insira o Ícone do Botão
    */
   ImageWidget: ImageWidget;
 }
@@ -62,19 +37,11 @@ function FixedSectionForm({
   description = "",
   highlight = "",
   ImageWidget = "",
-  description = "",
-  highlight = "",
-  ImageWidget = "",
 }: Props) {
-  const getHighlightedText = (text: string, highlight: string) => {
-    if (!highlight) return text;
   const getHighlightedText = (text: string, highlight: string) => {
     if (!highlight) return text;
 
     const regex = new RegExp(`(${highlight})`, "giu");
-    const regex = new RegExp(`(${highlight})`, "giu");
-
-    const parts = text.split(regex);
     const parts = text.split(regex);
 
     return parts.map((part, index) => {
@@ -91,20 +58,6 @@ function FixedSectionForm({
       return part;
     });
   };
-    return parts.map((part, index) => {
-      if (part.toLowerCase() === highlight.toLowerCase()) {
-        return (
-          <span
-            key={index}
-            className="font-bold text-sacramentoState"
-          >
-            {part}
-          </span>
-        );
-      }
-      return part;
-    });
-  };
 
   return (
     <>
@@ -118,18 +71,6 @@ function FixedSectionForm({
               data-next="next"
               className="w-[56px] h-[56px] flex justify-center items-center rounded-full bg-sacramentoState cursor-pointer"
             >
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z"
-                  fill="#3BEDB2"
-                />
-              </svg>
             </button>
           </div>
           <div className="px-4 pt-[14px] pb-5 w-full flex justify-between items-center gap-x-4 shadow-top">
@@ -159,5 +100,4 @@ function FixedSectionForm({
   );
 }
 
-export default FixedSectionForm;
-
+export default FixedSectionForm;
\ No newline at end of file
diff --git a/components/ui/Form/Input/index.tsx b/components/ui/Form/Input/index.tsx
index 6192ed9..69dc822 100644
--- a/components/ui/Form/Input/index.tsx
+++ b/components/ui/Form/Input/index.tsx
@@ -1,18 +1,11 @@
 interface InputComponentProps {
   name?: string;
   placeholder?: string;
-  onValidate?: (isValid: boolean) => void;
 }
 
 function InputComponent(
-  { name, placeholder, onValidate }: InputComponentProps,
+  { name, placeholder }: InputComponentProps,
 ) {
-  const handleChange = (e: Event) => {
-    const input = e.target as HTMLInputElement;
-    if (onValidate) {
-      onValidate(input.value.trim().length > 0);
-    }
-  };
 
   return (
     <>
@@ -23,7 +16,6 @@ function InputComponent(
             type="text"
             placeholder={placeholder}
             className="focus:outline-none w-full pb-2 border-b-2 border-sacramentoState text-sacramentoState placeholder:sacramentoState-80 rounded-none"
-            onInput={handleChange}
           />
         </div>
       </div>
@@ -31,4 +23,4 @@ function InputComponent(
   );
 }
 
-export default InputComponent;
+export default InputComponent;
\ No newline at end of file
diff --git a/components/ui/Form/InputRadio/index.tsx b/components/ui/Form/InputRadio/index.tsx
index ac50b1b..1e9a6b5 100644
--- a/components/ui/Form/InputRadio/index.tsx
+++ b/components/ui/Form/InputRadio/index.tsx
@@ -11,68 +11,59 @@ function InputRadioComponent({
   text,
   name,
   inputRadio,
-  onValidate,
 }: InputRadioComponentProps) {
-  const handleChange = () => {
-    if (onValidate) {
-      onValidate(true);
-    }
-  };
-
   return (
-    <>
-      <div className="flex justify-center">
-        <div className="px-4 w-full max-w-[706px] grid gap-6">
-          <p className="text-lg text-sacramentoState font-semibold">{text}</p>
-          {inputRadio.map((item, index) => (
-            <div key={index} className="flex items-center gap-2">
-              <input
-                hidden
-                type="radio"
-                name={name}
-                id={`${name}-${item.label}-${index}`}
-                onChange={handleChange}
-                className="peer"
+    <div className="flex justify-center">
+      <div className="px-4 w-full max-w-[706px] grid gap-6">
+        <p className="text-lg text-sacramentoState font-semibold">{text}</p>
+        {inputRadio.map((item, index) => (
+          <div key={index} className="flex items-center gap-2">
+            <input
+              hidden
+              type="radio"
+              data-radio={name}
+              name={name}
+              id={`${name}-${item.label}-${index}`}
+              className="peer"
+            />
+            <svg
+              className="cursor-pointer peer-checked:hidden"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="17"
+              viewBox="0 0 16 17"
+              fill="none"
+            >
+              <circle
+                cx="8"
+                cy="8.5"
+                r="7.5"
+                stroke="#003330"
+                strokeOpacity="0.1"
               />
-              <svg
-                className="cursor-pointer peer-checked:hidden"
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="17"
-                viewBox="0 0 16 17"
-                fill="none"
-              >
-                <circle
-                  cx="8"
-                  cy="8.5"
-                  r="7.5"
-                  stroke="#003330"
-                  strokeOpacity="0.1"
-                />
-              </svg>
-              <svg
-                className="hidden cursor-pointer peer-checked:block"
-                width="16"
-                height="17"
-                viewBox="0 0 16 17"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle cx="8" cy="8.5" r="7.5" stroke="#003330" />
-                <circle cx="8" cy="8.5" r="5" fill="#3BEDB2" />
-              </svg>
-              <label
-                htmlFor={`${name}-${item.label}-${index}`}
-                className="cursor-pointer"
-              >
-                {item.label}
-              </label>
-            </div>
-          ))}
-        </div>
+            </svg>
+            <svg
+              className="hidden cursor-pointer peer-checked:block"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="17"
+              viewBox="0 0 16 17"
+              fill="none"
+            >
+              <circle cx="8" cy="8.5" r="7.5" stroke="#003330" />
+              <circle cx="8" cy="8.5" r="5" fill="#3BEDB2" />
+            </svg>
+            <label
+              htmlFor={`${name}-${item.label}-${index}`}
+              className="cursor-pointer"
+            >
+              {item.label}
+            </label>
+          </div>
+        ))}
       </div>
-    </>
+    </div>
   );
 }
 
-export default InputRadioComponent;
+export default InputRadioComponent;
\ No newline at end of file
diff --git a/components/ui/Form/index.tsx b/components/ui/Form/index.tsx
index 8311332..62ada32 100644
--- a/components/ui/Form/index.tsx
+++ b/components/ui/Form/index.tsx
@@ -4,7 +4,6 @@ import type { JSX } from "preact";
 // import Image from "apps/website/components/Image.tsx";
 // import IconComponent from "../Icons/IconGrid.tsx";
 import Script, { type Props } from "./script.tsx";
-import { withDefaultFacets } from "apps/vtex/utils/intelligentSearch.ts";
 
 // Implemente a seção
 function LoadComponent(
@@ -17,9 +16,6 @@ function LoadComponent(
   );
 }
 
-function FormComponent(
-  { sections, step }: JSX.IntrinsicElements["div"] & Props,
-) {
 function FormComponent(
   { sections, step }: JSX.IntrinsicElements["div"] & Props,
 ) {
@@ -50,44 +46,22 @@ function FormComponent(
                 <div
                   data-bar="progress"
                   className="h-[5px] bg-[#3BEDB2] rounded-full block"
-                >
-                </div>
+                ></div>
               </div>
             </div>
           </div>
           <div className="px-6 py-6 border-y border-gray-100 flex flex-col gap-12 h-full overflow-auto">
             {sections?.map((item, index) => (
-              // <div data-index={index} className="hidde">
               <div key={index}>
-              <div key={index}>
-                {
-                  /* <div className="grid gap-2">
-                  <h1 className="text-sm font-light text-primary">
-                    {sections[currentStep.value].text} 1 *
-                    Solicitar plano
-                  </h1>
-                  <h2 className="text-2xl font-semibold text-primary">
-                    {sections[currentStep.value].description}
-                    Primeiramente, qual o seu nome completo?
-                  </h2>
-                </div> */
-                }
-                {
-                  /* // Renderizando o componente
-                // {LoadComponent(item.section)} */
-                }
-                <LoadComponent
-                  {...item.section}
-                />
+                <LoadComponent {...item.section} />
               </div>
             ))}
           </div>
         </div>
       </div>
       <Script step={step} />
-      <Script step={step} />
     </>
   );
 }
 
-export default FormComponent;
+export default FormComponent;
\ No newline at end of file
diff --git a/components/ui/Form/script.tsx b/components/ui/Form/script.tsx
index 694c765..31cad75 100644
--- a/components/ui/Form/script.tsx
+++ b/components/ui/Form/script.tsx
@@ -1,5 +1,4 @@
 import { useScript } from "@deco/deco/hooks";
-
 export interface Props {
   step?: number;
 }
@@ -15,48 +14,49 @@ const setup = (_: Props) => {
       page.classList.toggle("block", index === currentStep);
       page.classList.toggle("hidden", index !== currentStep);
     });
-    console.log(`Etapa atual: ${currentStep}`);
+    validateInput();
   };
 
   const updateProgressBar = () => {
-    const progressBar = document.querySelector('[data-bar="progress"]') as HTMLElement; 
+    const progressBars = document.querySelectorAll('[data-bar="progress"]');
     const total = totalSteps();
 
-    console.log("TOTAL: " + total);
+    const initialProgress = currentStep === 0
+      ? 15
+      : (currentStep / (total - 1)) * 100;
 
-    if (!progressBar.style.background) {
-      progressBar.style.width = "15%";
-      console.log("aqui")
-    }
+    progressBars.forEach((progressBar) => {
+      const progressBarElement = progressBar as HTMLElement;
 
-    const progress = (currentStep / (total - 1)) * 100;
-    console.log("Barra de progresso: " + progress);
+      if (!progressBarElement.style.width && currentStep === 0) {
+        progressBarElement.style.width = "15%";
+      }
 
-    progressBar.style.background = "#000000";
-    progressBar.style.width = `${progress}%`;
+      progressBarElement.style.background = "#3BEDB2";
+      progressBarElement.style.width = `${initialProgress}%`;
+    });
   };
 
   const handleNext = () => {
     const total = totalSteps();
     if (currentStep < total - 1) {
       currentStep++;
-      console.log(`Indo para a próxima etapa: ${currentStep}`);
       showCurrentPage();
       updateProgressBar();
-
+  
       globalThis.scrollTo({
         top: stepElement[currentStep]?.offsetTop || 0,
         behavior: "smooth",
       });
     } else {
-      console.log("Você completou todos os formulários!");
+      window.location.href = '/me-liga/sucesso';
     }
   };
+  
 
   const handleBack = () => {
     if (currentStep > 0) {
       currentStep--;
-      console.log(`Voltando para a etapa anterior: ${currentStep}`);
       showCurrentPage();
       updateProgressBar();
 
@@ -65,10 +65,49 @@ const setup = (_: Props) => {
         behavior: "smooth",
       });
     } else {
-      console.log("Você está na primeira etapa!");
+      window.history.back();
     }
   };
 
+  const validateInput = () => {
+    const inputs = document.querySelectorAll("input");
+    const nextButtons = document.querySelectorAll('[data-next="next"]');
+
+    inputs.forEach((input, index) => {
+      const nextButton = nextButtons[index] as HTMLButtonElement | undefined;
+      if (!nextButton) return;
+
+      const handleInput = () => {
+        let isValid = false;
+
+        if (input.type === "radio") {
+          const radioGroup = document.querySelectorAll(
+            `input[data-radio="${input.getAttribute("data-radio")}"]`,
+          );
+          isValid = Array.from(radioGroup).some((radio) =>
+            (radio as HTMLInputElement).checked
+          );
+        } else {
+          isValid = (input as HTMLInputElement).value.trim().length > 0;
+        }
+
+        nextButton.disabled = !isValid;
+        nextButton.style.backgroundColor = isValid ? "#003330" : "#003330";
+        nextButton.style.opacity = isValid ? "1" : "0.1";
+        nextButton.innerHTML = isValid
+          ? `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z" fill="#3BEDB2"/>
+             </svg>`
+          : `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M17.92 11.6199C17.8724 11.4972 17.801 11.385 17.71 11.2899L12.71 6.28994C12.6168 6.1967 12.5061 6.12274 12.3842 6.07228C12.2624 6.02182 12.1319 5.99585 12 5.99585C11.7337 5.99585 11.4783 6.10164 11.29 6.28994C11.1968 6.38318 11.1228 6.49387 11.0723 6.61569C11.0219 6.73751 10.9959 6.86808 10.9959 6.99994C10.9959 7.26624 11.1017 7.52164 11.29 7.70994L14.59 10.9999H7C6.73478 10.9999 6.48043 11.1053 6.29289 11.2928C6.10536 11.4804 6 11.7347 6 11.9999C6 12.2652 6.10536 12.5195 6.29289 12.707C6.48043 12.8946 6.73478 12.9999 7 12.9999H14.59L11.29 16.2899C11.1963 16.3829 11.1219 16.4935 11.0711 16.6154C11.0203 16.7372 10.9942 16.8679 10.9942 16.9999C10.9942 17.132 11.0203 17.2627 11.0711 17.3845C11.1219 17.5064 11.1963 17.617 11.29 17.7099C11.383 17.8037 11.4936 17.8781 11.6154 17.9288C11.7373 17.9796 11.868 18.0057 12 18.0057C12.132 18.0057 12.2627 17.9796 12.3846 17.9288C12.5064 17.8781 12.617 17.8037 12.71 17.7099L17.71 12.7099C17.801 12.6148 17.8724 12.5027 17.92 12.3799C18.02 12.1365 18.02 11.8634 17.92 11.6199Z" fill="#3BEDB2"/>
+             </svg>`;
+      };
+
+      input.addEventListener("input", handleInput);
+      handleInput();
+    });
+  };
+
   const bindEvents = () => {
     const nextButtons = document.querySelectorAll('[data-next="next"]');
     const backButtons = document.querySelectorAll('[data-back="back"]');
@@ -87,18 +126,15 @@ const setup = (_: Props) => {
   updateProgressBar();
 };
 
-
 function FormSteps({ step }: Props) {
   return (
     <script
       type="module"
       dangerouslySetInnerHTML={{
         __html: useScript(setup, { step }),
-        __html: useScript(setup, { step }),
       }}
     />
   );
 }
 
-export default FormSteps;
-
+export default FormSteps;
\ No newline at end of file
diff --git a/components/ui/Galery/GaleryContent/index.tsx b/components/ui/Galery/GaleryContent/index.tsx
index ed12d0f..bcb1352 100644
--- a/components/ui/Galery/GaleryContent/index.tsx
+++ b/components/ui/Galery/GaleryContent/index.tsx
@@ -1,17 +1,19 @@
 import type { JSX } from "preact";
+import Script, { type Props } from "./script.tsx";
 
 import Image from "apps/website/components/Image.tsx";
 
 function GaleryContent({ items }: JSX.IntrinsicElements["div"] & Props) {
   return (
     <>
-      <section className="px-4 lg:px-10 w-full pb-[59px]">
-        <div className="overflow-x-scroll scrollbar-hide swiper-container">
+      <div className="px-4 lg:px-10 w-full pb-[59px]">
+        <div id="swiper-container" className="overflow-x-scroll scrollbar-hide">
           <div className="swiper-wrapper flex gap-x-5">
             {items.map((item, index) => (
               <div
                 className="swiper-slide"
                 key={index}
+                data-galery={String(index)}
               >
                 <article className="w-[315px] md:w-full flex flex-col border-t-2 border-white-20">
                   <p className="pt-[23px] text-base text-white opacity-80 text-left lg:leading-tight-21 lg:leading-tight-25">
@@ -35,9 +37,11 @@ function GaleryContent({ items }: JSX.IntrinsicElements["div"] & Props) {
             ))}
           </div>
         </div>
-      </section>
+      </div>
+
+      <Script />
     </>
   );
 }
 
-export default GaleryContent;
+export default GaleryContent;
\ No newline at end of file
diff --git a/components/ui/Galery/GaleryContent/script.tsx b/components/ui/Galery/GaleryContent/script.tsx
new file mode 100644
index 0000000..c6ac3e3
--- /dev/null
+++ b/components/ui/Galery/GaleryContent/script.tsx
@@ -0,0 +1,63 @@
+import { useScript } from "@deco/deco/hooks";
+
+declare global {
+  var Swiper: any;
+}
+
+export interface Props {}
+
+const setup = () => {
+
+  const getClassSwiper = document.getElementById("swiper-container");
+
+  new Swiper(getClassSwiper, {
+    slidesPerView: 1.8,
+    spaceBetween: 20,
+    breakpoints: {
+      768: {
+        slidesPerView: 3,
+        spaceBetween: 30,
+      },
+      1024: {
+        slidesPerView: 4,
+        spaceBetween: 40,
+      },
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+  });
+};
+
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+  const swiperScript = document.createElement("script");
+  swiperScript.src = "https://unpkg.com/swiper/swiper-bundle.min.js";
+  swiperScript.onload = () => {
+    const swiperStyles = document.createElement("link");
+    swiperStyles.rel = "stylesheet";
+    swiperStyles.href = "https://unpkg.com/swiper/swiper-bundle.min.css";
+    document.head.appendChild(swiperStyles);
+
+    setup();
+  };
+
+  document.body.appendChild(swiperScript);
+}
+
+function Galery({}: Props) {
+  return (
+    <script
+      type="module"
+      dangerouslySetInnerHTML={{
+        __html: useScript(setup, {}),
+      }}
+    />
+  );
+}
+
+export default Galery;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9edbf6d..498b7bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.2",
-        "swiper": "^11.1.14"
+        "swiper": "^11.2.1"
       }
     },
     "node_modules/@remix-run/router": {
@@ -105,9 +105,9 @@
       }
     },
     "node_modules/swiper": {
-      "version": "11.1.14",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
-      "integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==",
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
+      "integrity": "sha512-62G69+iQRIfUqTmJkWpZDcX891Ra8O9050ckt1/JI2H+0483g+gq0m7gINecDqMtDh2zt5dK+uzBRxGhGOOvQA==",
       "funding": [
         {
           "type": "patreon",
diff --git a/package.json b/package.json
index b75ce00..1b7fb72 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
-    "swiper": "^11.1.14"
+    "swiper": "^11.2.1"
   }
 }
diff --git a/sections/Final/Form/InputRadio.tsx b/sections/Final/Form/InputRadio.tsx
index 7e93c38..b7aef28 100644
--- a/sections/Final/Form/InputRadio.tsx
+++ b/sections/Final/Form/InputRadio.tsx
@@ -16,8 +16,8 @@ export interface Props {
    */
   text: string;
   /**
-   * @title Nome do formulário
-   * @description Escreva o nome do formulário (Necessário que seja um nome único no site)
+   * @title Chave
+   * @description Escreva o identificador do campo
    */
   name: string;
   /**
@@ -29,7 +29,7 @@ export interface Props {
 
 export default function Section({
   text,
-  name,
+  name = "name",
   inputRadio,
 }: Props) {
   return (
diff --git a/sections/Final/Headers/Openning.tsx b/sections/Final/Headers/Openning.tsx
index cdf76d2..c794be2 100644
--- a/sections/Final/Headers/Openning.tsx
+++ b/sections/Final/Headers/Openning.tsx
@@ -1,4 +1,11 @@
-export interface Props {
+import React from "react";
+import Openning from "../../../components/ui/Content/Openning/index.tsx";
+import { Section } from "deco/blocks/section.ts";
+
+/**
+ * @title {{{title}}}
+ */
+export interface Open {
   /**
    * @title Título
    * @description Escreva aqui o título da abertura
@@ -9,11 +16,6 @@ export interface Props {
    * @description Escreva a palavra ou frase com cor
    */
   highlight?: string;
-  // /**
-  //  * @title Subtítulo
-  //  * @description Escreva aqui o subtítulo da abertura - Desktop
-  //  */
-  // subtitleDesktop?: string;
   /**
    * @title Subtítulo
    * @description Escreva aqui o subtítulo da abertura
@@ -21,78 +23,27 @@ export interface Props {
   subtitleDescription?: string;
 }
 
-// const texts = [
-//   "Gestão inteligente para economizar",
-//   "Gestão inteligente para lucrar",
-//   "Gestão inteligente para sonhar mais"
-// ];
+export interface Props {
+  /**
+   * @title Título Principal
+   * @description Escreva aqui o título principal da seção
+   */
+  title?: string;
+  /**
+   * @title Títulos de Abertura
+   * @description Lista de títulos de abertura com suas propriedades
+   */
+  open?: Open[];
+}
 
 export default function Section({
   title = "",
-  highlight = "",
-  // subtitleDesktop = "",
-  subtitleDescription = "",
+  open = [],
 }: Props) {
-  // const [currentTextIndex, setCurrentTextIndex] = useState(0);
-  // const [animatedText, setAnimatedText] = useState(texts[0]);
-  // const navigate = useNavigate();
-
-  // useEffect(() => {
-  //   const intervalId = setInterval(() => {
-  //     setCurrentTextIndex((prevIndex: number) => {
-  //       const nextIndex = (prevIndex + 1) % texts.length;
-  //       setAnimatedText(texts[nextIndex]);
-  //       return nextIndex;
-  //     });
-  //   }, 3000);
-
-  //   const timeoutId = setTimeout(() => {
-  //     navigate('/');
-  //   }, 9000);
-
-  //   return () => {
-  //     clearInterval(intervalId);
-  //     clearTimeout(timeoutId);
-  //   };
-  // }, [navigate]);
-
-  const getHighlightedText = (text: string, highlight: string) => {
-    if (!highlight) return text;
-
-    const parts = text.split(new RegExp(`(${highlight})`, "gi"));
-    return parts.map((part, index) =>
-      part.toLowerCase() === highlight.toLowerCase()
-        ? <span key={index} className="text-accent">{part}</span>
-        : part
-    );
-  };
-
   return (
-    <section className="bg-sacramentoState h-[80vh] flex">
-      <div className="ml-4 md:ml-10 w-full flex flex-col items-start justify-center">
-        <div className="w-full max-w-[289px] md:max-w-[548px]">
-          <p className="font-sans text-white font-medium text-[32px] lg:text-[64px] leading-tight-35 lg:leading-tight-70 tracking-tight-2">
-            {getHighlightedText(title, highlight)}
-          </p>
-        </div>
-        <div className="pt-[10px] md:pt-[21px] max-w-[320px] md:max-w-none w-full">
-          <p className="text-base md:text-lg font-sans font-normal leading-tight-18 md:leading-tight-25 text-white-80">
-            {subtitleDescription}
-          </p>
-          {
-            /*  <p className="hidden md:block text-white-80 font-sans font-normal leading-tight-25">
-                {subtitleDesktop}
-              </p>
-            */
-          }
-        </div>
-        {
-          /* texto animado
-          <div className="mt-5">
-            <p className="text-white text-xl font-normal">{animatedText}</p>
-          </div> */
-        }
-      </div>
-    </section>
+    <Openning
+      title={title}
+      open={open}
+    />
   );
-}
+}
\ No newline at end of file
diff --git a/sections/FormSection.tsx b/sections/FormSection.tsx
index a8167d7..1a0803a 100644
--- a/sections/FormSection.tsx
+++ b/sections/FormSection.tsx
@@ -22,12 +22,9 @@ export interface Props {
 function LoadComponent(
   { Component, props }: Section,
   index,
-  index,
 ) {
   props.step = index;
 
-  props.step = index;
-
   return (
     <div>
       <Component {...props} />
@@ -39,13 +36,12 @@ function FormSection(
   { sections }: Props,
 ) {
   return (
-      <div data-form="formulario">
-        {sections?.map((item, index) => (
-          LoadComponent(item.section, index)
-        ))}
-      </div>
+    <div data-form="formulario">
+      {sections?.map((item, index) => (
+        LoadComponent(item.section, index)
+      ))}
+    </div>
   );
 }
 
-export default FormSection;
-
+export default FormSection;
\ No newline at end of file
diff --git a/sections/FormSteps.tsx b/sections/FormSteps.tsx
index e0508a6..5009af2 100644
--- a/sections/FormSteps.tsx
+++ b/sections/FormSteps.tsx
@@ -36,4 +36,4 @@ export default function FormSteps({ sections, step }: Props) {
       <FormStepsComponent sections={sections} step={step} />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/tailwind.css b/tailwind.css
index 4c605b8..58ec72a 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -70,4 +70,19 @@
   .scrollbar-hide::-webkit-scrollbar {
     display: none;  /* Chrome, Safari, and Opera */
   }
+
+  @keyframes slideInFromLeft {
+    0% {
+      transform: translateX(-100%);
+      opacity: 80;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  .slide-in-left {
+    animation: slideInFromLeft 0.8s ease-out forwards;
+  }
 }
\ No newline at end of file