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] 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