Marcus Henri AI

Marcus Henri AI is the marketing site for my own AI consultancy, live at ai.marcushenri.studio. It is a single scrolling landing page that carries a visitor from the core problem, that most business AI never pays off, through what I can build, the services and pricing, a real case study, and a contact form, all under a MarcusHenri.AI brand. It is built in Next.js 16 and React 19 with Tailwind 4, styled with a custom editorial design system: a warm cream and ink palette, Space Grotesk over Inter, hairline rules, and full-bleed tinted section bands. The contact form is a server action backed by Resend, and the page ships generated Open Graph images and Vercel Analytics.

I had started taking on AI consulting work but had nowhere to send a prospective client that explained what I do and why it is different. Generic AI consultants sell slide decks, so I wanted a site that made the opposite case, that I build and ship the systems I recommend, positioned honestly around grounded answers, measured accuracy, and a human in the loop. The harder part was not the code but the message: turning a vague 'I do AI' into a clear problem, a set of concrete use cases, transparent pricing, and proof, without it reading like every other consultancy landing page.

I designed the whole thing as one editorial page rather than a multi-route site, so the narrative reads top to bottom in a single scroll. The build is Next.js 16 with the App Router and React 19, styled entirely through Tailwind 4's CSS-first theme in globals.css with no config file, defining the cream, ink, accent and rule tokens once and reusing them everywhere. The alternating full-bleed section bands and viewport-wide hairline separators are done with a pseudo-element trick, a viewport-wide ::before centered under a column-width content area, so the colour spans the full width while the text stays in the reading column. The contact form posts to a server action that sends through Resend, and the page generates its own Open Graph share image with the Next image-response API. Each section's content is authored as typed data arrays, so problems, use cases, services and FAQs are edited as data rather than markup.

The defining decisions were about positioning as much as build. I led with the problem, an MIT finding that most enterprise AI pilots deliver no return, rather than with myself, framed the offer around trust (grounded, cited, measured, human in the loop) to separate it from generic AI hype, and put real pricing on the page because vague 'contact us' pricing is exactly what I distrust as a buyer. Technically I chose a single editorial page over a heavier multi-page site because the goal is one clear read, and I kept the whole thing static and dependency-light, no CMS and no UI library, just typed content and Tailwind tokens, so it loads fast and stays trivial to maintain. The case study points straight at Capstan, my live AI SaaS, so the site proves its own claim by linking to a working product.

This sharpened a different muscle from my app projects: distilling a service into a story a non-technical buyer can follow in one scroll, and writing copy that sells without overpromising. On the build side it deepened my Tailwind 4 CSS-first workflow, especially the full-bleed band and hairline-rule techniques for an editorial layout that survives a phone screen with almost no media queries, and it was good practice wiring a real contact path (a server action plus Resend) and a generated Open Graph image. Mostly it reinforced that presentation is part of engineering: the same care that goes into a system has to go into how you explain it, or no one gets as far as the system.