Build Services page: Entry Points and Delivery by the Numbers (LS-1598)

[brandonmarshal]

Summary

Adds two more sections to the Services page: "Entry Points" (You don't have to buy everything at once) and "Delivery by the Numbers" (Twelve years of WordPress engineering). Together with Hero, Linked Decisions, Service Clusters, and Service Tiles from earlier PRs, this covers 6 of the 7 sections on the page — only the closing CTA remains, on a separate stacked branch.

Stacked on #54 — this branch is feature/ls-1598-services-page-batch-3, based off feature/ls-1598-services-page-batch-2.

Entry Points

• Added patterns/sections/services-entry-points.php: eyebrow/heading/description on the left, a 2x2 grid of 4 entry-point link cards on the right (Start with discovery, Support review, Migration assessment, AI-readiness discussion), each linking to its corresponding service page.
• Reuses the existing Card - Link Row style and core/icon arrow — no new card style or icon needed.

Delivery by the Numbers

• Added patterns/sections/services-delivery-numbers.php: a centered eyebrow/heading/description intro followed by 3 centered delivery-scale stats (WordPress depth, Platform launches, Approved client praise).
• Reuses the existing Stat Segment style (is-style-stat-segment) — same building block as the Work archive's engagement row — composed centered with the value shown before its label, instead of that pattern's left-aligned label-first order. No new card style needed.
• Stat label/description font sizes bumped for readability (label one token up, description to a 16px token).

Mobile/tablet fixes

• Entry Points: switched its card grid from a fixed columnCount:2 to minimumColumnWidth (matching the technique already used in work-related-routes.php) — WordPress's native auto-fit grid collapses to 1 column on mobile/tablet on its own, no CSS needed. Fixes a 2-column squeeze that was forcing multi-line text wrap at narrow widths.
• Delivery by the Numbers: added a scoped SCSS partial that flips the shared Stat Segment divider from a vertical border-inline-end to a horizontal border-block-end once the row stacks below 782px (WordPress's own columns-stacking breakpoint), with the trailing divider correctly stripped from the last stacked item. Scoped to this section only — the shared stat-segment.json style used elsewhere (Work archive) is untouched.

Test plan

• npm run schema:validate — all JSON files pass
• npm run patterns:escape — clean, no warnings
• npm run security:scan — clean
• php -l on both new pattern files — no syntax errors
• vendor/bin/phpcs --standard=WordPress on both new pattern files and inc/animations.php — clean
• Verified live on a local WP install: both sections render with correct copy/order; Entry Points confirmed 1-column at 380px width with no text wrap; Delivery by the Numbers confirmed horizontal divider on stacked mobile cards and vertical divider on desktop, with no trailing divider after the last item
• Manual visual QA in the Site Editor / cross-browser check

Stacks on #54 (LS-1598).

[linear-code]

LS-1598

[Copilot]

🟡 Changes recommended

Unresolved moderate icon-sizing and responsive-layout issues remain, along with contradictory task statuses.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds the Services page’s Entry Points and Delivery by the Numbers sections, including responsive styling, asset wiring, and documentation updates.

Changes:

• Adds entry-point service cards and delivery metrics.
• Adds responsive stat-divider styling and build/enqueue integration.
• Updates task tracking and changelog entries.

File summaries

File	Summary	Review findings
src/scss/structural/services-delivery-numbers.scss	Responsive divider styling	No findings.
specs/001-services-page/tasks.md	Task status tracking	Nit (3 votes): T020 and T021 should reflect the added stylesheet and wiring.
patterns/sections/services-entry-points.php	Entry-point card grid	Moderate (3 votes): Nest icon dimensions under style; increase the grid minimum width to preserve the intended layout.
patterns/sections/services-delivery-numbers.php	Delivery metrics section	Moderate (2 votes): Nest the eyebrow icon dimensions under style.
package.json	CSS build wiring	No findings.
inc/animations.php	Asset registration and detection	No findings.
functions.php	Editor stylesheet enqueue	No findings.
CHANGELOG.md	Release notes	No findings.
assets/css/services-delivery-numbers.css	Compiled stylesheet	No findings.

Review details

Files not reviewed (1)

• assets/css/services-delivery-numbers.css: Generated file

Suppressed comments (1)

patterns/sections/services-entry-points.php:85

• The arrow has the same invalid root-level dimensions attribute, so its requested 14px width is ignored and it will render at the icon default size. Put dimensions.width under style, as in the existing core/icon usages.

							<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_arrow_icon_slug ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}},"dimensions":{"width":"14px"}} /-->

• Files reviewed: 8/9 changed files
• Comments generated: 4
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.