✨ Homepage - Apply UX and content refinements - #4970
Closed
designbyalex wants to merge 5 commits into
Closed
Conversation
Contributor
Coverage report
Test suite run success27 tests passing in 3 suites. Report generated by 🧪jest coverage report action from 8cc578f |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refines the homepage UX/copy and restores/improves footer branding and deployment metadata, aligning the UI with the acceptance criteria in #4923 and #4849 (plus restoring the continuous-deployment line that was lost during the footer rebuild).
Changes:
- Updates homepage copy and people carousel data/schema (adds optional GitHub links, adjusts CTA label).
- Tweaks multiple homepage UI components (service card aspect ratio/icon sizing, people-card interaction, office accordion hover/border behavior, typography tracking).
- Enhances the footer (heading spacing fix, mobile spacing, powered-by logos, and reintroduces deployment/commit info).
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tina/collections/footer.tsx | Adds optional logo image field to powered-by items in Tina footer schema. |
| content/pagesv2/home.json | Updates homepage copy, stats subtext, people GitHub URLs, and CTA label. |
| content/footer/index.json | Adds Tina/Azure logo paths to poweredBy items. |
| components/layout/footer/footer.tsx | Footer spacing refinements + powered-by logo rendering + adds deployment info row. |
| components/layout/footer/deployment-info.tsx | New continuous deployment + last-updated/commit footer line using Day.js + env vars. |
| components/blocks/v3/videoFeature/videoFeature.tsx | Adjusts tracking to match typography requirements. |
| components/blocks/v3/peopleCarousel/peopleCarousel.tsx | Removes misleading SSW squares icon, adds GitHub icon, adjusts card click-target behavior. |
| components/blocks/v3/peopleCarousel/peopleCarousel.schema.tsx | Adds optional GitHub URL field and clarifies SSW People URL description. |
| components/blocks/v3/imageCards/imageCards.tsx | Adjusts service card aspect ratio and icon size. |
| components/blocks/v3/globe/globe.tsx | Adds hover tint behavior and removes final border in office accordion. |
| .env.example | Documents new NEXT_PUBLIC_GITHUB_REPOSITORY and clarifies footer deployment env vars. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+26
to
+32
| This website is under{" "} | ||
| <CustomLink | ||
| href="https://www.ssw.com.au/rules/rules-to-better-websites-deployment" | ||
| className="transition-colors hover:text-white" | ||
| > | ||
| continuous deployment | ||
| </CustomLink> |
Comment on lines
+20
to
+22
| const d = buildDate ? dayjs.utc(buildDate) : null; | ||
| const relative = d ? d.fromNow() : null; | ||
| const exact = d ? d.format("D MMM YYYY [at] HH:mm UTC") : undefined; |
Comment on lines
+26
to
+28
| # displayed in the footer - the continuous deployment line. | ||
| # Set in CI as Docker build args (see .github/workflows/template-build.yml); | ||
| # set them locally if you need that line to render in dev. |
Homepage copy, sizing, interaction and footer refinements from #4923, plus the footer spacing and branding items from #4849, with the footer laid out to match the redesign. Content (home.json): - "Three decades of enterprise solutions" -> "30+ years of enterprise solutions" - "The SSW difference" -> "The SSW Advantage" - Third stat's gray line no longer restates the figure above it ("Trusted since 1995" -> "Across 15 countries") - "More SSW People" -> "See All SSW People" People cards: - Removed the SSW squares icon. It read as the Microsoft mark and pointed at the same URL as the card itself, so it was redundant as well as misleading - Added an optional GitHub URL field; the icon only renders when set - The whole card is now one target via an ::after overlay on the profile link, with the social icons lifted to z-10 so they stay independently clickable. The existing hover:border-sswRed is now honest - previously the border reddened when hovering icons that were not part of the link Office accordion: - Hover tints the label and chevron red. The background keeps meaning "open" so hover and open states never read alike - last:border-b-0 stops the final row doubling against the container border Footer - layout now follows the redesign (Figma 11329:2219): - Continuous-deployment line restored and moved into a full-bleed band at the foot of the footer, with the TinaCMS/Azure credits opposite it. The line was dropped unintentionally in #4827; the CI build args were still being passed the whole time (template-build.yml), only the consuming component was missing - Band uses bg-black/30, which over the footer's #212121 lands on #171717 - the same 30% darkening the design applies - Credits row splits: copyright left, legal links right - Column headings 20.25px -> 15.75px, links 18px -> 13.5px and white - Top padding 108px -> 76.5px, and the credits row now sits with equal space above and below it - Restored the TinaCMS llama and Azure logos via a new optional image field on poweredBy, so they stay editable in Tina (#4849 AC4-5) - mt-0 on the column headings overrides the global `h3 { mt-2.5 }` in styles.css, which was unbalancing the spacing (#4923 AC12) - Mobile bottom bar gets mt-10; the divider above it is desktop-only, so it was crowding the link accordion (#4849 AC1-2) - The SSW logo now links home, like the masthead logo - The band's row wraps intrinsically rather than at a viewport breakpoint: poweredBy is CMS-editable, so how much room the credits need isn't knowable at author time deployment-info.tsx extends dayjs relativeTime itself rather than relying on app/layout.tsx. The layout's extend was stripped as unused in #4925 once #4827 removed the only consumer, which would have made a verbatim restore throw on .fromNow() - the same failure as #926. Not actioned: - AC9 (Australian vs US spelling) - needs Adam's call per the issue - AC15 (footer social icon size) - skipped by request; socialIcons.tsx is shared with the live-stream widgets - #4849 AC3 (divider consistency) - addressed with mobile padding rather than showing the rule on mobile Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The panel was aspect-[4/3], which the issue's screenshot flags as oversized. 3/2 takes it from 288px to 256px at lg (~11%) while keeping the card image-led rather than banner-like. The icon drops size-40 -> size-28. With the 18px root font-size (styles.css) that is 180px -> 126px, and it is a fix as much as a fit constraint: at 4/3 the old 180px icon had only ~138px of room at a 320px viewport, so it was already being clipped on small phones. Measured clearance now: 62px at lg, 31px at 390px, 18px at 320px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
designbyalex
force-pushed
the
feature/4923-homepage-refinements
branch
from
August 6, 2026 05:53
1a105b9 to
fed050f
Compare
Resolved conflict in tina/tina-lock.json by regenerating it from the merged schema rather than hand-merging — the file is 30MB of minified single-line JSON, so the whole file is one conflict hunk and a textual merge is not possible. Verified the regenerated lock contains both sides' schema changes: footer.bottomBar.poweredBy has the new `logo` field (this branch) and the consulting collection reflects main's redesign (#4939).
The figures were computed assuming a 16px root, but this site's root font-size is 18px, so max-w-9xl (86rem) is 1548px rather than 1376px. That made the original claim wrong: the sentence and credits do fit on one line each once there is room, they just cannot at the md breakpoint the code used to flip at. Comment-only — no rendered output changes.
Actions the PR review feedback. - DeploymentInfo is now a client component. fromNow() was evaluated during the static build that also stamps NEXT_PUBLIC_GITHUB_RUN_DATE, baking a fixed relative time into every page until the next deploy. The absolute date renders server-side inside a <time dateTime>, and is swapped for the relative one on hydration. - Guard the parsed build date with isValid(). dayjs returns a truthy object for unparseable input and toISOString() throws RangeError on one, which would fail the entire static build from the root layout. - CI stamped the date with lowercase hh, which is 12-hour with no designator in .NET format strings, recording any post-midday build up to 12 hours off while still labelled Z. - Normalise homepage copy to US English (#4923 AC9): modelling and Recognised, plus the Tina schema default so new blocks match. - Add a 3/2 aspectRatio token rather than an arbitrary Tailwind value, matching the existing 4/3 key. - Extract PoweredByCredits out of Footer. - Correct two comments that quoted measurements contradicted by the code they describe. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Member
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Homepage UX, copy, sizing and interaction refinements, plus the footer spacing and branding items from the related footer issue.
Affected routes:
/(plus the site-wide footer)Fixed ✨ Homepage - Apply UX and content refinements #4923
Refs ✨ Footer - Improve spacing and add branding logos #4849
Refsrather thanFixedon #4849 because its AC3 is only partly met (see Not actioned below) — it should be closed by hand once someone confirms the mobile treatment is acceptable.Changes
Copy —
content/pagesv2/home.jsonThe stats change removes a duplication — "30+ / Years experience" and "Trusted since 1995" were saying the same thing. "15 countries" is already claimed elsewhere on the page.
The last two rows are AC9. The page was genuinely mixed (
revolutionizeUS,RecognisedandmodellingAU), so this normalises to US rather than introducing a direction. Client quotes and proper nouns (The Shepherd Centre, Hutchison Weller) are deliberately untouched, as are CMS admin labels — those are editor-facing, not homepage text. The Tina schema default invideoFeature.schema.tsxwas updated too, so new blocks don't reintroduce the AU form.Service cards — red panel
aspect-[4/3]→aspect-3/2, iconsize-40→size-28. Panel height drops ~11% (288px → 256px atlg), keeping the card image-led rather than banner-like.aspect-3/2is a new key in theaspectRatioextend beside the existing4/3, rather than an arbitrary value —tailwindcss/no-arbitrary-valueis set toerror, and an arbitrary value only slipped past it here because it sat insidecn(), which the plugin doesn't inspect.The smaller icon is a fix as well as a fit constraint. With the 18px root font-size (
styles.css:13)size-40is 180px, and the original4/3+size-40left only ~138px of room at a 320px viewport — so the icon was already being clipped on small phones. Measured clearance now: 62px atlg, 31px at 390px, 18px at 320px.People cards
::afteroverlay on the profile link, with the social icons atz-10so they stay independently clickable. This makes the existinghover:border-sswRedhonest — previously the border reddened when hovering icons that weren't part of the link.Office accordion — hover tints the label and chevron red; the background keeps meaning "open" so the two states never read alike.
last:border-b-0stops the final row doubling against the container's own border.Footer — now laid out to match the redesign
template-build.yml:134-138), only the consuming component was missing. Its absence also put the site in breach of rules-to-better-websites-deployment.bg-black/30, which over the footer's#212121lands on exactly#171717— the same 30% darkening the design applies, with no new token and no arbitrary value.text-sm/text-xsland within a rounding error of the design's 16/14px.)pt-17, an existing token in the spacing extend), and the credits row now sits with equal 27px above and below.poweredBy, keeping them Tina-editable rather than hardcoded.mt-0on the column headings overrides the globalh3 { mt-2.5 }instyles.css, which was silently adding 10px above every heading.mt-10— the divider above it is desktop-only, so it was crowding the link accordion.PoweredByCreditscomponent rather than ~45 lines inlined four levels deep inFooter.Deliberately unchanged in the footer, despite the Figma showing otherwise:
socialIcons.tsxis shared with the live-stream widgets, so resizing it would change pages outside this work.#090909and a 1280px container; ours stay#212121andmax-w-9xl, since both affect every page on the site.App Development,12-Week Programs,Awards,Testimonials. Ours are Tina-managed and deliberate; matching the design would deleteContact Ussitewide and invent URLs. Flagging for a content owner rather than changing.<details>accordion is preserved and the new type scale is gated tomd+.Worth a reviewer's attention
The deployment time is computed on the client, deliberately. Every page is
force-static, so afromNow()evaluated during render runs once inside the same Docker build that stampsNEXT_PUBLIC_GITHUB_RUN_DATE— baking a fixed relative time into every page until the next deploy. The absolute date renders server-side inside a<time dateTime>and is swapped for the relative one on hydration, so the first paint is correct rather than merely plausible. The<time>element also makes the exact instant machine-readable and reachable without a mouse, which the oldtitle-on-a-spanwas not.The parsed date is guarded with
isValid(), not a null check. dayjs returns a truthy object for unparseable input, andtoISOString()throwsRangeErroron one. Since this component sits in the root layout, an unguarded throw would fail the whole static build rather than a single page.deployment-info.tsxextends the dayjsrelativeTimeplugin itself instead of relying onapp/layout.tsx. The layout'sdayjs.extend(relativeTime)was removed as unused in #4925 — unused precisely because #4827 had deleted its only consumer. A verbatim restore would have thrown on.fromNow(), which is the same failure as #926. Owning the dependency locally keeps the two from being decoupled a third time.A CI fix rides along.
template-build.ymlstamped the build date withyyyy-MM-ddThh:mm:ssZ. In .NET format strings lowercasehhis 12-hour with no AM/PM designator, so any build after midday UTC was recorded up to 12 hours off while still labelledZ. It's pre-existing, but this PR is what puts the value in front of users, so it's fixed here (hh→HH).Also note the old component printed a literal
"XXX"whenNEXT_PUBLIC_GITHUB_RUN_DATEwas absent; this version omits the clause instead..env.examplegained the previously-undocumentedNEXT_PUBLIC_GITHUB_REPOSITORY.Not actioned
socialIcons.tsxis shared with the live-stream widgets, so resizing it would have changed pages outside this issue's scope.Refs #4849rather thanFixed.groupsits on the card wrapper. The::afteroverlay made the dominant target honest; this remainder is cosmetic.socialIcons.tsxowns a site-wide platform vocabulary and the people carousel keeps a second local list. Worth consolidating, but it touches the same shared component that put AC15 out of scope.Verification
pnpm test— 27 passing,tsc --noEmitclean across application code, eslint cleanInvalid-date guard exercised directly against
not-a-real-date,"",2026-13-45T99:99:99Zandundefined— the clause is omitted in each case and nothing throwsVerified against a running dev server at 1440px and 390px, by computed style rather than by eye:
5 Aug 2026 at 14:30 UTCserver-side and2 days agoafter hydration, with no hydration warnings1.5000border-bottom: 0px, other six3px::afterat inset 0, icon rowz-index: 10rgb(204,65,65)on hoverh3margin-top: 0px(was 10px)0.675px(was 1.35px)Include Done Video or screenshots
🤖 Generated with Claude Code