sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix modal

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-30 11:48:06 -03:00
parent 4dc930786e
commit 142bcf410a
2 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
superpage/src/components/Course/Plans.astro
View File

@@ -1,4 +1,5 @@
---
import { Icon } from "astro-icon/components";
import Container from "~/components/Container.astro";
import Form from "./Contact.jsx";
---
@@ -8,18 +9,29 @@ import Form from "./Contact.jsx";
x-on:keydown.esc.prevent.stop="open = false"
x-effect="document.body.classList.toggle('overflow-hidden', open)"
>
{/* Modal */}
<div style="display: none;" x-show="open">
<div class="fixed inset-0 z-40 overflow-y-auto">
{/* Backdrop */}
<div
x-on:click="open = false"
aria-hidden="true"
class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
>
</div>
<div class="flex justify-center items-center p-2.5">
<div class="flex justify-center items-center lg:h-full 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"
class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow relative"
>
{/* Close button */}
<button
x-on:click="open = false"
class="cursor-pointer absolute top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full"
>
<Icon name="x-mark" class="size-4" />
</button>
<h1 class="text-3xl lg:text-4xl font-medium">
Preencha os dados da sua empresa
</h1>
@@ -28,6 +40,7 @@ import Form from "./Contact.jsx";
</div>
</div>
</div>
{/* Modal End */}
<Container {...Astro.props}>
<section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
@@ -57,7 +70,7 @@ import Form from "./Contact.jsx";
</p>
<button
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"
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
>
Saiba mais
</button>
@@ -85,7 +98,7 @@ import Form from "./Contact.jsx";
</p>
<button
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"
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
>
Saiba mais
</button>
@@ -111,7 +124,7 @@ import Form from "./Contact.jsx";
</p>
<button
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"
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
>
Saiba mais
</button>