La Raffinerie
Two venues, one brand: the site had to serve both without diluting either.
- Year
- 2026
- Design & build
- 4 weeks
- Stack
- React · Vite · Tailwind · Framer Motion · Vercel
- Design
- Development
- Multi-location local SEO
- Copywriting
Demo version put online by Kayzen Web at a Vercel address; the final domain belongs to the client.
- venues, one domain
- 2
- Lighthouse performance
- 95/100
- Lighthouse accessibility
- 100/100
What needed solving.
The background
La Raffinerie is a craft beer, tapas and cocktail bar with two addresses in Lyon: Saxe (Lyon 3) and Vaise (Lyon 9).
The constraint
Two venues pose a classic local SEO problem: either you create two sites and split the domain's authority, or you build just one and become invisible for neighbourhood searches. On top of that, a beer list that rotates constantly and customers who do not always know what to choose.
The response
A single domain, one dedicated page per venue, each with its complete listing and its own markup. The beer list becomes a tasting guide: every beer shows its style, bitterness, strength and a suggested tapas pairing. We do not list, we advise.
The scores recorded at delivery.
Lighthouse scores for the live site. We publish them as they are: when one is low, its cause and the plan to fix it are set out below rather than glossed over.
Every design choice, and the reason for it.
A guide rather than a list
Filters by style and bitterness, a suggested tapas pairing for each beer. A customer hesitating between forty beers is a customer who orders the usual — or orders nothing.
Each address has its own personality
Photos, atmosphere and opening hours specific to Saxe and to Vaise, on a shared graphic base. Two identical twin pages would have been seen as filler by visitors and by Google alike.
Motion in the service of texture
Entrance animations highlight texture — foam, copper, slate. They disappear completely if the user has asked for reduced motion.
Project palette
Slate
#22262B
Main background
Copper
#C0763C
Action, accents
Foam
#EFE6D4
Text, light surfaces
Hops
#6C7A3F
Style labels
Type system
Display
Bebas Neue
Body text
Inter 400
Condensed capitals for headings — a craft brewery register — balanced by a highly readable sans-serif on the tasting notes.
What's under the bonnet.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
The menu as data, not HTML
Beers and tapas live in a typed data file. Adding a beer requires neither touching the markup nor risking breaking the layout.
Measured animations
Framer Motion is only loaded by pages that actually animate. The information pages (directions, opening hours) do not download a single line of it.
How the site makes itself findable.
Two separate LocalBusiness entries
Each venue carries its own node with address, geographic coordinates and opening hours. A single block for two addresses prevents Google from correctly matching the two listings.
Neighbourhood searches
“Bar à bières Saxe” (beer bar), “bar Vaise Lyon 9” rather than “bar Lyon”. The neighbourhood page wins on phrases the brand page cannot target.
Indexable tasting content
The beer pages answer real searches (“bière IPA amère Lyon” — bitter IPA, “accord tapas bière ambrée” — tapas pairing for amber ale) and bring in discovery traffic that the address alone does not capture.
Usable by everyone.
Since June 2025, the European Accessibility Act has required digital accessibility from a large share of online services. We build it in at the design stage rather than retrofitting it.
100/100 with interactive filters
The filters are native buttons with an announced pressed state, and the number of results is communicated in a live region after each change.
What was delivered.
- Home
- Saxe (Lyon 3) — full listing
- Vaise (Lyon 9) — full listing
- Beer guide
- Tapas and cocktails
- Contact
How the project unfolded.
Multi-location strategy
One domain / two pages decided, markup per venue.
Tasting content
Styles, bitterness, pairings: the list becomes a guide.
Design
Shared base, a personality per address.
Development
Typed data, animations loaded on demand.
What we are often asked.
More of our work
GDPR compliance & SaaSKonsent by Kayzen
A banner vendor that audits banners is both judge and party: independence was the product.
Offensive cybersecurity & SaaSSentinel by Kayzen
Selling a security product to engineers: every claim had to be demonstrable.
Data & weather serviceMétéo Climat France
358 indexable pages, a map animated over 72 time steps — and not a single line of framework.
The same high standards, for your website.
A free audit of your current site, a quote within 24 hours and written reasoning — like the case study you have just read. Pay in three interest-free instalments; local funding schemes checked before you sign.