HERO ANIMADO
Gradiente vivo con partículas flotando en CSS puro.
Sin canvas ni librerías: solo @keyframes y radial-gradient. Edite este texto como cualquier párrafo del sitio.
Componentes UI
Catálogo de referencia — 16 piezas listas para reutilizar.
Cada tarjeta es un bloque de WordPress nativo: el texto, los títulos y los botones se editan directo desde el Site Editor. El comportamiento (tabs, acordeón, sliders…) lo agrega una capa de JavaScript ligera; si se desactiva, el contenido sigue siendo legible. Página oculta del menú — solo referencia interna.
A · Hero y atención
Elementos para captar la mirada en los primeros 3 segundos.
Contador animado on-scroll
Clase .cui-counter — cambie data-target y data-suffix en el HTML del bloque.
0
Proyectos entregados
0
Soporte disponible
0
Clientes que renuevan
0
En el mercado
B · Tarjetas interactivas
Micro-interacciones que dan sensación de producto premium.
Tarjeta con tilt 3D
Mueva el mouse sobre la tarjeta. Clase .cui-tilt, ángulo configurable en JS.
🎨
Diseño a la medida
La tarjeta rota según la posición del cursor, con un brillo que la sigue.
Tarjeta flip (frente/dorso)
Pase el mouse para voltear. Ideal para equipo o antes/después de un dato.
Ana Rodríguez
Líder de Proyectos
Ana Rodríguez
8 años coordinando implementaciones de software para PyMEs en Costa Rica y Guatemala.
Tarjeta spotlight
El glow sigue al cursor con radial-gradient posicionado por JS.
Infraestructura gestionada
Monitoreo, respaldo y soporte proactivo, sin que usted tenga que pedirlo.
C · Navegación de contenido
Organizar mucha información sin saturar la pantalla.
Tabs accesibles
role=tablist / aria-selected. Clase .cui-tabs.
Qué incluye el proyecto
Definimos objetivos, entregables y criterios de éxito antes de escribir una sola línea de código.
Cómo planificamos
Cada etapa tiene una fecha comprometida y un responsable visible para usted.
Después de la entrega
30 días de ajustes incluidos y un canal directo con el equipo que construyó la solución.
Acordeón FAQ
Altura animada con transición suave. Clase .cui-accordion.
Depende del alcance; proyectos típicos toman entre 4 y 10 semanas desde el diagnóstico.
Sí, todos los planes incluyen dominio, hosting y certificado SSL administrados por nosotros.
Cada plan trae horas mensuales de cambios; si se necesitan más, se cotizan aparte.
Timeline vertical
Puntos que se iluminan al entrar al viewport. Clase .cui-timeline.
Semana 1
Diagnóstico
Entendemos el proceso real de su equipo, no el del manual.
Semana 2
Propuesta
Alcance, tiempos y presupuesto cerrado por escrito.
Semana 3-6
Construcción
Avances demostrables cada semana, con su validación.
Semana 7
Entrega
Capacitación, documentación y soporte de arranque.
D · Prueba social y comparación
Ayudar a decidir mostrando datos, no solo adjetivos.
Comparador de precios mensual/anual
Toggle cambia el precio mostrado. Clase .cui-pt-switch.
Presencia Web
$49/mes
- 5 páginas
- 8 horas de cambios
- SSL y hosting
Recomendado
Negocio Digital
$99/mes
- 10 páginas + blog
- 20 horas de cambios
- SEO técnico
Tienda en Línea
$179/mes
- Ecommerce completo
- 35 horas de cambios
- Pasarela de pago
Tabla comparativa responsive
Scroll horizontal en móvil. Clase .cui-cmp-table.
| Presencia | Digital | Tienda | |
|---|---|---|---|
| Páginas incluidas | 5 | 10 + blog | Ilimitadas |
| Horas de soporte/mes | 8 | 20 | 35 |
| SEO técnico | — | ✓ | ✓ |
| Ecommerce | — | — | ✓ |
| Correos corporativos | ✓ | ✓ | ✓ |
Testimonios en carrusel
Swipe táctil + dots. Clase .cui-ts.
Logos en marquee infinito
Loop CSS puro, se pausa en hover. Clase .cui-marquee.
Slider antes/después
Arrastre el control central. Clase .cui-ba.
E · Formularios y feedback
El detalle que hace sentir pulido a un sitio.
Formulario multi-paso (wizard)
Barra de progreso + navegación. Clase .cui-wizard. Demo de UI, sin backend.
1. Sus datos
Nombre y correo (demo, sin envío real).
2. Su proyecto
Cuéntenos qué necesita resolver.
3. Confirmación
Revise y confirme antes de enviar.
Barras de progreso animadas
Se llenan al entrar al viewport. Clase .cui-bars.
Botones y badges con micro-interacción
Variantes: ripple, pulse, ghost, icon-shift.