design: solutions-page - Add stat bento and closing CTA

[brandonmarshal]

Design Summary

The Solutions landing page (/solutions/) needs two more sections after the route tiles: a proof section built around the page's headline stats, and a closing call to action. This adds both as reusable ls-theme patterns, with the small amount of SCSS and wiring the proof section needs. This is the second layer of the Solutions page stack, based on the hero and route tiles layer (#99).

Patterns

• patterns/sections/stat-feature-bento.php: eyebrow, heading and paragraph above a two-column bento. The left column is one large feature stat card (300+ custom block themes, with 150+ bespoke plugins in the supporting line). The right column is two stacked stat cards (10,000+ peak concurrent sessions handled, 220,000+ posts migrated without metadata loss). The columns stretch and the cards grow to fill them, so the feature card is always exactly as tall as the two small cards plus the gap between them, whatever the copy length. The columns stack on mobile. The heading and paragraph sit in a 900px content width so the heading wraps once.
• patterns/cta/split-cta-check-card.php: eyebrow, heading, paragraph and two buttons on the left (60%), and a bordered surface card with a four-item checklist on the right (40%). Each item has a solid filled check badge using the existing icon.background and icon.color tokens, so no new styling was needed. Primary CTA goes to /free-consultation/, secondary to /services/. The gap between the columns is spacing|100.
• All spacing between elements uses block gaps; no spacing margins.

Styling (src/scss/structural/stat-feature-bento.scss, compiled to assets/css/)

• The soft glow on the feature card and its two decorative rings. Kept in SCSS because theme.json has no key for layered background gradients, content:"" pseudo-elements, absolute positioning or aspect-ratio. Each rule carries a // JSON limitation: comment.
• A scoped flex-grow rule that keeps the feature card and the stacked cards the same total height. A core column does not pass its flex layout to its children, so the per-block fill setting does not apply there.
• Colours mix the existing text.brand token, which resolves differently in light and dark mode. Ring sizes and offsets are multiples of the spacing|100 token, since there is no token for decorative geometry.

Wiring

• package.json: the new SCSS file added to build:css, build:css:dev and watch:css.
• inc/animations.php: the bundle loads on the Solutions page via is_page( 'solutions' ), with a render-marker fallback.
• functions.php: the stylesheet added as an editor style.

Content

• Stats, heading, paragraph, checklist and CTA labels come from the Solutions Landing content doc: the proof bar (300+, 10,000+, 220,000+), the "How solutions differ from generic builds" section, the CTA banner, and the FAQ for the checklist items. The 156% organic traffic stat is deliberately left out because the doc says it needs case-study evidence before it can be published.

Linked Stories/Tasks/PRs/Design Files / Related Epics

Relates to Linear LSA-128

• Issue/Epic: LSA-128 (Linear)
• Related pull request: design: solutions-page - Add hero, route tiles and comparison #99 (hero and route tiles layer)
• Related content: Solutions Landing content doc; URL not supplied
• Related design files: not supplied

Milestones & Timeline

No milestone, release date or deadline supplied. Stack sequence: #99 first, followed by #100.

Designs / Mockups

Accessibility Considerations

• Accessibility target is WCAG 2.2 AA. The author reports that the standing axe check found no serious or critical violations in light or dark mode, on desktop and Mobile Chrome.
• The checklist badges and text use the existing mode-aware icon and text tokens. The decorative rings are pointer-events: none and sit behind the card content.
• The new CSS bundle loads only on the Solutions page (or where its marker renders), not sitewide.
• Eyebrows use font size token 100, matching the existing Services eyebrows. The large stat uses font size token 1000.
• Not a breaking change. No templates or existing patterns were modified.

Acceptance Criteria

Review checklist; completion has not been independently verified.

• Design artefacts and specs are attached
• Accessibility standards reviewed/met
• Documentation/changelog updated
• PR uses correct branch prefix (design/)
• Stakeholder/maintainer reviewed
• PR description updated with relevant details
• Changelog entry prepared for PR (if applicable)
• Labels/types match org standards

The existing branch is feat/lsa-128-solutions-page-stats-and-cta; it has not been renamed. The template's design/ criterion remains unverified.

Dependencies

• Position: PR 2 of 2
• Depends on: design: solutions-page - Add hero, route tiles and comparison #99
• Review scope: the stat bento section and the closing CTA, plus the SCSS and wiring for the bento. Base is the first layer's branch, so this diff shows only this layer's changes.
• Proposed gradient colour tokens require approval and are not added in this PR.

Testing/Validation Steps

Existing checked results below are author-reported evidence, not new validations performed during this description update.

• php -l on all 4 changed PHP files
• phpcs (WordPress standard) on all 4 changed PHP files: no errors or warnings
• npm run schema:validate and npm run lint:json
• npm run security:scan
• npm run patterns:escape: neither new pattern flagged (26 existing warnings elsewhere)
• npm run build:css: no diff after rebuilding
• npm run theme:validate: completes with warnings only, all from .github/prompts placeholders unrelated to this change
• Playwright standing suite on http://localhost:8882/solutions/ in light and dark mode (chromium, webkit, Mobile Chrome accessibility): 27 passed in each mode, with this layer's patterns on the page
• CodeRabbit CLI deep review against the first layer's branch: 0 findings (the run ended "completed with warnings: unverified findings", with no detail given)
• Manual QA in light and dark mode and in the Site Editor, by the author
• Screenshots attached

Additional Context

Scope and exclusions

• The large "300+" is a solid text.brand colour for now. The design uses a light-to-dark gradient on that number, which needs two new colour tokens with different light and dark values. They are proposed but not added here, pending approval.
• Not included: SEO metadata, the FAQ section, the page template wiring or any change to the first layer's patterns.
• Original author-reported review size: 7 files, about +276 / -3. Excluding the compiled, minified assets/css/stat-feature-bento.css that is 6 reviewable files and about +275 lines, within the preferred budget. This PR also carries a merge of the first layer's branch so its changelog commit is included; that merge adds only the CHANGELOG.md entry from design: solutions-page - Add hero, route tiles and comparison #99.

Changelog

meta:needs-changelog: user-facing new patterns. The original description states that the entry is added to CHANGELOG.md after the PR is created and links to it; this update does not independently verify that entry.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added a statistics section pattern featuring three highlighted metrics and supporting descriptions.
  • Added a split call-to-action pattern with introductory text, two links, and a checklist card.
• Style
  • Statistics cards now feature a brand-colored glow and decorative rings, with card groups filling available column space.
  • The statistics layout stacks on mobile for easier reading on smaller screens.

---

Definition of Ready (DoR)

• Design goal/scope defined
• Artefact/objective listed
• Accessibility criteria mapped
• Dependencies mapped
• Estimate added (if applicable)

Definition of Done (DoD)

• All design acceptance criteria met
• Documentation/changelog updated
• Design reviewed and approved
• PR uses correct branch prefix (design/)
• Branch deleted after merge
• Documentation/changelog updated if needed
• Linked issue(s) updated with latest status and closed after merge
• The related epic should not be closed, instead updated with a comment to reflect the closed issue

---

[linear-code]

LSA-128

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: lightspeedwp/ls-theme/.coderabbit.yml
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: 5a1683f4-a605-4a1d-9067-8f6da6590ea6

📥 Commits

Reviewing files that changed from the base of the PR and between 82ea3db and 7fcf2d5.

📒 Files selected for processing (8)

• CHANGELOG.md
• assets/css/stat-feature-bento.css
• functions.php
• inc/animations.php
• package.json
• patterns/cta/split-cta-check-card.php
• patterns/sections/stat-feature-bento.php
• src/scss/structural/stat-feature-bento.scss

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The pull request adds two WordPress patterns for the Solutions page: a statistics bento and a split checklist CTA. It also adds styling and build, editor, and front-end stylesheet integration for the statistics bento.

Changes

Solutions page patterns

Layer / File(s)	Summary
Statistics bento pattern patterns/sections/stat-feature-bento.php, CHANGELOG.md	Adds an introductory section, a 300+ feature card, and supporting statistic cards displaying 10,000+ and 220,000+. The changelog records both new patterns and their associated integrations.
Statistics bento styling and loading src/scss/structural/stat-feature-bento.scss, assets/css/stat-feature-bento.css, package.json, functions.php, inc/animations.php	Adds the feature-card glow and decorative rings, and makes groups in bento columns grow. Adds stylesheet compilation targets and registers the stylesheet for the editor and for front-end loading on the Solutions page.
Split checklist CTA patterns/cta/split-cta-check-card.php	Adds a two-column CTA with an eyebrow, heading, paragraph, two links, and a card that renders four translatable checklist items with check icons.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 7fcf2

This change adds two Solutions page patterns with supporting styles. No concrete merge-blocking problem was found. Checking the large stat's appearance on very narrow screens is a reasonable manual QA step.

Architecture Summary

Architecture risk: 🔵 Low · up to 7fcf2

The change affects 7 systems.

Changed systems: functions.php, inc, patterns, assets, CHANGELOG.md, package.json, src

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — functions.php (service) was modified; 1 changed file maps to changed impact.
• observed — inc (service) was modified; 1 changed file maps to changed impact.
• observed — patterns (service) was modified; 2 changed files map to changed impact.
• observed — assets (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in CHANGELOG.md: Added an Unreleased entry documenting the two Solutions patterns, their layout and content, stylesheet compilation and integration, the absence of new design tokens, and PR #100.
• observed — Modified behavior in assets/css/stat-feature-bento.css: Adds clipped, isolated feature-card styling with a radial brand-color highlight and two non-interactive outlined circular pseudo-elements; makes groups inside bento columns grow.
• observed — Modified behavior in functions.php: Adds assets/css/stat-feature-bento.css to the editor stylesheets registered by ls_theme_setup().
• observed — Modified behavior in inc/animations.php: Adds a stat-feature-bento render marker keyed to the ls-stat-feature-card class.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 4 files. (4 skipped: 4 …
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the two primary changes: the Solutions page stat bento and closing CTA. It is concise and directly related to the pull request.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}

[brandonmarshal]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.