add static pages

superpage/src/content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection, z } from 'astro:content'
+import { glob } from 'astro/loaders'
+
+const courses = defineCollection({
+  loader: glob({ pattern: '**/*.md', base: './src/data/courses' }),
+  schema: z.object({
+    id: z.string(),
+    title: z.string(),
+    slug: z.string(),
+  }),
+})
+
+export const collections = { courses }

superpage/src/data/courses/lei-lucas.md

@@ -0,0 +1,7 @@
+---
+id: '96c03c32-089c-4ccb-8aa1-73b0f49228b9'
+title: 'Lei Lucas'
+slug: 'lei-lucas'
+---
+
+asdasdas

superpage/src/data/courses/nr-18-plataforma-de-trabalho-aereo.md

@@ -0,0 +1,7 @@
+---
+id: '450a70ca-8ab5-4520-8a22-0e277359797d'
+title: 'NR-18 PEMT Plataforma Móvel de Trabalho Aéreo'
+slug: 'nr-18-plataforma-de-trabalho-aereo'
+---
+
+asdasdas

superpage/src/data/courses/nr-35-trabalhos-em-altura.md

@@ -0,0 +1,7 @@
+---
+id: 'e1c44881-2fe3-484e-ada2-12b6bf5b9398'
+title: 'NR-35 Trabalho em Altura'
+slug: 'nr-35-trabalhos-em-altura-teorico'
+---
+
+asdasdas

superpage/src/pages/[slug].astro

@@ -0,0 +1,265 @@
+---
+import Layout from '@layouts/Layout.astro'
+import { Picture, Image } 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 { LinkedInIcon } from '@components/LinkedInIcon'
+import nr18plataforma from '../assets/nr18-plataforma.png'
+import mulherdenegocios from '../assets/mulher-de-negocios.png'
+import homemdenegocios from '../assets/homem-de-negocios.png'
+import francis from '../assets/francis.jpeg'
+import Natura from '../assets/natura.svg'
+import Nissan from '../assets/nissan.svg'
+import Kordsa from '../assets/kordsa.svg'
+import Manserv from '../assets/manserv.svg'
+import Semeq from '../assets/semeq.svg'
+import { getCollection, render } from 'astro:content'
+
+export async function getStaticPaths() {
+  const posts = await getCollection('courses')
+
+  return posts.map((course) => {
+    return {
+      params: { slug: course.id },
+      props: { course },
+    }
+  })
+}
+// 2. For your template, you can get the entry directly from the prop
+const { course } = Astro.props
+const { Content } = await render(course)
+---
+
+<Layout>
+  <Container className="py-3 lg:py-12 lg:flex items-center gap-5">
+    <Picture
+      src={nr18plataforma}
+      alt="NR-18"
+      formats={['webp']}
+      class="max-lg:hidden"
+    />
+    <section>
+      <div class="space-y-5">
+        <span class="font-medium">Curso de formação</span>
+        <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
+          {course.data.title}
+        </h1>
+        <p class="text-base/6">
+          NR 18 PEMT capacita operadores de plataformas elevatórias para
+          trabalhos em altura com segurança. Com foco na manutenção, inspeção e
+          uso correto dos EPIs, previne sempre acidentes, garante certificação
+          MTE e valoriza sua carreira.
+        </p>
+        <ul class="lg:flex gap-3">
+          <li class="flex gap-1">
+            <ClockIcon className="w-5" />
+            <span>Carga horária de 40 horas</span>
+          </li>
+
+          <li class="flex gap-1">
+            <CheckBadgeIcon className="w-5 fill-blue-400" />
+            <span>Certificado com assinatura digital</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 className="py-6 xl:py-24 text-center space-y-2.5 hidden">
+    <div
+      class="flex lg:gap-12 itens-center justify-center max-lg:overflow-x-scroll snap-x snap-mandatory scroll-smoothscrollbar-hide"
+    >
+      <Natura class="snap-center flex-shrink-0 size-36 fill-white" />
+      <Nissan class="snap-center flex-shrink-0 size-36 fill-white" />
+      <Manserv class="snap-center flex-shrink-0 size-36 fill-white" />
+      <Kordsa class="snap-center flex-shrink-0 size-36 fill-white" />
+      <Semeq class="snap-center flex-shrink-0 size-36 fill-white" />
+    </div>
+  </Container>
+
+  <Container className="py-6 xl:py-24 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>
+    <div
+      class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-12 lg:justify-center"
+    >
+      <div
+        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
+      >
+        <Natura class="size-52 lg:size-36 fill-white" />
+      </div>
+      <div
+        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
+      >
+        <Nissan class="size-52 lg:size-36 fill-white" />
+      </div>
+      <div
+        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
+      >
+        <Manserv class="size-52 lg:size-36 fill-white" />
+      </div>
+      <div
+        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
+      >
+        <Kordsa class="size-52 lg:size-36 fill-white" />
+      </div>
+      <div
+        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
+      >
+        <Semeq class="size-52 lg:size-36 fill-white" />
+      </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-6 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">
+          <h2 class="text-pretty text-4xl font-semibold">
+            Por que capacitar sua equipe com a EDUSEG&reg;
+          </h2>
+          <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
+    className="py-3 lg:py-24 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">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 client:load />
+    </div>
+  </Container>
+
+  <Container>
+    <div class="bg-white/10 rounded-2xl p-2.5 lg:py-6 xl:py-24">
+      <div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
+        <div class="shrink-0">
+          <Picture
+            src={francis}
+            alt="Francis Ricardo Baretta"
+            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 instrutor?</h5>
+          <h5 class="text-4xl lg:text-5xl text-pretty">
+            Francis Ricardo Baretta
+          </h5>
+          <p class="text-sm/6 text-white/70">
+            Francis Ricardo Baretta é Engenheiro em Segurança do Trabalho e
+            Engenheiro Eletricista com registro no CREA SC 126693-0. Além disso,
+            possui formação acadêmica pela Universidade Regional de Blumenau
+            (FURB) em Engenharia de Telecomunicações e Engenharia Elétrica, além
+            de estar cursando Pós-Graduação em Engenharia de Segurança do
+            Trabalho pela UNIASSELVI.
+          </p>
+          <p class="text-sm/6 text-white/70">
+            Participou de cursos e atividades complementares, incluindo NR-10,
+            NR-35, eficiência energética, gerenciamento de projetos, energia
+            fotovoltaica e treinamento de ferramentas de gestão avançadas.
+          </p>
+          <div class="flex">
+            <a
+              href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/"
+              target="_blank"
+            >
+              <LinkedInIcon className="fill-white/70 w-6" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Container>
+</Layout>

superpage/tsconfig.json

@@ -9,6 +9,7 @@
     "paths": {
       "@components/*": ["src/components/*"],
       "@layouts/*": ["src/layouts/*"]
-    }
+    },
+    "strictNullChecks": true
   }
 }