Πίσω στο Portfolio
Η αρχική σελίδα της Mpampetas & Sons: μια πράσινη μπάρα με αριθμό τηλεφώνου και τη διεύθυνση στην Καλλιθέα Κατερίνης, Πιερία, το λογότυπο ΜΠΑΜΠΕΤΑΣ με περίγραμμα τρακτέρ, ένα μενού με Home, About, Services, Equipment, Gallery και Contact και η επιλογή ΕΛ | EN, πάνω από μια φωτογραφία με πράσινη απόχρωση: το μακρύ καπό ενός τρακτέρ σε ψηλό χορτάρι μπροστά σε σειρές φωτοβολταϊκών πάνελ στο ηλιοβασίλεμα· από πάνω ο τίτλος «Mpampetas & Sons» σε λευκό και «Agricultural Services» σε κίτρινο, η φράση «Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region.», ένα κίτρινο κουμπί «Get a Quote», ένα περιγραμμένο «Our Services» και μια ένδειξη κύλισης.
Άνοιγμα του mpampetas.gr σε νέα καρτέλα

Μπαμπέτας & Υιοί — Αγροτικές Υπηρεσίες

Επισκόπηση

Σχεδίασα και ανέπτυξα μια δίγλωσση (Ελληνικά/Αγγλικά) στατική ιστοσελίδα για τη Μπαμπέτας & Υιοί, οικογενειακή εταιρεία αγροτικών υπηρεσιών που ιδρύθηκε το 2015 στην Κατερίνη Πιερίας. Η επιχείρηση εξειδικεύεται σε αγροτικές εργασίες και καθαρισμό βλάστησης φωτοβολταϊκών πάρκων. Η ιστοσελίδα διαθέτει scroll-spy navigation, παρουσίαση εξοπλισμού με το τρακτέρ John Deere 5075GL και 12 εξειδικευμένα εργαλεία, φιλτραριζόμενη γκαλερί με 19 φωτογραφίες και 7 βίντεο με lightbox, και ενότητα επικοινωνίας. Κατασκεύασα το project με καθαρή HTML5, CSS3 με custom properties εμπνευσμένα από John Deere χρωματική παλέτα και vanilla JavaScript. Η ιστοσελίδα περιλαμβάνει JSON-LD LocalBusiness schema, πλήρη δίγλωσση υποστήριξη και IntersectionObserver-driven scroll animations.

Προκλήσεις

Παρουσίαση βαρέων μηχανημάτων και αγροτικών υπηρεσιών με επαγγελματισμό, διατηρώντας την ιστοσελίδα γρήγορη και προσβάσιμη ως στατική κατασκευή χωρίς εξαρτήσεις.

Λύσεις

Χρήση CSS custom properties για συνεκτικό χρωματικό σύστημα John Deere, IntersectionObserver για αποδοτικά scroll animations και φιλτραριζόμενη γκαλερί με video lightbox — όλα χωρίς framework ή build tool.

Γκαλερί

  • Η αρχική σελίδα της Mpampetas & Sons: μια πράσινη μπάρα με αριθμό τηλεφώνου και τη διεύθυνση στην Καλλιθέα Κατερίνης, Πιερία, το λογότυπο ΜΠΑΜΠΕΤΑΣ με περίγραμμα τρακτέρ, ένα μενού με Home, About, Services, Equipment, Gallery και Contact και η επιλογή ΕΛ | EN, πάνω από μια φωτογραφία με πράσινη απόχρωση: το μακρύ καπό ενός τρακτέρ σε ψηλό χορτάρι μπροστά σε σειρές φωτοβολταϊκών πάνελ στο ηλιοβασίλεμα· από πάνω ο τίτλος «Mpampetas & Sons» σε λευκό και «Agricultural Services» σε κίτρινο, η φράση «Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region.», ένα κίτρινο κουμπί «Get a Quote», ένα περιγραμμένο «Our Services» και μια ένδειξη κύλισης.

    Αρχική — Αγροτικές εργασίες και φωτοβολταϊκά πάρκα, και τα δύο από την πρώτη γραμμή

  • Η αρχική σελίδα σε tablet: η πράσινη μπάρα με το τηλέφωνο και τη διεύθυνση, το λογότυπο και ένα κουμπί μενού, μετά τα φωτοβολταϊκά πάνελ και το καπό του τρακτέρ, με τον τίτλο σε δύο γραμμές, την εισαγωγή, τα κουμπιά «Get a Quote» και «Our Services» και την ένδειξη κύλισης.

    Πάνω μπάρα σε tablet — Τηλέφωνο και διεύθυνση μένουν, το μενού μαζεύεται σε ένα κουμπί

  • Η αρχική σελίδα σε κινητό: η πράσινη μπάρα μόνο με τον αριθμό τηλεφώνου, ένα μεγάλο λογότυπο και ένα κουμπί μενού, μετά ο τίτλος σε τέσσερις γραμμές, η εισαγωγή, τα κουμπιά «Get a Quote» και «Our Services» το ένα κάτω από το άλλο και η ένδειξη κύλισης, πάνω από το καπό του τρακτέρ και τα φωτοβολταϊκά.

    Πάνω μπάρα στο κινητό — Ο αριθμός τηλεφώνου μένει, ένα πάτημα πριν από την κλήση