GrandpaBeans — Frijoles Negros de Ano Vrontou
1 mes
|
Diseñador y Desarrollador
Diseñamos y desarrollamos grandpabeans.gr, un sitio de storytelling de marca de una sola página bilingüe (griego/inglés) para Prodromos Matenoglou — el antiguo fisioterapeuta que en 2019 dejó su consulta para revivir semillas patrimoniales olvidadas descubiertas en el almacén de su abuelo, convirtiéndose en el único productor comercial de frijoles negros de Grecia. El sitio se abre con un hero stop-motion de 20 fotogramas que alterna entre frijoles enteros y mordidos, y luego despliega una narrativa guiada por scroll a través de siete secciones: introducción, historia del fundador, galería de cosecha, perfil nutricional (24g de proteína, antocianinas, espectro completo de aminoácidos), FAQ y contacto. Construido sin base de datos ni framework — el contenido bilingüe vive en archivos de idioma PHP, el routing elimina el prefijo /en/ del lado del servidor, y todo el sitio mantiene animaciones de scroll a 60fps mediante GSAP 3.12.5 con fallbacks completos para reduced-motion. Los datos estructurados JSON-LD cubren Organization, LocalBusiness, Product y FAQ; un archivo llms.txt expone la marca a los crawlers de IA. La aparición de la marca en Dragons' Den Greece (S2E2, ANT1, enero de 2024) — asegurando un trato de 30.000€ — se cuenta a través de la historia del fundador, no como un banner.
Tecnologías
PHP
HTML5
CSS3
Vanilla JavaScript
GSAP
ScrollTrigger
Bilingual i18n
Structured Data
Responsive Design
SEO
Retos
Traducir una historia patrimonial emotiva — semillas de abuelo a abuelo, un regreso respaldado por Dragons' Den, un monopolio único a 1.200m de altitud — en una sola página que rinda en móvil, se mantenga accesible y se sienta cinematográfica, sin base de datos, framework ni stack de e-commerce.
Soluciones
Una narrativa coreografiada por scroll, ritmada en siete secciones animadas, un hero stop-motion de 20 fotogramas que convierte el producto en un personaje, y una capa de routing PHP sin dependencias para URLs bilingües. Las animaciones de ScrollTrigger respetan prefers-reduced-motion; la nav pill fija permanece anclada durante el colapso de la barra de URL de iOS mediante posicionamiento fixed (sin transforms); JSON-LD y hreflang bilingüe dan a Google y a los motores de búsqueda de IA visibilidad total sobre una marca antes ausente de los índices web en inglés.
