Santa Frida Farm — Sitio ES/EN
Plataforma web multilingüe para Santa Frida Farm, finca agrícola en Marinilla, Antioquia, Colombia. Desarrollada con Next.js 14, TypeScript estricto, sistema de internacionalización ES/EN, SEO técnico con Schema.org y optimización de rendimiento para mercados internacionales.
Resumen Técnico
Next.js 14
App Router + SSG
i18n
ES/EN con rutas
SEO Avanzado
JSON-LD + Schema.org
Performance
87 kB First-load JS
Contexto del Proyecto
Objetivo del Proyecto
Santa Frida Farm necesitaba una plataforma web para exportar productos agrícolas colombianos a mercados internacionales. El sitio debía funcionar en español e inglés, con SEO técnico para visibilidad internacional y performance optimizada.
- • Productos agrícolas colombianos
- • Mercados internacionales
- • Certificaciones del sector
- • Estándares de calidad exportación
Desafíos Técnicos
El proyecto requería una arquitectura que soportara múltiples idiomas, SEO técnico avanzado para mercados internacionales, y performance optimizada para conversión. La solución debía ser escalable y mantenible a largo plazo.
- • Internacionalización completa con rutas ES/EN
- • SEO técnico para mercados agrícolas internacionales
- • Performance optimizada para Core Web Vitals
- • Seguridad empresarial con headers y CSP
Métricas Técnicas
First Load JS
✅ Excelente
Bundle Total
✅ Optimizado
Páginas SSG
✅ 100%
Lighthouse Score
✅ Excelente
Implementación Técnica
Desarrollo Frontend
Implementé una arquitectura moderna con Next.js 14 aprovechando el App Router para generación estática y optimización automática. El sistema de componentes fue diseñado con primitivos reutilizables que garantizan consistencia visual y mantenibilidad del código.
- • Next.js 14 con App Router y generación estática (SSG) para performance óptima
- • TypeScript estricto con configuración `noUncheckedIndexedAccess` y `exactOptionalPropertyTypes`
- • Sistema de componentes con Tailwind CSS y primitivos reutilizables (Section, Container, Card, Button)
- • Animaciones optimizadas con Framer Motion y `optimizePackageImports` para reducir bundle size
- • Sistema de diseño coherente con variables CSS y tokens de color consistentes
Internacionalización
Desarrollé un sistema de internacionalización completo que permite a Santa Frida Farm comunicarse efectivamente con mercados internacionales. La implementación incluye rutas específicas por idioma, metadatos SEO diferenciados y redirecciones automáticas para optimizar la experiencia del usuario.
- • Sistema i18n completo con rutas `/es` y `/en` para separación clara de contenidos
- • Redirección automática desde `/` hacia `/es` (301 redirect) para SEO internacional
- • Metadatos específicos por idioma con `hreflang` para evitar contenido duplicado
- • Diccionarios tipados con TypeScript para consistencia y detección temprana de errores
- • LocaleSwitcher component para cambio dinámico de idioma manteniendo la URL
SEO y Rendimiento
Implementé un sistema SEO técnico completo con datos estructurados Schema.org y optimización de performance. El objetivo era posicionar el sitio para búsquedas internacionales de productos agrícolas y garantizar una carga rápida que no afecte la conversión en mercados internacionales.
- • JSON-LD Schema.org con AgriculturalBusiness, Product y Organization para rich snippets en Google
- • Sitemap dinámico generado automáticamente con URLs ES/EN y secciones específicas
- • Optimización de imágenes con Sharp: WebP/AVIF, lazy loading y TTL de caché de 30 días
- • Bundle splitting optimizado: First-load JS de 87.4 kB (excelente para SSG)
- • Core Web Vitals optimizados: LCP, FID y CLS para mobile-first (requisito de Google)
- • Metadatos geográficos con coordenadas GPS de Marinilla para SEO local
- • Headers de seguridad (X-Frame-Options, CSP) para cumplir estándares empresariales
Seguridad y Calidad
- • Headers de seguridad: X-Frame-Options, X-Content-Type-Options
- • CSP para imágenes con sandbox y script-src 'none'
- • ESLint + Prettier con reglas de accesibilidad (jsx-a11y)
- • Bundle Analyzer integrado para monitoreo de performance
Stack Tecnológico
Case Brief Técnico
Resumen del Proyecto
Documento con información del proyecto, tecnologías utilizadas y aspectos técnicos principales.
Ver sitio en producción
Plataforma web profesional con optimizaciones de rendimiento y SEO técnico avanzado.
Ver sitio en vivo