Caso de éxito
Web de Hello CIT
Cliente: Hello CIT
Entregamos el sitio de marketing de Hello CIT como un sitio moderno en inglés y en español, hecho con el App Router de Next.js y con WordPress como fuente de contenido opcional. El trabajo cubrió todo el diseño, de la portada y las soluciones a los testimonios, las preguntas, el equipo, el contacto, el blog y el pie de página, además de un formulario cuyo correo llega sin falta a través de Brevo, un SEO completo, animaciones al hacer scroll y páginas legales. El sitio ya está en línea en hellocit.com, alojado en Vercel. Cada mensaje del formulario le llega al cliente como un correo HTML por la API de Brevo, y la búsqueda y las vistas previas en redes funcionan bien.
El reto
Hello CIT necesitaba un sitio moderno en dos idiomas para explicar lo que ofrece, de fábricas de IA y agentes digitales a infraestructura, a grandes empresas de toda América Latina. En el montaje headless, el formulario de contacto enviaba los datos a un plugin de formularios de WordPress. WordPress decía que todo iba bien, pero el plugin nunca procesaba los envíos, así que nadie recibía ningún correo. El sitio no podía salir hasta que cada contacto quedara guardado y cada correo llegara.
Nuestro enfoque
Hicimos el sitio con el App Router de Next.js y el diseño completo de cada sección que se pidió: la portada, las soluciones, los testimonios, las preguntas, el equipo, el formulario, el blog y el pie de página. Un selector cambia todo el contenido entre inglés y español. Las entradas, el equipo, las preguntas y el pie de página pueden venir de WordPress, y el código guarda contenido de respaldo en los dos idiomas. Los estilos usan Tailwind CSS con los colores de la marca y la tipografía Plus Jakarta Sans, y el sitio quedó listo para salir en Vercel en hellocit.com.
Funcionalidades clave
La portada abre con un titular, una llamada a la acción, un selector entre español e inglés, el menú y filas de marcas y certificaciones. Una cuadrícula de tarjetas de soluciones, cada una con un icono grande y un título, lleva a una página por solución, como Hello Infrastructure y Hello Agents. Luego vienen los testimonios, unas preguntas frecuentes que se abren y se cierran con un enlace para más preguntas, y una sección de equipo con una tarjeta por persona. El formulario de contacto pide nombre, correo, un producto de interés de una lista de ocho más otro, y un mensaje. Lo envía a la ruta de contacto del propio sitio, muestra los estados de carga, éxito y error, y evita los envíos dobles. Un bloque de blog muestra las tres entradas más nuevas con imagen, fecha, título, resumen y un enlace para leer más. Las secciones aparecen al hacer scroll, y el efecto se apaga para quien pide menos movimiento en su equipo. El pie de página trae una llamada a la acción, una breve descripción de la empresa, enlaces, la licencia y un ancla de contacto. Para el SEO, cada página tiene título, descripción, enlace canónico y vista previa en redes en cada idioma, además de datos estructurados, un mapa del sitio, un archivo robots, una imagen para compartir y un favicon.
El resultado
El sitio está en línea en hellocit.com, alojado en Vercel desde la rama main. Cada mensaje del formulario le llega al cliente como un correo HTML enviado por la API de correo de Brevo. La ruta de contacto del sitio revisa los campos obligatorios, arma el correo para que la respuesta vaya directo a quien escribió y devuelve un mensaje claro de éxito o de error. La búsqueda y las vistas previas en redes están bien configuradas. El repositorio del código y los ajustes del alojamiento, como la clave de Brevo y los ajustes de contacto opcionales, quedaron documentados para que el sitio sea fácil de mantener y revisar.
Tecnología y despliegue
El sitio usa Next.js 16 con el App Router, React y TypeScript, con estilos en Tailwind CSS y la tipografía Plus Jakarta Sans servida desde el propio sitio. El contenido puede venir de WordPress, con contenido de respaldo en el código en los dos idiomas. Está alojado en Vercel en hellocit.com. El correo sale por la API de correo de Brevo, así que el plugin de formularios de WordPress ya no se usa. Un ajuste guarda la clave de la API de Brevo y otros tres, opcionales, fijan a dónde va el correo y quién lo envía. Para que el correo llegue bien, conviene verificar el remitente y el dominio en Brevo y configurar DMARC.