Internal guide

Visual components with the code pattern beside them.

Use this private page to see what each ModelSurge section looks like, which file controls it, and what code shape to follow when adding new pages.

Live CSS: assets/landing.css · Inner page content: inc/marketing-pages.php · Homepage: front-page.php

Design tokens

Colors and classes to reuse.

--ink

--panel

--cyan

--blue

--violet

Inner Page Hero

parts/sections/section-hero.php + assets/landing.css

Platform

The AI search visibility tool for measured GEO work

Use this when a page needs a page title, short intro, links, and a visual evidence panel.

Answer visibility brief

Which brands appear when buyers ask AI for recommendations?

PromptsTrackedRepeatable evidence

CitationsMappedSource context

ActionsRankedPlain next steps

Code pattern

<section data="section-hero.php">\n  <span class="eyebrow">Platform</span>\n  <h1>Title with <span class="grad">highlight</span></h1>\n  <p class="lead">Short page intro.</p>\n</section>

Bento Section

parts/sections/section-bento.php + .ms-bento/.ms-cell

Command center

One command center for AI answer engines

Use this for normal content sections, cards, chips, and explanatory copy.

Coverage

Track buyer surfaces

Prompt sets, competitor comparisons, and engine-level trend views.

Prompt setsEngine trends

Clarity

Turn gaps into tasks

Use plain recommendations instead of mystery scores.

Code pattern

[
  'eyebrow' => 'Command center',
  'title' => 'Section heading',
  'intro' => 'Optional intro.',
  'cards' => [
    [ 'Coverage', 'Card body copy.', [ 'Chip one' ] ],
  ],
]

Stat Row

parts/sections/section-stat-row.php + .ms-stat-section

Prompt evidenceStored

Use for methodology or summary cards.

Citation contextMapped

Show what sources shape answers.

Next actionRanked

Turn findings into practical work.

Code pattern

[
  [ 'Prompt evidence', 'Stored', 'Short explanation.' ],
  [ 'Citation context', 'Mapped', 'Short explanation.' ],
  [ 'Next action', 'Ranked', 'Short explanation.' ],
]

CTA Panel

parts/sections/section-cta.php + .ms-cta

Request early access to ModelSurge.

Use this at the end of pages when the next action is registration.

Code pattern

'cta_title' => 'Final CTA heading.',
'cta_text' => 'Final CTA body.',
'cta_label' => 'Register now',

When to edit what

Use the right file for the job.

Homepage

`front-page.php`

Edit the main homepage sections and dashboard mockup here.

Inner pages

`inc/marketing-pages.php`

Edit page copy, sections, FAQ, links, and CTAs here.

Visual style

`assets/landing.css`

Edit colors, spacing, cards, responsive behavior, and component styling here.

Reusable markup

`parts/sections/`

Add a new section partial only when the existing section types are not enough.