wip

superpage/.prettierrc

@@ -2,5 +2,6 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120
 }

superpage/src/components/Menu.jsx

@@ -1,8 +1,4 @@
-import {
+import { ChevronDownIcon, XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid'
-  ChevronDownIcon,
-  XMarkIcon,
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/solid'
 import {
   Popover,
   PopoverButton,
@@ -19,16 +15,14 @@ export function Menu({ recentCourses }) {
   return (
     <Popover className="relative">
       <PopoverButton className="text-black font-semibold cursor-pointer flex gap-1 hover:outline-2 rounded focus:outline-none">
-        <div className="truncate max-w-36 sm:max-w-72 md:max-w-124">
+        <div className="truncate max-w-36 sm:max-w-72 md:max-w-124">NR-18 PEMT Plataforma Móvel de Trabalho</div>
-          NR-18 PEMT Plataforma Móvel de Trabalho
-        </div>
         <ChevronDownIcon className="w-5 fill-black" />
       </PopoverButton>
 
       <PopoverPanel
         // static={true}
         anchor="bottom"
-        className="sticky z-20 -mt-11.5 w-full py-6 2xl:py-24 bg-lime-400 rounded-b-2xl drop-shadow-sm transition duration-150 ease-linear data-[closed]:opacity-0"
+        className="sticky z-20 -mt-11.5 w-full py-6 2xl:py-24 bg-lime-400 rounded-b-2xl drop-shadow shadow-sm transition duration-150 ease-linear data-[closed]:opacity-0"
         transition
       >
         <Container className="text-black relative xl:w-10/12 2xl:w-5xl">
@@ -42,15 +36,11 @@ export function Menu({ recentCourses }) {
 
           <div className="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
             <span>Curso de formação</span>
-            <h1 className="text-xl lg:text-2xl">
+            <h1 className="text-xl lg:text-2xl">NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</h1>
-              NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
-            </h1>
           </div>
 
           <div className="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
-            <h6 className="font-medium text-xl lg:text-2xl">
+            <h6 className="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>
-              Conheça outros cursos da EDUSEG&reg;
-            </h6>
 
             <div className="flex max-lg:flex-col gap-0.5 lg:gap-4">
               {/* Search */}

superpage/src/layouts/Layout.astro

@@ -31,17 +31,14 @@ import '@fontsource/roboto'
       <a href="/"><Logo className="h-8" /></a>
 
       <div class="ml-auto">
-        <a
+        <a href="//app.betaeducacao.com.br" class="flex gap-1 items-center hover:outline rounded-xs">
-          href="//app.betaeducacao.com.br"
-          class="flex gap-1 items-center hover:outline rounded-xs"
-        >
           <ArrowLeftStartOnRectangleIcon className="w-5 rotate-180" />
           <>Entrar</>
         </a>
       </div>
     </Container>
 
-    <section class="bg-lime-400 sticky top-0 z-10 py-3">
+    <section class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm">
       <Container className="flex items-center">
         <Menu recentCourses={courses} client:load />
 

superpage/src/pages/[slug].astro

@@ -3,7 +3,7 @@ import { Picture } from 'astro:assets'
 import { Container } from '~/components/Container'
 import { Faq } from '~/components/Faq'
 import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
-import { CheckBadgeIcon } from '@heroicons/react/24/solid'
+import { CheckBadgeIcon, LockClosedIcon } from '@heroicons/react/24/solid'
 import { LinkedInIcon } from '~/components/LinkedInIcon'
 import Layout from '~/layouts/Layout.astro'
 import ClientsLogo from '~/components/ClientsLogo.astro'
@@ -14,10 +14,7 @@ import homemdenegocios from '~/assets/homem-de-negocios.png'
 import { getCollection, getEntry } from 'astro:content'
 
 export async function getStaticPaths() {
-  const courses = await getCollection(
+  const courses = await getCollection('courses', ({ data }) => data.draft != true)
-    'courses',
-    ({ data }) => data.draft != true,
-  )
 
   return courses.map((course) => {
     return {
@@ -31,30 +28,22 @@ const {
   course: { data },
 } = Astro.props
 
-const trainer = data.course?.trainer
+const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null
-  ? await getEntry(data.course?.trainer)
-  : null
 ---
 
 <Layout title={data.title}>
-  <div class="space-y-3 lg:space-y-26">
+  <div class="space-y-3 lg:space-y-24">
-    <Container className="lg:flex items-center justify-start gap-5">
+    <Container className="lg:flex items-center justify-start gap-6">
       <Picture
         src={data?.img ? data.img : placeholder}
         alt={data.title}
         formats={['webp']}
         class="max-lg:hidden max-w-116 grayscale-15"
       />
-      <section>
+      <section class="lg:py-24">
         <div class="space-y-5">
           <span class="font-medium">
-            {
+            {data.course.reciclagem ? <>Curso de reciclagem</> : <>Curso de formação</>}
-              data.course.reciclagem ? (
-                <>Curso de reciclagem</>
-              ) : (
-                <>Curso de formação</>
-              )
-            }
           </span>
           <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
             {data.title}
@@ -82,9 +71,7 @@ const trainer = data.course?.trainer
             </li>
           </ul>
 
-          <div
+          <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 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"
@@ -144,35 +131,22 @@ const trainer = data.course?.trainer
 
         <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">
+            <h3 class="text-pretty text-4xl font-semibold">Por que capacitar sua equipe com a EDUSEG&reg;</h3>
-              Por que capacitar sua equipe com a EDUSEG&reg;
-            </h3>
             <p>
-              Nós cuidamos da burocracia, oferecemos uma plataforma completa
+              Nós cuidamos da burocracia, oferecemos uma plataforma completa para simplicar a gestão e capacitação em
-              para simplicar a gestão e capacitação em larga escala de seus
+              larga escala de seus colaboradores. Com a EDUSEG&reg, sua empresa se beneficia de uma tecnologia eficiente
-              colaboradores. Com a EDUSEG&reg, sua empresa se beneficia de uma
+              e confiável.
-              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">
+              <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Centralização de todos os certificados</li>
-                Centralização de todos os certificados
+              <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Ágilidade na liberação de cursos</li>
-              </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">
+              <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Aviso de vencimento para certificados</li>
-                Á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">
+              <a href="#" class="text-blue-400 underline hover:no-underline"> Agendar uma demonstração </a>
-                Agendar uma demonstração
-              </a>
             </div>
           </div>
         </div>
@@ -181,12 +155,10 @@ const trainer = data.course?.trainer
 
     <Container className="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6 ">
       <div class="space-y-2.5">
-        <h4 class="text-4xl lg:text-5xl text-pretty" id="modulos">
+        <h4 class="text-4xl lg:text-5xl text-pretty" id="modulos">Módulos deste curso</h4>
-          Módulos deste curso
-        </h4>
         <p class="text-base/6">
-          O curso é dividido em módulos para facilitar seu aprendizado e
+          O curso é dividido em módulos para facilitar seu aprendizado e garantir que você domine todos os aspectos
-          garantir que você domine todos os aspectos teóricos e práticos.
+          teóricos e práticos.
         </p>
       </div>
       <div class="lg:col-span-2 flex flex-col gap-1.5">
@@ -194,27 +166,10 @@ const trainer = data.course?.trainer
       </div>
     </Container>
 
-    <Container>
-      <div class="text-black bg-lime-400 py-36 rounded-2xl">
-        <div class="lg:w-8/12 mx-auto space-y-5">
-          <h6 class="text-6xl/14 font-extrabold">
-            Certificados digitais com respaldo legal e gestão completa
-          </h6>
-          <ul class="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 do vencimento</li>
-          </ul>
-        </div>
-      </div>
-    </Container>
-
     {
       trainer && (
         <Container>
-          <div class="bg-white/10 rounded-2xl p-2.5 lg:py-6 xl:py-24">
+          <div class="bg-white/10 rounded-2xl p-2.5 lg:py-6 xl:py-32">
             <div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
               <div class="shrink-0">
                 <Picture
@@ -226,19 +181,14 @@ const trainer = data.course?.trainer
               </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">
+                <h5 class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</h5>
-                  {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
+                  <a href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/" target="_blank">
-                    href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/"
-                    target="_blank"
-                  >
                     <LinkedInIcon className="fill-white/70 w-6" />
                   </a>
                 </div>
@@ -248,5 +198,21 @@ const trainer = data.course?.trainer
         </Container>
       )
     }
+
+    <Container>
+      <div
+        class="text-black bg-linear-to-t from-lime-600 to-lime-400 p-2.5 lg:py-36 rounded-2xl relative overflow-hidden"
+      >
+        <LockClosedIcon className="w-96 absolute -right-18 -bottom-18 text-black/15 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 font-black">Certificados digitais com respaldo legal e gestão completa</h6>
+          <ul class="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 do vencimento</li>
+          </ul>
+        </div>
+      </div>
+    </Container>
   </div>
 </Layout>