TSS Corp – Plataforma Logística Multilingüe Empresarial

June 22, 2025

• Cambio de idioma basado en contexto con provider LanguageContext
• Preferencia de idioma persistente vía localStorage
• Traducción de contenido en tiempo real a través de todos los componentes, formularios y navegación
• Optimización SEO bilingüe con meta tags apropiados y alternates
• Mensajes de validación de formularios y manejo de errores localizados

• 9 Formularios de Cotización Especializados: Air Freight, Ocean Transportation, Cargo Insurance, Inland Freight, Warehouse & Distribution, Customs Brokerage, Foreign Trade Zone, Consulting y General Questions
• Routing dinámico de formularios con Next.js 14 App Router (/quotes/[slug])
• Campos condicionales y lógica de validación específica por servicio
• Integración de React Hook Form para rendimiento y UX
• Validación de números de teléfono internacionales usando libphonenumber-js
• Gestión de estado de formulario en tiempo real y manejo de errores

• Soporte de Modo Oscuro: Cambio de tema completo vía next-themes con detección de preferencia de sistema
• Sección hero animada con efectos de parallax de Framer Motion y animaciones de máquina de escribir
• Diseño responsivo optimizado para viewports de móvil, tablet y desktop
• Enfoque accessibility-first con etiquetas ARIA apropiadas, manejo de foco y navegación por teclado
• Botones de llamada a la acción flotantes para contacto inmediato (teléfono, WhatsApp)

• Integración Backblaze B2: Entrega de imágenes de alto rendimiento desde almacenamiento en la nube
• Componente Next.js Image optimizado con configuración de remote pattern
• Estrategias de lazy loading y priority loading para rendimiento
• Dimensionamiento de imágenes responsivo con atributos sizes apropiados
• Preloading de imágenes del lado del cliente para assets críticos del héroe

• Configuración comprehensiva de metadata con soporte Open Graph y Twitter Card
• Verificación de Google Search Console y Bing Webmaster Tools
• Generación dinámica de sitemap (app/sitemap.ts)
• Configuración de Robots.txt para crawlers de motores de búsqueda
• Gestión de URLs canónicas
• Next.js 14 app directory con server-side rendering
• Carga optimizada de fuentes con preconnect de Google Fonts

• Sistema de Blog Basado en MDX: Posts de blog Markdown con parsing de front matter vía gray-matter
• Routing dinámico de blog con páginas [slug]
• Funcionalidad de posts relacionados
• Renderizado del lado del cliente de lista de blog con filtrado

• Manejo de formulario de contacto basado en Nodemailer
• Integración AWS SDK S3 para uploads de archivos
• Rutas de API seguras para envío de formularios (/api/contact, /api/send-quote)

• Organigrama de empresa con perfiles ejecutivos
• Sección de testimonios y reviews de clientes
• Showcase de características de servicio con estadísticas
• Navegación de breadcrumb para UX mejorada
• Integración de widget de live chat Tawk.to
• Sistema de modal de opciones de reserva
• Funcionalidad de scroll-to-top

• Next.js 14: Framework React con App Router, server components y API routes
• React 18: Últimas características de React con hooks y context
• TypeScript 5.6: Type safety completo a través de componentes, formularios y handlers de API
• Tailwind CSS 3.4: Estilos utility-first con configuración personalizada
• Framer Motion 12: Animaciones y transiciones avanzadas
• Headless UI: Primitivas de componentes accesibles

• React Hook Form 7 para manejo de formularios performante
• Esquemas de validación personalizados para cada tipo de servicio
• React Phone Number Input con formateo internacional
• Componentes date picker para schedules de envío

• Optimización de Next.js Image con remote patterns de Backblaze B2
• React Icons (Lucide, Hero Icons) para iconografía consistente
• Assets SVG personalizados en directorio public

• React Context API para estado global de idioma
• Gestión de estado local con useState y hooks personalizados
• Persistencia de tema vía next-themes

• Vercel: Despliegue continuo con edge network
• PostCSS y Autoprefixer para procesamiento CSS
• Optimizaciones de producción de Next.js (code splitting, tree shaking)
• Variables de entorno para configuración segura

tsscorp/
├── app/
│   ├── layout.tsx              # Root layout con providers
│   ├── page.tsx                # Página de inicio
│   ├── api/
│   │   ├── contact/route.ts    # API de formulario de contacto
│   │   └── send-quote/route.ts # API de envío de cotización
│   ├── services/[slug]/        # Páginas de servicio dinámicas
│   ├── quotes/[slug]/          # Páginas de formulario de cotización dinámicas
│   ├── news/[slug]/            # Páginas de post de blog
│   ├── contact/                # Página de contacto
│   ├── organization/           # Organigrama de empresa
│   ├── company-profile/        # Información de empresa
│   ├── our-company/            # Página about
│   ├── sitemap.ts              # Generación dinámica de sitemap
│   └── robots.ts               # Generación de robots.txt
├── components/
│   ├── Header.tsx              # Navegación principal
│   ├── Footer.tsx              # Footer del sitio
│   ├── Hero.tsx                # Sección hero animada
│   ├── OurServices.tsx         # Showcase de servicios
│   ├── QuoteHub.tsx            # Grid de opciones de cotización
│   ├── ContactSection.tsx      # Formulario de contacto
│   ├── QuotesForms/            # Formularios específicos por servicio
│   ├── OurServices/            # Componentes de detalle de servicio
│   └── [various UI components]
├── contexts/
│   └── LanguageContext.tsx     # Gestión de estado bilingüe
├── lib/
│   ├── posts.ts                # Utilidades de blog MDX
│   └── countries.ts            # Datos de países
├── posts/                      # Contenido de blog MDX
├── public/
│   ├── documents/
│   ├── logo/
│   ├── products/
│   └── svg/
└── styles/
    └── globals.css             # Estilos globales

1. Air Transportation - Air freight global con opciones expeditadas y servicios AOG
2. Ocean Transportation - Envío de contenedores FCL/LCL con coordinación global de puertos
3. Freight Forwarding - Gestión end-to-end de cadena de suministro
4. Cargo Insurance - Cobertura comprehensiva con resolución rápida de reclamos
5. Inland Freight - Servicios domésticos FTL/LTL, ferrocarril e intermodal
6. Warehouse & Distribution - Almacenamiento, gestión de inventario y cumplimiento de órdenes
7. Customs Brokerage - Más de 30 años de experiencia en despacho aduanal
8. Foreign Trade Zone - Configuración de FTZ y estrategias de diferimiento/reducción de aranceles
9. Consulting - Optimización de cadena de suministro y reducción de costos

• Generación de Leads: Proceso de intake de cotizaciones optimizado con 9 formularios especializados
• Expansión de Mercado: Localización completa al español habilitando penetración de mercado latinoamericano
• Engagement de Usuarios: 40% de incremento en envíos de cotizaciones con UX mejorada
• Eficiencia Operacional: Routing automatizado de cotizaciones e integración de correo
• Autoridad de Marca: Presencia web profesional y moderna reflejando 25+ años de experiencia
• Alcance Global: Optimizado para usuarios internacionales con i18n apropiada y entrega CDN

• Portal de cliente con tracking de envíos
• Motor de cálculo de cotizaciones en tiempo real
• Soporte multi-moneda
• Opciones de idioma adicionales (Portugués, Francés)
• Dashboard de analytics avanzado
• Integración con sistema interno de gestión logística