Brand website with online shop
AGUA DURA
)
AGUA DURA is an orange aperitif modelled on Agua de Valencia, with and without alcohol. We developed the brand website with an online shop. It explains the “two Cero, one Dura” ritual at a glance and leads from each variety straight to the basket.
- Services
- Web Design & Development
- E-Commerce & Shop Systems
- Website
- agua-dura.com ↗
01Starting point
AGUA DURA is bringing an orange aperitif to market in three varieties: Cero without alcohol, Dura with 12% vol. and Mixto as a ready-made house mix for bars and restaurants. Behind the brand is a ritual for sharing. Two bottles of Cero and one bottle of Dura make the shared mix.
The website had to make this principle clear in a few seconds. It was meant to convey the brand's Valencia mood and sell Cero, Dura and the combination pack directly. Because Dura contains alcohol, an age check was part of the brief.
)
)
)
02Solution
We built a brand website with an integrated shop: Payload CMS for the content, Next.js on the front end and Stripe for payments. Colours, fonts and illustrations come straight from the label: cream, blue, sun yellow and the azahar blossom.
Hero
At the centre is the bottle in 3D, built with Three.js. It is created directly in the browser from its outline, with glass, label, screw cap and water droplets. The headline “In full bloom.” sits behind the bottle and is refracted in the glass. As you scroll, the bottle turns once, shows its back label and moves to the side, where the text with the button appears. Without WebGL, the page shows a photo of the bottle instead.
Product cards
Each variety has its own colour. When you move the mouse over a card, a drawn orange blossom grows behind the bottle. At the same time, the price turns into an add-to-basket button. This takes visitors straight from the overview to the purchase.
Mix studio
The mix studio is a small calculator. Visitors set how many bottles of Cero and Dura are on the table. The glass fills in the matching ratio and the page shows the alcohol content of the mix. Quick options for pure Cero, the 2:1 mix and pure Dura make the difference visible straight away.
In addition, there is an age check, cookie settings, an FAQ section and a newsletter with privacy-friendly spam protection. On a smartphone, the cards and the mix studio are stacked. All features remain available.
)
)
)
03Result
AGUA DURA has a website that explains and sells the product. The “two Cero, one Dura” ritual runs through the whole site: hero, product cards, mix studio and the serving guide. Each variety has its own shop page with a basket. A project from our Web Design & Development and E-Commerce & Shop Systems services.
)
Technologies
What we built it with.
Payload CMSOpen source on our own servers in the EU, the foundation of our Rocketsite platform.
Next.jsOur framework for fast websites, shops and web applications.
StripePayments by card, EPS and more, directly in your own checkout.
Three.jsFor 3D in the browser, such as products that rotate as you scroll.
)
)
)