Zurück zum Portfolio
Die Startseite von GrandpaBeans: links das Logo, rechts ein Menü mit Home, Our Story, Gallery, Nutrition und Contact, das mit einer runden griechischen Flagge endet, darunter eine fast schwarze Seite mit einem einzelnen Beutel aus Kraftpapier in der Mitte; sein schwarzes Etikett trägt die Aufschrift „ΜΑΥΡΑ ΦΑΣΟΛΙΑ ΑΝΩ ΒΡΟΝΤΟΥΣ ΣΕΡΡΩΝ“ und „BLACK BEANS SERRON“, darunter ein Sichtfenster voller schwarzer Bohnen.
grandpabeans.gr in neuem Tab öffnen

GrandpaBeans — Schwarze Bohnen aus Ano Vrontou

Überblick

Wir haben grandpabeans.gr entworfen und entwickelt — eine zweisprachige (Griechisch/Englisch) Single-Page-Storytelling-Website für Prodromos Matenoglou, den ehemaligen Physiotherapeuten, der 2019 seine Praxis aufgab, um vergessene Erbstück-Saatgut aus dem Lager seines Großvaters wiederzubeleben — und damit zu Griechenlands einzigem kommerziellen Schwarzbohnen-Produzenten wurde. Die Seite öffnet mit einem 20-Frame-Stop-Motion-Hero, der zwischen ganzen und angebissenen Bohnen wechselt, und entfaltet eine scrollgesteuerte Erzählung über sieben Abschnitte: Intro, Gründergeschichte, Erntegalerie, Nährstoffprofil (24g Protein, Anthocyane, vollständiges Aminosäurespektrum), FAQ und Kontakt. Aufgebaut ohne Datenbank oder Framework — zweisprachige Inhalte leben in PHP-Sprachdateien, das Routing entfernt das /en/-Präfix serverseitig, und die gesamte Seite hält 60fps-Scroll-Animationen über GSAP 3.12.5 mit vollständigen Reduced-Motion-Fallbacks. JSON-LD-strukturierte Daten decken Organization, LocalBusiness, Product und FAQ ab; eine llms.txt-Datei macht die Marke für KI-Crawler sichtbar. Der Auftritt der Marke bei Dragons' Den Greece (S2E2, ANT1, Januar 2024) — mit einem €30.000-Deal — wird durch die Geschichte des Gründers erzählt, nicht als Banner.

Herausforderungen

Eine emotionale Erbschaftsgeschichte — Großvater-zu-Großvater-Saatgut, ein Dragons' Den-gestütztes Comeback, ein einzigartiges Monopol in 1.200m Höhe — in eine einzige Seite zu übertragen, die mobil performt, zugänglich bleibt und cineastisch wirkt, ohne Datenbank, Framework oder E-Commerce-Stack.

Lösungen

Eine scroll-choreografierte Erzählung in sieben animierten Abschnitten, ein 20-Frame-Stop-Motion-Hero, der das Produkt zur Figur macht, und eine PHP-Routing-Schicht ohne Abhängigkeiten für zweisprachige URLs. ScrollTrigger-Animationen respektieren prefers-reduced-motion; die Sticky-Pill-Navigation bleibt während des iOS-URL-Leistencollapse über Fixed-Positioning verankert (keine Transforms); JSON-LD und zweisprachiges hreflang geben Google und KI-Suchmaschinen volle Sichtbarkeit auf eine Marke, die zuvor in englischsprachigen Web-Indizes fehlte.

Galerie

  • Die Startseite von GrandpaBeans: links das Logo, rechts ein Menü mit Home, Our Story, Gallery, Nutrition und Contact, das mit einer runden griechischen Flagge endet, darunter eine fast schwarze Seite mit einem einzelnen Beutel aus Kraftpapier in der Mitte; sein schwarzes Etikett trägt die Aufschrift „ΜΑΥΡΑ ΦΑΣΟΛΙΑ ΑΝΩ ΒΡΟΝΤΟΥΣ ΣΕΡΡΩΝ“ und „BLACK BEANS SERRON“, darunter ein Sichtfenster voller schwarzer Bohnen.

    Stop-Motion-Auftakt — Das Produkt allein auf dunkler Bühne

  • Die Startseite auf einem Tablet: oben das GrandpaBeans-Logo und ein Menü-Button, in der Mitte der dunklen Seite allein derselbe Kraftpapierbeutel mit schwarzen Bohnen.

    Header auf dem Tablet — Das Menü klappt ein, damit nichts mit dem Beutel konkurriert

  • Die Startseite auf einem Smartphone: oben das GrandpaBeans-Logo und ein Menü-Button, in der Mitte des dunklen Bildschirms kleiner der Kraftpapierbeutel mit schwarzen Bohnen.

    Auftakt auf dem Smartphone — Dieselbe Szene, passend zum kleineren Bildschirm