SewerAI
Headless Next.js for an AI infrastructure platform
A Next.js and Sanity build on Vercel that pairs industrial photography with monospaced technical typography — engineered as carefully as it is designed.
- Industry
- AI
- Platform
- Next.js
- Reviewed
- 2026
- Region
- United States
- Study type
- Independent teardown
- Surfaces reviewed
- Home, product, resources, demo
- Viewports captured
- 1440 · 834 · 390
- Stack confirmed via
- Markup, assets, headers
- Comparable build
- 10–14 weeks
- Team shape
- Design + Next.js + Sanity
Independent design and engineering study of a publicly available website. Observations are drawn from the live site, its markup and its response headers. Muonix Technolabs is not affiliated with, and does not claim authorship of, the work reviewed here.
The brief
SewerAI sells AI-assisted inspection to municipalities and utility contractors — buyers with procurement cycles, compliance obligations and a healthy scepticism of anything described as artificial intelligence.
The site answers that scepticism with concreteness. The product is shown doing its job on real inspection footage and data, not abstracted into a gradient illustration. AI is framed as a reviewer's assistant rather than a replacement, which is the only framing this audience will accept.
Technically it is the most modern build in this collection: a Next.js front end on Vercel with Sanity as the content backend. That combination buys editorial flexibility and per-route performance control that a visual builder cannot match at this scale.
We reviewed the public site across three viewports and traced the rendering strategy, content model and conversion architecture from markup, assets and response headers.
Project overview
SewerAI sells AI-assisted pipe inspection to utilities, contractors and engineers — three audiences with different procurement paths.
The site is the only build in this set running a headless architecture: Next.js on Vercel with Sanity as the content source, and it shows in how the imagery and content models are handled.
About the client
SewerAI provides a platform for wastewater network inspection and risk-based prioritisation.
The homepage states 3.4M+ inspections, 578M+ feet managed and trust from 2,000+ cities nationwide, with named customers including Houston Public Works, City of Phoenix and Pacific Gas and Electric.
- Industry
- AI
- Profile
- AI infrastructure inspection SaaS
- Country
- United States
Website goals
- Speak to utilities, contractors and engineers from a single hero without diluting any of them.
- Convey engineering seriousness in a category still dominated by legacy vendors.
- Route qualified visitors into a demo booking with minimal friction.
- Publish customer and resource content through a structured, developer-owned CMS.
Discovery findings
Show the work, not the model
Interface and inspection imagery carry the claim; the copy stays operational, which is how technical buyers calibrate trust.
Procurement-aware structure
Resources, documentation and proof sit alongside the pitch, because the champion has to sell internally after the demo.
Headless for a reason
A structured content backend means product messaging, resources and customer stories evolve independently of engineering releases.
Performance as credibility
For an AI infrastructure vendor, a fast, stable site is itself an argument about engineering quality.
Design approach
- A photographic hero shot from inside a pipe — literal, memorable and instantly category-defining.
- Condensed uppercase display type with a hand-drawn accent underline, balancing industrial and human.
- Monospaced labels for statistics and eyebrow text, borrowing the visual grammar of instrumentation.
- Angled button shapes that echo pipe geometry without becoming a gimmick.
Design decisions
Product screenshots as hero
Nothing convinces an inspection buyer like seeing their own footage workflow on screen; abstract AI art would actively hurt.
Calm technical palette
Restrained colour with clear state semantics keeps dense product imagery readable and unhyped.
Data-shaped layout
Sections mirror the workflow — capture, review, report — so the page structure teaches the product.
Typography for scanning
Tight headings and short paragraphs suit buyers who skim on a laptop between site visits.
UI/UX highlights
Audience tabs in the hero
Utilities, Contractors and Engineers switch the framing above the headline instead of forcing three landing pages.
Inline statistics row
Three delimited metrics sit between the subhead and the CTAs, so proof is read before the action.
Paired CTAs
A primary demo booking beside a lower-commitment platform tour.
Two-row logo grid
Sixteen customer marks in a bordered grid rather than a scrolling rail — steadier and more scannable.
Information architecture
- Platform
- Product capability pages under a Platform menu group, anchored from the hero.
- Audiences
- Customer segments addressed both in-hero and through the Customers menu.
- Commercial
- A public Pricing page — unusual and confidence-signalling in this category.
- Conversion
- A dedicated /demo route as the single booking destination.
CMS strategy
Content is managed in Sanity and served through the Next.js image pipeline, so editors upload once and the framework handles format and sizing.
Customer logos are served either directly as SVG from the CDN or through the optimiser for raster marks — a deliberate per-asset decision.
Structured content lets the same customer record power logo walls, story pages and resource listings.
Design showcase
Development highlights
Static generation with revalidation
Pages ship as pre-rendered HTML and refresh on content change, giving CDN speed with CMS freshness.
Typed content pipeline
Schema-to-type generation means a content model change surfaces as a build error, not a production blank section.
Editor preview
Draft content renders in the real layout before publish, which removes the review bottleneck from engineering.
Edge delivery
CDN-hosted assets and routes keep first paint fast for geographically distributed municipal buyers.
Key features
Segment switcher
Hero content adapts to the visitor's role selection.
Edge-cached rendering
Prerendered pages served from Vercel's edge with revalidation.
Structured logo wall
A bordered grid of municipal and contractor customers.
Public pricing
Transparent commercial information exposed in the primary navigation.
Technical highlights
- Next.js application deployed on Vercel with prerendering and edge caching.
- Sanity as the headless content platform, served over the Sanity CDN.
- Next.js image optimisation with per-asset format and quality parameters.
- Response headers confirm static prerender plus a stale-time revalidation window.
Performance & accessibility
- Pages are prerendered and cached at the edge on Vercel, with stale-while-revalidate behaviour visible in the response headers.
- Next.js image optimisation delivers width-constrained, quality-tuned assets rather than raw uploads.
- SVG logos bypass the optimiser entirely, avoiding needless transformation.
- Every customer logo carries a descriptive alt attribute, and hero copy holds strong contrast over a light photographic background.
Responsive experience
- The sixteen-logo grid reflows from eight to four to two columns without orphaned cells.
- Hero display type scales aggressively so the two-line headline survives a 390px viewport.
- Audience tabs remain a single horizontal row on mobile rather than collapsing into a select.
Challenges solved
Three audiences, one hero
Solved with in-hero tabs that reframe the same product rather than splitting the entry point.
Credibility against incumbent vendors
Solved with volume metrics, a municipal logo grid and public pricing.
Image-heavy pages at speed
Solved with framework-level optimisation and edge caching rather than manual asset prep.
Technologies used
- Next.js
- React
- Sanity
- Vercel
- TypeScript
Identified from public markup, asset origins and response headers only.
How Muonix would build this
A delivery plan for a site at this standard, scoped the way we actually run engagements — three senior founders, no handoffs, fixed phases.
- 01
Discovery and content modelling
Week 1–3Define the content graph — pages, resources, case studies, glossary — before design, because headless projects live or die on the model.
- Content model and schemas
- Editorial workflow
- Sitemap and routing plan
- Message architecture
- 02
Product-led design system
Week 4–6Design around real product surfaces: screenshots, data views and workflow diagrams, with a token system that survives dark and light contexts.
- Design tokens
- Component library
- Product imagery direction
- Key page layouts
- 03
Next.js and Sanity build
Week 7–12Implement typed content queries, static generation with incremental revalidation, and preview for editors.
- Typed Sanity schemas
- ISR routing
- Editor preview environment
- Component test coverage
- 04
Performance, SEO and launch
Week 13–14Budget images and scripts per route, add structured data, and ship on a CDN with observability wired in.
- Per-route performance budgets
- Structured data
- Analytics and CRM integration
- Monitoring and alerting
Observable impact
- Technical credibility
- Delivery speed and stability corroborate the engineering claim the product makes.
- Editorial autonomy
- Marketing ships resources and stories without a deploy queue.
- Scalable content graph
- New content types slot into the model rather than forcing bespoke pages.
- Buyer enablement
- Resources and proof are positioned for the champion's internal sell, not just the first visit.
Verdict & takeaways
“The strongest engineering story here — headless done for real reasons, with the product doing the persuading.”
- 01Sell AI to technical buyers with evidence of the workflow, never with abstraction.
- 02Go headless when the content graph is genuinely complex — not for fashion.
- 03Model content before design; retrofitting a schema is the expensive mistake.
Related services
Want this standard of build for your product?
Three senior founders, no outsourcing, one accountable team across Webflow, Shopify, WordPress and modern JavaScript. Tell us what the site has to do and we'll scope it honestly.
