← All playbooks · Raw API

pages

# Pages — HopSkipDrive

General playbook for **marketing pages** (not blog/articles, not `/drive/{city}` locations). Use specialized playbooks when the page type is known:

| Page type | Playbook |
|-----------|----------|
| Audience hub (Schools, Families, CareDrivers) | `cms-edit://customer/audience-hubs` |
| Location / city drive page | `cms-edit://customer/location-pages` |
| Blog post or multi-type article | `cms-edit://customer/articles` |
| Team bio / person profile | `cms-edit://customer/people` |
| Program vertical (McKinney-Vento, IEP, government, nonprofits, impact) | `cms-edit://customer/program-vertical-pages` |
| Offering (Safety, RouteWise AI™, Supplemental, overview) | `cms-edit://customer/offering-pages` |
| Legal / policy | `cms-edit://customer/legal-policy-pages` |
| Thank-you / utility / thin campaign LP | `cms-edit://customer/utility-landing-pages` |

**Source of truth for brand, IA, and clone stacks:** `docs/website-guide.md` in the repo (not shipped in the pack). Prefer live CMS stacks over Figma experiments.

## When to use

- New or updated pages under `/`, `/about`, `/schools`, offerings, program verticals, careers, contact/quote
- Cloning structure from an existing page before tailoring copy
- Importing a Google Doc brief into CMS components

Read `cms-edit://customer/routing` and `cms-edit://customer/production-site` before editing.

**Markdown exports:** production `.md` routes may be incomplete (see website-guide C-12). Prefer `cms-edit peek` / Delivery content over inventing from HTML alone.

## Terminology (copy)

| Use | Avoid |
|-----|--------|
| **CareDriver** (one word) | “Care Driver”, bare “driver” for platform drivers |
| **RouteWise AI™** | “Routwise”, “route wise” |
| **RideIQ** | Generic “ride management” when naming the product |
| **HopSkipDrive** | “Hop Skip Drive” in body copy |
| **Supplemental transportation** | Implying full yellow-bus replacement unless intentional |
| **McKinney-Vento** | Missing hyphen |

CareDrivers **nav label** vs hub URL: label is CareDrivers; **canonical hub is `/drive`** — do not create a parallel `/caredrivers` page without product intent.

## Templates

List templates before creating:

```bash
cms-edit list --type template
```

| Template (typical labels) | Use for |
|---------------------------|---------|
| **General page template - b2b newsletter** | Most B2B marketing (schools, offerings, programs) |
| **General page template - no newsletter** | Families, careers, some consumer pages |
| **General page template - caredriver newsletter** | `/drive` hub and CareDriver-oriented pages |
| **Location page template** / Denver variant | **Only** `/drive/{city}` — see `location-pages` |
| **Blog Article Template** / **Article Template** | Articles — see `articles` |
| **Single tag template** | Tag listings (not marketing pages) |
| **404** | Not found |

Inspect template `preContent` / `postContent` with `peek --id <template-id>`. Do **not** duplicate nav/footer/newsletter blocks already on the template.

## Reference pages (clone sources)

Canonical stacks from live CMS (`docs/website-guide.md` §7.2):

| Public path | Category | Notes |
|-------------|----------|-------|
| `/` (`index`) | Home | Video hero, logos, cards, tabs, dynamic links, testimonials |
| `/schools` | Audience hub | Prefer `audience-hubs` playbook |
| `/families` | Audience hub | No-newsletter template |
| `/drive` | CareDrivers hub | CareDriver newsletter template |
| `/safety` | Offering | Safety steps + report CTA |
| `/routewise-ai` | Offering | Product narrative + form |
| `/supplemental-transportation` | Offering | Full B2B stack |
| `/about` | About | Mission, team, awards, careers CTA |
| `/careers` | Careers | Form hero, values, process tabs, FAQs |
| `/government-agencies` | Program vertical | Floating image hero pattern |
| `/nonprofits` | Program vertical | Similar vertical pattern |
| `/mckinney-vento-foster-youth-transportation` | Program | McKinney-Vento |
| `/special-needs-iep-transportation` | Program | Special needs / IEP |
| `/impact` | Impact | HopSkipImpact |
| `/success-stories` | Resources | Dynamic link card grids |
| `/newsroom` | Press hub | Press + dynamic links |
| `/quote`, `/connect-with-us` | Forms | Form-forward utility |
| `/guidelines` | Policy-style marketing | Not full legal counsel |

Use `cms-edit://customer/task-clone-page` when the new page should mirror an existing layout.

## Document section → component mapping

Map briefs to **registered** types (`components-index` / `collections-index`). Prefer types already on the clone source.

| Brief section | Typical CMS type | Notes |
|---------------|------------------|-------|
| Hero (H1 + media + CTA) | **Text and Image**, **Text and Floating Image**, **Hero: background media**, **Wide text and image cards** | One H1 per page |
| Feature / why HSD grids | **Landscape cards**, **Portrait cards**, **Full width cards** | High-usage collections |
| Who we support / segments | **Full width cards portrait**, **Tabs** | |
| Safety steps | **Steps cards** (often ×3) | Keep section-change keep-together patterns when cloning |
| Stats + image | **Cards overlapping image**, **Results cards** | |
| How it works | **Ordered List With Image** | Families-style |
| Testimonials | **Testimonials** collection | |
| FAQs | **FAQs** collection + **FAQ** items | |
| Logos / partners | **Logos** carousel / strip | |
| Contact / lead form | **Form and image**, **Sticky form and image**, **Narrow text and image cards** | HubSpot — reuse form IDs from clone pages |
| App download | **Product CTA** | Families / CareDrivers |
| Awards | **Cards grid** | |
| Resource teasers | **Dynamic link cards**, **Link cards** | |
| Body / flexible copy | **Rich text (without padding)**, **Simple Text** | Prefer registered over ad-hoc HTML |
| HTML-only special layout | **htmlComponent** | Follow `docs/ai-page-authoring/*` + website-guide |

**Icons:** Prefer CMS assets titled `icon …` (navy + brand orange). Search by title (e.g. `icon shield with checkmark`). Do not invent CDN URLs.

**Images:** Only assets already in Contentful (or newly uploaded). Never invent ImageKit/CDN URLs.

## Creating pages

1. Read `cms-edit://customer/tasks-index` → `task-create-page` or `task-create-from-document`
2. For audience hubs, locations, program verticals, offerings, legal/policy, or utility/thank-you pages, switch to the specialized playbook first
3. `cms-edit index sync` if templates or assets may be stale
4. Pick template; set `slug`, `title`, `description`, `featuredImage` as needed
5. Build content stack with `add` + `set` / `rtf`, or `create from-json --dry-run --strict` first
6. After each `add`, set `heading` then `cmsLabel` (never leave `New Generic`)
7. `diff` → `save` (draft only)

**Test / agent pages:** `indexed: false`. Omit `hidden` unless the page must not render when published. Utility thank-you pages should stay non-indexed.

## Page-level fields editors touch often

| Field | When to set |
|-------|-------------|
| `title` / `description` | SEO — specific outcomes; match audience |
| `featuredImage` | Prefer hero visual for OG/social |
| `indexed` | `false` for tests, thank-you, some campaign one-offs |
| `breadcrumbTitle` | Cleaner breadcrumb when title is long |
| `structuredData` | Rare on marketing pages — templates / location schemas handle most cases |

## CTAs and forms

- One **primary orange** CTA per section
- Common destinations: `/quote`, `/connect-with-us`, CareDriver apply flows on `/drive`, app download
- Reuse HubSpot portal/form configuration from clone pages — do not invent form IDs

## After save — preview

```bash
cms-edit preview urls <slug>
```

Open **staging / draft preview**. Production URL shows published content only.

## Out of scope

- **Articles** (`/blog/…`, webinars, reports, etc.) → `articles`
- **City location entries** (`/drive/{city}`) → `location-pages` (Contentful type `location`, not `page`)
- **Person bios** → `people`
- Inventing legal/compliance copy without counsel
- Implementing Figma-only home “options” that are not live CMS
- Recoloring site tokens (C-01/C-02 deferred post go-live)

## Publish handoff

`save` creates drafts only — publish in Contentful UI when approved. See `cms-edit://customer/task-publish-handoff`.