Hibi Web - Centro de Soluciones de Nivel Empresarial

Resumen Técnico

Hibi Web es una plataforma corporativa diseñada para mostrar y gestionar un portafolio diversificado de servicios tecnológicos. Desarrollé interfaces con Next.js 16 (App Router) y React 19 usando TypeScript y Tailwind CSS. Implementé formularios con react-hook-form y validación con zod, gestionando estado de UI con patrones modernos de React. La plataforma incluye internacionalización completa (ES/EN) mediante next-intl, componentes accesibles con Radix UI (Dropdown, Toast), y envío de emails integrado con Resend. Apliqué un sistema de diseño consistente utilizando clsx, class-variance-authority y tailwind-merge para la gestión dinámica de clases CSS.

Descripción del Problema

Las plataformas corporativas necesitan balancear estética de diseño con requisitos de rendimiento y SEO. El soporte multilingüe añade complejidad, requiriendo formularios robustos y componentes accesibles que funcionen en múltiples idiomas.

Arquitectura

Arquitectura basada en Next.js App Router con estrategia server-first. Implementa componentes accesibles mediante Radix UI primitives, gestión de formularios con react-hook-form + zod para validación type-safe, y sistema de utilidades CSS con Tailwind CSS combinado con clsx y tailwind-merge. Internacionalización mediante next-intl con rutas dinámicas [locale].

Características Clave

• Desarrollo frontend con Next.js 16 y React 19 usando TypeScript
• Formularios robustos con react-hook-form y validación zod
• Componentes accesibles con Radix UI (Dropdown, Toast, Slot)
• Internacionalización completa con next-intl (ES/EN)
• Gestión de clases dinámica con clsx, class-variance-authority y tailwind-merge
• Integración de envío de emails con Resend

Desafíos

• Implementar validación de formularios complejos manteniendo type-safety con TypeScript
• Construir componentes accesibles reutilizables con Radix UI primitives
• Configurar enrutamiento i18n con next-intl y generación dinámica de metadatos
• Gestionar variantes de componentes de manera escalable con class-variance-authority

Resultados

Entregada una plataforma corporativa modular con formularios type-safe, componentes accesibles WCAG-compliant, y soporte multilingüe completo. Sistema de diseño consistente implementado con Tailwind CSS y utilidades de gestión de clases.