From 67f73538c3d65835d856d262c35c21fbf4225c8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Tue, 29 Apr 2025 16:45:41 -0300
Subject: [PATCH] add

---
 superpage/src/components/Course/Clients.astro |   4 +-
 superpage/src/components/Course/Plans.astro   | 198 +++++++++---------
 superpage/src/components/Course/Stats.astro   |  30 +++
 superpage/src/components/Course/index.ts      |   1 +
 superpage/src/pages/_components/Stats.astro   |  11 -
 superpage/src/pages/index.astro               |  17 +-
 6 files changed, 146 insertions(+), 115 deletions(-)
 create mode 100644 superpage/src/components/Course/Stats.astro
 delete mode 100644 superpage/src/pages/_components/Stats.astro

diff --git a/superpage/src/components/Course/Clients.astro b/superpage/src/components/Course/Clients.astro
index 07ee50e..3c716af 100644
--- a/superpage/src/components/Course/Clients.astro
+++ b/superpage/src/components/Course/Clients.astro
@@ -9,9 +9,7 @@ import Nissan from "~/icons/logos/nissan.svg";
 import Manserv from "~/icons/logos/manserv.svg";
 ---
 
-<Container
-    class:list={["lg:text-center space-y-2.5 lg:space-y-5", Astro.props.class]}
->
+<Container class:list={["lg:text-center space-y-2.5", Astro.props.class]}>
     <h2 class="text-pretty text-4xl">Alguns clientes que acreditam em nós</h2>
     <Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
 </Container>
diff --git a/superpage/src/components/Course/Plans.astro b/superpage/src/components/Course/Plans.astro
index 7055423..504872f 100644
--- a/superpage/src/components/Course/Plans.astro
+++ b/superpage/src/components/Course/Plans.astro
@@ -3,108 +3,112 @@ import Container from "~/components/Container.astro";
 import Form from "./Contact.jsx";
 ---
 
-<Container id="modelos" {...Astro.props}>
-    <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
-        <h1 class="text-pretty text-4xl lg:text-6xl">
-            Modelos de contratação para sua empresa
-        </h1>
-        <div class="grid lg:grid-cols-3 gap-5">
-            <div
-                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
-            >
-                <h1
-                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
+<div>
+    <Container id="modelos" {...Astro.props}>
+        <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
+            <h1 class="text-pretty text-4xl lg:text-6xl">
+                Modelos de contratação para sua empresa
+            </h1>
+            <div class="grid lg:grid-cols-3 gap-5">
+                <div
+                    class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
                 >
-                    EDUSEG Flexível
-                </h1>
-                <h2 class="text-xl/6 font-semibold">
-                    Catálogo completo sempre à sua disposição
-                </h2>
-                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
-                    <li>Acesse todos os cursos imediatamente</li>
-                    <li>Pague apenas pelo que usar, mês a mês</li>
-                    <li>Gestão e autonomia direto pela plataforma</li>
-                </ul>
-                <p class="mt-auto">
-                    Ideal para empresas que treinam continuamente e precisam de
-                    agilidade.
-                </p>
-                <a
-                    href="#"
-                    class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                    <h1
+                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
+                    >
+                        EDUSEG Flexível
+                    </h1>
+                    <h2 class="text-xl/6 font-semibold">
+                        Catálogo completo sempre à sua disposição
+                    </h2>
+                    <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
+                        <li>Acesse todos os cursos imediatamente</li>
+                        <li>Pague apenas pelo que usar, mês a mês</li>
+                        <li>Gestão e autonomia direto pela plataforma</li>
+                    </ul>
+                    <p class="mt-auto">
+                        Ideal para empresas que treinam continuamente e precisam
+                        de agilidade.
+                    </p>
+                    <a
+                        href="#"
+                        class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                    >
+                        Saiba mais
+                    </a>
+                </div>
+                <div
+                    class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
                 >
-                    Contratar
-                </a>
-            </div>
-            <div
-                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
-            >
-                <h1
-                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
-                >
-                    EDUSEG In-Company
-                </h1>
-                <h2 class="text-xl/6 font-semibold">
-                    Treinamento presencial na sua empresa
-                </h2>
-                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
-                    <li>Atendemos nas principais cidades do Brasil</li>
-                    <li>Instrutores especialistas com vivência prática</li>
-                    <li>Ideal para grandes turmas ou treinamentos práticos</li>
-                </ul>
-                <p class="mt-auto">
-                    Solução sob medida, direto no seu ambiente de trabalho.
-                </p>
-                <a
-                    href="#"
-                    class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
-                >
-                    Contratar
-                </a>
-            </div>
-            <div
-                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
-            >
-                <h1
-                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
-                >
-                    EDUSEG Conteúdo
-                </h1>
-                <h2 class="text-xl/6 font-semibold">
-                    Leve nosso conteúdo para sua plataforma
-                </h2>
-                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
-                    <li>Customização completa com sua identidade visual</li>
-                    <li>Entregamos em formato SCORM para qualquer LMS</li>
-                    <li>Ideal para empresas com ambiente EAD próprio</li>
-                </ul>
-                <p class="mt-auto">
-                    Seu time com o nosso conteúdo, na sua plataforma.
-                </p>
-                <a
-                    href="#"
-                    class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
-                >
-                    Contratar
-                </a>
+                    <h1
+                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
+                    >
+                        EDUSEG In-Company
+                    </h1>
+                    <h2 class="text-xl/6 font-semibold">
+                        Treinamento presencial na sua empresa
+                    </h2>
+                    <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
+                        <li>Atendemos nas principais cidades do Brasil</li>
+                        <li>Instrutores especialistas com vivência prática</li>
+                        <li>
+                            Ideal para grandes turmas ou treinamentos práticos
+                        </li>
+                    </ul>
+                    <p class="mt-auto">
+                        Solução sob medida, direto no seu ambiente de trabalho.
+                    </p>
+                    <a
+                        href="#"
+                        class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                    >
+                        Saiba mais
+                    </a>
+                </div>
+                <div
+                    class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
+                >
+                    <h1
+                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
+                    >
+                        EDUSEG Conteúdo
+                    </h1>
+                    <h2 class="text-xl/6 font-semibold">
+                        Leve nosso conteúdo para sua plataforma
+                    </h2>
+                    <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
+                        <li>Customização completa com sua identidade visual</li>
+                        <li>Entregamos em formato SCORM para qualquer LMS</li>
+                        <li>Ideal para empresas com ambiente EAD próprio</li>
+                    </ul>
+                    <p class="mt-auto">
+                        Seu time com o nosso conteúdo, na sua plataforma.
+                    </p>
+                    <a
+                        href="#"
+                        class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                    >
+                        Saiba mais
+                    </a>
+                </div>
             </div>
+        </section>
+    </Container>
+
+    <div class="relative z-40" style="display: none;">
+        <div class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter">
         </div>
-    </section>
-</Container>
 
-<div class="relative z-40" style="display: none;">
-    <div class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter">
-    </div>
-
-    <div class="fixed inset-0 overflow-y-auto">
-        <div class="flex justify-center items-center h-full max-lg:p-2.5">
-            <div
-                class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow"
-            >
-                <h1 class="text-3xl lg:text-4xl font-medium">
-                    Preencha os dados da sua empresa
-                </h1>
-                <Form client:load />
+        <div class="fixed inset-0 overflow-y-auto">
+            <div class="flex justify-center items-center h-full max-lg:p-2.5">
+                <div
+                    class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow"
+                >
+                    <h1 class="text-3xl lg:text-4xl font-medium">
+                        Preencha os dados da sua empresa
+                    </h1>
+                    <Form client:load />
+                </div>
             </div>
         </div>
     </div>
diff --git a/superpage/src/components/Course/Stats.astro b/superpage/src/components/Course/Stats.astro
new file mode 100644
index 0000000..82cd50e
--- /dev/null
+++ b/superpage/src/components/Course/Stats.astro
@@ -0,0 +1,30 @@
+---
+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">
+            <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"
+        >
+            <h1 class="text-lime-400 text-4xl font-semibold uppercase">
+                +5 mil
+            </h1>
+            <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"
+        >
+            <h1 class="text-lime-400 text-4xl font-semibold uppercase">
+                Desde 2012
+            </h1>
+            <span class="uppercase font-medium">Formando profissionais</span>
+        </div>
+    </section>
+</Container>
diff --git a/superpage/src/components/Course/index.ts b/superpage/src/components/Course/index.ts
index 82a553d..891843d 100644
--- a/superpage/src/components/Course/index.ts
+++ b/superpage/src/components/Course/index.ts
@@ -5,3 +5,4 @@ export { default as Modules } from "./Modules.astro";
 export { default as Trainer } from "./Trainer.astro";
 export { default as Faq } from "./Faq.astro";
 export { default as Plans } from "./Plans.astro";
+export { default as Stats } from "./Stats.astro";
diff --git a/superpage/src/pages/_components/Stats.astro b/superpage/src/pages/_components/Stats.astro
deleted file mode 100644
index eaf4104..0000000
--- a/superpage/src/pages/_components/Stats.astro
+++ /dev/null
@@ -1,11 +0,0 @@
----
-import Container from "~/components/Container.astro";
----
-
-<Container>
-    <div class="w-4/6 mx-auto">
-        <div>+100.000 Profissionais capacitados</div>
-        <div>+5.000 Empresas atendidas</div>
-        <div>12 anos de experiência</div>
-    </div>
-</Container>
diff --git a/superpage/src/pages/index.astro b/superpage/src/pages/index.astro
index 0a61436..290ffff 100644
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -4,8 +4,7 @@ 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 } from "~/components/Course";
-import Stats from "./_components/Stats.astro";
+import { Clients, Stats, Features, Plans } from "~/components/Course";
 
 import mulhercomepi from "~/assets/mulher-com-epi.png";
 const trends = [
@@ -23,7 +22,7 @@ const trends = [
 ---
 
 <Layout>
-    <div class="space-y-6 lg:space-y-12">
+    <div class="space-y-6 lg:space-y-24">
         <Container>
             <nav
                 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"
@@ -71,8 +70,18 @@ const trends = [
             </nav>
         </Container>
 
+        <Clients />
+
         <Stats />
 
-        <Clients />
+        <Features />
+
+        <Container>
+            <section>
+                <h1 class="text-pretty text-5xl">
+                    Uma plataforma, múltiplas soluções
+                </h1>
+            </section>
+        </Container>
     </div>
 </Layout>