wip

superpage/src/components/Carousel.astro

@@ -7,7 +7,7 @@ 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-1"
+        class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
         aria-label="Anterior"
     >
         <Icon name="chevron-left" class="size-6" />
@@ -15,7 +15,7 @@ const { items = [] } = Astro.props;
 
     <button
         id="next"
-        class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-1"
+        class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
         aria-label="Próximo"
     >
         <Icon name="chevron-right" class="size-6" />

superpage/src/components/Course/Plans.astro

@@ -16,7 +16,7 @@ import Form from "./Contact.jsx";
                     <h1
                         class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
                     >
-                        EDUSEG Flexível
+                        EDUSEG<sup>&reg;</sup> Flexível
                     </h1>
                     <h2 class="text-xl/6 font-semibold">
                         Catálogo completo sempre à sua disposição
@@ -43,7 +43,7 @@ import Form from "./Contact.jsx";
                     <h1
                         class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
                     >
-                        EDUSEG In-Company
+                        EDUSEG<sup>&reg;</sup> In-Company
                     </h1>
                     <h2 class="text-xl/6 font-semibold">
                         Treinamento presencial na sua empresa
@@ -71,7 +71,7 @@ import Form from "./Contact.jsx";
                     <h1
                         class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
                     >
-                        EDUSEG Conteúdo
+                        EDUSEG<sup>&reg;</sup> Conteúdo
                     </h1>
                     <h2 class="text-xl/6 font-semibold">
                         Leve nosso conteúdo para sua plataforma

superpage/src/components/Course/Stats.astro

@@ -4,14 +4,16 @@ import Container from "~/components/Container.astro";
 
 <Container>
     <section class="lg:w-5/6 grid lg:grid-cols-3 gap-2.5 lg:gap-5 mx-auto">
-        <div class="bg-white/5 p-12 rounded-xl border border-white/10">
+        <div
+            class="bg-white/5 p-12 rounded-xl space-y-1.5 border border-white/10"
+        >
             <h1 class="text-lime-400 text-4xl font-semibold uppercase">
                 +100 mil
             </h1>
             <span class="uppercase font-medium">Profissionais capacitados</span>
         </div>
         <div
-            class="bg-white/5 p-12 rounded-xl space-y-2.5 border border-white/10"
+            class="bg-white/5 p-12 rounded-xl space-y-1.5 border border-white/10"
         >
             <h1 class="text-lime-400 text-4xl font-semibold uppercase">
                 +5 mil
@@ -19,7 +21,7 @@ import Container from "~/components/Container.astro";
             <span class="uppercase font-medium">Empresas atendidas</span>
         </div>
         <div
-            class="bg-white/5 p-12 rounded-xl space-y-2.5 border border-white/10"
+            class="bg-white/5 p-12 rounded-xl space-y-1.5 border border-white/10"
         >
             <h1 class="text-lime-400 text-4xl font-semibold uppercase">
                 Desde 2012

superpage/src/components/Course/Trainer.astro

@@ -37,10 +37,11 @@ const trainer = await getEntry("trainers", Astro.props.name);
                                     href={url}
                                     target="_blank"
                                     aria-labelledby={alt}
+                                    class="text-white/70 hover:text-white"
                                 >
                                     <Icon
                                         name={alt.toLowerCase()}
-                                        class="fill-white/70 size-5"
+                                        class=" size-5"
                                     />
                                 </a>
                             );

superpage/src/layouts/Layout.astro

@@ -45,7 +45,7 @@ const year = new Date().getFullYear();
 
         <slot name="nav" />
 
-        <main id="content" data-pagefind-body>
+        <main id="conteudo" data-pagefind-body>
             <slot />
         </main>
 
@@ -55,7 +55,7 @@ const year = new Date().getFullYear();
                     &copy; {year} EDUSEG&reg; Todos os direitos reservados. CNPJ15.608.435/0001-90
                 </div>
                 <a
-                    href="#"
+                    href="#topo"
                     class="underline hover:no-underline flex items-center gap-1 max-lg:self-center"
                 >
                     <Icon name="arrow-up" />

superpage/src/pages/index.astro

@@ -4,21 +4,17 @@ import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
 import Search from "./_components/Search.astro";
-import { Clients, Stats, Features, Plans } from "~/components/Course";
+import { Clients, Stats, Features } from "~/components/Course";
+import { getEntries } from "astro:content";
 
 import mulhercomepi from "~/assets/mulher-com-epi.png";
-const trends = [
+
-    {
+const trends = await getEntries([
-        label: "NR-18 PEMT Plataforma Móvel de Trabalho Aéreo",
+    { collection: "courses", id: "nr-18-plataforma-de-trabalho-aereo" },
-        href: "nr-18-plataforma-de-trabalho-aereo",
+    { collection: "courses", id: "nr-10-basico" },
-    },
+    { collection: "courses", id: "cipa-grau-de-risco-3" },
-    { label: "NR-10 Básico", href: "nr-10-basico" },
+    { collection: "courses", id: "nr-35-trabalhos-em-altura-teorico" },
-    { label: "CIPA Grau de Risco 3", href: "cipa-grau-de-risco-3" },
+]);
-    {
-        label: "NR-35 Trabalho em Altura",
-        href: "nr-35-trabalhos-em-altura-teorico",
-    },
-];
 ---
 
 <Layout>
@@ -28,7 +24,9 @@ const trends = [
                 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"
             >
                 <div class="col-span-4 flex items-center justify-center">
-                    <div class="lg:w-4/6 max-lg:p-5 space-y-6 lg:space-y-12">
+                    <div
+                        class="w-full xl:w-4/6 max-xl:p-5 space-y-6 lg:space-y-12"
+                    >
                         <div class="space-y-1.5">
                             <label for="search" class="block">
                                 <h1
@@ -41,16 +39,16 @@ const trends = [
                             <Search />
                         </div>
 
-                        <div>
+                        <div class="space-y-1.5">
                             <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 font-medium">
                                 {
-                                    trends.map(({ label, href }) => (
+                                    trends.map(({ data }) => (
                                         <li>
-                                            <a href={href}>{label}</a>
+                                            <a href={data.slug}>{data.title}</a>
                                         </li>
                                     ))
                                 }
@@ -77,10 +75,82 @@ const trends = [
         <Features />
 
         <Container>
-            <section>
+            <section class="mx-auto lg:w-2/3 space-y-6 py-5 lg:py-12">
-                <h1 class="text-pretty text-5xl">
+                <div
-                    Uma plataforma, múltiplas soluções
+                    class="grid lg:grid-cols-3 gap-2.5 lg:gap-5 *:border *:rounded-lg *:p-5 *:hover:scale-105 *:transition"
-                </h1>
+                >
+                    <div class="flex flex-col border-white/10 bg-white/5">
+                        <div class="text-4xl font-black mb-6">01</div>
+                        <div class="space-y-2.5 [&>p]:text-sm/6">
+                            <div class="text-2xl">Autonomia total</div>
+                            <p>
+                                Sua equipe pode cadastrar e matricular
+                                colaboradores sem depender de atendimento ou
+                                suporte.
+                            </p>
+                            <p>
+                                Tudo acontece em tempo real, direto na
+                                plataforma, com total controle do gestor.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="flex flex-col border-white/10 bg-white/5">
+                        <div class="text-4xl font-black mb-6">02</div>
+                        <div class="space-y-2.5 [&>p]:text-sm/6">
+                            <div class="text-2xl">Gestão inteligente</div>
+                            <p>
+                                Acompanhe o progresso dos alunos, visualize
+                                vencimentos de certificados e gere relatórios
+                                personalizados &mdash; tudo com poucos cliques.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="flex flex-col border-white/10 bg-white/5">
+                        <div class="text-4xl font-black mb-6">03</div>
+                        <div class="space-y-2.5 [&>p]:text-sm/6">
+                            <div class="text-2xl">Cadastro em larga escala</div>
+                            <p>
+                                Precisa cadastrar 5, 50 ou 500 colaboradores?
+                                Importe seus colaboradores em larga escala.
+                            </p>
+                            <p>
+                                A importação em lote poupa tempo e reduz erros
+                                operacionais.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="flex flex-col border-white/10 bg-white/5">
+                        <div class="text-4xl font-black mb-6">04</div>
+                        <div class="space-y-2.5 [&>p]:text-sm/6">
+                            <div class="text-2xl">
+                                Relatórios e certificados
+                            </div>
+                            <p>Certificados automáticos ao final do curso.</p>
+                            <p>
+                                Exporte relatórios completos, ideais para
+                                auditorias, gestão de compliance e tomada de
+                                decisão.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="flex flex-col border-white/10 bg-white/5">
+                        <div class="text-4xl font-black mb-6">05</div>
+                        <div class="space-y-2.5 [&>p]:text-sm/6">
+                            <div class="text-2xl">Sem burocracia</div>
+                            <p>
+                                Chega de emails, formulários e esperas. O
+                                gerenciamento dos treinamentos acontecem com
+                                fluidez — como deve ser no mundo digital.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="flex flex-col justify-center items-center border-lime-400"
+                    >
+                        ...
+                    </div>
+                </div>
             </section>
         </Container>
     </div>