lxluxo23/webgen.cl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animaciones weonas

Browse Source
This commit is contained in:
luis cespedes 2025-05-14 16:42:50 -04:00
parent 0fb7003761
commit 4c04c0ab52
2 changed files with 57 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -16,6 +16,7 @@ import { HomeComponent } from './pages/home/home.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Home2Component } from './pages/home2/home2.component'; import { Home2Component } from './pages/home2/home2.component';
import { AnimateOnScrollModule } from 'primeng/animateonscroll';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
@ -35,6 +36,7 @@ import { Home2Component } from './pages/home2/home2.component';
CommonModule, CommonModule,
InputTextModule, InputTextModule,
InputTextareaModule, InputTextareaModule,
AnimateOnScrollModule,
TranslateModule.forRoot() TranslateModule.forRoot()
], ],

110
src/app/pages/home2/home2.component.html
View File

@ -71,45 +71,45 @@
</div> </div>
<div class="bg-gray-900 px-4 py-8 md:px-6 lg:px-8"> <div class="bg-gray-900 px-4 py-8 md:px-6 lg:px-8">
<div class="flex flex-wrap"> <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> <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> <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"> <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 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"><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="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"><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="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> </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>
<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"> <img src="assets/images/blocks/hero/hero-illustration.svg" alt="Imagen" class="w-full lg:w-auto">
</div> </div>
</div> </div>
</div> </div>
<div class="surface-section px-4 py-8 md:px-6 lg:px-8"> <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="flex justify-content-evenly flex-wrap"> <div class="flex justify-content-evenly flex-wrap animation-duration-1000 animation-ease-in-out" pAnimateOnScroll enterClass="fadein" enterDuration="1200">
<div class="p-3"> <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"> <img src="assets/images/blocks/logos/peak-500.svg" alt="Cliente" height="50">
</div> </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"> <img src="assets/images/blocks/logos/charot-500.svg" alt="Cliente" height="50">
</div> </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"> <img src="assets/images/blocks/logos/hyper-500.svg" alt="Cliente" height="50">
</div> </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"> <img src="assets/images/blocks/logos/hodly-500.svg" alt="Cliente" height="50">
</div> </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"> <img src="assets/images/blocks/logos/franki-500.svg" alt="Cliente" height="50">
</div> </div>
</div> </div>
</div> </div>
<div class="surface-section px-4 py-8 md:px-6 lg:px-8"> <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="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">Optimiza tus procesos y mejora la experiencia de tus usuarios con nuestras soluciones tecnológicas personalizadas.</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="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"> <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> <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> <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> <i class="pi pi-arrow-right ml-3"></i>
</a> </a>
</div> </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"> <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> <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> <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> <i class="pi pi-arrow-right ml-3"></i>
</a> </a>
</div> </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"> <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> <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> <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> <i class="pi pi-arrow-right ml-3"></i>
</a> </a>
</div> </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"> <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> <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> <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> </div>
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 overflow-hidden"> <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="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">Implementamos metodologías ágiles para asegurar el éxito de cada proyecto y la satisfacción total de nuestros clientes.</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="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"> <img src="assets/images/blocks/feature/feature-timeline-1.png" alt="Imagen" class="w-full mr-8">
</div> </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> <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 class="h-full bg-blue-500" style="width: 2px; min-height: 4rem"></div>
</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> <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> <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="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="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 class="line-height-3"><span class="text-900 font-medium">Planificación del proyecto</span> con plazos y entregables claramente definidos.</div>
</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> </div>
<div class="flex justify-content-center mb-5"> <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> <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> <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="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="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 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> </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>
<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> <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 class="h-full bg-yellow-500" style="width: 2px; min-height: 4rem"></div>
</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"> <img src="assets/images/blocks/feature/feature-timeline-2.png" alt="Imagen" class="w-full mr-8">
</div> </div>
</div> </div>
<div class="flex justify-content-center"> <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"> <img src="assets/images/blocks/feature/feature-timeline-3.png" alt="Imagen" class="w-full mr-8">
</div> </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> <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 class="h-full bg-cyan-500" style="width: 2px; min-height: 4rem"></div>
</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> <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> <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="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="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 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> </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>
</div> </div>
<div class="surface-section px-4 py-8 md:px-6 lg:px-8"> <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="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">Lo que logramos para nuestros clientes</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="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"> <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> <i class="text-blue-500 pi pi-desktop text-4xl block mb-4"></i>
<span class="text-900 text-5xl">120+</span> <span class="text-900 text-5xl">120+</span>
<div class="text-blue-700 mt-3 font-medium">Proyectos Completados</div> <div class="text-blue-700 mt-3 font-medium">Proyectos Completados</div>
</div> </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"> <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> <i class="text-purple-500 pi pi-users text-4xl block mb-4"></i>
<span class="text-900 text-5xl">85+</span> <span class="text-900 text-5xl">85+</span>
<div class="text-purple-700 mt-3 font-medium">Clientes Satisfechos</div> <div class="text-purple-700 mt-3 font-medium">Clientes Satisfechos</div>
</div> </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"> <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> <i class="text-teal-500 pi pi-globe text-4xl block mb-4"></i>
<span class="text-900 text-5xl">25+</span> <span class="text-900 text-5xl">25+</span>
<div class="text-teal-700 mt-3 font-medium">Licitaciones Ganadas</div> <div class="text-teal-700 mt-3 font-medium">Licitaciones Ganadas</div>
</div> </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"> <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> <i class="text-indigo-500 pi pi-star text-4xl block mb-4"></i>
<span class="text-900 text-5xl">98%</span> <span class="text-900 text-5xl">98%</span>
@ -240,36 +240,36 @@
</div> </div>
</div> </div>
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8"> <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="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"> <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> <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> <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> </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> </div>
<div class="surface-section px-4 py-8 md:px-6 lg:px-8"> <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"> <table class="w-full white-space-nowrap" style="border-collapse: collapse; border-spacing: 0">
<thead> <thead>
<tr> <tr>
<td class="surface-100 p-3"> <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> <span class="text-600 line-height-3">Soluciones tecnológicas adaptadas a las necesidades y presupuesto de cada empresa</span>
</td> </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-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> <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> <button pButton pRipple type="button" class="p-button-rounded" label="Prueba Gratis"></button>
</td> </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-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> <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> <button pButton pRipple type="button" class="p-button-rounded" label="Contratar"></button>
</td> </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-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> <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> <button pButton pRipple type="button" class="p-button-rounded p-button-outlined" label="Contáctanos"></button>
@ -277,49 +277,49 @@
</tr> </tr>
</thead> </thead>
<tbody> <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="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> <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> <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="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> <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> <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="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> <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> <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="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> <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> <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="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-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>
<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> <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="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-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> <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
</tr> </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="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-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> <td class="text-center p-medium border-bottom-1 border-200"><i class="text-green-500 pi pi-check"></i></td>
</tr> </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="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">2</span> proyectos</td>
<td class="text-center text-600 border-bottom-1 border-200">Hasta <span class="text-900">5</span> proyectos</td> <td class="text-center text-600 border-bottom-1 border-200">Hasta <span class="text-900">5</span> proyectos</td>