Εστίαση / Fine diningΑυτοτελής μελέτη
Kámini
Αυτοτελής μελέτη, χωρίς πελάτη: το Kámini είναι φανταστικό εστιατόριο στη Σαντορίνη. Ο ιστότοπος είναι πραγματικός, χτισμένος σε Next.js 16, και ζωντανός στο kamini-xi.vercel.app.
Το πρόβλημα
Τα sites των ελληνικών εστιατορίων fine dining καταλήγουν συνήθως σε ένα PDF μενού και μια φόρμα κράτησης τρίτου παρόχου. Η εμπειρία που πουλάει το εστιατόριο, το τραπέζι στο χείλος του γκρεμού, το φως που χαμηλώνει, ο ρυθμός της βραδιάς, χάνεται πριν καν σηκώσει κανείς το τηλέφωνο.
Θέλαμε να δοκιμάσουμε το αντίθετο: μια σελίδα που παίζει σαν μία συνεχόμενη βραδιά σε τέσσερις κινήσεις, άφιξη, μενού, βεράντα, κράτηση.
Η προσέγγιση
Χτίστηκε σε Next.js 16 με React 19 και TypeScript, με GSAP ScrollTrigger για τη σκηνοθεσία του scroll και Lenis για την ομαλή κύλιση. Το κεντρικό στοιχείο είναι το μενού-καντράν: επτά πιάτα σε έναν κύκλο που γυρίζει καθώς κυλάς, ένα πιάτο τη φορά στο φως.
Η κίνηση είναι προνόμιο, όχι προϋπόθεση: σε prefers-reduced-motion ή prefers-reduced-data η ίδια σελίδα σερβίρεται ως ήρεμη στατική διάταξη με πλήρες περιεχόμενο. Η φόρμα κράτησης επικυρώνεται με Zod.
Στοιχεία
- Κατάσταση
- Ζωντανό στο kamini-xi.vercel.app
- Υλοποίηση
- Next.js 16 + React 19, TypeScript
- Κίνηση
- GSAP ScrollTrigger + Lenis + Motion
- Μενού
- 7 πιάτα σε περιστρεφόμενο καντράν
- Reduced motion / data
- Πλήρης στατική εκδοχή
- Φόρμα κράτησης
- Επικύρωση με Zod
Το αποτέλεσμα
Το πλήρες κινηματογραφικό στρώμα τρέχει μόνο σε desktop με κανονικές ρυθμίσεις κίνησης. Όλοι οι υπόλοιποι, κινητά, reduced motion, αργές συνδέσεις, παίρνουν την ήρεμη εκδοχή, χωρίς να τους λείπει ούτε ένα πιάτο από το μενού.
Είναι το δείγμα της δουλειάς μας σε React: την ίδια προσοχή που δίνουμε στο στατικό HTML τη μεταφέρουμε σε πλήρες framework όταν το project το ζητά.