wip form

superpage/astro.config.mjs

@@ -17,8 +17,8 @@ export default defineConfig({
     format: "file",
   },
   integrations: [
-    pagefind(),
     react(),
+    pagefind(),
     mdx(),
     sitemap(),
     icon(),

superpage/package-lock.json

@@ -3823,9 +3823,9 @@
       }
     },
     "node_modules/fdir": {
-      "version": "6.4.3",
+      "version": "6.4.4",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -7286,12 +7286,12 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.12",
+      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
-      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2"
       },
       "engines": {
@@ -7771,17 +7771,17 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.0",
+      "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.4.tgz",
-      "integrity": "sha512-9aC0n4pr6hIbvi1YOpFjwQ+QOTGssvbJKoeYkuHHGWwlXfdxQlI8L2qNMo9awEEcCPSiS+5mJZk5jH1PAqoDeQ==",
+      "integrity": "sha512-BiReIiMS2fyFqbqNT/Qqt4CVITDU9M9vE+DKcVAsB+ZV0wvTKd+3hMbkpxz1b+NmEDMegpVbisKiAZOnvO92Sw==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
         "rollup": "^4.34.9",
-        "tinyglobby": "^0.2.12"
+        "tinyglobby": "^0.2.13"
       },
       "bin": {
         "vite": "bin/vite.js"

superpage/src/components/Course/Plans.astro

@@ -3,13 +3,20 @@ import Container from "~/components/Container.astro";
 import Form from "./Contact.jsx";
 ---
 
-<div>
+<div
-    <div class="relative z-40" style="display: none;">
+    x-data="{ open: false }"
-        <div class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter">
+    x-on:keydown.esc.prevent.stop="open = false"
+    x-effect="document.body.classList.toggle('overflow-hidden', open)"
+>
+    <div style="display: none;" x-show="open">
+        <div
+            class="fixed inset-0 flex justify-center items-center p-2.5 z-40 overflow-y-auto"
+        >
+            <div
+                x-on:click="open = false"
+                class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
+            >
             </div>
-
-        <div class="fixed inset-0 overflow-y-auto">
-            <div class="flex justify-center items-center h-full max-lg:p-2.5">
             <div
                 class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow"
             >
@@ -20,7 +27,6 @@ import Form from "./Contact.jsx";
             </div>
         </div>
     </div>
-    </div>
 
     <Container {...Astro.props}>
         <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
@@ -48,12 +54,12 @@ import Form from "./Contact.jsx";
                         Ideal para empresas que treinam continuamente e precisam
                         de agilidade.
                     </p>
-                    <a
+                    <button
-                        href="#"
+                        x-on:click="open = true"
                         class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
-                    </a>
+                    </button>
                 </div>
                 <div
                     class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
@@ -76,12 +82,12 @@ import Form from "./Contact.jsx";
                     <p class="mt-auto">
                         Solução sob medida, direto no seu ambiente de trabalho.
                     </p>
-                    <a
+                    <button
-                        href="#"
+                        x-on:click="open = true"
                         class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
-                    </a>
+                    </button>
                 </div>
                 <div
                     class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
@@ -102,12 +108,12 @@ import Form from "./Contact.jsx";
                     <p class="mt-auto">
                         Seu time com o nosso conteúdo, na sua plataforma.
                     </p>
-                    <a
+                    <button
-                        href="#"
+                        x-on:click="open = true"
                         class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                     >
                         Saiba mais
-                    </a>
+                    </button>
                 </div>
             </div>
         </section>

superpage/src/styles/app.css

@@ -8,7 +8,8 @@
 
 html,
 body {
-    @apply text-white bg-black scroll-pt-22 lg:scroll-pt-32 antialiased;
+    @apply text-white bg-black antialiased;
+    @apply scroll-pt-22 lg:scroll-pt-32;
 }
 
 /* Pagefind */