Case studies
Four facilities in Chianti are grouped in a single site, under a new name and a new image; a complex project that required months of study and development.
Sole del Chianti, Villa Pianora, Villa La Fornace, and La Capannina di Matteo are four elegant facilities located in the heart of Chianti, halfway between Florence and Siena.
At the heart of all four villas is the Fusi family, who for many years have been welcoming guests from all over the world with love and passion.
At the beginning of 2021, these four graceful properties merged (online) under a new brand: Chianti Relais.
The project required the development of a single site to highlight the characteristics of each villa and provide an overall image of the Chianti Relais experience.
This is the technical stack I chose for development:
cms
Statamic
js
Vue Js
css
Tailwind CSS
animation
GSAP
animation
Three.js
form
Getform
deploy
Ploi
slideshow
Swiper
One of the project's main challenges was making the navigation between the facilities intuitive and user-friendly.
After a deep study, I decided to make an index for each villa within the main site so that each facility had its own logo and pages visible in the menu.
This way, we got a significant boost in terms of indexing in search engines, returning the right value to each site (one thing is to create a menu page, another is to create a mini-site inside a larger one).
The cover is present on all pages and it's a dynamic element, customizable by the admin through a visual interface. This means it can be a static background image or a video uploaded on the cloud.
The second challenge was to create a balanced homepage that didn't highlight one specific facility at the expense of the others.
For that reason, I created a series of concatenated animations that are triggered by the user's scroll (done with Gsap).
I believe that narrative is as important online as it is in everyday life.
I like to tell the story of what I'm promoting and the idea behind it. I want to talk about the passion of the people who work on it. In this case, I had the opportunity to use many beautiful photos, and it was great to develop a presentation that would bring out the colors and atmosphere.
If you're interested in the technical details, I used GSAP for the animations and toggled between horizontal and vertical scrolls.
The menu has a "displacement" effect. When you switch from one villa to another, the background photo is "disassembled" and rebuilt to show the new property.
All villa indexes are already visible and clickable.
The rooms can be managed by the admin via CMS (in a grid layout).
For each room, you can link a photo gallery that opens in a modal window.
The content of the single page is fully customizable via CMS.
The admin can choose between different blocks that I created specifically for this site.
Here you see two examples (one with text on the left, overlapping the image, the other with text on the right) and a (horizontally scrolling) photo gallery.
Here are some other custom blocks that the admin can include.
I've called this effect "cinema" because it blocks the user's scroll, changes the background ("turns off the lights"), and puts the focus on a single image. Just as if you were in front of a cinema screen.
Below you see another photo gallery, completely different from the previous one.
The footer aggregates all the villas' pages clearly (and their social profiles!).
The background changes color depending on the pages.
The pricing list and amenities are fully manageable from the web interface.
Icons can also be uploaded.
The mobile menu shows both the general pages of the site and the individual pages of each villa.
This makes the site easier to navigate.
Have you enjoyed the project?
If you want to work together or wish to contact me for further information, you can write me at [email protected]
Current availability for new projects
© 2023, Francesco Mugnai
