Desktop · 1440 — Mobile · 390Captured from the live site
The brief
Agencies usually sell a list of services. Miduva sells a system — so the website had to feel like one: connected, measurable, and engineered.
Challenge
Lead generation, conversion websites and automation are three different offers. Presented side by side they look like a menu. The site needed to show how they depend on each other — and why buying one without the others leaks money.
Approach
I structured the page as an argument: name the system, show the three traps it solves, explain the four-step process, then back it with numbers and real clients. Every section ends closer to a call.
Result
A fast marketing site on Next.js with a dark-and-paper rhythm, kinetic headlines, live UI mock-ups instead of stock icons, and four separate paths into a sales conversation.
Scroll the whole page
One page, one argument.
HeroA 3D growth loop sets the idea before a word is read.
Three systemsAttract, convert, follow up — each with its own photo story.
The problemThree traps, each shown as a small piece of real interface.
ProcessFrom audit to scale in four plain steps.
ResultsCounters that animate in as proof arrives.
Clients & differenceLogo wall, then a giant kinetic “Built as a system.”
Services & stackInteractive service list and a marquee of platforms.
Contact & blogA human-first form, then fresh playbooks.
miduva.com
Inside the build
Decisions, up close.
Six moments from the page and why they look the way they do. Click any screen to see it at full resolution.
/ Our systems — Attract · Convert · Follow up
01
Three offers, framed as one machine.
The headline does the selling: “Three systems. One growth machine.” Each system then gets a full-bleed row with a real working photograph, a numbered label and a single call to action, so the visitor reads them as parts of a whole rather than a price list.
Monospace labels borrow the language of engineering
Teal is reserved for the idea that ties everything together
/ The problem — shown, not described
02
Make the problem look familiar.
Instead of icons, each trap is a tiny, believable interface: an ad dashboard where 12,480 clicks turn into nine customers, a page people leave in seconds, an inbox of leads nobody answered. Business owners recognise their own screens — that’s what makes the pain land.
Light “paper” section breaks the dark rhythm on purpose
One hard number per card, set large
/ The solution — a pipeline you can follow
03
The answer arrives as a pipeline.
Right after the three traps, a single panel resolves them: ads engineered to attract buyers, funnels built to convert, automation that nurtures while you sleep — ending in “Customers, on repeat.” The visual is a flow, so the reader’s eye travels the same path the customer will.
/ How it works — from audit to scale
04
A process that removes risk.
Four equal cards, one verb each. Analyze, build, launch, scale. Keeping the steps visually identical says “this is repeatable” — the quiet message a cautious buyer needs before booking a call.
/ Results — counters animate in on scroll
05
Proof, then people.
Big counters count up as they enter the screen, followed immediately by a moving wall of client logos and an oversized “Built as a system.” headline that fills the viewport. Evidence first, emotion second, then the services list.
/ Get in touch — two ways in, no dead ends
06
Every path ends in a human.
The contact block promises “a strategist, not a sales rep,” offers a direct email for people who hate forms, and pairs the form with a one-click call booking. Across the page there are four entry points — RFP, Let’s talk, the growth plan, and this form — so nobody has to scroll back up to act.
On the phone
Same story, thumb-sized.
Every section was recomposed for a 390px screen, not just stacked: headlines rebreak, calls to action go full-width, and the dark/paper rhythm survives.
Systems
Problem
Results
Craft notes
Under the surface.
Next.js
React
Tailwind CSS
Plus Jakarta Sans
JetBrains Mono
Cloudflare
01
Dark / paper rhythm
Sections alternate between deep navy and warm paper so a long page breathes and each idea starts fresh.
02
UI as illustration
Small, believable dashboards and inboxes replace generic icons — the product language of the client’s customers.
03
Kinetic type
Scroll-linked headlines and counters give the page momentum without autoplaying anything heavy.
04
Four ways to convert
RFP, Let’s talk, free growth plan and the contact form — each placed where intent peaks.
