Tanel
A landing page and brand system for an operations platform selling into direct-store-delivery food and beverage manufacturers — wholesale bakeries, frozen-route distributors, the businesses that put bread on a shelf at five in the morning. Custom code end to end. No page builder, no template, no theme.
- SectorFood & beverage distribution software
- ScopeBrand system, landing page, demo pipeline
- BuildNext.js App Router · Tailwind v4 · TypeScript
- Surface16 sections · 7 product previews
Who this page had to convince.
The buyer is an operations person at a manufacturer running deliveries on routes — someone who has been quoted six figures for an ERP twice and walked away both times. They are not impressed by software marketing. They want to know what the thing does, whether it touches the systems they already run, and whether anyone will pick up the phone.
So the page had one job: show the product working before asking for anything. Not a video, not a screenshot carousel — the actual interface, rendered in the browser, sitting inside the page.
What's actually in it.
A brand system, from the mark out
Black logo on signal yellow. Hard 2px black borders, offset block shadows, mono uppercase labels, hazard-stripe dividers — loading-dock and shipping-label cues, because that is the world the buyer works in. The mark and wordmark ship as inline SVG components with currentColor fills, so they recolor anywhere without a second asset.
Seven live product previews
Ordering, product management, routing, pricing, invoicing, integrations, and the analytics chat — each one a working React component fed static sample data, not an image. The analytics preview renders through the same chart card the real product uses, so what a visitor sees is what a customer gets.
A demo-request pipeline that holds up
Zod schema shared between the client form and the server action, so validation can't drift between them. Honeypot field plus a minimum-time-on-page check to absorb bots without a CAPTCHA. Transactional send through Resend, with a copyable fallback address if the send ever fails.
An integrations diagram that earns its place
Animated beams running inbound from Dynamics 365, spreadsheets, and Stripe, outbound to Maps, AI, and the database. It answers the objection that actually blocks this sale — 'we already run something' — in about two seconds of looking.
The full information architecture
Announcement banner for trade shows, sticky nav with a module menu, conveyor-belt ticker, alternating feature bands, a black how-it-works section, and a full-bleed finale carrying the form. Every deep-dive section is addressable by anchor and reachable from three places.
Metadata and structured data
One site config driving every title, description, Open Graph card, sitemap entry, and footer string. Change the tagline in one file and the whole site follows — including the parts nobody remembers to update.
The calls, and why we made them.
Every one of these is a rule someone has to be able to follow six months from now without asking. That's the difference between a brand and a mood board.
- 01
Yellow is a surface, never text on white
#FFED29 fails contrast as text on a light background. So it never is one. It fills chips, highlight spans, whole sections, and the logo plate, always with near-black on top. On black surfaces it flips and becomes text, where it reads beautifully. That one rule is what keeps a very loud color from being an accessibility problem.
- 02
The hazard tape appears exactly twice
Top edge of the how-it-works band, top edge of the footer. A signature stops being a signature the fourth time you use it.
- 03
The contact form was re-skinned, not forked
It's themed entirely through CSS custom properties handed down by the section that renders it. One form component, any brand. That's why the rebrand study below has a working form without a second copy of the logic — the thing most likely to rot in a duplicated codebase.
- 04
The page ignores the OS theme
Marketing is brand-fixed light. A visitor's dark-mode preference doesn't get to repaint a brand, and a landing page that renders two ways is a landing page you've only really designed once.
- 05
The mocks reflow instead of scaling down
The product previews are laid out, not scaled. They rebuild themselves at every breakpoint down to 360px, because the buyer is often reading this on a phone in a warehouse.
One page, two brands.
Before committing to a rebrand, we built the entire page a second time in the candidate direction — warm cream ground, tomato red as the single signal color, a different type pairing — and ran the two side by side. Not a mood board. The whole page, section for section, deployed.
It costs a couple of days and it settles an argument that otherwise runs for a month. It also proves something useful about the underlying build: if swapping the entire visual system is a contained job, the structure was right.
Fair warning on what you'll see: the study carries its own working name and mark throughout, because that's what a candidate direction is. It's the same product and the same page underneath.
The stack.
- Next.js (App Router)
- React 19
- TypeScript
- Tailwind CSS v4
- Server Actions
- Zod
- React Hook Form
- Resend
- Recharts
- Motion
- Vercel
Boring on purpose. Every piece here is something a different engineer can pick up in an afternoon, and nothing in the list is a hosted builder we'd have to migrate off later. The whole page is statically generated — no server render on the critical path.
What you're looking at.
The demo linked above is the real page, deployed on this domain and served the same way it is in production. Two things are deliberately different. The contact form validates your input and runs its bot checks, then stops — nothing is transmitted, and it tells you so. And routes outside the landing page itself (sign-in, blog, legal) aren't part of this export, so they've been trimmed from the nav rather than left as dead links.
The demo pages are noindex. A second copy of a live page belongs in a portfolio, not in a search index.
How we'd build yours.
Start a conversation.
Tell us what the page has to do and who has to be convinced by it. Direct reply from the founder.
Get in touch →