Πίσω στο Portfolio

Alumil Kranidis

Ανακατασκευή της ιστοσελίδας Alumil-Kranidis με τη χρήση Next.js και ενός custom, enterprise-grade CMS. Μια high-performance πλατφόρμα με luxury architectural design, εντυπωσιακά animations (Framer Motion) και αυτόματες dynamic galleries, που προσφέρει κορυφαία εμπειρία χρήστη (UX) και απόλυτο έλεγχο περιεχομένου.

Κατηγορία
Web
Πελάτης
Νικόλαος Κρανίδης
Έτος
2024 - 2026
Διάρκεια
1 μήνας
Ρόλος
Lead Full-Stack & UI/UX Architect
Alumil Kranidis

Η πρόκληση

Η βασική πρόκληση ήταν η δημιουργία μιας ιστοσελίδας που να αντικατοπτρίζει την premium ποιότητα και την αισθητική των προϊόντων Alumil, χωρίς συμβιβασμούς στην ταχύτητα και τη λειτουργικότητα. Τα παραδοσιακά ready-made CMS (όπως το WordPress) συχνά θυσιάζουν την απόδοση (performance) για τη χρηστικότητα και δυσκολεύονται να αποδώσουν premium visual εφέ με υψηλές ταχύτητες φόρτωσης. Επιπλέον, υπήρχε η ανάγκη για έναν αυτοματοποιημένο τρόπο διαχείρισης μεγάλου όγκου φωτογραφικού υλικού ( galleries αρχιτεκτονικών έργων) που να μην επιβαρύνει τον διαχειριστή, αλλά και για ένα απόλυτα ασφαλές περιβάλλον backoffice για τη διαχείριση των B2B αιτημάτων.

Τι φτιάχτηκε

Το Alumil Kranidis αποτελεί μια υπερσύγχρονη digital showroom πλατφόρμα για κορυφαία αρχιτεκτονικά συστήματα αλουμινίου, αναπτυγμένη με Next.js App Router, Framer Motion, TypeScript και ένα custom enterprise CMS σε SQLite και Drizzle ORM με Lighthouse score 94+.

Luxury Architectural Web Design & Smooth Animations

Η σχεδιαστική προσέγγιση εστιάζει στην ανάδειξη της υψηλής αισθητικής των αρχιτεκτονικών κουφωμάτων Alumil. Μέσω του Framer Motion, η πλοήγηση συνοδεύεται από staggered entrance animations και smooth micro-interactions που αναβαθμίζουν το κύρος του brand χωρίς να επιβαρύνουν την ταχύτητα απόκρισης.

Alumil Kranidis Digital Showroom Η αρχική σελίδα του Alumil-Kranidis με πολυτελή μινιμαλιστική αισθητική και δυναμική παρουσίαση συστημάτων.

Custom Enterprise Backoffice & Dynamic Masonry Galleries

Στο back-end αναπτύξαμε ένα custom headless CMS με SQLite και Drizzle ORM. Οι διαχειριστές διαθέτουν πλήρη ελευθερία να ενημερώνουν τις κατηγορίες κουφωμάτων, να διαχειρίζονται αυτόματες dynamic masonry galleries διαβάζοντας απευθείας τους φακέλους του συστήματος, και να επεξεργάζονται το SEO metadata κάθε σελίδας σε πραγματικό χρόνο.

Integrated B2B CRM & Αυτοματοποιημένη Επικοινωνία

Η πλατφόρμα περιλαμβάνει ενσωματωμένο σύστημα διαχείρισης προσφορών και B2B αιτημάτων, με άμεση ειδοποίηση των υπευθύνων και πλήρη ενσωμάτωση με Google Analytics 4 και Google Tag Manager για τη μέτρηση των conversions.

Η λύση

Απαντήσαμε στην πρόκληση με μια custom native λύση, χτίζοντας την εφαρμογή από το μηδέν:

  • Next.js & Vanilla CSS (CSS Modules): Για μέγιστη ταχύτητα, server-side caching, lazy-loading εικόνων και άψογο SEO.

  • Custom Enterprise Backoffice : Ένα εξελιγμένο, dark-themed glassmorphism περιβάλλον διαχείρισης που επιτρέπει inline JSON-based menu editing, full media library (drag-and-drop) και αυτόματη ανάγνωση του file system.

  • Dynamic Masonry Galleries: Οι full-screen dynamic galleries (π.χ. /anoigomena-koufomata) δημιουργούνται αυτόματα διαβάζοντας απευθείας τους φακέλους του server, εκμηδενίζοντας τον χρόνο καταχώρησης.

  • Docker-Based Deployment: Πακετάρισμα της εφαρμογής σε Docker containers για εύκολο, self-contained deployment σε VPS (Virtual Private Server) με reverse proxy (Nginx).

Το αποτέλεσμα

Το τελικό αποτέλεσμα είναι ένα state-of-the-art digital showroom που συνδυάζει την υψηλή αισθητική με την τεχνολογική υπεροχή:

  • Lighthouse Score 94+, προσφέροντας κορυφαίο Core Web Vitals και βέλτιστο SEO ranking.

  • Spectacular UX με καθηλωτικά, ομαλά animations που αναβαθμίζουν το brand status της Alumil-Kranidis.

  • Πλήρης αυτονομία μέσω του custom CMS, επιτρέποντας real-time αλλαγές στην αρχική σελίδα, το μενού πλοήγησης και τα global branding στοιχεία.

  • Αυξημένο Conversion Rate χάρη στο ενσωματωμένο CRM διαχείρισης φορμών και B2B requests, και την πλήρη ενοποίηση με Google Analytics 4 και Google Tag Manager.

Γκαλερί