fix label

superpage/package-lock.json

@@ -24,6 +24,7 @@
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-hook-form": "^7.56.0",
+        "react-number-format": "^5.4.4",
         "smartypants": "^0.2.2",
         "tailwindcss": "^4.1.5",
         "vanilla-cookieconsent": "^3.1.0",
@@ -6769,6 +6770,16 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-number-format": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

superpage/package.json

@@ -25,6 +25,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.0",
+    "react-number-format": "^5.4.4",
     "smartypants": "^0.2.2",
     "tailwindcss": "^4.1.5",
     "vanilla-cookieconsent": "^3.1.0",

superpage/src/components/Course/FlyoutMenu.astro

@@ -46,7 +46,7 @@ const relatedCourses = data?.relatedCourses
                     </button>
                     <div class="lg:w-1/2 mx-auto p-5 lg:py-24">
                         <search class="space-y-5">
-                            <label for="search" class="block">
+                            <label class="block">
                                 <h1
                                     class="text-pretty font-semibold text-3xl lg:text-4xl"
                                 >

superpage/src/components/Course/Solutions.astro

@@ -36,7 +36,7 @@ import Container from "~/components/Container.astro";
                     <button
                         data-toggle="modal"
                         data-target="#solutionmodal"
-                        data-label="EDUSEG® FLEXÍVEL"
+                        data-detail="EDUSEG® FLEXÍVEL"
                         class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
@@ -68,7 +68,7 @@ import Container from "~/components/Container.astro";
                     <button
                         data-toggle="modal"
                         data-target="#solutionmodal"
-                        data-label="EDUSEG® IN-COMPANY"
+                        data-detail="EDUSEG® IN-COMPANY"
                         class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
@@ -98,7 +98,7 @@ import Container from "~/components/Container.astro";
                     <button
                         data-toggle="modal"
                         data-target="#solutionmodal"
-                        data-label="EDUSEG® CONTEÚDO"
+                        data-detail="EDUSEG® CONTEÚDO"
                         class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
@@ -120,22 +120,3 @@ import Container from "~/components/Container.astro";
         </div>
     </section>
 </Container>
-
-<script>
-    const buttons = document.querySelectorAll(
-        "[data-toggle=modal]",
-    ) as NodeListOf<HTMLButtonElement>;
-
-    buttons.forEach((e) => {
-        e.addEventListener("click", (e) => {
-            const button = e.target as HTMLButtonElement;
-            // Dispatch a custom event with the selected solution,
-            // so a React component can listen to it using `window.addEventListener`.
-            window.dispatchEvent(
-                new CustomEvent("custom_event:react_form", {
-                    detail: button.dataset.label,
-                }),
-            );
-        });
-    });
-</script>

superpage/src/components/Features.astro

@@ -52,12 +52,14 @@ import homemdenegocios from "~/assets/homem-de-negocios.png";
                 </ul>
 
                 <div class="text-center">
-                    <a
+                    <button
-                        href="#contato"
+                        data-toggle="modal"
+                        data-target="#solutionmodal"
+                        data-detail="Agendar uma demonstração"
                         class="text-blue-400 underline hover:no-underline"
                     >
                         Agendar uma demonstração
-                    </a>
+                    </button>
                 </div>
             </div>
         </div>

superpage/src/components/Modal.astro

@@ -24,6 +24,9 @@ import { Icon } from "astro-icon/components";
     const modals = document.querySelectorAll(
         "[data-toggle=modal]",
     ) as NodeListOf<HTMLButtonElement>;
+    const buttons = document.querySelectorAll(
+        "[data-toggle=modal]",
+    ) as NodeListOf<HTMLButtonElement>;
 
     function openModal(modal: HTMLDialogElement) {
         const close = modal.querySelector("[data-dismiss]");
@@ -57,6 +60,19 @@ import { Icon } from "astro-icon/components";
         el.addEventListener("click", () => openModal(modal));
     });
 
+    buttons.forEach((e) => {
+        e.addEventListener("click", (e) => {
+            const button = e.target as HTMLButtonElement;
+            // Dispatch a custom event with the selected solution,
+            // so a React component can listen to it using `window.addEventListener`.
+            window.dispatchEvent(
+                new CustomEvent("custom_event:react_form", {
+                    detail: button.dataset.detail,
+                }),
+            );
+        });
+    });
+
     window.addEventListener("modal:open", function (event: Event) {
         const customEvent = event as CustomEvent<HTMLDialogElement>;
         const modal = customEvent.detail;

superpage/src/pages/index.astro

@@ -23,7 +23,7 @@ import mulhercomepi from "~/assets/mulher-com-epi.png";
                         class="w-full xl:w-4/6 max-xl:p-5 space-y-6 lg:space-y-12"
                     >
                         <search class="space-y-1.5">
-                            <label for="search" class="block">
+                            <label class="block">
                                 <h1
                                     class="text-pretty font-semibold text-3xl lg:text-4xl"
                                 >