design: solutions-page - Add hero, route tiles and comparison

[brandonmarshal]

Design Summary

The Solutions landing page (/solutions/) needs its first three sections built as reusable ls-theme patterns: a hero, a "solution selector" grid of seven route cards, and a short solutions-versus-services comparison. This adds those patterns, a reusable single route card, and the small amount of SCSS and wiring they need.

Patterns

• patterns/hero/solutions-hero.php: same skeleton as the Services hero (breadcrumb, eyebrow, H1, intro, two CTAs) plus a tilted "solutions / palette" specimen card. The background reuses the shared corner-glow class. Primary CTA goes to /free-consultation/, secondary to /services/.
• patterns/sections/solutions-route-tiles.php: eyebrow, heading and intro above a grid of seven route tiles (WordPress, WooCommerce, Publishing, Tour Operators, AI, Design Systems, AI Chatbots). Each tile is one stretched link to its /solutions/{slug}/ page.
• patterns/cards/card-route-tile.php: the same tile as a single editable card pattern. Both patterns use the existing Card - Service Tile style, so no new is-style entry was added. The two keep the same markup, which is noted in each description.
• patterns/sections/split-intro-pair-cards.php: eyebrow and heading beside a paragraph and two bordered cards comparing services and solutions.
• All spacing between elements uses block gaps; no spacing margins. The only margin left is the hero section's margin-top: 0 reset, which matches the Services hero.

Styling (src/scss/structural/, compiled to assets/css/)

• solutions-hero.scss: the stacked, tilted specimen card and its swatch grid. Kept in SCSS because theme.json has no key for position, transform or an aspect-ratio grid. Each rule carries a // JSON limitation: comment.
• solutions-route-tiles.scss: scoped to .ls-route-tile, so the Services tiles and Work archive icon wells are unchanged. It sets a larger icon well and icon from spacing tokens and insets the index number to match the card padding.
• Every value is an existing spacing, colour, radius or font-size token. No new tokens were added.

Wiring

• package.json: both new SCSS files added to build:css, build:css:dev and watch:css.
• inc/animations.php: both bundles load on the Solutions page via is_page( 'solutions' ), with render-marker fallbacks; the existing service tiles bundle now loads on services and solutions.
• functions.php: both stylesheets added as editor styles.

Content

• Copy, CTA labels and link targets come from the Solutions Landing content doc. The AI Chatbots card copy is derived from the doc's AI description.
• The seven card links were checked read-only on the DEV site and all resolve at the same /solutions/{slug}/ paths. The doc's "Publishers" is the real /solutions/publishing/ page.
• Education, WordPress Redesign and WooCommerce Redesign appear in the doc but have no pages yet, so they are not in the grid.

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 stat bento and closing CTA #100 (stat bento section and closing CTA)
• 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.
• Route tiles are single stretched links with a visible focus outline, as in the existing service tiles.
• The new CSS bundles load only on the Solutions page (or where their markers render), not sitewide.
• Eyebrows use font size token 100, matching the existing Services eyebrows.
• 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-hero-and-routes; it has not been renamed. The template's design/ criterion remains unverified.

Dependencies

• Position: PR 1 of 2
• Depends on: none (bottom layer, based on develop)
• Followed by: design: solutions-page - Add stat bento and closing CTA #100 (stat bento section and closing CTA)
• Review scope: hero, route tiles, route card and comparison section, plus the SCSS and wiring they need

Testing/Validation Steps

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

• php -l on all 6 changed PHP files
• phpcs (WordPress standard) on all 6 changed PHP files: no errors or warnings
• npm run schema:validate and npm run lint:json
• npm run security:scan
• npm run patterns:escape: none of the changed files 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 (the local page also contained the next layer's two patterns during these runs)
• CodeRabbit CLI deep review of this branch against develop: 0 findings
• Manual QA in light and dark mode and in the Site Editor, by the author
• Screenshots attached

Additional Context

Scope and exclusions

• This PR does not include the stat bento section, the closing CTA, SEO metadata or the template wiring for the page. The first two are the next layer of this stack.
• Not changed: the Services page tiles, the Work archive icon wells and any shared card style.
• Original author-reported review size: 11 files, about +574 / -4. Excluding the two compiled, minified files in assets/css/ that is 9 reviewable files and about +572 lines, over the preferred ~400 lines but well inside the 800-line limit. The patterns are mostly block markup.

Notes for reviewers

• Three of the four hero swatch colours are not in the palette, so the nearest presets are used (the orange is approximated by amber).
• The Tour Operators card uses the destination icon because the icon set has no map icon.
• A subtler card border would need a new border.card-subtle token. It is proposed but not added here, so the card border is unchanged.
• WordPress caches the theme's pattern file list. Clear it (a theme_files transient) if new patterns do not show after switching branches locally.

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 Solutions landing page with a hero section, seven linked solution tiles, and a comparison section for Services and Solutions.
  • Added a reusable route-tile card featuring an icon, description, and link.
• Style
  • Added tailored styling for the hero’s layered color-swatch card and the solution tiles.

---

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: e33a527e-9549-42ff-a4fb-9f31083d0843

📥 Commits

Reviewing files that changed from the base of the PR and between 04ebe57 and 82ea3db.

📒 Files selected for processing (12)

• CHANGELOG.md
• assets/css/solutions-hero.css
• assets/css/solutions-route-tiles.css
• functions.php
• inc/animations.php
• package.json
• patterns/cards/card-route-tile.php
• patterns/hero/solutions-hero.php
• patterns/sections/solutions-route-tiles.php
• patterns/sections/split-intro-pair-cards.php
• src/scss/structural/solutions-hero.scss
• src/scss/structural/solutions-route-tiles.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

Adds WordPress patterns for a Solutions hero, seven route tiles, a reusable route-tile card, and a Services/Solutions comparison. Adds scoped styles and registers their build, editor, and page-based loading; service-tile styles also load on the Solutions page.

Changes

Solutions landing page

Layer / File(s)	Summary
Solutions page patterns patterns/hero/solutions-hero.php, patterns/sections/solutions-route-tiles.php, patterns/cards/card-route-tile.php, patterns/sections/split-intro-pair-cards.php	Adds a hero with a specimen card, a section with seven linked route tiles, a reusable route-tile card pattern, and a Services/Solutions comparison section.
Solutions pattern styling src/scss/structural/solutions-hero.scss, src/scss/structural/solutions-route-tiles.scss, assets/css/solutions-hero.css, assets/css/solutions-route-tiles.css	Adds specimen-card layout and swatch colors, plus route-tile icon sizing and index positioning.
Stylesheet build and loading package.json, functions.php, inc/animations.php, CHANGELOG.md	Adds the stylesheets to build and watch scripts, editor styles, and page-scoped style loading. Service-tile styles also load on the Solutions page.

Priority: ⬇️ Low

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

Change: Feature

Suggested reviewers: zaredrogers

Merge Risk: ⚪ Minimal · up to 82ea3

No actionable merge-blocking issue is established for the Solutions patterns and styles; the change is mergeable after normal checks.

Architecture Summary

Architecture risk: 🔵 Low · up to 82ea3

The change affects 7 systems.

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

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; 4 changed files map to changed impact.
• observed — assets (service) was modified; 2 changed files map to changed impact.

Before / after behavior

• observed — Modified behavior in CHANGELOG.md: Added the LSA-128 Unreleased entry covering the Solutions hero, seven linked route tiles, route-tile card pattern, comparison section, scoped stylesheets, and their relevant registration changes.
• observed — Modified behavior in CHANGELOG.md: Added a Changed entry noting that service-tile styles now load on the Solutions page, the two new stylesheets are registered in build scripts, the page-scoped loader, and editor styles, and no design tokens were added; included the PR #99 reference and separator.
• observed — Modified behavior in assets/css/solutions-hero.css: Adds specimen-card layout and panel styling, a four-column swatch grid, and four color-specific swatch backgrounds.
• observed — Modified behavior in assets/css/solutions-route-tiles.css: Adds sizing rules for the route tile’s branded icon well and SVG, plus top and right offsets for the service-tile index.

🚥 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 6 files. (6 skipped: 6 …
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 Solutions page work and names the primary additions: the hero, route tiles, and comparison section.

✨ 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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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