Oishi Cozinha Japonesa
A rodízio's real anti-waste discount, built as the whole site's thesis
In plain English
A restaurant site built around one real, checkable discount: R$ 20 off per person if the whole table finishes what it orders. Every price tier shows both numbers together, never the discount alone.
My role
Solo full stack developer
Timeline
Ongoing
Team
Solo
Status
In development
Design
Product tour
Section 01
The problem
Oishi is a São Gonçalo rodízio restaurant with 17K Instagram followers and no website — its menu and four price tiers lived only inside JPEGs, reservations arrived by phone, and delivery ran through a third-party app. Its real differentiator — a genuine, checkable anti-waste discount — had nowhere on the internet to be said out loud.
Section 02
How I approached it
The whole site is built around one sentence already true of the business: 'Coma tudo o que pedir. Pague menos por isso.' Every rodízio tier always shows both prices together with the condition spelled out, never the discounted number alone. Reference photography couldn't carry the site — 44 real photographs were graded by mean luminance with ffmpeg, and two-thirds measured too dark for a full-bleed hero — so the design is type-led and colour-led instead, built on the brand's own sampled hinomaru gradient. Every fact that wasn't confirmed renders as an honest '[a confirmar]' inline rather than a plausible guess.
Outcome
Live at oishicozinha.vercel.app across five routes — home, cardápio, two rodízio chapters, reserva, and contato — where every price tier renders both numbers and the real condition, the reservation form ends in a pre-filled WhatsApp message, and the still-open questions about hours and party limits stay visibly marked rather than silently answered.
Section 03
Going deeper
The two-price component is the whole product
Every rodízio tier renders through one component that always shows the full price struck through, the anti-waste price live, and the verbatim condition beneath it. The discount only applies if the whole table finishes its food, so showing the lower price alone would be a false price — the condition is structurally part of the component, never separable copy.
Designing without a photo shoot
44 reference photographs were graded by mean luminance with ffmpeg before any layout decision: 15 survive full-bleed, 20 work only in a framed panel, 9 are thumbnail-only, and none show the room or the team. Two-thirds measuring too dark for a photography-led design meant the entire visual system had to carry the brand through type and colour instead — the hinomaru's red is a real gradient sampled from the logo, measured at 3.17:1 contrast, which is why it's reserved for fills and display type rather than body copy.
A register of every allowed fact
A data-inventory document tracks every price, hour, and detail the site is allowed to state, each with its own source. A phone number that disagreed between WhatsApp deep links and printed flyers is contained to one builder function; an unconfirmed reservation policy or neighbourhood detail renders as a visible '[a confirmar]' instead of a plausible placeholder.
Section 04
The build process
Measure before designing
44 reference photographs were graded by mean luminance with ffmpeg before any layout decision.
Sample the brand instead of choosing it
The hinomaru's red is a real vertical gradient sampled from the logo itself, not a stock 'Japanese red'.
Build the two-price component once
Every rodízio tier renders through one component that always shows both prices and the verbatim condition.
Register every allowed fact
A data-inventory document tracks every price, hour, and detail the site is allowed to state, each with its source.
Section 05
How the pieces fit together
Each layer has one job. Read it top to bottom — that's roughly the path a request takes through the system.
Next.js App Router
Five static routes — home, cardápio, rodízio/[slug], reserva, contato — no server data, no database.
GSAP + Lenis + Motion
Scroll-scrubbed cinema on the home route, smooth native scroll everywhere, component-level hover and reveal motion.
Typed TS, no CMS
Menu, prices, and facts live in src/content/, gated by a 'never invent a fact' rule enforced across the codebase.
lib/contato/whatsapp.ts
The one wa.me builder every CTA on the site resolves through — delivery and reservations both terminate here.
Section 06
What it does
The two-price component
Every tier always shows the full price, the anti-waste price, and the real condition together.
Luminance-graded photography
Every photo is shown at the size its own measured brightness actually supports.
Honest unresolved facts
An unconfirmed hour, phone digit, or reservation rule renders as a visible '[a confirmar]'.
Three exits, one builder each
Delivery, reservation, and WhatsApp all resolve through single-purpose link builders.
Section 07
The hard parts
A phone number that disagreed with itself
WhatsApp deep links and two social posts gave one number; two printed flyers gave another. The conflict is contained to one builder function so the site can ship around it without resolving it everywhere it's used.
Designing without a photo shoot
Two-thirds of the 44 reference photographs measured too dark or too inconsistent for a photography-led design, so the entire visual system had to carry the brand through type and colour instead of imagery.
Keeping the discount honest, not just prominent
The anti-waste price only applies if the whole table finishes its food — showing the lower number without that condition would be a false price.
Section 08
What I took away
- Measuring reference material — luminance, contrast, colour — before making a design decision catches constraints a glance would miss: two-thirds of the reference photos being too dark decided the whole visual direction.
- A discount is only honest if its condition is structurally part of the same component as the price — copy placed next to a number is one edit away from drifting apart from it.
- Registering every allowed fact in one document, with its source, is what makes 'never invent a fact' enforceable rather than aspirational.
Thesis
R$ 20 off/person, whole table finishes
Photography
44 photos graded by ffmpeg luminance
Exits
Delivery, reserva, WhatsApp — all wa.me
Unconfirmed facts
Rendered as '[a confirmar]', never guessed
Let's build something worth shipping
Available for freelance projects, full-time roles, and technical consulting. Tell me what you're building and I'll tell you honestly whether I'm the right person for it.
Based in Rio de Janeiro, Brazil · Working with teams in any timezone · Fluent in English and Portuguese