wio

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

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>

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";

superpage/src/content/courses/lei-lucas.mdx

@@ -18,8 +18,11 @@ import {
   Trainer,
   Contact,
   Faq,
+  Plans
 } from "~/components/Course";
 
+<Plans />
+
 <Clients />
 
 <Features />

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

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"
+                    >
+                        <div
+                            class="flex flex-col justify-center gap-2.5 max-lg:w-full"
                         >
                             <a
                                 href="#"
-                            class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150"
+                                class="text-black font-semibold bg-lime-400 rounded p-2.5 max-lg:text-center hover:bg-white hover:text-black"
                             >
-                            Contratar agora
+                                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"