Skip to content

💄 Clients - Redesign client story pages in the themed style - #5142

Open
hveraus wants to merge 12 commits into
mainfrom
claude/client-story-detail-redesign-08af11
Open

hveraus wants to merge 12 commits into
mainfrom
claude/client-story-detail-redesign-08af11

Conversation

@hveraus

@hveraus hveraus commented Oct 30, 2026 •

Copy link
Copy Markdown
Member
  • Affected routes: /company/clients/<story> (all 24 case studies, e.g. /company/clients/fpe)

Summary

Rebuilds the client story page so it matches the new /company/clients index (#5099): light and dark themes, a modern layout and some motion.

  • Hero: eyebrow with the service and industries, the heading and subheading, a primary "Talk to our team" button and a secondary "Read the story · N min" anchor. The story's first YouTube video (from the body or the content) plays in the hero, so it isn't repeated in the article. Without a video it falls back to the story image, then to the client logo on white.
  • Article: a sticky "On this page" table of contents built from the h2s, with scroll-spy and a sliding red indicator. Prose uses the theme tokens, links follow the site style (body colour, grey underline, red on hover), and blockquotes become pull-quote cards.
  • More from our clients: three other case studies, ranked by shared service, then shared industry, then featured. They reuse ClientCard.
  • Closing: the same "Book a free initial call" block as the index. It replaces TechUpgrade.

Animation

  • The hero lines rise in one after another. This is a CSS keyframe (animate-rise-in), so the server-rendered headline shows before hydration and doesn't hold back LCP.
  • A red reading-progress bar runs along the top of the window.
  • Headings, related cards and the closing block fade in as they scroll into view.
  • Everything respects prefers-reduced-motion. Framer-motion uses MotionConfig reducedMotion="user", and the CSS animations use motion-safe:.

Data

There is no Tina schema change. The page loader also reads clients.mdx and matches the Client List entry whose caseStudyUrl points at the page. It matches by path, because editors enter both absolute and relative URLs. That entry provides the logo (shown when there is no video or image), industries, service, image and related stories. A case study with no matching entry still renders, just without those extras.

Other changes

  • The clients index hero also makes "Talk to our team" the primary button, with "Explore client stories" as the secondary.
  • /company/clients moves to THEMED_ROUTE_PREFIXES, so story pages are themed too.
  • CardVideo (in clientCard.tsx) and themedProse (in clientStoryDialog.tsx) are now exported for reuse.
  • A new rise-in keyframe and animation in tailwind.config.js.
  • New helpers findClientStory, relatedClientStories, storyHeadings and headingId, with tests.
  • Content: story headings are standardised across 13 case studies (Challenge, Solution, Technologies, Related links, From the client). "We make complicated things simple" becomes Solution, and Whitehaven Coal's h1 headings become h2 so they appear in the contents list.

Checks

  • pnpm lint and pnpm test pass (145 tests).
  • Checked on pnpm dev at 1440×900 and 390×844 for FPE (dark, video in body), Hearing Australia (light, images and quote, logo-only hero) and Sydney Uni (light, video in content). No horizontal scroll on mobile.
  • Build and deploy are left to CI. Comment /deploy for a staging slot.

Screenshots

"Before" is the live site. "After" is pnpm dev on this branch, taken before the review changes in bd16761 (facts strip removed, button order swapped), so those parts are out of date.

FPE: top of page

Before After (light)
Current FPE story page New FPE story hero in light theme
After (dark)
New FPE story hero in dark theme

FPE: article

Before After (light) After (dark)
Current FPE article New FPE article with contents list in light theme New FPE article with contents list in dark theme

FPE: mobile

Before After (dark)
Current FPE story on mobile New FPE story on mobile in dark theme

Hearing Australia: story with no video

Before After (light)
Current Hearing Australia story New Hearing Australia hero with logo in light theme

Related stories (new)

More client stories section in dark theme

  • Include Done Video or screenshots

🤖 Generated with Claude Code

Rebuilds /company/clients/<story> to match the new clients index: light and
dark themes, an animated hero that plays the story's video, an at-a-glance
facts strip, a sticky table of contents, themed article prose, related
stories and the same closing call to action.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Oct 30, 2026 •

Copy link
Copy Markdown
Contributor

Coverage report

St.❔
Category Percentage Covered / Total
🔴 Statements 6.81% 3675/53976
🔴 Branches 42.26% 418/989
🔴 Functions 17.43% 106/608
🔴 Lines 6.81% 3675/53976

Test suite run success

145 tests passing in 17 suites.

Report generated by 🧪jest coverage report action from 7459124

hveraus and others added 2 commits November 4, 2026 19:59
Remove the logo badge and industry tags from the hero. Give the client's
name the most room in the facts strip so it never wraps, and clip the hero
glow so it can't make the page scroll sideways.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Use the same short labels everywhere (Challenge, Solution, Technologies,
Related links, From the client), and demote Whitehaven Coal's h1 headings
to h2 so they appear in the page's contents list.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@hveraus
hveraus marked this pull request as ready for review November 4, 2026 12:14
Copilot AI balanced review requested due to automatic review settings November 4, 2026 12:14

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Related-story scoring can override service-match priority, while percentage-based observer margins can eliminate the intersection area and prevent reliable contents highlighting.

2 open issues
What changed in this PR

Redesigns client story pages to match the themed clients index introduced in #5099, reusing its cards, media, typography, and closing call to action.

Changes:

  • Adds a themed hero, facts strip, sticky contents navigation, reading progress, and related stories.
  • Loads client metadata from the index and adds story-matching, ranking, and heading helpers with tests.
  • Standardizes headings across 13 case studies and extends theme routing to client story pages.
File Description
tailwind.config.js Adds hero animation and facts-strip sizing tokens.
helpers/​clients.ts Adds story matching, related-story ranking, and heading helpers.
content/​company/​case-study/​worley-parsons.mdx Renames the solution heading.
content/​company/​case-study/​whitehaven-coal.mdx Adjusts heading levels for contents navigation.
content/​company/​case-study/​sydney-uni.mdx Standardizes section headings and promotes related links.
content/​company/​case-study/​shepherd-centre.mdx Standardizes challenge and solution headings.
content/​company/​case-study/​pwc.mdx Renames the technologies heading.
content/​company/​case-study/​hutchison-weller.mdx Standardizes solution and technologies headings.
content/​company/​case-study/​hearing-australia.mdx Standardizes section headings.
content/​company/​case-study/​fpe.mdx Standardizes solution and technologies headings.
content/​company/​case-study/​event-cinemas.mdx Renames the solution heading.
content/​company/​case-study/​bupa.mdx Renames the challenge heading.
content/​company/​case-study/​bce.mdx Renames the solution heading.
content/​company/​case-study/​auctions-plus.mdx Renames the solution heading.
content/​company/​case-study/​anonymous-case-study.mdx Standardizes challenge and testimonial headings.
components/​layout/​homeTheme.tsx Enables theming for client story routes.
components/​company/​clientStoryToc.tsx Adds contents navigation and active-section tracking.
components/​company/​clientStoryHero.tsx Adds animated hero content and media fallbacks.
components/​company/​clientStoryDialog.tsx Exports shared themed prose styles.
components/​company/​clientStory.tsx Composes the redesigned story page.
components/​company/​clientCard.tsx Exports the reusable video player.
app/​(about)/​company/​clients/​[filename]/​page.tsx Loads matching client metadata and related stories.
app/​(about)/​company/​clients/​[filename]/​index.tsx Replaces the classic layout with ClientStory.
__tests__/​helpers/​clients.ts Tests story matching, ranking, and heading helpers.
__tests__/​components/​homeThemeRoutes.test.ts Tests theming for client routes.

Review effort: Balanced

Comment thread components/company/clientStoryToc.tsx Resolved
Comment thread helpers/clients.ts Resolved
Co-authored-by: hveraus <4745861+hveraus@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@hveraus hveraus added the no-issue This label is used to bypass the PR-Lint check. Should be used for non-coding changes label Nov 4, 2026
Refactor IntersectionObserver setup to handle window resize events and improve performance.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Copilot stopped work on behalf of hveraus due to an error November 4, 2026 12:37
@hveraus

hveraus commented Nov 4, 2026

Copy link
Copy Markdown
Member Author

/deploy

Cover the ranking fix with a pinned story that shares two industries, and
update the comment to describe the new order.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Nov 4, 2026

Copy link
Copy Markdown
Contributor

Deployed changes to https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net

ℹ️ Staging slots are no longer created automatically - comment /deploy to deploy new commits.

@github-actions

github-actions Bot commented Nov 4, 2026

Copy link
Copy Markdown
Contributor

🚀 Lighthouse Report

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
⭐ https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/ 47 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/articles 99 97 78 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/company/about-us 67 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/company/clients 80 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/company/contact-us 80 92 78 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/consulting 85 97 78 69 0.00 MB 0.00 MB
⭐ https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/consulting/net-upgrade 97 100 74 61 0.00 MB 0.00 MB
⭐ https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/consulting/web-applications 77 100 78 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/employment 65 95 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/events/angular-superpowers-tour 67 97 74 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/events/ai-workshop 69 92 74 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/events/ai-workshop-essentials 67 97 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/netug/sydney 87 93 74 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/products/sophiebot 78 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/training/internship-fullstack 78 91 78 61 0.00 MB 0.00 MB

hveraus and others added 4 commits November 8, 2026 13:45
- Drop the facts strip: the client name, service and video length already
  show in the hero. Industry joins the eyebrow and the read time joins the
  "Read the story" button.
- Story links follow the site style: body colour with a grey underline,
  red on hover.
- Remove the repeated "All client stories" link beside the related stories.
- Rename "More client stories" to "More from our clients".
- Make "Talk to our team" the primary hero button on the story pages and
  the clients index, with the page anchor as the secondary button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The `edited` trigger changes CI for every pull request in the repo, which
is out of scope for the client story redesign. It can go in its own PR.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Key the article's markdown renderers by the video id, so a re-render
  (e.g. a Tina edit) no longer remounts every h2 under the contents list.
- Give repeated headings numbered ids, and headings with no usable text
  an id from their position. The article finds each id through the
  heading's own children array, so it always matches the contents list.
- Recheck the active heading when the page reflows, not only on crossings.
- Show the hero video's caption under it, as the old page did.
- Fetch the client list alongside the case study, and skip it for metadata.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@hveraus

hveraus commented Nov 8, 2026

Copy link
Copy Markdown
Member Author

/deploy

@github-actions

github-actions Bot commented Nov 8, 2026

Copy link
Copy Markdown
Contributor

Deployed changes to https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net

ℹ️ Staging slots are no longer created automatically - comment /deploy to deploy new commits.

@github-actions

github-actions Bot commented Nov 8, 2026

Copy link
Copy Markdown
Contributor

🚀 Lighthouse Report

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
⭐ https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/ 56 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/articles 90 96 78 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/company/about-us 70 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/company/clients 82 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/company/contact-us 81 92 78 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/consulting 99 97 78 69 0.00 MB 0.00 MB
⭐ https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/consulting/net-upgrade 80 100 74 61 0.00 MB 0.00 MB
⭐ https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/consulting/web-applications 90 100 78 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/employment 66 95 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/events/angular-superpowers-tour 70 97 74 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/events/ai-workshop 93 92 74 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/events/ai-workshop-essentials 43 97 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/netug/sydney 75 93 74 61 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/products/sophiebot 96 100 78 69 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net/training/internship-fullstack 95 91 78 61 0.00 MB 0.00 MB

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no-issue This label is used to bypass the PR-Lint check. Should be used for non-coding changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants