Πίσω στο Portfolio
Η αρχική σελίδα του GrandpaBeans: το λογότυπο αριστερά και δεξιά ένα μενού με Home, Our Story, Gallery, Nutrition και Contact, που τελειώνει σε μια στρογγυλή ελληνική σημαία, πάνω από μια σχεδόν μαύρη σελίδα με ένα μόνο σακουλάκι από χαρτί kraft στη μέση· η μαύρη ετικέτα του γράφει «ΜΑΥΡΑ ΦΑΣΟΛΙΑ ΑΝΩ ΒΡΟΝΤΟΥΣ ΣΕΡΡΩΝ» και «BLACK BEANS SERRON», πάνω από ένα διάφανο παράθυρο γεμάτο μαύρα φασόλια.
Άνοιγμα του grandpabeans.gr σε νέα καρτέλα

GrandpaBeans — Μαύρα Φασόλια Άνω Βροντούς

Επισκόπηση

Σχεδιάσαμε και αναπτύξαμε το grandpabeans.gr, μια δίγλωσση (Ελληνικά/Αγγλικά) ιστοσελίδα μίας σελίδας για τον Πρόδρομο Ματενόγλου — τον πρώην φυσιοθεραπευτή που το 2019 άφησε το επάγγελμά του για να αναβιώσει ξεχασμένους σπόρους κληρονομιάς που βρήκε στην αποθήκη του παππού του, γινόμενος ο μοναδικός εμπορικός παραγωγός μαύρων φασολιών στην Ελλάδα. Η ιστοσελίδα ξεκινά με ένα stop-motion hero 20 καρέ που εναλλάσσει ολόκληρα και δαγκωμένα φασόλια, και ξεδιπλώνει μια αφήγηση οδηγούμενη από scroll σε επτά ενότητες: εισαγωγή, ιστορία ιδρυτή, γκαλερί συγκομιδής, διατροφικό προφίλ (24γρ πρωτεΐνη, ανθοκυανίνες, πλήρες φάσμα αμινοξέων), FAQ και επικοινωνία. Κατασκευάστηκε χωρίς βάση δεδομένων ή framework — το δίγλωσσο περιεχόμενο ζει σε αρχεία γλώσσας PHP, η δρομολόγηση αφαιρεί το /en/ prefix server-side και ολόκληρη η ιστοσελίδα διατηρεί 60fps scroll animations μέσω GSAP 3.12.5 με πλήρη fallback για reduced-motion. Τα structured data JSON-LD καλύπτουν Organization, LocalBusiness, Product και FAQ· ένα αρχείο llms.txt εκθέτει το brand σε AI crawlers. Η εμφάνιση του brand στο Dragons' Den Greece (S2E2, ANT1, Ιανουάριος 2024) — με συμφωνία €30.000 — λέγεται μέσα από την ιστορία του ιδρυτή και όχι ως banner.

Προκλήσεις

Η μεταφορά μιας συναισθηματικής ιστορίας κληρονομιάς — σπόροι από παππού σε παππού, μια επιστροφή με στήριξη Dragons' Den, ένα μοναδικό μονοπώλιο σε υψόμετρο 1.200μ — σε μια ενιαία σελίδα που αποδίδει σε mobile, παραμένει προσβάσιμη και αισθάνεται κινηματογραφική, χωρίς βάση δεδομένων, framework ή e-commerce stack.

Λύσεις

Μια αφήγηση χορογραφημένη με scroll, με ρυθμό σε επτά animated ενότητες, ένα stop-motion hero 20 καρέ που μετατρέπει το προϊόν σε χαρακτήρα και ένα PHP routing layer χωρίς εξαρτήσεις για δίγλωσσα URLs. Τα ScrollTrigger animations σέβονται το prefers-reduced-motion· το sticky pill nav παραμένει αγκιστρωμένο κατά τη σύμπτυξη της URL bar του iOS μέσω fixed positioning (χωρίς transforms)· τα JSON-LD και τα δίγλωσσα hreflang δίνουν σε Google και AI search engines πλήρη ορατότητα σε ένα brand που προηγουμένως απουσίαζε από τα αγγλόφωνα web indexes.

Γκαλερί

  • Η αρχική σελίδα του GrandpaBeans: το λογότυπο αριστερά και δεξιά ένα μενού με Home, Our Story, Gallery, Nutrition και Contact, που τελειώνει σε μια στρογγυλή ελληνική σημαία, πάνω από μια σχεδόν μαύρη σελίδα με ένα μόνο σακουλάκι από χαρτί kraft στη μέση· η μαύρη ετικέτα του γράφει «ΜΑΥΡΑ ΦΑΣΟΛΙΑ ΑΝΩ ΒΡΟΝΤΟΥΣ ΣΕΡΡΩΝ» και «BLACK BEANS SERRON», πάνω από ένα διάφανο παράθυρο γεμάτο μαύρα φασόλια.

    Άνοιγμα σε stop-motion — Το προϊόν μόνο του σε σκοτεινό φόντο

  • Η αρχική σελίδα σε tablet: το λογότυπο GrandpaBeans και ένα κουμπί μενού στην κορυφή, και το ίδιο σακουλάκι kraft με μαύρα φασόλια μόνο του στη μέση της σκοτεινής σελίδας.

    Κεφαλίδα σε tablet — Το μενού μαζεύεται σε ένα κουμπί, ώστε τίποτα να μην ανταγωνίζεται τη συσκευασία

  • Η αρχική σελίδα σε κινητό: το λογότυπο GrandpaBeans και ένα κουμπί μενού στο πάνω μέρος, και το σακουλάκι kraft με τα μαύρα φασόλια, μικρότερο, στη μέση της σκοτεινής οθόνης.

    Άνοιγμα στο κινητό — Η ίδια σκηνή, στα μέτρα της μικρότερης οθόνης