[brandonmarshal]

Design Pull Request

This repository enforces changelog, release, and label automation for all PRs and issues.
See the organisation-wide Automation Governance & Release Strategy for contributor rules.

Linked issues

Relates to Linear LSA-109 (design: team-page - Build Team page). It does not close the issue: the Team page content on DEV, SEO metadata and the manual QA are still open.

Design Overview

The five section patterns for the About "Team" page (/about/team/), built from the standalone prototype About Team Standalone.html and the content doc 03-about-team.md.

• Hero - Split Index Card: breadcrumb, eyebrow, H1, lede and a primary and an outline button on the left; on the right a bordered card that indexes the team in two side-by-side lists (Leadership and Infrastructure on the left, Design and development on the right), with the role under each name. Group titles and names link to anchors further down the page. Rows slide and turn brand-coloured on hover.
• Section - Profile Card Group: an eyebrow and H2 above a three-column grid of plain 4:5 portrait cards (portrait, name, monospace role, bio). The section and each card carry an anchor. The grid is capped to a 76rem measure so the portraits stay card-sized on wide screens.
• Section - Text Stack: an eyebrow, H2 and one or two lede paragraphs in a narrow left-aligned column on a card band.
• Section - Text Stack With Actions: the same stack with an H3 and a primary and an outline button (Careers).
• CTA - Dark Band Buttons: a fixed-dark rounded band with an eyebrow, H2, paragraph and a white primary button with an arrow and an outline button.
• Content: the roster, roles and portrait URLs come from the About "People behind the work" pattern (split-header-profile-card-grid), linked directly to the DEV media. The bios are the design's, checked against the About focus lines. Links: /free-consultation/, /work/, /about/careers/, /about/culture/ and the LightSpeed LinkedIn page already used in the footer.
• Reuse first: the buttons are the shared is-style-outline and is-style-button-primary-on-dark; the band reuses ls-corner-glow and the surface.band-start and on-dark tokens; the eyebrow reuses the lightspeed/dot Icon block. No new tokens and no new block or section styles.

Design Files / References

Standalone HTML prototype About Team Standalone.html and content doc 03-about-team.md. No Figma frames.

Changes

• Patterns: patterns/hero/hero-split-index-card.php, patterns/sections/profile-card-group.php, patterns/sections/text-stack.php, patterns/sections/text-stack-actions.php and patterns/cta/cta-dark-band-buttons.php. Layout, spacing, type and colour are block attributes and existing tokens; the profile card is a plain group with no card shell.
• Styles: src/scss/structural/about-team.scss (compiled to assets/css/about-team.css) owns only what JSON cannot express: the index row hover, the jump-link scroll offset and smooth scroll (scoped to pages with the index hero and off under reduced motion), the profile grid measure, balanced heading wrapping, and the arrow on the dark primary button. Each rule carries a JSON-limitation comment.
• Loading: inc/animations.php registers the about-team bundle (loads on /about/team/ and wherever the patterns render), functions.php adds the editor stylesheet and package.json adds the build entries.
• Outline buttons: the CTA band's outline button keeps only the on-dark colours as inline attributes. Its radius and border stay the theme defaults, so the arrow tile sits inside the edge.

Scope and exclusions

• The Team page content (the eight sections composed on the page, the alternating card bands, the three Profile Card Group instances and their people) lives in page content, not in this repo. It has been built on the local site only; DEV is not touched.
• SEO metadata and the doc's interactive Skill Matrix / 3D sphere ideas are not part of this PR.
• Review size: 10 files plus CHANGELOG.md (11 in total), 590 added and 3 removed lines against develop. assets/css/about-team.css is compiled output (1 added line). That is above the preferred ~400 lines but within 15 files and under 800 lines. It is one outcome, and the SCSS depends on the patterns' classes, so it is not split.

Screenshots / video

None attached. Checked on the local site at 1440px and 390px: the hero is 536px tall (text 343px, index card 395px), the portraits are 392 x 490px at 1440px, there is no horizontal scroll, and all 17 jump anchors resolve.

Accessibility / performance notes

• One H1, then H2 sections and H3 names; the index group titles are paragraphs so the outline is not skipped. Portraits have the alt text "Portrait of {name}".
• Jump links and names are real links with hover and focus states; smooth scroll and the row slide are off under prefers-reduced-motion.
• The standing axe scan reports no serious or critical violations on the page (Chromium and Mobile Chrome).
• Known: the bios are the design and doc copy, which the doc marks "Needs Review". Ash's founding year and WordCamp Europe 2025 mention, Barbara's HR-related role and Zared's WordCamp Cape Town 2024 mention need the owner's sign-off before launch.
• Known: the hero buttons ("Book a consultation", "Explore our culture") are not in the doc or the design; they were added to match the other heroes.

Testing

• npm run lint:json passes (no theme.json or styles/ file changed)
• npm run security:scan passes
• npm run patterns:escape reports nothing for the five new patterns
• npm run build:css leaves no diff
• npm run theme:validate completes with warnings only
• npx stylelint src/scss/structural/about-team.scss passes
• php -l and phpcs (WordPress standard) pass for the five patterns, inc/animations.php and functions.php
• Local, 1440px and 390px: hero index (hover slide, jump links, anchors), profile card grid, text stacks, Careers buttons and CTA band checked; no horizontal scroll
• Playwright standing suite with SINGLE_PAGE_URL on /about/team/ (Chromium plus Mobile Chrome): 15 passed, run twice (the second after the maintainer switched the site to dark mode; the Playwright browser's own colour scheme was not confirmed)
• Dark mode visual check on desktop, tablet and mobile (pending the maintainer; only simulated with the dark.json token values so far)
• CodeRabbit CLI review (not run on this branch)
• Screen reader tested
• Team page on DEV after deploy

Changelog

meta:needs-changelog: adds new patterns and a stylesheet. The entry is in CHANGELOG.md on this branch.

Checklist

• Related issues linked above
• Existing buttons, tokens, corner glow and Icon block reused; no new tokens or styles
• Accessibility standards met (screen reader not yet tested)
• Changelog entry added

---

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added a team page layout with an introductory hero, linked team index, and profile cards featuring portraits, roles, and bios.
  • Added reusable content sections for team messaging, careers links, and a closing call to action with links to consultation and work pages.
• Style
  • Improved heading wrapping and profile-grid sizing, and added smooth scrolling to team links with offsets for the sticky header.
  • Added hover and keyboard-focus feedback to links, rows, and the CTA arrow, while respecting reduced-motion preferences.

[linear-code]

LSA-109

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Source mode: Auto
• Repository: lightspeedwp/ls-theme
• Branch: design/lsa-109-team-page-patterns-1-8
• File: .coderabbit.yml
• Commit: 13527ff
• Layers: Repository YAML
• Review profile: ASSERTIVE
• Plan: Essentials
• Run ID: 455adbe3-f671-4fb3-a663-5c5630948a75

📥 Commits

Reviewing files that changed from the base of the PR and between e47eb4d and 13527ff.

📒 Files selected for processing: 4

• CHANGELOG.md
• functions.php
• inc/animations.php
• package.json

Included review availability: This review used your included allowance. 2 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

📝 Walkthrough

Adds WordPress patterns for the team index, profile cards, a CTA band, and text sections. Adds team-specific styles and configures CSS builds and stylesheet loading.

Changes: About Team Page Patterns

Layer / File(s)	Summary
Team index and profile patterns patterns/hero/hero-split-index-card.php, patterns/sections/profile-card-group.php	Adds a split team hero with links to group and profile anchors. Adds five profile cards with portraits, names, roles, and bios.
Supporting CTA and text patterns patterns/cta/cta-dark-band-buttons.php, patterns/sections/text-stack.php, patterns/sections/text-stack-actions.php	Adds a dark CTA band and two text sections with their respective copy and links.
About-team styles and asset wiring src/scss/structural/about-team.scss, assets/css/about-team.css, package.json, inc/animations.php, functions.php, CHANGELOG.md	Adds layout, anchor-scroll, hover, focus, and reduced-motion styles. Configures stylesheet compilation and loading, and documents the patterns and styling in the changelog.

Priority: ➖ Normal

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant Visitor
  participant Hero as hero-split-index-card
  participant Browser
  participant Profiles as profile-card-group
  participant Styles as about-team stylesheet
  Visitor->>Hero: Activates a profile anchor link
  Hero->>Browser: Provides the fragment URL
  Browser->>Profiles: Resolves the matching card anchor
  Styles-->>Browser: Provides scroll offset and motion rules
  Browser-->>Visitor: Scrolls to the profile card

Loading

Suggested reviewers: zaredrogers

Merge Risk: ⚪ Minimal · up to 13527

No actionable merge-blocking risk is established.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly identifies the main change: adding Team page patterns for the team-page design objective. It is concise and specific.
Docstring Coverage		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 7 files. (2 skipped: 2 …
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

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 7 files. (2 skipped: 2 unsupported.)

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

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

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