Toi - Authoritative Drainage Landing Page Template

Quick summary

Toi is a single-page, click-through landing page template for professional drainage and gutter cleaning services in Tokyo. The layout uses a strict 50/50 split-screen structure throughout. An editorial magazine tone, a plum and parchment color system, and a stats-first scroll flow combine to build trust quickly and direct visitors to a dedicated service and pricing page.

Who this template is for

This template is designed for drainage and gutter cleaning businesses that serve professional, property-owning clients. The editorial tone and proof-led layout suit operators who want to look credible before a visitor ever reaches a pricing page.

• Building management companies handling aging apartment complexes
• Restaurant-row and commercial landlords with recurring grease trap and drainage issues
• Temple and institutional groundskeepers who need seasonal gutter clearing before high-footfall events

What problem this template solves

Many local service businesses lose potential clients because their web presence looks generic or fails to establish trust fast enough. Visitors leave before they ever click to a pricing page. This template solves that gap by front-loading proof: statistics, named testimonials, and visual evidence all arrive before any sales pitch.

• Visitors have no immediate reason to trust an unfamiliar cleaning service
• A contact form alone does not convey scale, quality, or response speed
• Generic service pages bury the proof that actually closes decisions

What you get with this template

You get a fully structured, single-page layout built around a 50/50 split-screen system. Every section pairs a visual element with a content element, creating a consistent editorial rhythm from top to bottom.

• A testimonial header card, three bold data-stat sections, rotating client quote cards, and a before-and-after video closing section
• A persistent call-to-action in persimmon, appearing beneath the header, as a fixed desktop sidebar button, and as a mobile bottom bar
• A complete plum executive color system with deep plum, muted wisteria, warm parchment, and persimmon accent already applied across all components

Feature list

This template is built around a small set of carefully considered layout components. Each one serves a specific role in the click-through flow.

Split-Screen Testimonial Header

The header occupies the full viewport in a 50/50 split. The left half shows an oversized serif quote card on warm parchment, attributed to a named Minato-ku property management director with a five-star cluster. The right half holds an editorially graded photograph of a cleaned copper gutter with rainwater sheeting cleanly off a tiled roofline.

Stats-First Data Sections

Three consecutive split-screen sections follow the header. Each one places a single bold statistic on one half and a corresponding editorial photograph on the other. The stat arrives before any explanatory text, creating a rhythm where numbers compound the case for quality before any paragraph is read.

Rotating Testimonial Cards

A mid-page testimonial block cycles through three client quote cards. Each card references a recognizable Tokyo ward name, grounding the social proof in geography that target clients will recognize.

Before-and-After Video Section

The final content section pairs a drainage flow video on one split-screen half with the primary call-to-action on the other. This positions the visitor to click through already holding visual evidence of the service outcome.

Persistent Persimmon Call-to-Action

The primary call-to-action button, "See Service Plans and Pricing," appears in persimmon at three fixed points: below the header, as a sidebar button fixed to the desktop viewport, and as a bottom bar pinned to mobile screens. There is no contact form on this page.

Editorial Wisteria Pull Text

Short explanatory paragraphs appear beneath each stat section, set in muted wisteria. This typographic layer adds context without competing with the data callouts, keeping the editorial hierarchy clear and the page easy to scan.

Page sections overview

Design & branding system

The template uses a Plum Executive color system applied across an Editorial Magazine visual theme. Every color choice has a defined role, and the palette is already fully applied to all components in the template.

• Deep plum (#3C1642) anchors headlines and section dividers; muted wisteria (#8E6C8A) is used for secondary text and pull-quote backgrounds; warm parchment (#F4EDE4) forms the primary page surface
• Persimmon (#E8553A) is reserved exclusively for call-to-action buttons and data callouts, functioning like a red hanko stamp pressed into a contract
• Typography is set in large serif type throughout, reinforcing the Japanese business journal feel on an uncoated-stock aesthetic

Mobile & speed optimization

The template is designed so the persistent call-to-action remains reachable at every scroll position on every screen size. The split-screen structure adapts for smaller viewports without losing its editorial hierarchy.

• On mobile, the persistent bottom bar keeps the "See Service Plans and Pricing" button fixed and immediately tappable at all scroll depths
• On desktop, the fixed sidebar button ensures the call-to-action is always visible without interrupting the editorial reading flow
• The page contains no embedded form, which keeps the interaction path simple and reduces friction on all devices

How this template helps you convert

This template is built around a single conversion goal: earning the click to a service and pricing page. Every layout decision supports that goal in sequence.

1. The testimonial header establishes credibility immediately, so visitors begin scrolling with trust already forming rather than skepticism.
2. The three compounding stat sections build a quantified case for scale, quality, and speed before any service description appears, so the visitor arrives at the call-to-action already persuaded.
3. The before-and-after video section delivers the final visual proof at the moment the call-to-action is most prominent, making the click feel like a natural next step rather than a sales push.

Other information about this template

This template suits operators in the professional cleaning and property maintenance space who serve institutional or commercial clients in dense urban environments. The layout is deliberately free of forms, menus, and multi-step flows, keeping the entire page focused on one outcome.

• The page type is a click-through landing page, not a lead generation form page
• The Editorial Magazine theme and Plum Executive color system give the template a tone closer to a corporate property journal than a typical trade service website
• The template is designed for the Tokyo local services market but the structure and visual system can be adapted for any urban professional cleaning service targeting property management clients

Show more