update

superpage/src/components/Features.astro

@@ -0,0 +1,65 @@
+---
+import { Picture } from "astro:assets";
+import Container from "~/components/Container.astro";
+import mulherdenegocios from "~/assets/mulher-de-negocios.png";
+import homemdenegocios from "~/assets/homem-de-negocios.png";
+---
+
+<Container {...Astro.props}>
+    <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-5 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">
+                <h3 class="text-pretty text-4xl">
+                    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.
+                </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">
+                        Agilidade 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="#contato"
+                        class="text-blue-400 underline hover:no-underline"
+                    >
+                        Agendar uma demonstração
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</Container>