wip

2025-04-17 17:01:41 -03:00
parent 49ba8865ca
commit 631ef1501c
4 changed files with 48 additions and 94 deletions
--- a/superpage/.prettierrc
+++ b/superpage/.prettierrc
@@ -2,5 +2,6 @@
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120
 }
--- a/superpage/src/components/Menu.jsx
+++ b/superpage/src/components/Menu.jsx
@@ -1,8 +1,4 @@
-import {
-  ChevronDownIcon,
-  XMarkIcon,
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/solid'
+import { 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">
-          NR-18 PEMT Plataforma Móvel de Trabalho
-        </div>
+        <div className="truncate max-w-36 sm:max-w-72 md:max-w-124">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">
-              NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
-            </h1>
+            <h1 className="text-xl lg:text-2xl">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">
-              Conheça outros cursos da EDUSEG&reg;
-            </h6>
+            <h6 className="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>

            <div className="flex max-lg:flex-col gap-0.5 lg:gap-4">
              {/* Search */}
--- a/superpage/src/layouts/Layout.astro
+++ b/superpage/src/layouts/Layout.astro
@@ -31,17 +31,14 @@ import '@fontsource/roboto'
      <a href="/"><Logo className="h-8" /></a>

      <div class="ml-auto">
-        <a
-          href="//app.betaeducacao.com.br"
-          class="flex gap-1 items-center hover:outline rounded-xs"
-        >
+        <a 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 />

--- a/superpage/src/pages/[slug].astro
+++ b/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(
-    'courses',
-    ({ data }) => data.draft != true,
-  )
+  const courses = await getCollection('courses', ({ data }) => data.draft != true)

  return courses.map((course) => {
    return {
@@ -31,30 +28,22 @@ const {
  course: { data },
 } = Astro.props

-const trainer = data.course?.trainer
-  ? await getEntry(data.course?.trainer)
-  : null
+const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null
 ---

 <Layout title={data.title}>
-  <div class="space-y-3 lg:space-y-26">
-    <Container className="lg:flex items-center justify-start gap-5">
+  <div class="space-y-3 lg:space-y-24">
+    <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
-            class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16"
-          >
+          <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"
@@ -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">
-              Por que capacitar sua equipe com a EDUSEG&reg;
-            </h3>
+            <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.
+              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>
+              <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>
+              <a href="#" class="text-blue-400 underline hover:no-underline"> 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">
-          Módulos deste curso
-        </h4>
+        <h4 class="text-4xl lg:text-5xl text-pretty" id="modulos">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.
+          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">
@@ -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">
-                  {trainer.data.name}
-                </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"
-                  >
+                  <a 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>