diff --git a/superpage/.prettierrc b/superpage/.prettierrc
index e5e24fd..3698dd3 100644
--- a/superpage/.prettierrc
+++ b/superpage/.prettierrc
@@ -1,5 +1,4 @@
 {
-  "tabWidth": 2,
   "useTabs": false,
   "semi": false,
   "singleQuote": true,
diff --git a/superpage/astro.config.mjs b/superpage/astro.config.mjs
index f765ea7..b6620e2 100644
--- a/superpage/astro.config.mjs
+++ b/superpage/astro.config.mjs
@@ -5,6 +5,7 @@ import react from '@astrojs/react'
 import tailwindcss from '@tailwindcss/vite'
 import partytown from '@astrojs/partytown'
 import sitemap from '@astrojs/sitemap'
+import alpinejs from '@astrojs/alpinejs'
 import icon from 'astro-icon'
 
 // https://astro.build/config
@@ -14,6 +15,7 @@ export default defineConfig({
     react(),
     sitemap(),
     icon(),
+    alpinejs(),
     partytown({
       config: {
         forward: ['dataLayer.push', 'fbq'],
diff --git a/superpage/package-lock.json b/superpage/package-lock.json
index 78ed8f8..711e48b 100644
--- a/superpage/package-lock.json
+++ b/superpage/package-lock.json
@@ -8,6 +8,7 @@
       "name": "eduseg",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/alpinejs": "^0.4.6",
         "@astrojs/partytown": "^2.1.4",
         "@astrojs/react": "^4.2.1",
         "@astrojs/sitemap": "^3.3.0",
@@ -16,8 +17,10 @@
         "@heroicons/react": "^2.2.0",
         "@tailwindcss/vite": "^4.0.13",
         "@tanstack/react-query": "^5.68.0",
+        "@types/alpinejs": "^3.13.11",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
+        "alpinejs": "^3.14.9",
         "astro": "^5.7.2",
         "astro-icon": "^1.1.5",
         "axios": "^1.8.3",
@@ -72,6 +75,16 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@astrojs/alpinejs": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/@astrojs/alpinejs/-/alpinejs-0.4.6.tgz",
+      "integrity": "sha512-uogG08bVN8ER8ANVAmfipUw3tZMk+SrZICtH5NMHmsDnSIuLSrXNa9+rCbAXHe/pbTfNUvlp5gE9jSxbd0KYFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/alpinejs": "^3.0.0",
+        "alpinejs": "^3.0.0"
+      }
+    },
     "node_modules/@astrojs/compiler": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.11.0.tgz",
@@ -2233,6 +2246,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/alpinejs": {
+      "version": "3.13.11",
+      "resolved": "https://registry.npmjs.org/@types/alpinejs/-/alpinejs-3.13.11.tgz",
+      "integrity": "sha512-3KhGkDixCPiLdL3Z/ok1GxHwLxEWqQOKJccgaQL01wc0EVM2tCTaqlC3NIedmxAXkVzt/V6VTM8qPgnOHKJ1MA==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2409,6 +2428,21 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -2421,6 +2455,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/alpinejs": {
+      "version": "3.14.9",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.9.tgz",
+      "integrity": "sha512-gqSOhTEyryU9FhviNqiHBHzgjkvtukq9tevew29fTj+ofZtfsYriw4zPirHHOAy9bw8QoL3WGhyk7QqCh5AYlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
diff --git a/superpage/package.json b/superpage/package.json
index dd63837..c6e8806 100644
--- a/superpage/package.json
+++ b/superpage/package.json
@@ -9,6 +9,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/alpinejs": "^0.4.6",
     "@astrojs/partytown": "^2.1.4",
     "@astrojs/react": "^4.2.1",
     "@astrojs/sitemap": "^3.3.0",
@@ -17,8 +18,10 @@
     "@heroicons/react": "^2.2.0",
     "@tailwindcss/vite": "^4.0.13",
     "@tanstack/react-query": "^5.68.0",
+    "@types/alpinejs": "^3.13.11",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
+    "alpinejs": "^3.14.9",
     "astro": "^5.7.2",
     "astro-icon": "^1.1.5",
     "axios": "^1.8.3",
diff --git a/superpage/src/components/Accordion.astro b/superpage/src/components/Accordion.astro
index e69de29..e82ba17 100644
--- a/superpage/src/components/Accordion.astro
+++ b/superpage/src/components/Accordion.astro
@@ -0,0 +1,6 @@
+<details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open>
+    <summary class="text-sm leading-6 font-semibold text-gray-900 select-none">Why do they call it Ovaltine?</summary>
+    <div class="mt-3 text-sm leading-6 text-gray-600">
+        <p>The mug is round. The jar is round. They should call it Roundtine.</p>
+    </div>
+</details>
diff --git a/superpage/src/components/Carousel.astro b/superpage/src/components/Carousel.astro
index 5726a80..569bd48 100644
--- a/superpage/src/components/Carousel.astro
+++ b/superpage/src/components/Carousel.astro
@@ -5,48 +5,48 @@ const { items = [] } = Astro.props
 ---
 
 <div id="carousel" class="relative">
-  <button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
-    <ChevronLeftIcon className="w-6" />
-  </button>
+    <button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
+        <ChevronLeftIcon className="w-6" />
+    </button>
 
-  <button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
-    <ChevronRightIcon className="w-6" />
-  </button>
+    <button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
+        <ChevronRightIcon className="w-6" />
+    </button>
 
-  <div
-    class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
-  >
-    {
-      items.map((Component, idx) => (
-        <div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0" key={idx}>
-          <Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
-        </div>
-      ))
-    }
-  </div>
+    <div
+        class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
+    >
+        {
+            items.map((Component, idx) => (
+                <div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0">
+                    <Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
+                </div>
+            ))
+        }
+    </div>
 </div>
 
 <script>
-  const carousel = document.getElementById('carousel')
-  const slides = carousel.querySelectorAll('.snap-center')
-  let currentIndex = 0
+    const carousel = document.getElementById('carousel')
+    const slides = carousel.querySelectorAll('.snap-center')
+    let currentIndex = 0
 
-  const scrollToSlide = (index) => {
-    if (index >= 0 && index < slides.length) {
-      slides[index].scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'center',
-      })
-      currentIndex = index
+    const scrollToSlide = (index) => {
+        if (index >= 0 && index < slides.length) {
+            slides[index].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            })
+            currentIndex = index
+        }
     }
-  }
 
-  document.getElementById('prev').addEventListener('click', () => {
-    scrollToSlide(currentIndex - 1)
-  })
+    document.getElementById('prev').addEventListener('click', () => {
+        scrollToSlide(currentIndex - 1)
+    })
 
-  document.getElementById('next').addEventListener('click', () => {
-    scrollToSlide(currentIndex + 1)
-  })
+    document.getElementById('next').addEventListener('click', () => {
+        scrollToSlide(currentIndex + 1)
+    })
 </script>
diff --git a/superpage/src/components/HeaderNav.astro b/superpage/src/components/HeaderNav.astro
index 3e0d5e9..52f424a 100644
--- a/superpage/src/components/HeaderNav.astro
+++ b/superpage/src/components/HeaderNav.astro
@@ -1,15 +1,57 @@
 ---
+import { Icon } from 'astro-icon/components'
 import Container from './Container.astro'
 ---
 
-<nav class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm">
-  <Container class="flex items-center">
-    <!-- <Menu recentCourses={courses} client:load /> -->
+<nav
+    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"
+>
+    <Container class="flex items-center">
+        <button
+            class="text-black font-semibold cursor-pointer flex items-center gap-1 hover:outline-2 rounded"
+            x-bind:aria-expanded="open"
+            x-on:click="open = true"
+            aria-haspopup="true"
+        >
+            <div class="truncate max-w-36 sm:max-w-72 md:max-w-124">NR-18 PEMT Plataforma Móvel de Trabalho</div>
+            <Icon name="chevron" aria-hidden="true" class="w-4" />
+        </button>
 
-    <button
-      class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
+        <button
+            class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
+        >
+            Contratar agora
+        </button>
+    </Container>
+
+    <div
+        x-cloak
+        x-show="open"
+        x-on:click.outside="open = false"
+        role="menu"
+        class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm"
+        style="display: none"
     >
-      Contratar agora
-    </button>
-  </Container>
+        <Container class="text-black relative xl:w-10/12 2xl:w-5xl">
+            <button
+                class="absolute border border-black cursor-pointer rounded-full -top-3.5 2xl:-top-21.5 right-2.5"
+                title="Fechar"
+                aria-hidden={true}
+                x-on:click="open = false"
+            >
+                <Icon name="xmark" />
+            </button>
+
+            <div class="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
+                <span>Curso de formação</span>
+                <h1 class="text-xl lg:text-2xl">NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</h1>
+            </div>
+
+            <div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
+                <h6 class="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>
+            </div>
+        </Container>
+    </div>
 </nav>
diff --git a/superpage/src/icons/chevron.svg b/superpage/src/icons/chevron.svg
new file mode 100644
index 0000000..78e3619
--- /dev/null
+++ b/superpage/src/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 22 13">
+    <path stroke-width="2" d="m1 1 10 10L21 1"/>
+</svg>
diff --git a/superpage/src/icons/xmark.svg b/superpage/src/icons/xmark.svg
new file mode 100644
index 0000000..35717d8
--- /dev/null
+++ b/superpage/src/icons/xmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>
diff --git a/superpage/src/pages/[slug].astro b/superpage/src/pages/[slug].astro
index 7a18f1b..d997ee6 100644
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -7,233 +7,238 @@ import { Icon } from 'astro-icon/components'
 import Layout from '~/layouts/Layout.astro'
 import Container from '~/components/Container.astro'
 import Carousel from '~/components/Carousel.astro'
-import placeholder from '~/assets/placeholder.png'
-import mulherdenegocios from '~/assets/mulher-de-negocios.png'
-import homemdenegocios from '~/assets/homem-de-negocios.png'
 import Kordsa from '~/components/logos/Kordsa.astro'
 import Semeq from '~/components/logos/Semeq.astro'
 import Natura from '~/components/logos/Natura.astro'
 import Nissan from '~/components/logos/Nissan.astro'
 import Manserv from '~/components/logos/Manserv.astro'
 
+import placeholder from '~/assets/placeholder.png'
+import mulherdenegocios from '~/assets/mulher-de-negocios.png'
+import homemdenegocios from '~/assets/homem-de-negocios.png'
+
 import { getCollection, getEntry } from 'astro:content'
 
 export async function getStaticPaths() {
-  const courses = await getCollection('courses', ({ data }) => data.draft != true)
+    const courses = await getCollection('courses', ({ data }) => data.draft != true)
 
-  return courses.map((course) => {
-    return {
-      params: { slug: course.id },
-      props: { course },
-    }
-  })
+    return courses.map((course) => {
+        return {
+            params: { slug: course.id },
+            props: { course },
+        }
+    })
 }
 
 const {
-  course: { data },
+    course: { data },
 } = Astro.props
 
 const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null
 ---
 
 <Fragment slot="head">
-  <title>{data.title}</title>
+    <title>{data.title}</title>
 </Fragment>
 
 <Layout>
-  <div class="space-y-6 lg:space-y-24">
-    <Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6">
-      <Picture
-        src={data?.img ? data.img : placeholder}
-        alt={data.title}
-        formats={['webp']}
-        class="max-lg:hidden max-w-116 grayscale-15"
-      />
-      <section class="lg:py-24">
-        <div class="space-y-5">
-          <span class="font-medium">
-            {data.course.reciclagem ? <>Curso de reciclagem</> : <>Curso de formação</>}
-          </span>
-          <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
-            {data.title}
-          </h1>
-          <p class="text-base/6">
-            {data.summary}
-            <a href="#modulos" class="text-blue-400 *:hover:underline">
-              <sup>[1]</sup>
-            </a>
-          </p>
-          <ul class="lg:flex gap-3">
-            <li class="flex gap-1">
-              <ClockIcon className="w-5" />
-              <span>Carga horária de {data.course.hours} horas</span>
-            </li>
+    <div class="space-y-6 lg:space-y-24">
+        <Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6">
+            <Picture
+                src={data?.img ? data.img : placeholder}
+                alt={data.title}
+                formats={['webp']}
+                class="max-lg:hidden max-w-116 grayscale-15"
+            />
+            <section class="lg:py-24">
+                <div class="space-y-5">
+                    <span class="font-medium">
+                        {data.course.reciclagem ? <>Curso de reciclagem</> : <>Curso de formação</>}
+                    </span>
+                    <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
+                        {data.title}
+                    </h1>
+                    <p class="text-base/6">
+                        {data.summary}
+                        <a href="#modulos" class="text-blue-400 *:hover:underline">
+                            <sup>[1]</sup>
+                        </a>
+                    </p>
+                    <ul class="lg:flex gap-3">
+                        <li class="flex gap-1">
+                            <ClockIcon className="w-5" />
+                            <span>Carga horária de {data.course.hours} horas</span>
+                        </li>
 
-            <li class="flex gap-1">
-              <CheckBadgeIcon className="w-5 fill-blue-400" />
-              <span>
-                Certificado com assinatura digital
-                <a href="#certificado" class="text-blue-400 *:hover:underline">
-                  <sup>[2]</sup>
-                </a>
-              </span>
-            </li>
-          </ul>
+                        <li class="flex gap-1">
+                            <CheckBadgeIcon className="w-5 fill-blue-400" />
+                            <span>
+                                Certificado com assinatura digital
+                                <a href="#certificado" class="text-blue-400 *:hover:underline">
+                                    <sup>[2]</sup>
+                                </a>
+                            </span>
+                        </li>
+                    </ul>
 
-          <div class="flex max-lg:flex-col justify-center 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"
-            >
-              Contratar agora
-            </a>
-            <a
-              href="http://bit.ly/3RlROu6"
-              class="flex flex-col hover:outline rounded outline-offset-3"
-              target="_blank"
-            >
-              <div class="flex items-center gap-1">
-                <span class="font-bold">4.7</span>
-                <ul class="flex">
-                  <li>
-                    <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
-                  </li>
-                  <li>
-                    <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
-                  </li>
-                  <li>
-                    <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
-                  </li>
-                  <li>
-                    <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
-                  </li>
-                  <li><StarIcon className="w-4" /></li>
-                </ul>
-              </div>
-              <span>66 avaliações no Google</span>
-            </a>
-          </div>
-        </div>
-      </section>
-    </Container>
-
-    <Container class="lg:text-center space-y-2.5 lg:space-y-6">
-      <h2 class="text-pretty font-semibold text-4xl">Alguns clientes que acreditam em nós</h2>
-      <Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
-    </Container>
-
-    <Container>
-      <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
-        <div
-          class="bg-linear-to-tr from-lime-400/50 to-lime-300 rounded-2xl p-5 relative h-136 max-lg:hidden -m-px max-xl:overflow-hidden"
-        >
-          <Picture
-            alt="Homem de negócios"
-            formats={['webp']}
-            src={homemdenegocios}
-            class="w-94 absolute bottom-0 -left-28"
-          />
-          <Picture
-            alt="Mulher de negócios"
-            formats={['webp']}
-            src={mulherdenegocios}
-            class="w-96 absolute bottom-0 -right-24"
-          />
-        </div>
-
-        <div class="col-span-2 flex items-center">
-          <div class="xl:w-8/12 xl:mx-auto space-y-5 p-6">
-            <h3 class="text-pretty text-4xl font-semibold">Por que capacitar sua equipe com a EDUSEG&reg;</h3>
-            <p>
-              Nós cuidamos da burocracia, oferecemos uma plataforma completa para simplicar a gestão e capacitação em
-              larga escala de seus colaboradores. Com a EDUSEG&reg, sua empresa se beneficia de uma tecnologia eficiente
-              e confiável.
-            </p>
-
-            <ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
-              <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Centralização de todos os certificados</li>
-              <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Ágilidade na liberação de cursos</li>
-              <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Agendamento para liberação de cursos</li>
-              <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Aviso de vencimento para certificados</li>
-            </ul>
-
-            <div class="text-center">
-              <a href="#" class="text-blue-400 underline hover:no-underline"> Agendar uma demonstração </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Container>
-
-    <Container id="modulos" class="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6">
-      <div class="space-y-2.5">
-        <h4 class="text-pretty text-4xl lg:text-5xl">Módulos deste curso</h4>
-        <p class="text-base/6">
-          O curso é dividido em módulos para facilitar seu aprendizado e garantir que você domine todos os aspectos
-          teóricos e práticos.
-        </p>
-      </div>
-      <div class="lg:col-span-2 flex flex-col gap-1.5">
-        <Faq topics={data.course.modules} client:load />
-      </div>
-    </Container>
-
-    {
-      trainer && (
-        <Container>
-          <div class="bg-white/10 rounded-2xl p-5 xl:py-32">
-            <div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
-              <div class="shrink-0">
-                <Picture
-                  src={trainer.data.image}
-                  alt={trainer.data.name}
-                  formats={['webp']}
-                  class="rounded-xl size-32 outline-2 outline-offset-2 outline-lime-400"
-                />
-              </div>
-              <div class="space-y-2.5">
-                <h5 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h5>
-                <h5 class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</h5>
-
-                {trainer.data.bio.split(/\r?\n/).map((x) => (
-                  <p class="text-sm/6 text-white/70">{x}</p>
-                ))}
-
-                <div class="flex">
-                  <a
-                    href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/"
-                    target="_blank"
-                    aria-label="LinkedIn"
-                  >
-                    <Icon name="LinkedIn" class="fill-white/70 size-5" />
-                  </a>
+                    <div class="flex max-lg:flex-col justify-center 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"
+                        >
+                            Contratar agora
+                        </a>
+                        <a
+                            href="http://bit.ly/3RlROu6"
+                            class="flex flex-col hover:outline rounded outline-offset-3"
+                            target="_blank"
+                        >
+                            <div class="flex items-center gap-1">
+                                <span class="font-bold">4.7</span>
+                                <ul class="flex">
+                                    <li>
+                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                    </li>
+                                    <li>
+                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                    </li>
+                                    <li>
+                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                    </li>
+                                    <li>
+                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                    </li>
+                                    <li><StarIcon className="w-4" /></li>
+                                </ul>
+                            </div>
+                            <span>66 avaliações no Google</span>
+                        </a>
+                    </div>
                 </div>
-              </div>
-            </div>
-          </div>
+            </section>
         </Container>
-      )
-    }
 
-    <Container id="certificado">
-      <div
-        class="text-black bg-linear-to-t from-lime-600 to-lime-400 border border-lime-400 p-5 lg:py-36 rounded-2xl relative overflow-hidden"
-      >
-        <LockClosedIcon className="w-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />
+        <Container class="lg:text-center space-y-2.5 lg:space-y-6">
+            <h2 class="text-pretty font-semibold text-4xl">Alguns clientes que acreditam em nós</h2>
+            <Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
+        </Container>
 
-        <div class="lg:w-8/12 2xl:w-6/14 mx-auto space-y-5">
-          <h6 class="text-4xl lg:text-6xl/14 lg:font-black">
-            Certificados digitais com respaldo legal e gestão completa
-          </h6>
-          <ul class="lg:text-lg list-disc list-inside">
-            <li>Certificado com assinatura digital conforme o padrão ICP-Brasil</li>
-            <li>Tudo digital e salvo para sempre na núvem</li>
-            <li>Alertas automáticos de vencimento</li>
-          </ul>
-        </div>
-      </div>
-    </Container>
+        <Container>
+            <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
+                <div
+                    class="bg-linear-to-tr from-lime-400/50 to-lime-300 rounded-2xl p-5 relative h-136 max-lg:hidden -m-px max-xl:overflow-hidden"
+                >
+                    <Picture
+                        alt="Homem de negócios"
+                        formats={['webp']}
+                        src={homemdenegocios}
+                        class="w-94 absolute bottom-0 -left-28"
+                    />
+                    <Picture
+                        alt="Mulher de negócios"
+                        formats={['webp']}
+                        src={mulherdenegocios}
+                        class="w-96 absolute bottom-0 -right-24"
+                    />
+                </div>
 
-    <!-- <Form client:load /> -->
-  </div>
+                <div class="col-span-2 flex items-center">
+                    <div class="xl:w-8/12 xl:mx-auto space-y-5 p-6">
+                        <h3 class="text-pretty text-4xl font-semibold">
+                            Por que capacitar sua equipe com a EDUSEG&reg;
+                        </h3>
+                        <p>
+                            Nós cuidamos da burocracia, oferecemos uma plataforma completa para simplicar a gestão e
+                            capacitação em larga escala de seus colaboradores. Com a EDUSEG&reg, sua empresa se
+                            beneficia de uma tecnologia eficiente e confiável.
+                        </p>
+
+                        <ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
+                            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Centralização de todos os certificados</li>
+                            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Ágilidade na liberação de cursos</li>
+                            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Agendamento para liberação de cursos</li>
+                            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Aviso de vencimento para certificados</li>
+                        </ul>
+
+                        <div class="text-center">
+                            <a href="#" class="text-blue-400 underline hover:no-underline">
+                                Agendar uma demonstração
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Container>
+
+        <Container id="modulos" class="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6">
+            <div class="space-y-2.5">
+                <h4 class="text-pretty text-4xl lg:text-5xl">Módulos deste curso</h4>
+                <p class="text-base/6">
+                    O curso é dividido em módulos para facilitar seu aprendizado e garantir que você domine todos os
+                    aspectos teóricos e práticos.
+                </p>
+            </div>
+            <div class="lg:col-span-2 flex flex-col gap-1.5">
+                <Faq topics={data.course.modules} client:load />
+            </div>
+        </Container>
+
+        {
+            trainer && (
+                <Container>
+                    <div class="bg-white/10 rounded-2xl p-5 xl:py-32">
+                        <div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
+                            <div class="shrink-0">
+                                <Picture
+                                    src={trainer.data.image}
+                                    alt={trainer.data.name}
+                                    formats={['webp']}
+                                    class="rounded-xl size-32 outline-2 outline-offset-2 outline-lime-400"
+                                />
+                            </div>
+                            <div class="space-y-2.5">
+                                <h5 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h5>
+                                <h5 class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</h5>
+
+                                {trainer.data.bio.split(/\r?\n/).map((x) => (
+                                    <p class="text-sm/6 text-white/70">{x}</p>
+                                ))}
+
+                                <div class="flex">
+                                    <a
+                                        href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/"
+                                        target="_blank"
+                                        aria-label="LinkedIn"
+                                    >
+                                        <Icon name="linkedin" class="fill-white/70 size-5" />
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Container>
+            )
+        }
+
+        <Container id="certificado">
+            <div
+                class="text-black bg-linear-to-t from-lime-600 to-lime-400 border border-lime-400 p-5 lg:py-36 rounded-2xl relative overflow-hidden"
+            >
+                <LockClosedIcon className="w-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />
+
+                <div class="lg:w-8/12 2xl:w-6/14 mx-auto space-y-5">
+                    <h6 class="text-4xl lg:text-6xl/14 lg:font-black">
+                        Certificados digitais com respaldo legal e gestão completa
+                    </h6>
+                    <ul class="lg:text-lg list-disc list-inside">
+                        <li>Certificado com assinatura digital conforme o padrão ICP-Brasil</li>
+                        <li>Tudo digital e salvo para sempre na núvem</li>
+                        <li>Alertas automáticos de vencimento</li>
+                    </ul>
+                </div>
+            </div>
+        </Container>
+
+        <!-- <Form client:load /> -->
+    </div>
 </Layout>
diff --git a/superpage/src/pages/blog/[slug].astro b/superpage/src/pages/blog/[slug].astro
index a3ac3c0..084ae1e 100644
--- a/superpage/src/pages/blog/[slug].astro
+++ b/superpage/src/pages/blog/[slug].astro
@@ -3,13 +3,13 @@ import Layout from '~/layouts/Layout.astro'
 import Container from '~/components/Container'
 
 export async function getStaticPaths() {
-  const data = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
-  const posts = await data.json()
+    const data = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
+    const posts = await data.json()
 
-  return posts.map((post) => ({
-    params: { slug: post.slug },
-    props: { post },
-  }))
+    return posts.map((post) => ({
+        params: { slug: post.slug },
+        props: { post },
+    }))
 }
 
 const { post } = Astro.props
@@ -18,10 +18,10 @@ const { post } = Astro.props
 <title slot="head">{post.title.rendered}</title>
 
 <Layout>
-  <Container>
-    <article>
-      <h1 set:html={post.title.rendered} />
-      <Fragment set:html={post.content.rendered} />
-    </article>
-  </Container>
+    <Container>
+        <article>
+            <h1 set:html={post.title.rendered} />
+            <Fragment set:html={post.content.rendered} />
+        </article>
+    </Container>
 </Layout>
diff --git a/superpage/src/pages/index.astro b/superpage/src/pages/index.astro
index c1aa76a..871614d 100644
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '~/layouts/Layout.astro'
-import Container from '~/components/Container'
+import Container from '~/components/Container.astro'
 
 let res = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
 let posts = await res.json()