Paintball Bled
Un sitio de marketing completamente nuevo y centrado en vídeo para un local de paintball en el bosque a las afueras de Bled — build con Vite, i18n de 5 idiomas hecho a mano, hero con autoplay y un flujo de reserva afinado para grupos en lugar de individuos.
Resumen
Esta es la nueva reconstrucción en Vite. El anterior paintball-bled.com era un sitio WordPress + Divi que había servido al negocio durante años — pero había acumulado el peso habitual de WordPress (lento, CSS pesado, torpe en móvil). El cliente quería un reinicio limpio: una página de marketing rápida y moderna que se lea en cinco idiomas, funcione sobre un único hero respaldado por vídeo y aun así envíe a cada visitante serio hacia una conversación de reserva.
Construí todo como un bundle estático de Vite — HTML plano, vanilla JavaScript, sin React, sin Vue, sin CMS. Cada cadena traducible vive en JSON; cada elemento del DOM que necesita traducción lleva un atributo data-i18n=“keypath”. Un pequeño runtime intercambia el texto al vuelo cuando el visitante elige SLO / ENG / DEU / ITA / ESP en la cabecera. Las tarjetas de paquetes se renderizan dinámicamente para que sigan siendo translation-first en lugar de hardcodeadas por idioma.
El sitio de staging vive en nova.paintball-bled.com. Una vez que el cliente dé el visto bueno, pasa al dominio principal con una subida estática directa. Sin runtime del lado del servidor, sin actualizaciones de plugins, nada que monitorizar más allá del DNS y el certificado SSL.
Arquitectura
Leyendo el diagrama: Cuatro entradas de origen — la plantilla HTML marcada con atributos data-i18n, una única entrada vanilla JS, cinco archivos JSON de idioma y los recursos multimedia — alimentan un único build de Vite. La salida es un bundle dist/ con hash de contenido que hoy se sirve estáticamente desde el host de staging y pasará al dominio principal cuando el cliente lo apruebe. No hay runtime de servidor, no hay CMS, no hay backend: cada cambio de idioma ocurre en el navegador del visitante contra el JSON ya entregado. La tipografía es Bebas Neue (display) + Plus Jakarta Sans (cuerpo), preconectada a Google Fonts para un first paint sub-segundo.
La disciplina de alcance es el verdadero oficio en un sitio pequeño. Sin CMS, sin framework, sin plugin de reservas — un bundle de Vite, cinco idiomas, un formulario, un CTA, entregado en días. El cliente gana velocidad; el visitante consigue un funnel que funciona.
Seis cosas entregadas,
tres difíciles resueltas.
Contribuciones clave
- Construí todo el front-end a mano — Vite como bundler, vanilla HTML + JavaScript, sin la carga de ningún framework. Bundle final: un archivo JS + un archivo CSS, ambos con cache-busting mediante hash de contenido.
- Construí desde cero un sistema de traducción basado en
data-i18n— 44 elementos intercambian el texto en tiempo de ejecución entre cinco idiomas sin recargar la página, incluidas las tarjetas de paquetes renderizadas dinámicamente. - Diseñé el hero centrado en vídeo: metraje de bosque en autoplay silenciado detrás de un título display en Bebas Neue (ADRENALINE FUN IN THE FOREST) y un doble CTA — Reservar ahora + Ver paquetes.
- Construí la insignia hero con la ubicación (RADOVLJICA, ESLOVENIA) para desambiguar el local de la marca Paintball Bled, que pese al nombre está físicamente en Radovljica.
- Cableé la experiencia móvil: menú a pantalla completa activado por hamburguesa, CTA de teléfono fijo en la cabecera apto para dedos, y padding de secciones consciente de los breakpoints que mantiene legible el vídeo hero en pantallas pequeñas.
- Monté el staging en
nova.paintball-bled.comantes del cambio al dominio principal para que el cliente pueda previsualizar y aprobar antes del corte a producción.
Desafíos resueltos
- Audiencia turística multilingüe — un local de paintball en Eslovenia atrae a visitantes eslovenos, ingleses, alemanes, italianos y españoles. Publicar cinco idiomas sin un CMS implicaba construir una capa i18n ligera respaldada por JSON que lee claves de atributo en tiempo de ejecución en lugar de pre-renderizar cinco copias del sitio.
- Hero de vídeo que no mate el rendimiento móvil —
<video autoplay muted loop playsinline>funciona en todas partes, pero la fuente (paintball3.mp4) tenía que codificarse lo bastante pequeña para empezar a reproducirse en 4G antes de que el usuario haga scroll, con un poster estático de respaldo en conexiones con ahorro de datos. - Flujo de reserva para grupos, no individuos — el local vende cumpleaños, despedidas de soltero y soltera, y team-buildings. El texto, los niveles de paquete y los CTAs están afinados para un organizador de grupo que hace una reserva en nombre de muchos, no para un visitante solo eligiendo un único slot.
Qué hay bajo el capó.
Trabajos relacionados
¿Listo para arreglar, construir
o escalar?
30 minutos, conmigo personalmente. Leo tu sistema como un archivo de logs y te digo qué haría primero. Sin presentaciones, sin embudo de ventas.
— Davor Majc, fundador, Numen