GrandpaBeans — Haricots Noirs d'Ano Vrontou
1 mois
|
Designer & Développeur
Nous avons conçu et développé grandpabeans.gr, un site de storytelling de marque monopage bilingue (grec/anglais) pour Prodromos Matenoglou — l'ancien kinésithérapeute qui, en 2019, a quitté son cabinet pour faire revivre des graines patrimoniales oubliées découvertes dans l'entrepôt de son grand-père, devenant ainsi le seul producteur commercial de haricots noirs de Grèce. Le site s'ouvre sur un hero stop-motion de 20 images alternant haricots entiers et croqués, puis déroule un récit guidé au scroll à travers sept sections : introduction, histoire du fondateur, galerie de récolte, profil nutritionnel (24g de protéines, anthocyanes, spectre complet d'acides aminés), FAQ et contact. Construit sans base de données ni framework — le contenu bilingue vit dans des fichiers de langue PHP, le routage retire le préfixe /en/ côté serveur, et l'ensemble du site soutient des animations de scroll à 60fps via GSAP 3.12.5 avec des fallbacks complets pour reduced-motion. Les données structurées JSON-LD couvrent Organization, LocalBusiness, Product et FAQ ; un fichier llms.txt expose la marque aux crawlers IA. L'apparition de la marque dans Dragons' Den Greece (S2E2, ANT1, janvier 2024) — sécurisant un deal de 30 000€ — est racontée à travers l'histoire du fondateur, non comme une bannière.
Technologies
PHP
HTML5
CSS3
Vanilla JavaScript
GSAP
ScrollTrigger
Bilingual i18n
Structured Data
Responsive Design
SEO
Défis
Traduire une histoire patrimoniale chargée d'émotion — graines de grand-père à grand-père, retour soutenu par Dragons' Den, monopole unique à 1 200m d'altitude — en une seule page performante sur mobile, accessible et cinématographique, sans base de données, framework ni stack e-commerce.
Solutions
Un récit chorégraphié au scroll, rythmé sur sept sections animées, un hero stop-motion de 20 images qui transforme le produit en personnage, et une couche de routage PHP zéro dépendance pour les URLs bilingues. Les animations ScrollTrigger respectent prefers-reduced-motion ; la nav pilule fixe reste ancrée pendant la rétractation de la barre d'URL iOS via positionnement fixed (sans transforms) ; JSON-LD et hreflang bilingue offrent à Google et aux moteurs de recherche IA une visibilité totale sur une marque auparavant absente des index web anglophones.
