Plataformas · Caso de estudio · 2024
Portal corporativo con formularios y contenido bilingüe.
No publicamos una medición propia de impacto comercial de este proyecto. Las funcionalidades descritas no implican una garantía de resultados para otro negocio.
Objetivo: Organizar la oferta de sourcing y las solicitudes comerciales.
Intervención: Páginas corporativas y de divisiones, formularios de cotización y contenido bilingüe.
Stack: HTML, CSS y JavaScript; diccionario de traducciones con persistencia local.
Resultado y fuente: El testimonio del cliente describe ahorro de trabajo manual. No se publica un registro de horas antes y después.
Empresas B2B con varias divisiones que necesitan presentar su oferta y recibir solicitudes de cotización.
Usa estas preguntas para definir tus criterios de aceptación. El alcance y las integraciones se acuerdan para cada proyecto.
Ver el servicio relacionado · Preparar un brief con funciones y prioridades
Plazo: no se publica una duración verificada de este proyecto. Cada propuesta define su propio calendario.
Visitar el sitio del proyecto. La versión actual puede cambiar después de la entrega.
El proyecto resuelve la necesidad de presentar Dragon Mart Trading Inc como una plataforma profesional de sourcing, procurement técnico e importación desde Asia. El sitio debía funcionar como una vitrina corporativa, pero también como una herramienta operativa: mostrar divisiones comerciales, explicar el proceso de importación, presentar evidencia visual de proyectos y permitir que un cliente solicite cotizaciones técnicas con datos completos.
La solución no se limita a una landing page informativa. Integra formularios especializados, rutas limpias, contenido bilingüe, estructura SEO, validación de fuentes estáticas y una API serverless para convertir solicitudes comerciales en correos operativos enviados al equipo de Dragon Mart.
Dragonmart
El proyecto fue construido como un sitio estático optimizado para despliegue en Vercel. Esta decisión permitió reducir complejidad, mejorar tiempos de carga y evitar procesamiento innecesario en servidor. La estructura separa páginas HTML principales, estilos globales, lógica JavaScript, assets visuales, scripts de validación y una función serverless bajo api/send-quote.js.
Desarrollamos páginas específicas para inicio, contacto, cotizaciones, perfil corporativo, Dragon Glass y Dragon Ceramic. El frontend organiza el contenido en secciones de alto valor: propuesta comercial, proceso de importación, divisiones de sourcing, red internacional, cumplimiento, entregables, galería de proyectos y formularios. La interfaz usa JavaScript vanilla para animaciones progresivas con IntersectionObserver, navegación móvil, acordeones FAQ, modales de galería, sliders, selector personalizado de categorías y precarga automática de categorías en cotizaciones mediante parámetros de URL.
El formulario corporativo y el formulario de cotizaciones recopilan datos clave como producto, categoría, descripción técnica, volumen, puerto, nombre, empresa y correo. En el cliente, la información se empaqueta como JSON y se envía a /api/send-quote. También implementamos un fallback con mailto:. Si el servicio de email no está configurado o falla, el sistema prepara automáticamente el correo en el cliente del usuario para no perder la oportunidad comercial.
La función api/send-quote.js actúa como capa segura entre el navegador y Resend. Valida método POST, lee el payload, normaliza campos, valida email, comprueba campos obligatorios, genera versión HTML y texto plano del correo, y envía la solicitud mediante la API de Resend. Las credenciales no se exponen en el navegador. La clave RESEND_API_KEY se lee desde variables de entorno y se usa únicamente en servidor mediante cabecera Authorization: Bearer.
El archivo i18n.js permite alternar entre español e inglés usando un diccionario de traducciones y persistencia en localStorage. Además, el sitio incluye metadatos SEO, Open Graph, Twitter Cards, JSON-LD, robots.txt, sitemap.xml, llms.txt y site.webmanifest.
Hero, catálogo, panel de proveedores y login seguro—diseñados para confianza, velocidad y conversión en cualquier dispositivo.
Dragonmart
Para evitar saturar la CPU del servidor, la arquitectura desplaza casi todo el trabajo al modelo estático y al CDN de Vercel. Las páginas no requieren renderizado dinámico en cada visita. La función serverless solo se ejecuta cuando el usuario envía un formulario. Además, el procesamiento en servidor es deliberadamente liviano.
Implementamos un script de validación que verifica que existan los archivos obligatorios, que los enlaces locales apunten a recursos reales, que cada página tenga título, descripción, canonical, robots, y que los bloques JSON-LD sean válidos. Si algo se rompe, el build falla antes del despliegue.
La seguridad se diseñó evitando exponer credenciales sensibles en el frontend. La autenticación real hacia el proveedor externo ocurre en servidor. Los datos enviados por el usuario se escapan con escapeHtml antes de construir el correo HTML, reduciendo riesgos de inyección.
Dragonmart se consolidó como una plataforma corporativa ligera, rápida y técnicamente controlada. El resultado combina presentación comercial, captación de leads, cotización técnica, SEO estructurado, validación automatizada y despliegue serverless.