Repository navigation
Conversation
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>
Coverage report
Test suite run success145 tests passing in 17 suites. Report generated by 🧪jest coverage report action from 7459124 |
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>
There was a problem hiding this comment.
🟡 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
Co-authored-by: hveraus <4745861+hveraus@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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>
|
/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>
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
- 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>
|
/deploy |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5142.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
🚀 Lighthouse Report
|

/company/clients/<story>(all 24 case studies, e.g./company/clients/fpe)Summary
Rebuilds the client story page so it matches the new
/company/clientsindex (#5099): light and dark themes, a modern layout and some motion.ClientCard.TechUpgrade.Animation
animate-rise-in), so the server-rendered headline shows before hydration and doesn't hold back LCP.prefers-reduced-motion. Framer-motion usesMotionConfig reducedMotion="user", and the CSS animations usemotion-safe:.Data
There is no Tina schema change. The page loader also reads
clients.mdxand matches the Client List entry whosecaseStudyUrlpoints 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
/company/clientsmoves toTHEMED_ROUTE_PREFIXES, so story pages are themed too.CardVideo(inclientCard.tsx) andthemedProse(inclientStoryDialog.tsx) are now exported for reuse.rise-inkeyframe and animation intailwind.config.js.findClientStory,relatedClientStories,storyHeadingsandheadingId, with tests.Checks
pnpm lintandpnpm testpass (145 tests).pnpm devat 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./deployfor a staging slot.Screenshots
"Before" is the live site. "After" is
pnpm devon 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
FPE: article
FPE: mobile
Hearing Australia: story with no video
Related stories (new)
🤖 Generated with Claude Code