Caso de estudio · 2025
Alquileres ARZA
Sitio web rápido para una empresa con más de 25 años en alquiler de mobiliario y decoración para eventos en Costa Rica
Visitar proyecto- Cliente
- Alquileres ARZA
- Proyecto
- Sitio Web Premium para Eventos
- Entrega
- 2025
Contexto y respuesta
El proyecto, sin adornos.
Alquileres ARZA es una empresa familiar costarricense con sede en Heredia, especializada en alquiler de mobiliario, mantelería, toldos y decoración para eventos. Con más de 25 años en el mercado y capacidad para eventos de 10 hasta 2,000+ invitados, necesitaban una presencia digital que reflejara la calidad premium de sus servicios.
La empresa contaba con presencia en redes sociales pero carecía de un sitio web propio. El desafío principal era transmitir confianza y profesionalismo desde el primer contacto digital, generar leads calificados y posicionar localmente en buscadores para el mercado costarricense.
Seleccioné Astro 5 como framework de generación estática (SSG), eliminando JavaScript innecesario del bundle final. Combinado con Tailwind CSS v4 para un sistema de diseño consistente y GSAP + ScrollTrigger para animaciones fluidas que elevan la experiencia sin sacrificar performance.
Arquitectura
Tecnología con una función clara.
Cada herramienta se eligió por su aporte al rendimiento, la operación o la capacidad de crecimiento del proyecto.
- 01
Astro 5.17
Framework SSG que elimina JavaScript innecesario del bundle final
- 02
Tailwind CSS v4
Sistema de diseño consistente y responsive con utility-first
- 03
GSAP 3.14 + ScrollTrigger
688 líneas de animación organizada en 6 categorías
- 04
PHP
Backend para formulario de contacto con validación server-side
- 05
Schema.org JSON-LD
SEO local con LocalBusiness, BreadcrumbList y schemas por página
- 06
Google Fonts
Cormorant Garamond para títulos e Inter para cuerpo de texto
Capacidades
Lo que hace posible.
- 01
Rendimiento Ultra Rapido
Generacion estatica con Astro 5 que elimina JavaScript innecesario. Build final de apenas 2.3 MB con imagenes, CSS y HTML incluidos
- 02
Sistema de Diseno Premium
Paleta dorado, negro y crema con tipografia Cormorant Garamond e Inter. 20+ variables CSS para consistencia en 4 paginas
- 03
Animaciones con Proposito
688 lineas de GSAP organizadas en 6 categorias: hero parallax, scroll-triggered 3D, contadores animados, hover effects y efecto ripple
- 04
SEO Local Costa Rica
Schema.org LocalBusiness con coordenadas GPS, horarios y servicios. Open Graph con locale es_CR y Twitter Cards optimizadas
- 05
Diseno Mobile-First
5 breakpoints progresivos, menu movil con overlay slide-in, tipografia fluida de 32px a 64px y botones touch-friendly de 44px minimo
- 06
Accesibilidad WCAG AA
HTML semantico, atributos ARIA, labels en formularios, contraste de color WCAG AA e iconos decorativos con aria-hidden
Construcción
Decisiones detrás del resultado.
Una mirada a las piezas técnicas que sostienen la experiencia y facilitan su mantenimiento.
- 01
Pipeline de Optimizacion de Imagenes
API getImage() de Astro convierte a WebP al 80% de calidad con tamanos responsive de 600px a 1920px. Reduccion del 99.5% en peso: de 260 MB originales a apenas kilobytes optimizados.
- 02
Arquitectura de 4 Paginas
Homepage con hero parallax y grid de servicios 3D, Servicios con proceso de trabajo en 4 pasos, Nosotros con historia desde 1999 y tarjetas 3D, y Contacto con validacion client/server y Google Maps.
- 03
SEO Tecnico Local
Schema.org LocalBusiness con direccion, coordenadas GPS y horarios. Schemas WebPage, AboutPage, ContactPage y Service con OfferCatalog. BreadcrumbList en todas las paginas internas.
- 04
Formulario de Contacto PHP
Backend PHP con validacion server-side, sanitizacion de inputs y proteccion contra spam. Integracion directa con WhatsApp para generacion de leads calificados.
01
Sistema de Diseno Visual
Paleta de Colores y Tipografia
Desarrolle un sistema de diseno basado en tres pilares visuales: Dorado (#C9A962) como color de acento transmitiendo lujo y celebracion, Negro (#1A1A1C) para sofisticacion en secciones alternadas, y Crema (#FDFBF7) como fondo calido. La tipografia combina Cormorant Garamond (serif elegante para titulos) con Inter (sans-serif para cuerpo), reforzando la identidad premium de la marca.
Animaciones y Micro-interacciones
Escribi 688 lineas de animacion con GSAP + ScrollTrigger, organizadas en 6 categorias: hero con efecto parallax infinito y revelado word-by-word, elementos scroll-triggered con rotaciones 3D en tarjetas, contadores que incrementan de 0 al valor final (25+ anos, 5,000+ eventos), parallax vinculado al scroll para profundidad visual, hover effects con elevacion y zoom en imagenes, e interacciones de formulario con efecto ripple.
Diseno Responsive Mobile-First
El sitio fue disenado con 5 breakpoints progresivos. Incluye menu movil con overlay slide-in, toggle hamburger y bloqueo de scroll. Grids adaptativos que pasan de 1 columna (movil) a 4 columnas (desktop). Tipografia fluida que escala de 32px a 64px y botones touch-friendly con minimo 44px de area de toque.
Resultado
Alquileres ARZA
Impacto del proyecto
Un negocio con más de 25 años en alquiler de mobiliario que necesitaba ponerse al día en internet. El sitio carga casi al instante gracias a la generación estática, capta consultas por formulario y WhatsApp, y trabaja el SEO local con datos estructurados para posicionar en Costa Rica.
El siguiente paso