Marketing page standard

Locked with Tim 5–6 Sep 2026 (PT). Owners: Nuxi (ship) and Qua (QA / crawl-check). Henri holds the human queue. Laya owns layer packages.

This is the page-composition baseline for X Enterprises product marketing sites. It sits beside SITE-STANDARD (stack, legal entity, SEO). When they conflict on page sections, prefer this page.

Layer-first: encode as much as possible in @xenterprises/nuxt-x-marketing / @xenterprises/nuxt-x-cards component defaults. Site assembly inherits the standard by using the components. Do not re-implement these rules in each product repo.

Scope

• In: XE-owned product marketing / public sites.
• Out: portals and apps (nuxt-x-app), admin, client properties. If ownership is unclear, ask XOracle first.
• Feel: shared structure, per-product skin. Same section order and components; Contention can look like Contention, Bandmate like Bandmate.
• Honesty (hard): no fake testimonials, invented named customers, fake reviews, or invented star ratings. Real named proof only, or omit the block.
• Writing: plain and straight. No em dashes. Plain-test lock stands.
• Locale: English-only for now (no i18n kits on marketing sites yet).

Site types (Tim lock 6 Sep 2026)

Every XE marketing apex has one primary type. Chrome + stack (marketing+cards, ≥1.4.14, light-only, XXFooter display-only, OG, favicon, honesty) apply to all types. Page baselines fork by type.

SaaS (default)

Full page baselines below: Home Hero→Features→CTA, Pricing (plans + monthly/yearly + mid-tier recommend + Enterprise Get a quote), Features ≥3 alternating rows, About story→values→CTA, Support/Contact form→thank-you, first-party Legal when Tim locks it, Blog/Docs/Directory when the product ships them.

Product exceptions stay inside SaaS (e.g. grantis.io Pricing quote-only).

Agency

Portfolio / studio IA OK. Keep services / work / portfolio / tools. Calendly or booking OK as CTA. Do not require Pricing / Features / Support SaaS pages or Home Hero→Features→CTA.

Still require: chrome, layer floor, branded error.vue, legal (first-party when Tim locks it).

Directory

Hub: thin hero → filters/search → results grid → CTA → Footer. Profile: thin hero → body → CTA (no related). Directory cards from layer (photo, name, short meta, CTA; ~16:9). Pricing/Features optional per product unless Tim requires them.

Affiliate

Publisher / content / lead IA. Do not invent SaaS Pricing plans. Home may use Press/Blog-like featured + lists. Still require: chrome, working Contact→thank-you, legal, honest proof only, no empty shells.

Apex map

XOracle draft exists; Tim corrects before Qua treats it as locked. Until Tim posts corrections, Qua scores chrome universally and uses type only when Tim/Henri has confirmed that domain.

Stack (strict)

Marketing sites use only:

• @xenterprises/nuxt-x-marketing ≥ 1.4.14
• @xenterprises/nuxt-x-cards (0.3.x unlocked; prefer current published cards)

No one-off section kits. No hand-rolled Header / Hero / Feature / CTA / Footer when the layer already ships it.

Feature cards (Home Features, Feature page cards, etc.) must come from the layer only. Prefer vertical-oriented nuxt-x-cards for thumbs / grids / directory-adjacent previews.

Restriction: Nuxi ships marketing UI only via these two packages. Variations or custom components need Tim approval via Henri before ship.

Packages: nuxt-x-marketing, nuxt-x-cards.

Already baked into layers (≥ 1.4.14)

Chrome (every marketing page)

XHeader

Required:

• Logo links to /
• Primary nav links (count is per-product; no hard cap)
• One header CTA button
• Login / portal link when the product has an app
• Sticky on scroll
• Mobile primary nav: follow nuxt-x-marketing default (do not invent a one-off mobile menu)

Not required: color-mode toggle.

Light-only: marketing pages are light theme only. No dark mode. No color-mode toggle.

Announcement / promo bar: optional (above the sticky header when used).

Back-to-top: OK on long pages (Docs/Academy, Legal, long Blog posts).

Skip-to-content: follow nuxt-x-marketing default.

XFooter

Required:

• Product / nav columns (layout flexible per-product)
• Legal links: Privacy, Terms, Cookies (first-party product pages when the product has them)
• Copyright to X Enterprises, LLC
• Social icons only if real profiles exist

Not required: newsletter signup, contact email in the footer.

XXFooter

Required on every marketing page.

• Always include the X Enterprises logo in XXFooter.
• XE logo is display-only (no link).
• Do not invent a one-off legal / copyright strip.

Favicon

Every marketing site needs a product-mark favicon (from the real brand mark). No generic browser icon.

Open Graph

OG image required on every marketing page. Prefer product-branded share art; do not invent fake customers in OG imagery.

Image format (AVIF)

Tim lock 13 Sep 2026: standardize on AVIF for XE marketing stills.

• In-page media (heroes, feature/directory/blog card photos, section stills): ship AVIF as the canonical file format for new assets.
• Lumen / Nuxi generation: produce AVIF (not JPG/WebP as the primary deliverable). Nuxi still chooses aesthetic; format is AVIF.
• Existing JPG/WebP: migrate opportunistically when touching a page or regenerating a still. No emergency fleet rewrite unless Tim asks.
• OG / Twitter share art exception: keep JPG or PNG for og:image / Twitter cards (platform support for AVIF is incomplete). OG still required on every page.
• SVG logos/marks stay SVG. Video stays video (poster may be AVIF or JPG).

Dates

Display dates as Month Day, Year (e.g. Sep 6, 2026) on Blog, Press, and similar.

Links

External links open in a new tab. Internal links stay same-tab.

Width / containers

Sections may full-bleed. Text blocks stay constrained (follow layer container defaults for copy width).

FAQ behavior

FAQ sections are accordion; multiple items may stay open (layer default since 1.4.11).

Breadcrumbs

Required on Docs/Academy articles only. Omit on Home, Pricing, Features, About, Support, Legal, Blog, and Docs/Academy index. Use XMarkBreadcrumb.

Motion

Follow nuxt-x-marketing default. Do not invent per-site scroll animation kits.

Closing CTA

When a page type includes a closing CTA band: headline + subcopy + one primary button. Prefer signup or pricing as the button destination even if the header CTA points elsewhere.

No sticky mobile CTA bar (header sticky is enough).

Hero styles

• Full hero (Home + Blog index + Docs/Academy index + Press): eyebrow, H1, subcopy, primary CTA, hero media. Secondary CTA optional. Hero media prefers landscape ~16:9. Hero video: muted autoplay OK; no autoplay with sound.
• Thin hero (Pricing, Features, About, Support/Contact, Legal, Blog post, Docs/Academy article, Directory hub, Thank-you): H1 + subcopy only unless a page type says otherwise.

Page baselines

Header, Footer, and XXFooter are implied on every type below.

Home

Order: Hero → Features → CTA → Footer

• Hero (required): eyebrow, H1, subcopy, primary CTA, hero media (image or video). Secondary CTA optional.
• Features: one features section; typically 3–6 cards (count may still flex per product).
• Closing CTA: simple band only (headline + subcopy + one primary button). Prefer signup or pricing as the destination even when the header CTA differs.
• SocialProof: omit from Home. On other page types, per-product (honesty ban still hard: real named proof only, or omit).

Pricing

Order: Hero → Plans → FAQ → CTA → Footer

• Hero (thin): H1 + subcopy only (no required eyebrow, CTA, or hero media).

Plans section requires:

• Monthly / yearly toggle (must match displayed prices; do not advertise a discount the UI does not apply). Default to monthly.
• Typically 3 plan cards; count may flex per product
• Feature checklist per plan
• Highlighted recommended plan (always the mid-tier by price)
• Enterprise / contact sales card (CTA label: Get a quote)
• Amounts display in USD with $ (e.g. $29)
• Billing period spelled out: per month / per year (not /mo /yr)
• If the product has a free trial, show it on Pricing via freeTrial (honest; do not invent trials)

FAQ: typically 4–8 items.

Features

Order: Hero → alternating feature rows → CTA → Footer

• Hero (thin): H1 + subcopy only.
• Alternating rows: media left first, then alternate (right, left, …).
• At least 3 alternating rows.
• Each row: media + headline + copy; CTA in the row optional. Row media prefers square.

About

Order: Hero → story → values → CTA → Footer

• Hero (thin): H1 + subcopy only.
• Story: 1–3 short paragraphs.
• Values: typically 3 value cards (headline + short copy each).
• No required team grid. Keep product-first; not a studio hire funnel.

Support / Contact

Order: Hero → form → FAQ → Footer

• Hero (thin): H1 + subcopy only.
• Form fields (required): name, email, subject, message.
• FAQ: typically 4–8 items (same range as Pricing).
• After submit: redirect to a thank-you page (not inline-only success).
• No required closing CTA band on this page. No fake live-chat claims.

Thank-you

Order: thin hero → confirmation → CTA (home or pricing) → Footer

• Used after Support / Contact (and similar) form submits.

Legal (Privacy, Terms, Cookies)

Order: thin hero → body → Footer

• No table of contents on Legal pages.
• First-party. Do not hub-delegate to x.enterprises unless Tim explicitly allows it for that product.

404 / error

Follow nuxt-x-marketing default only (branded app/error.vue in the layer, 1.4.6+). No per-site invent of 404/500 pages.

Blog

Index

Order: Hero → featured post → post list → CTA → Footer

• Hero (full): same required elements as Home.
• Post list uses pagination (not infinite scroll / load-more): 6 posts per page.
• Featured post: larger card above the grid.
• Each list card: image, title, excerpt, date. Card image prefers landscape ~16:9.

Post (article)

Order: thin hero → article body → related posts → CTA → Footer

• Byline: author + date. Author may be a real person or the product brand (no invented fake people).
• Related posts: show 3.

Docs / Academy

Index

Order: Hero → featured item → list → CTA → Footer (same as Blog index)

• Hero (full): same required elements as Home.
• Featured item: larger card above the grid (like Blog).
• List uses pagination: 12 items per page.

Article / lesson

Order: thin hero → body with sidebar TOC → CTA → Footer

• Thin hero: H1 + subcopy only.
• Body includes a sidebar table of contents.
• Breadcrumbs required on Docs/Academy articles only.

Directory

Hub

Order: thin hero → filters/search → results grid → CTA → Footer

• Use when the product has a browsable directory (e.g. Bandmate venues/bands/musicians).
• Results are real inventory; do not invent listings.
• Empty results: show an empty state with CTA (not a blank grid).
• Results pagination: 12 per page.
• Each result card: photo, name, short meta, CTA. Card photo prefers landscape ~16:9.

Profile / detail

Order: thin hero → profile body → CTA → Footer (no related block)

Press

Order: full hero → featured release → list → CTA → Footer

• Same shape as Blog index: featured item, then the rest of the list.
• Featured release: larger card above the grid (like Blog).
• List pagination: 12 per page.
• Real releases / coverage only. No invented press quotes.

Nuxi checklist

Before merge to main:

1. Page uses only nuxt-x-marketing + nuxt-x-cards components for the sections above (no one-offs). Prefer vertical nuxt-x-cards for thumbs/grids when a card fits.
2. Section order matches the page type baseline (or Tim signed an exception).
3. Header / Footer / XXFooter rules met (including XE logo in XXFooter).
4. Home has no SocialProof block unless Tim unlocks it later.
5. Pricing toggle honesty: yearly/monthly numbers match the UI.
6. Main only. No parked MRs.
7. Every page has an OG image.

Qua checklist

Score by the site’s primary type (SaaS / Agency / Directory / Affiliate). Chrome items always apply.

On live (or preview) for each page that ships for that type:

1. Section order matches this standard for that type (do not FAIL Agency/Affiliate for missing SaaS Pricing/Features).
2. Required hero / plans / form / legal pieces for that type are present and visible (not empty shells).
3. Header CTA and portal/login (if app) work (no localhost).
4. Footer legal links resolve; XXFooter shows X Enterprises logo display-only.
5. No fake social proof, invented customers, or live-chat claims.
6. Note gaps to Henri (human) or Nuxi (ship), not as EXEC twins.
7. OG image present on each checked page.
8. Stack: marketing+cards only; prefer vertical cards; layer ≥1.4.14; light-only.

Related locks (do not twin here)

• Entity / address / DBA: SITE-STANDARD + Thomas.
• Cookie consent banners: Thomas / legal guidance only (not invented in this layout standard).
• Image honesty: no fake testimonials; illustrative product images OK where already locked.
• Image format: AVIF for in-page marketing stills (13 Sep 2026). OG/Twitter stay JPG/PNG.
• Static / CDN HIT / Fluid spend: product tickets, not this doc.

Change control

Tim locks changes. Henri records them. Nuxi and Qua execute. Do not invent page types or section kits outside this list without a Tim lock.

Deferred: Pilot / lead-gen (e.g. Salon Spa Sites /pilot/) and Templates gallery. Not in this standard yet.

Signup: not a marketing page type. Signup lives in the app / portal (nuxt-x-app), not on the marketing site. Marketing CTAs may link to the app signup/login URL.

Exceptions / specials

• grantis.io Pricing: SaaS type; quote-only Pricing (no plans / toggle / Get a quote). Tim lock 6 Sep 2026.
• franchisebusinesses.com Pricing: quote-only (no plans / monthly-yearly toggle). Tim lock 6 Sep 2026. SaaS reporting type otherwise.
• seattle.dev: Agency type; agency IA (chrome-only vs SaaS page baselines). Tim lock 6 Sep 2026.
• franchisebusinesses.com: SaaS (franchise reporting system). Not Directory. Not a broker.
• bandmate.co: SaaS primary even with directory surfaces.
• Apex type assignments: Tim corrects XOracle draft; Henri records the locked map.