From aaf4c1e9eeb4bf5a69a47eb106ce8d947932b5cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Mon, 28 Apr 2025 20:16:00 -0300
Subject: [PATCH] wio

---
 .../src/components/Course/HeaderNav.astro     |  2 +-
 superpage/src/components/Course/Plans.astro   | 11 ++++++++
 superpage/src/components/Course/index.ts      |  1 +
 superpage/src/content/courses/lei-lucas.mdx   |  3 +++
 .../nr-18-plataforma-de-trabalho-aereo.mdx    |  3 +++
 superpage/src/pages/[slug].astro              | 26 +++++++++++++------
 6 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 superpage/src/components/Course/Plans.astro

diff --git a/superpage/src/components/Course/HeaderNav.astro b/superpage/src/components/Course/HeaderNav.astro
index 1903f05..aa1bb0a 100644
--- a/superpage/src/components/Course/HeaderNav.astro
+++ b/superpage/src/components/Course/HeaderNav.astro
@@ -15,7 +15,7 @@ const { title } = Astro.props;
     class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"
     x-data="{ open: false }"
     x-on:keydown.esc.prevent.stop="open = false"
-    x-effect="document.documentElement.classList.toggle('overflow-hidden', open)"
+    x-effect="document.body.classList.toggle('overflow-hidden', open)"
 >
     <Container class="flex items-center">
         <button
diff --git a/superpage/src/components/Course/Plans.astro b/superpage/src/components/Course/Plans.astro
new file mode 100644
index 0000000..5e7e3c9
--- /dev/null
+++ b/superpage/src/components/Course/Plans.astro
@@ -0,0 +1,11 @@
+---
+import Container from "~/components/Container.astro";
+---
+
+<Container id="planos">
+    <div class="flex min-h-72 w-4/6 mx-auto">
+        <div class="border border-white/10 p-5 rounded-2xl w-3/6">Plan A</div>
+        <div class="text-black bg-lime-400 p-5 rounded-2xl w-4/6">Plan B</div>
+        <div class="border border-white/10 p-5 rounded-2xl w-3/6">Plan C</div>
+    </div>
+</Container>
diff --git a/superpage/src/components/Course/index.ts b/superpage/src/components/Course/index.ts
index d49f10c..86e6a3c 100644
--- a/superpage/src/components/Course/index.ts
+++ b/superpage/src/components/Course/index.ts
@@ -5,3 +5,4 @@ export { default as Features } from "./Features.astro";
 export { default as Modules } from "./Modules.astro";
 export { default as Trainer } from "./Trainer.astro";
 export { default as Faq } from "./Faq.astro";
+export { default as Plans } from "./Plans.astro";
diff --git a/superpage/src/content/courses/lei-lucas.mdx b/superpage/src/content/courses/lei-lucas.mdx
index 15f2c92..74b38c6 100644
--- a/superpage/src/content/courses/lei-lucas.mdx
+++ b/superpage/src/content/courses/lei-lucas.mdx
@@ -18,8 +18,11 @@ import {
   Trainer,
   Contact,
   Faq,
+  Plans
 } from "~/components/Course";
 
+<Plans />
+
 <Clients />
 
 <Features />
diff --git a/superpage/src/content/courses/nr-18-plataforma-de-trabalho-aereo.mdx b/superpage/src/content/courses/nr-18-plataforma-de-trabalho-aereo.mdx
index 5aedb99..6029780 100644
--- a/superpage/src/content/courses/nr-18-plataforma-de-trabalho-aereo.mdx
+++ b/superpage/src/content/courses/nr-18-plataforma-de-trabalho-aereo.mdx
@@ -22,8 +22,11 @@ import {
   Cert,
   Trainer,
   Contact,
+  Plans,
 } from "~/components/Course";
 
+<Plans />
+
 <Clients />
 
 <Features />
diff --git a/superpage/src/pages/[slug].astro b/superpage/src/pages/[slug].astro
index 2f338b5..a03de6e 100644
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -73,7 +73,7 @@ const { Content } = await render(course);
                     </p>
                     <ul class="lg:flex gap-3" data-pagefind-ignore="all">
                         <li class="flex gap-1">
-                            <Icon name="clock" class="size-5" />
+                            <Icon name="clock" class="size-5 mt-0.5" />
                             <span
                                 >Carga horária de {data.course.hours} horas</span
                             >
@@ -82,7 +82,7 @@ const { Content } = await render(course);
                         <li class="flex gap-1">
                             <Icon
                                 name="check-badge"
-                                class="size-5 text-blue-400"
+                                class="size-5 text-blue-400 mt-0.5"
                             />
                             <span>
                                 Certificado com assinatura digital
@@ -97,14 +97,24 @@ const { Content } = await render(course);
                     </ul>
 
                     <div
-                        class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16"
+                        class="flex max-lg:flex-col justify-center items-start gap-2.5 lg:gap-8 lg:mt-16"
                     >
-                        <a
-                            href="#"
-                            class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150"
+                        <div
+                            class="flex flex-col justify-center gap-2.5 max-lg:w-full"
                         >
-                            Contratar agora
-                        </a>
+                            <a
+                                href="#"
+                                class="text-black font-semibold bg-lime-400 rounded p-2.5 max-lg:text-center hover:bg-white hover:text-black"
+                            >
+                                Contratar R$99 p/ matrícula
+                            </a>
+                            <a
+                                href="#planos"
+                                class="text-blue-400 underline hover:no-underline text-center"
+                            >
+                                Ver mais formas de contratar
+                            </a>
+                        </div>
                         <a
                             href="http://bit.ly/3RlROu6"
                             class="flex flex-col hover:outline rounded outline-offset-2"