update

superpage/src/components/Course/Cert.astro

@@ -13,7 +13,7 @@ import Container from "~/components/Container.astro";
         />
 
         <div class="lg:w-8/12 2xl:w-6/14 mx-auto space-y-5">
-            <h5 class="text-4xl lg:text-6xl/14 lg:font-black">
+            <h5 class="text-4xl lg:text-6xl/14 lg:font-bold">
                 Certificados digitais com respaldo legal e gestão completa
             </h5>
             <ul class="lg:text-lg list-disc list-inside">

superpage/src/components/Course/Clients.astro

@@ -9,7 +9,9 @@ import Nissan from "~/components/Logos/Nissan.astro";
 import Manserv from "~/components/Logos/Manserv.astro";
 ---
 
-<Container class="lg:text-center space-y-2.5 lg:space-y-6">
+<Container
+    class:list={["lg:text-center space-y-2.5 lg:space-y-5", Astro.props.class]}
+>
     <h2 class="text-pretty font-semibold text-4xl">
         Alguns clientes que acreditam em nós
     </h2>

superpage/src/components/Course/Contact.astro

@@ -1,5 +1,5 @@
 ---
-import Container from "../Container.astro";
+import Container from "~/components/Container.astro";
 import Form from "./_Contact.jsx";
 ---
 
@@ -7,7 +7,7 @@ import Form from "./_Contact.jsx";
     <section class="space-y-6 lg:w-6/12 mx-auto lg:mb-12">
         <div class="space-y-2.5">
             <h1 class="text-4xl lg:text-6xl/14 lg:font-black">Fale conosco</h1>
-            <p class="lg:text-lg/6">
+            <p>
                 Tem uma necessidade mais específica ou gostaria de agendar uma
                 demonstração da nossa plataforma? Entre em contato conosco.
             </p>

superpage/src/components/Course/Faq.astro

@@ -0,0 +1,9 @@
+---
+import Container from "~/components/Container.astro";
+---
+
+<Container class:list={[" space-y-2.5 lg:space-y-5", Astro.props.class]}>
+    <h2 class="text-pretty text-4xl lg:text-5xl">
+        FAQ &mdash; Perguntas frequentes
+    </h2>
+</Container>

superpage/src/components/Course/HeaderNav.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import Container from "./Container.astro";
+import Container from "../Container.astro";
 
 import { getCollection } from "astro:content";
 const courses = await getCollection(
@@ -22,7 +22,7 @@ const courses = await getCollection(
             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
+                NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
             </div>
             <Icon name="chevron-down" aria-hidden="true" class="size-4" />
         </button>

superpage/src/components/Course/Modules.astro

@@ -1,11 +1,11 @@
 ---
-import Container from "../Container.astro";
+import Container from "~/components/Container.astro";
 ---
 
 <Container class="2xl:w-5/12 lg:py-24 space-y-6" {...Astro.props}>
     <div class="space-y-2.5">
         <h4 class="text-pretty text-4xl lg:text-6xl">Módulos deste curso</h4>
-        <p class="lg:text-lg/6">
+        <p>
             O curso é dividido em módulos para facilitar seu aprendizado e
             garantir que você domine todos os aspectos teóricos e práticos.
         </p>

superpage/src/components/Course/Trainer.astro

@@ -2,7 +2,7 @@
 import { getEntry } from "astro:content";
 import { Picture } from "astro:assets";
 import { Icon } from "astro-icon/components";
-import Container from "../Container.astro";
+import Container from "~/components/Container.astro";
 
 const trainer = await getEntry("trainers", Astro.props.name);
 ---

superpage/src/components/Course/index.ts

@@ -4,3 +4,4 @@ export { default as Clients } from "./Clients.astro";
 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";

superpage/src/components/Logo.astro

@@ -1,43 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1072.73 329.6" width="111" height="36" {...Astro.props}>
-  <g>
-    <g>
-      <path
-        fill="#8cd366"
-        d="M152.18,217.62l-68.61-30.91c-1.88-1.2-4.28-1.2-6.16,0l-68.61,30.91c-3.81,2.43-8.8-.3-8.8-4.82V8.98C0,5.82,2.56,3.26,5.72,3.26h149.54c3.16,0,5.72,2.56,5.72,5.72v203.81c0,4.52-5,7.26-8.8,4.82Z"
-      ></path>
-      <path fill="#2e3524" d="M93.97,74.01H26.61v20.16h67.36v-20.16Z"></path>
-      <path fill="#2e3524" d="M107.44,111.16H26.61v26.8h80.83v-26.8Z"></path>
-      <path fill="#2e3524" d="M107.44,30.27H26.61v26.8h80.83v-26.8Z"></path>
-      <path
-        fill="#2e3524"
-        d="M134.38,131.23c0-3.72-3.02-6.73-6.73-6.73s-6.73,3.02-6.73,6.73,3.02,6.73,6.73,6.73,6.73-3.02,6.73-6.73Z"
-      ></path>
-    </g>
-    <g>
-      <path fill="#f9f7e8" d="M244.7,3.24h92.33v44.43h-44.15v88.85h39.38v39.62h-39.38v105.77h44.15v44.42h-92.33V3.24Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M362.72,3.24h57.79c10.71,0,20.47,2.35,29.29,7.06,8.83,4.7,15.79,11.18,20.87,19.39,5.08,8.21,7.63,17.45,7.63,27.67v214.88c0,10.22-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.83,4.7-18.73,7.08-29.7,7.08h-57.79V3.24ZM427.55,283.88c1.74-1.87,2.6-4.18,2.6-6.86V52.56c-.26-2.69-1.34-4.97-3.22-6.86-1.88-1.87-4.15-2.83-6.82-2.83h-14v243.85h14.41c2.93,0,5.27-.94,7.01-2.83h.02Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M531.5,322.49c-8.71-4.7-15.6-11.16-20.68-19.39-5.08-8.21-7.63-17.42-7.63-27.67V3.24h48.15v279.41c0,2.69.93,4.99,2.82,6.86,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.86V3.24h48.16v272.21c0,10.25-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.85,4.7-18.73,7.08-29.7,7.08s-20.8-2.35-29.5-7.08l.05-.02Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M672.79,322.49c-8.7-4.7-15.6-11.16-20.68-19.39-5.08-8.21-7.63-17.42-7.63-27.67v-78.75h48.16v85.95c0,2.69.93,4.99,2.82,6.87,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.87v-77.88c0-5.66-2.22-10.3-6.63-13.94-4.41-3.62-11.57-8.02-21.47-13.13-8.3-4.3-15.05-8.14-20.27-11.52-5.22-3.36-9.71-7.87-13.45-13.54-3.75-5.66-5.63-12.24-5.63-19.8V54.12c0-10.22,2.53-19.44,7.63-27.67,5.08-8.21,11.97-14.66,20.68-19.39,8.68-4.7,18.53-7.06,29.5-7.06s20.87,2.35,29.69,7.06c8.83,4.7,15.72,11.18,20.68,19.39,4.96,8.21,7.42,17.45,7.42,27.67v71.09h-48.16V46.92c0-2.69-.88-4.97-2.6-6.86-1.74-1.87-4.08-2.83-7.01-2.83-2.67,0-4.96.94-6.82,2.83-1.89,1.9-2.82,4.18-2.82,6.86v69.79c0,6.19,2.34,11.26,7.04,15.14,4.67,3.91,12.24,8.83,22.68,14.74,8.04,4.32,14.57,8.09,19.68,11.3,5.08,3.24,9.37,7.46,12.83,12.72,3.48,5.26,5.22,11.26,5.22,17.98v86.83c0,10.25-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.85,4.71-18.72,7.08-29.7,7.08s-20.8-2.35-29.5-7.08Z"
-      ></path>
-      <path fill="#f9f7e8" d="M784.56,3.24h92.33v44.43h-44.15v88.85h39.38v39.62h-39.38v105.77h44.15v44.42h-92.33V3.24Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M920.63,322.49c-5.63-4.18-10.11-10.1-13.45-17.76-3.34-7.68-5.01-16.49-5.01-26.45V53.71c0-9.96,2.53-19.06,7.63-27.26,5.08-8.21,12.05-14.66,20.87-19.39,8.83-4.7,18.6-7.06,29.32-7.06s20.54,2.35,29.5,7.06c8.97,4.7,15.91,11.18,20.87,19.39,4.96,8.21,7.42,17.3,7.42,27.26v94.51h-48.16V46.92c0-2.69-.88-4.97-2.6-6.86-1.74-1.87-4.08-2.83-7.01-2.83-2.67,0-4.96.94-6.82,2.83-1.89,1.9-2.82,4.18-2.82,6.86v231.36c0,2.69.93,4.99,2.82,6.87,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.87v-46.03h-11.64v-51.29h59.8v145.4h-48.16v-14.14c-2.96,5.4-6.82,9.48-11.64,12.31-4.82,2.83-10.83,4.25-18.06,4.25s-13.64-2.09-19.27-6.26l-.02-.02Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M1053.27,25.05h-6.13l-.06-3.69h5.48c.83-.02,1.61-.15,2.33-.4.72-.27,1.3-.64,1.73-1.14.44-.51.65-1.14.65-1.87,0-.93-.16-1.67-.48-2.22-.3-.55-.83-.94-1.59-1.16-.74-.25-1.74-.37-3.01-.37h-3.78v20.42h-4.12V10.54h7.9c1.87,0,3.49.27,4.86.82,1.38.53,2.44,1.34,3.18,2.44.76,1.08,1.14,2.43,1.14,4.06,0,1.02-.24,1.93-.71,2.73-.47.8-1.17,1.49-2.1,2.07-.91.57-2.03,1.03-3.35,1.39-.06,0-.12.07-.2.2-.06.13-.11.2-.17.2-.32.19-.53.33-.63.43-.08.08-.16.12-.25.14-.08.02-.31.03-.68.03ZM1052.99,25.05l.6-2.81c2.95,0,4.97.64,6.05,1.93,1.08,1.27,1.62,2.89,1.62,4.86v1.53c0,.7.03,1.37.08,2.02.08.62.21,1.15.4,1.59v.45h-4.23c-.19-.49-.3-1.19-.34-2.1-.02-.91-.03-1.57-.03-1.99v-1.48c0-1.38-.31-2.39-.94-3.04s-1.69-.97-3.21-.97ZM1035.75,22.92c0,2.52.43,4.87,1.28,7.04.87,2.16,2.08,4.05,3.64,5.68,1.55,1.61,3.34,2.87,5.37,3.78,2.05.89,4.22,1.33,6.53,1.33s4.51-.44,6.53-1.33c2.03-.91,3.8-2.17,5.34-3.78,1.53-1.63,2.74-3.52,3.61-5.68.87-2.18,1.31-4.52,1.31-7.04s-.44-4.86-1.31-7.01c-.87-2.16-2.07-4.04-3.61-5.65-1.53-1.61-3.31-2.86-5.34-3.75-2.03-.91-4.2-1.36-6.53-1.36s-4.49.45-6.53,1.36c-2.03.89-3.81,2.14-5.37,3.75-1.55,1.61-2.77,3.49-3.64,5.65-.85,2.16-1.28,4.5-1.28,7.01ZM1032.4,22.92c0-3.01.52-5.8,1.56-8.38,1.04-2.57,2.49-4.82,4.34-6.73,1.86-1.93,4-3.43,6.42-4.49,2.44-1.08,5.06-1.62,7.84-1.62s5.39.54,7.81,1.62c2.44,1.06,4.58,2.56,6.42,4.49,1.86,1.91,3.31,4.16,4.35,6.73,1.06,2.57,1.59,5.37,1.59,8.38s-.53,5.8-1.59,8.38c-1.04,2.57-2.49,4.84-4.35,6.79-1.83,1.93-3.97,3.44-6.42,4.52-2.42,1.08-5.03,1.62-7.81,1.62s-5.39-.54-7.84-1.62c-2.42-1.08-4.56-2.58-6.42-4.52-1.85-1.95-3.3-4.21-4.34-6.79-1.04-2.57-1.56-5.37-1.56-8.38Z"
-      ></path>
-    </g>
-  </g>
-</svg>

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

@@ -17,6 +17,7 @@ import {
   Cert,
   Trainer,
   Contact,
+  Faq,
 } from "~/components/Course";
 
 <Clients />
@@ -57,7 +58,7 @@ import {
 
 <Trainer name="francis" />
 
-<p class="w-6/12 mx-auto">...</p>
+<Faq />
 
 <Cert />
 

superpage/src/icons/arrow-trending-up.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" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941" />
+</svg>

superpage/src/layouts/Layout.astro

@@ -1,9 +1,7 @@
 ---
-import "@fontsource/roboto";
 import "~/styles/app.css";
 import Logo from "~/components/logos/Eduseg.astro";
 import Container from "~/components/Container.astro";
-import HeaderNav from "~/components/HeaderNav.astro";
 import { Icon } from "astro-icon/components";
 
 const year = new Date().getFullYear();
@@ -46,13 +44,13 @@ const year = new Date().getFullYear();
             </Container>
         </header>
 
-        <HeaderNav />
+        <slot name="nav" />
 
         <main id="content">
             <slot />
         </main>
 
-        <footer class="py-6 text-white/70">
+        <footer class="py-2.5 lg:py-6 text-white/70">
             <Container>
                 &copy; {year} EDUSEG&reg; Todos os direitos reservados. CNPJ15.608.435/0001-90
             </Container>

superpage/src/pages/404.astro

@@ -1,5 +1,12 @@
 ---
-import Layout from '~/layouts/Layout.astro'
+import Container from "~/components/Container.astro";
+import Layout from "~/layouts/Layout.astro";
 ---
 
-<layout>...</layout>
+<Layout>
+    <Container class="py-6 lg:py-24">
+        <h1 class="text-pretty font-semibold text-4xl">
+            404 Página não encontrada
+        </h1>
+    </Container>
+</Layout>

superpage/src/pages/[slug].astro

@@ -4,6 +4,7 @@ import { Picture } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
+import HeaderNav from "~/components/Course/HeaderNav.astro";
 
 import placeholder from "~/assets/placeholder.png";
 
@@ -31,8 +32,12 @@ const { Content } = await render(course);
         <title>{data.title} &mdash; EDUSEG&reg;</title>
     </Fragment>
 
+    <Fragment slot="nav">
+        <HeaderNav />
+    </Fragment>
+
     <section class="space-y-6 lg:space-y-24">
-        <Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6">
+        <Container class="lg:flex items-center justify-start gap-6">
             <Picture
                 src={data?.image ? data.image : placeholder}
                 alt={data.title}

superpage/src/pages/index.astro

@@ -1,21 +1,93 @@
 ---
-import Layout from '~/layouts/Layout.astro'
+import { Picture } from "astro:assets";
-import Container from '~/components/Container.astro'
+import { Icon } from "astro-icon/components";
+import Layout from "~/layouts/Layout.astro";
+import Container from "~/components/Container.astro";
+import { Clients } from "~/components/Course";
 
-let res = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
+import mulhercomepi from "~/assets/mulher-com-epi.png";
-let posts = await res.json()
+
+let res = await fetch("https://betaeducacao.com.br/wp-json/wp/v2/posts");
+let posts = await res.json();
 ---
 
 <Layout>
-    <Container>
+    <div class="space-y-6 lg:space-y-12">
-        {
+        <Container>
-            posts.map((post) => (
+            <nav
-                <article>
+                class="text-black bg-linear-to-b from-lime-400/90 to-lime-400 border border-lime-400 rounded-2xl lg:grid grid-cols-6"
-                    <h2>
+            >
-                        <a href={`/blog/${post.slug}`} set:html={post.title.rendered} />
+                <div class="col-span-4 flex items-center justify-center">
-                    </h2>
+                    <div class="lg:w-4/6 max-lg:p-5 space-y-10">
-                </article>
+                        <form class="space-y-1.5">
-            ))
+                            <label for="search" class="block">
-        }
+                                <h1 class="text-pretty font-semibold text-3xl">
-    </Container>
+                                    Digite o curso para ver todos detalhes
+                                </h1>
+                            </label>
+
+                            <div
+                                class="flex gap-2.5 border border-black bg-white w-full rounded-lg"
+                            >
+                                <label for="search" class="py-3.5 pl-3">
+                                    <Icon
+                                        name="magnifying-glass"
+                                        class="size-6"
+                                    />
+                                </label>
+                                <input
+                                    id="search"
+                                    class="focus:outline-none w-full pr-5 py-3.5"
+                                />
+                            </div>
+                        </form>
+
+                        <div>
+                            <h2 class="font-bold text-xl flex gap-1">
+                                <Icon name="arrow-trending-up" class="size-6" />
+                                <span>Cursos mais procurados</span>
+                            </h2>
+                            <ul class="list-disc list-inside">
+                                <li>CIPA</li>
+                                <li>Lei Lucas</li>
+                                <li>Noções em Primeiros Socorros</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-span-2 relative h-116 -m-px max-lg:hidden">
+                    <Picture
+                        alt="Mulher com EPI"
+                        formats={["webp"]}
+                        src={mulhercomepi}
+                        class="w-86 left-0 bottom-0 absolute"
+                    />
+                </div>
+            </nav>
+        </Container>
+
+        <Clients class="py-6" />
+
+        <Container>
+            <section>
+                <h1 class="text-pretty font-semibold text-4xl">
+                    Últimos posts
+                </h1>
+
+                {
+                    posts.map((post) => (
+                        <article>
+                            <h2>
+                                <a
+                                    href={`/blog/${post.slug}`}
+                                    set:html={post.title.rendered}
+                                />
+                            </h2>
+                        </article>
+                    ))
+                }
+            </section>
+        </Container>
+    </div>
 </Layout>

superpage/src/styles/app.css

@@ -1,12 +1,12 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @theme {
     --font-sans:
-        'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-        'Noto Color Emoji';
+        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html,
 body {
-    @apply text-white bg-black scroll-pt-22;
+    @apply text-white bg-black scroll-pt-22 antialiased;
 }