Skip to content
ComStack

Custom page example gallery

What this is

Four live custom pages, each for a different fictional business and a different archetype. Every one was authored by an AI agent that learned the platform only from the documentation in this section — the same pages you just read — then uploaded with upload-custom-page and published through the standard two-step flow. They are working proof of the docs, not mockups.

Each example passes the quality bar described in Quality gates (Lighthouse ≥95 across performance, accessibility, best practices, and SEO), carries translation markers throughout, and renders in every site locale — open any of them under /es/ for the Spanish variant.

The examples

Harbor Paws Veterinary Clinic

Archetype: local-business landing page. A small-town vet clinic: hero with a clear promise, services at a glance, opening hours, and a tel: call-to-action. The bread-and-butter custom page — the kind a restaurant, clinic, or salon ships on day one. Demonstrates clean data-t-key marker coverage and a fully self-contained single-file layout.

LUMEN smart kettle

Archetype: product launch. A launch page for a fictional smart kettle: animated hero, feature trio, spec strip, and a pre-order call-to-action. Demonstrates CSS keyframe animation that stays on transform/opacity (no layout shift), prefers-reduced-motion handling, and marker discipline on dense marketing copy.

TileWise calculator

Archetype: interactive tool. A tile-and-grout quantity calculator in plain vanilla JavaScript: labeled form controls, instant results, keyboard- and screen-reader-friendly. Demonstrates that custom pages can be genuinely interactive — script included — while holding the accessibility bar.

Aurora Skies Tours

Archetype: animated showpiece. A northern-lights tour operator with a heavily animated, visually striking treatment — layered CSS gradient auroras, drifting stars, scroll-revealed sections. Demonstrates how far pure CSS can go while still passing the performance gate, and how a page this designed still translates cleanly because every string is marked.

What to take from them

  • View source. Each page is one self-contained body — the exact thing its author uploaded. What you see is what upload-custom-page shipped.
  • Switch locales. Visit any example with the /es/ prefix: same layout, translated strings, no per-locale page copies. That is the marker system doing its job — see Translation.
  • Copy the patterns. The annotated versions of these techniques — with the reasoning spelled out line by line — are in Recipes.

Last updated: