From 4c04c0ab52299d24c8063f1ea9f0fbcf5abddd72 Mon Sep 17 00:00:00 2001
From: luis cespedes <lxluxo23@gmail.com>
Date: Wed, 14 May 2025 16:42:50 -0400
Subject: [PATCH] animaciones weonas

---
 src/app/app.module.ts                    |   2 +
 src/app/pages/home2/home2.component.html | 110 +++++++++++------------
 2 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5908f4a..fa6b2b6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { HomeComponent } from './pages/home/home.component';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { HttpClient } from '@angular/common/http';
 import { Home2Component } from './pages/home2/home2.component';
+import { AnimateOnScrollModule } from 'primeng/animateonscroll';
 @NgModule({
   declarations: [
     AppComponent,
@@ -35,6 +36,7 @@ import { Home2Component } from './pages/home2/home2.component';
     CommonModule,
     InputTextModule,
     InputTextareaModule,
+    AnimateOnScrollModule,
     TranslateModule.forRoot()
 
   ],
diff --git a/src/app/pages/home2/home2.component.html b/src/app/pages/home2/home2.component.html
index 509119e..c5b5469 100644
--- a/src/app/pages/home2/home2.component.html
+++ b/src/app/pages/home2/home2.component.html
@@ -71,45 +71,45 @@
 </div>
 <div class="bg-gray-900 px-4 py-8 md:px-6 lg:px-8">
     <div class="flex flex-wrap">
-        <div class="w-12 lg:w-6 p-4">
+        <div class="w-12 lg:w-6 p-4 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDuration="1000">
             <h1 class="text-6xl font-bold text-white mt-0 mb-3">Soluciones tecnológicas que impulsan tu negocio <span class="text-yellow-500 underline">al siguiente nivel</span></h1>
             <p class="text-3xl text-gray-400 mt-0 mb-5">Desarrollo, implementación y mantenimiento de aplicaciones empresariales utilizando las tecnologías más avanzadas.</p>
             <ul class="list-none p-0 m-0">
-                <li class="mb-3 flex align-items-center"><i class="pi pi-server text-yellow-500 text-xl mr-2"></i><span class="text-gray-400 line-height-3">Desarrollo de aplicaciones a medida para potenciar tu negocio.</span></li>
-                <li class="mb-3 flex align-items-center"><i class="pi pi-cloud text-yellow-500 text-xl mr-2"></i><span class="text-gray-400 line-height-3">Despliegue y gestión en la nube para mayor rendimiento.</span></li>
-                <li class="mb-3 flex align-items-center"><i class="pi pi-sync text-yellow-500 text-xl mr-2"></i><span class="text-gray-400 line-height-3">Migraciones y actualización de sistemas con mínimo impacto operacional.</span></li>
+                <li class="mb-3 flex align-items-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDelay="200" enterDuration="1000"><i class="pi pi-server text-yellow-500 text-xl mr-2"></i><span class="text-gray-400 line-height-3">Desarrollo de aplicaciones a medida para potenciar tu negocio.</span></li>
+                <li class="mb-3 flex align-items-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDelay="400" enterDuration="1000"><i class="pi pi-cloud text-yellow-500 text-xl mr-2"></i><span class="text-gray-400 line-height-3">Despliegue y gestión en la nube para mayor rendimiento.</span></li>
+                <li class="mb-3 flex align-items-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDelay="600" enterDuration="1000"><i class="pi pi-sync text-yellow-500 text-xl mr-2"></i><span class="text-gray-400 line-height-3">Migraciones y actualización de sistemas con mínimo impacto operacional.</span></li>
             </ul>
-            <button type="button" pButton pRipple label="Solicita una Consulta" class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium"></button>
+            <button type="button" pButton pRipple label="Solicita una Consulta" class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDelay="800" enterDuration="1000"></button>
         </div>
-        <div class="w-12 lg:w-6 text-center lg:text-right overflow-hidden">
+        <div class="w-12 lg:w-6 text-center lg:text-right overflow-hidden animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000">
             <img src="assets/images/blocks/hero/hero-illustration.svg" alt="Imagen" class="w-full lg:w-auto">
         </div>
     </div>
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
-    <div class="flex justify-content-evenly flex-wrap">
-        <div class="p-3">
+    <div class="flex justify-content-evenly flex-wrap animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1200">
+        <div class="p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDelay="200" enterDuration="1000">
             <img src="assets/images/blocks/logos/peak-500.svg" alt="Cliente" height="50">
         </div>
-        <div class="p-3">
+        <div class="p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDelay="400" enterDuration="1000">
             <img src="assets/images/blocks/logos/charot-500.svg" alt="Cliente" height="50">
         </div>
-        <div class="p-3">
+        <div class="p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDelay="600" enterDuration="1000">
             <img src="assets/images/blocks/logos/hyper-500.svg" alt="Cliente" height="50">
         </div>
-        <div class="p-3">
+        <div class="p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDelay="800" enterDuration="1000">
             <img src="assets/images/blocks/logos/hodly-500.svg" alt="Cliente" height="50">
         </div>
-        <div class="p-3">
+        <div class="p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDelay="1000" enterDuration="1000">
             <img src="assets/images/blocks/logos/franki-500.svg" alt="Cliente" height="50">
         </div>
     </div>
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
-    <div class="font-bold text-900 text-3xl mb-3 text-center">Construye Tu Futuro Digital</div>
-    <div class="text-700 text-center mb-3">Optimiza tus procesos y mejora la experiencia de tus usuarios con nuestras soluciones tecnológicas personalizadas.</div>
+    <div class="font-bold text-900 text-3xl mb-3 text-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeindown" enterDuration="1000">Construye Tu Futuro Digital</div>
+    <div class="text-700 text-center mb-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1000" enterDelay="200">Optimiza tus procesos y mejora la experiencia de tus usuarios con nuestras soluciones tecnológicas personalizadas.</div>
     <div class="flex flex-wrap">
-        <div class="w-full lg:w-6 xl:w-3 p-5">
+        <div class="w-full lg:w-6 xl:w-3 p-5 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinup" enterDuration="1000" enterDelay="300">
             <img src="assets/images/blocks/feature/feature-illustration-1.svg" alt="Imagen" class="w-full">
             <div class="mt-3 mb-2 font-medium text-900 text-xl">Desarrollo a Medida</div>
             <span class="text-700 line-height-3">Creamos soluciones personalizadas adaptadas específicamente a las necesidades únicas de tu empresa y sector.</span>
@@ -118,7 +118,7 @@
                 <i class="pi pi-arrow-right ml-3"></i>
             </a>
         </div>
-        <div class="w-full lg:w-6 xl:w-3 p-5">
+        <div class="w-full lg:w-6 xl:w-3 p-5 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinup" enterDuration="1000" enterDelay="500">
             <img src="assets/images/blocks/feature/feature-illustration-2.svg" alt="Imagen" class="w-full">
             <div class="mt-3 mb-2 font-medium text-900 text-xl">Despliegue Cloud</div>
             <span class="text-700 line-height-3">Implementamos y gestionamos tus aplicaciones en entornos cloud para garantizar escalabilidad y disponibilidad.</span>
@@ -127,7 +127,7 @@
                 <i class="pi pi-arrow-right ml-3"></i>
             </a>
         </div>
-        <div class="w-full lg:w-6 xl:w-3 p-5">
+        <div class="w-full lg:w-6 xl:w-3 p-5 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinup" enterDuration="1000" enterDelay="700">
             <img src="assets/images/blocks/feature/feature-illustration-3.svg" alt="Imagen" class="w-full">
             <div class="mt-3 mb-2 font-medium text-900 text-xl">Licitaciones Públicas</div>
             <span class="text-700 line-height-3">Te guiamos en todo el proceso de licitación pública, desde la preparación hasta la implementación final.</span>
@@ -136,7 +136,7 @@
                 <i class="pi pi-arrow-right ml-3"></i>
             </a>
         </div>
-        <div class="w-full lg:w-6 xl:w-3 p-5">
+        <div class="w-full lg:w-6 xl:w-3 p-5 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinup" enterDuration="1000" enterDelay="900">
             <img src="assets/images/blocks/feature/feature-illustration-4.svg" alt="Imagen" class="w-full">
             <div class="mt-3 mb-2 font-medium text-900 text-xl">Consultoría Técnica</div>
             <span class="text-700 line-height-3">Ofrecemos asesoramiento experto para optimizar tu infraestructura tecnológica y mejorar tus procesos.</span>
@@ -148,89 +148,89 @@
     </div>
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8 overflow-hidden">
-    <div class="font-bold text-900 text-3xl mb-3 text-center">Nuestro Proceso de Trabajo</div>
-    <div class="text-700 text-center mb-5 line-height-3">Implementamos metodologías ágiles para asegurar el éxito de cada proyecto y la satisfacción total de nuestros clientes.</div>
+    <div class="font-bold text-900 text-3xl mb-3 text-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDuration="1000">Nuestro Proceso de Trabajo</div>
+    <div class="text-700 text-center mb-5 line-height-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1000">Implementamos metodologías ágiles para asegurar el éxito de cada proyecto y la satisfacción total de nuestros clientes.</div>
     <div class="flex lg:justify-content-center mb-5">
-        <div class="py-3 pr-8 pl-3 w-30rem hidden lg:block">
+        <div class="py-3 pr-8 pl-3 w-30rem hidden lg:block animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDuration="1000">
             <img src="assets/images/blocks/feature/feature-timeline-1.png" alt="Imagen" class="w-full mr-8">
         </div>
-        <div class="flex flex-column align-items-center w-2rem">
+        <div class="flex flex-column align-items-center w-2rem animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDuration="1000">
             <span class="bg-blue-500 text-0 flex align-items-center justify-content-center border-circle" style="min-width:2.5rem; min-height: 2.5rem">1</span>
             <div class="h-full bg-blue-500" style="width: 2px; min-height: 4rem"></div>
         </div>
-        <div class="py-3 pl-5 lg:pl-8 pl-3 lg:w-30rem">
+        <div class="py-3 pl-5 lg:pl-8 pl-3 lg:w-30rem animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000">
             <div class="text-900 text-xl mb-2 font-medium">Análisis y Planificación</div>
             <span class="block text-700 line-height-3 mb-3">Evaluamos tus necesidades actuales y objetivos futuros para diseñar la solución tecnológica ideal para tu negocio.</span>
             <div class="pt-3 border-top-1 border-300">
                 <div class="mb-2 line-height-3"><span class="text-900 font-medium">Estudio de requerimientos</span> detallado para entender exactamente lo que necesitas.</div>
                 <div class="line-height-3"><span class="text-900 font-medium">Planificación del proyecto</span> con plazos y entregables claramente definidos.</div>
             </div>
-            <img src="assets/images/blocks/feature/feature-timeline-1.png" alt="Imagen" class="w-full mt-3 block lg:hidden">
+            <img src="assets/images/blocks/feature/feature-timeline-1.png" alt="Imagen" class="w-full mt-3 block lg:hidden animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1000">
         </div>
     </div>
     <div class="flex justify-content-center mb-5">
-        <div class="py-3 pl-5 pr-3 lg:pr-8 lg:pl-3 lg:w-30rem flex-order-1 lg:flex-order-0">
+        <div class="py-3 pl-5 pr-3 lg:pr-8 lg:pl-3 lg:w-30rem flex-order-1 lg:flex-order-0 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDuration="1000">
             <div class="text-900 text-xl mb-2 font-medium">Desarrollo e Implementación</div>
             <span class="block text-700 line-height-3 mb-3">Nuestro equipo de expertos desarrolla tu solución utilizando las metodologías más eficientes y tecnologías de vanguardia.</span>
             <div class="pt-3 border-top-1 border-300">
                 <div class="mb-2 line-height-3"><span class="text-900 font-medium">Desarrollo iterativo</span> con entregas regulares para permitir ajustes y mejoras continuas.</div>
                 <div class="line-height-3"><span class="text-900 font-medium">Pruebas exhaustivas</span> para garantizar el rendimiento óptimo y la seguridad de tu aplicación.</div>
             </div>
-            <img src="assets/images/blocks/feature/feature-timeline-2.png" alt="Imagen" class="w-full mt-3 block lg:hidden">
+            <img src="assets/images/blocks/feature/feature-timeline-2.png" alt="Imagen" class="w-full mt-3 block lg:hidden animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1000">
         </div>
-        <div class="flex flex-column align-items-center w-2rem flex-order-0 lg:flex-order-1">
+        <div class="flex flex-column align-items-center w-2rem flex-order-0 lg:flex-order-1 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDuration="1000">
             <span class="bg-yellow-500 text-0 flex align-items-center justify-content-center border-circle" style="min-width:2.5rem; min-height: 2.5rem">2</span>
             <div class="h-full bg-yellow-500" style="width: 2px; min-height: 4rem"></div>
         </div>
-        <div class="py-3 pl-8 pr-3 w-30rem hidden lg:block flex-order-2">
+        <div class="py-3 pl-8 pr-3 w-30rem hidden lg:block flex-order-2 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000">
             <img src="assets/images/blocks/feature/feature-timeline-2.png" alt="Imagen" class="w-full mr-8">
         </div>
     </div>
     <div class="flex justify-content-center">
-        <div class="py-3 pr-8 pl-3 w-30rem hidden lg:block">
+        <div class="py-3 pr-8 pl-3 w-30rem hidden lg:block animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDuration="1000">
             <img src="assets/images/blocks/feature/feature-timeline-3.png" alt="Imagen" class="w-full mr-8">
         </div>
-        <div class="flex flex-column align-items-center w-2rem">
+        <div class="flex flex-column align-items-center w-2rem animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDuration="1000">
             <span class="bg-cyan-500 text-0 flex align-items-center justify-content-center border-circle" style="min-width:2.5rem; min-height: 2.5rem">3</span>
             <div class="h-full bg-cyan-500" style="width: 2px; min-height: 4rem"></div>
         </div>
-        <div class="py-3 pl-5 lg:pl-8 pl-3 lg:w-30rem">
+        <div class="py-3 pl-5 lg:pl-8 pl-3 lg:w-30rem animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000">
             <div class="text-900 text-xl mb-2 font-medium">Despliegue y Soporte Continuo</div>
             <span class="block text-700 line-height-3 mb-3">Implementamos tu solución y proporcionamos soporte técnico continuo para garantizar su funcionamiento óptimo.</span>
             <div class="pt-3 border-top-1 border-300">
                 <div class="mb-2 line-height-3"><span class="text-900 font-medium">Implementación gradual</span> para minimizar interrupciones en tus operaciones diarias.</div>
                 <div class="line-height-3"><span class="text-900 font-medium">Monitoreo constante</span> y actualizaciones periódicas para mantener tu sistema actualizado y seguro.</div>
             </div>
-            <img src="assets/images/blocks/feature/feature-timeline-3.png" alt="Imagen" class="w-full mt-3 block lg:hidden">
+            <img src="assets/images/blocks/feature/feature-timeline-3.png" alt="Imagen" class="w-full mt-3 block lg:hidden animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1000">
         </div>
     </div>
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
-    <div class="text-orange-500 text-center mb-3">RESULTADOS TANGIBLES</div>
-    <div class="font-bold text-5xl text-900 text-center mb-6">Lo que logramos para nuestros clientes</div>
+    <div class="text-orange-500 text-center mb-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeindown" enterDuration="1000">RESULTADOS TANGIBLES</div>
+    <div class="font-bold text-5xl text-900 text-center mb-6 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="zoomin" enterDuration="1000">Lo que logramos para nuestros clientes</div>
     <div class="grid grid-nogutter">
-        <div class="col-12 md:col-6 lg:col-3 p-3">
+        <div class="col-12 md:col-6 lg:col-3 p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="flipin" enterDuration="1000" enterDelay="200">
             <div class="bg-blue-50 text-center p-5 border-round flex flex-column">
                 <i class="text-blue-500 pi pi-desktop text-4xl block mb-4"></i>
                 <span class="text-900 text-5xl">120+</span>
                 <div class="text-blue-700 mt-3 font-medium">Proyectos Completados</div>
             </div>
         </div>
-        <div class="col-12 md:col-6 lg:col-3 p-3">
+        <div class="col-12 md:col-6 lg:col-3 p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="flipin" enterDuration="1000" enterDelay="400">
             <div class="bg-purple-50 text-center p-5 border-round flex flex-column">
                 <i class="text-purple-500 pi pi-users text-4xl block mb-4"></i>
                 <span class="text-900 text-5xl">85+</span>
                 <div class="text-purple-700 mt-3 font-medium">Clientes Satisfechos</div>
             </div>
         </div>
-        <div class="col-12 md:col-6 lg:col-3 p-3">
+        <div class="col-12 md:col-6 lg:col-3 p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="flipin" enterDuration="1000" enterDelay="600">
             <div class="bg-teal-50 text-center p-5 border-round flex flex-column">
                 <i class="text-teal-500 pi pi-globe text-4xl block mb-4"></i>
                 <span class="text-900 text-5xl">25+</span>
                 <div class="text-teal-700 mt-3 font-medium">Licitaciones Ganadas</div>
             </div>
         </div>
-        <div class="col-12 md:col-6 lg:col-3 p-3">
+        <div class="col-12 md:col-6 lg:col-3 p-3 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="flipin" enterDuration="1000" enterDelay="800">
             <div class="bg-indigo-50 text-center p-5 border-round flex flex-column">
                 <i class="text-indigo-500 pi pi-star text-4xl block mb-4"></i>
                 <span class="text-900 text-5xl">98%</span>
@@ -240,36 +240,36 @@
     </div>
 </div>
 <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
-    <div class="flex flex-wrap relative overflow-hidden" style="border-radius:1rem; background:radial-gradient(100% 1126.49% at 100% 0%, rgba(106, 200, 212, 0.4) 0%, rgba(33, 33, 33, 0) 100%), #212121;">
-        <div class="px-6 py-8">
+    <div class="flex flex-wrap relative overflow-hidden animation-duration-1000 animation-ease-in-out" style="border-radius:1rem; background:radial-gradient(100% 1126.49% at 100% 0%, rgba(106, 200, 212, 0.4) 0%, rgba(33, 33, 33, 0) 100%), #212121;" pAnimateOnScroll enterClass="fadein" enterDuration="1000">
+        <div class="px-6 py-8 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDuration="1000">
             <span class="uppercase text-cyan-500 font-bold">EMPIEZA HOY MISMO</span>
             <div class="text-white text-medium text-5xl mt-3 mb-5">¡Digitaliza tu negocio ahora!</div>
-            <button pRipple class="appearance-none" class="p-3 bg-cyan-500 hover:bg-cyan-300 cursor-pointer transition-colors font-medium gray-900 border-none p-component transition-colors transition-duration-150" style="border-radius: 35px">Solicita una Demo Gratuita</button>
+            <button pRipple class="appearance-none animation-duration-1000 animation-ease-in-out" class="p-3 bg-cyan-500 hover:bg-cyan-300 cursor-pointer transition-colors font-medium gray-900 border-none p-component transition-colors transition-duration-150" style="border-radius: 35px" pAnimateOnScroll enterClass="zoomin" enterDuration="1000" enterDelay="300">Solicita una Demo Gratuita</button>
         </div>
             
-        <img src="assets/images/blocks/cta/cta-browser.png" alt="Imagen" class="static lg:absolute block mx-auto" style="height: 400px; top: -2rem; right: -1rem">
+        <img src="assets/images/blocks/cta/cta-browser.png" alt="Imagen" class="static lg:absolute block mx-auto animation-duration-1000 animation-ease-in-out" style="height: 400px; top: -2rem; right: -1rem" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000">
     </div>
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
-    <div class="overflow-x-auto">
+    <div class="overflow-x-auto animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1200">
         <table class="w-full white-space-nowrap" style="border-collapse: collapse; border-spacing: 0">
             <thead>
                 <tr>
                     <td class="surface-100 p-3">
-                        <div class="text-3xl text-900 mb-2">Planes de Servicio</div>
+                        <div class="text-3xl text-900 mb-2 animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinleft" enterDuration="1000">Planes de Servicio</div>
                         <span class="text-600 line-height-3">Soluciones tecnológicas adaptadas a las necesidades y presupuesto de cada empresa</span>
                     </td>
-                    <td class="surface-100 p-3 text-center">
+                    <td class="surface-100 p-3 text-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeindown" enterDuration="1000" enterDelay="200">
                         <div class="text-900 text-xl font-medium mb-3">Básico</div>
                         <div class="text-600 mb-3"><span class="text-3xl text-900">$3.500.000</span> /mes</div>
                         <button pButton pRipple type="button" class="p-button-rounded" label="Prueba Gratis"></button>
                     </td>
-                    <td class="surface-100 p-3 text-center">
+                    <td class="surface-100 p-3 text-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeindown" enterDuration="1000" enterDelay="400">
                         <div class="text-900 text-xl font-medium mb-3">Premium</div>
                         <div class="text-600 mb-3"><span class="text-3xl text-900">$7.000.000</span> /mes</div>
                         <button pButton pRipple type="button" class="p-button-rounded" label="Contratar"></button>
                     </td>
-                    <td class="surface-100 p-3 text-center">
+                    <td class="surface-100 p-3 text-center animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeindown" enterDuration="1000" enterDelay="600">
                         <div class="text-900 text-xl font-medium mb-3">Empresarial</div>
                         <div class="text-600 mb-3"><span class="text-3xl text-900">$12.000.000</span> /mes</div>
                         <button pButton pRipple type="button" class="p-button-rounded p-button-outlined" label="Contáctanos"></button>
@@ -277,49 +277,49 @@
                 </tr>
             </thead>
             <tbody>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="200">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Desarrollo de Aplicaciones</td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                 </tr>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="300">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Despliegue en la Nube</td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                 </tr>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="400">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Soporte Técnico</td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                 </tr>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="500">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Actualizaciones</td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                 </tr>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="600">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Asesoría en Licitaciones</td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-500 pi pi-times"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                 </tr>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="700">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Consultoría Estratégica</td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-500 pi pi-times"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-500 pi pi-times"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                 </tr>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="800">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Migraciones de Sistemas</td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-500 pi pi-times"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-500 pi pi-times"></i></td>
                     <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
                 </tr>
-                <tr>
+                <tr class="animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadeinright" enterDuration="1000" enterDelay="900">
                     <td class="p-3 text-900 font-medium border-bottom-1 border-200">Proyectos Simultáneos</td>
                     <td class="text-center text-600 border-bottom-1 border-200">Hasta <span class="text-900">2</span> proyectos</td>
                     <td class="text-center text-600 border-bottom-1 border-200">Hasta <span class="text-900">5</span> proyectos</td>