Skip to content

Consulting Page for React (A|B Testing) #4777

Open
joshbermanssw wants to merge 50 commits into
mainfrom
jb/react-consulting-v2-page-redesign
Open

Consulting Page for React (A|B Testing) #4777
joshbermanssw wants to merge 50 commits into
mainfrom
jb/react-consulting-v2-page-redesign

Conversation

@joshbermanssw

@joshbermanssw joshbermanssw commented Jun 18, 2026

Copy link
Copy Markdown
Member

A/B rebuild of the React consulting page as a TinaCMS v2 page, built from a new set of v3 blocks. The route only resolves to the new design once consultingv2/react.json exists, so the old page stays live until cutover. Related: #4775.

New v3 blocks

  • Hero — split hero: brow, title, description, button row, media slot (image or built-in animated React composition)
  • Logo Carousel — client logo marquee
  • Feature Steps — numbered (01/02/03) feature/problem columns
  • Process — numbered process timeline
  • Statistics — headline stat figures grid
  • Testimonials — carousel with line-by-line clip text reveal on switch
  • Stack Cards — up to 4 tech-stack cards with arrow links
  • FAQ — accordion (grid-rows height animation)
  • CTA — closing call-to-action
  • Lead Capture — multi-step quiz feeding a JotForm

Shared: new background options on every v3 block — dotted grid overlay and red glow — plus hex codes in the Tina colour picker.

Links

joshbermanssw and others added 27 commits June 18, 2026 10:36
Adds a `background.gridOverlay` toggle to the shared background schema and
renders a subtle dotted grid layer in V2ComponentWrapper, sitting above the
background but beneath all content. Available to every V2 block.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Displays each swatch's hex code beside its name in the Tina colour picker
(solids as a single code, gradients as a start→end range), and adds a new
"SSW Dark Gray" background option backed by a new sswDarkGray Tailwind token.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Introduces three new blocks under components/blocks/v3:
- v3Hero: split layout with brow, title, rich-text description, up to two
  buttons, and an image
- v3LogoCarousel: marquee logo carousel
- v3FeatureSteps: full-width intro with numbered 01/02/03 step columns

Registers their schemas in pageBlocks and the components in the block
renderer's componentMap. Regenerates the Tina lockfile for the new schema.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replaces the old React consulting MDX page with a consultingv2 JSON page
built from the new v3Hero block, so the route now resolves to the v2
renderer. Clears the old page reference in the consulting index and adds a
null-safety guard in page.tsx for the now-absent old page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The hero RHS was a hardcoded image. Add a string-keyed media registry so
a v3Hero instance can opt into a built-in animated composition via the new
`mediaType` schema field, falling back to the Tina image as before.

First composition is the React Consulting atom: static orbital rings with
electrons that follow the real ring paths and a pulsing nucleus, all owned
by ReactConsultingHeroMedia and honoring prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Each step's number was auto-generated; expose it as an editable `brow`
field instead, matching the hero's mono styling. Step descriptions are
rich-text nested in a list, which Tina doesn't coerce from a string, so
the schema default must be an AST object (same as accordionSchema).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Set the hero mediaType to the animated React atom, add a "why React
projects hit a wall" feature-steps block, and drop the per-logo scale
overrides from the logo carousel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A numbered process-step section matching the v3 hero/feature-steps look:
mono brow, h2 heading, and circled step numbers (01, 02…) with a fading
sswRed connector line and a soft radial glow behind each number. Register
it in the schema list and component map so pages can use v3Process.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds an "Our Process" section (Initial Call, Project Scope, Build &
Deliver, Aftercare) to the React consulting page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 18, 2026 07:19

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.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

joshbermanssw and others added 6 commits June 19, 2026 13:08
Adds the shadcn ui/ primitives (Field, Input, Label, Separator, Textarea)
and the SSWAdaptiveField that composes them to implement SSW's adaptive
placeholder rule. Wires in the SSW design-system CSS variables (styles.css)
and the Tailwind tokens/utilities (background, foreground, ring, destructive,
aria-invalid, ring-3) those components rely on, plus the radix-label,
radix-separator and class-variance-authority deps.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replaces the CMS-driven quiz with a fixed three-screen form (your details →
location → how can we help) built on SSWAdaptiveField and submitting to a
single JotForm. The CMS template now only controls the intro copy and
background. The "How can we help you?" message is required before the form
can be submitted.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds an optional caseStudyUrl field to each testimonial. When set, a
"SEE CASE STUDY" link renders below the quote.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sets the logo carousel heading, swaps in the Hearing Australia testimonial
with its case study link and logo, and regenerates the tina lock for the
new testimonial/lead-capture schema fields.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Run prettier/eslint --fix over the new ui primitives and testimonials block.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

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

@github-actions

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/ 86 (⬆️27) 88 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/articles 91 (⬆️14) 93 59 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/about-us 67 (⬆️11) 97 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/clients 93 (⬆️6) 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/contact-us 76 (⬆️6) 89 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting 56 (⬆️4) 89 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/net-upgrade 84 (⬆️16) 92 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/web-applications 83 (⬆️16) 95 59 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/employment 80 (⬆️6) 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/angular-superpowers-tour 72 (⬆️5) 93 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop 97 (⬆️27) 88 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop-essentials 49 (⬆️9) 95 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/netug/sydney 77 (⬆️4) 90 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/training/internship-fullstack 79 (⬆️1) 89 59 61 (⬇️31) 0.00 MB 0.00 MB

joshbermanssw and others added 3 commits June 19, 2026 14:26
The lead capture rebuild dropped the id the in-page CTA buttons scroll to.
Restore id="lead-capture-heading" on the heading and add scroll-mt so it
clears the sticky nav.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

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

@github-actions

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/ 63 (⬆️4) 88 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/articles 86 (⬆️9) 93 59 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/about-us 60 (⬆️4) 97 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/clients 87 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/contact-us 69 (⬇️1) 89 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting 50 (⬇️2) 89 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/net-upgrade 71 (⬆️3) 92 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/web-applications 72 (⬆️5) 95 59 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/employment 75 (⬆️1) 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/angular-superpowers-tour 70 (⬆️3) 93 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop 92 (⬆️22) 88 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop-essentials 59 (⬆️19) 95 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/netug/sydney 72 (⬇️1) 90 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/training/internship-fullstack 74 (⬇️4) 89 59 61 (⬇️31) 0.00 MB 0.00 MB

joshbermanssw and others added 8 commits June 19, 2026 15:06
…ia.png

The Hearing Australia testimonial referenced /images/logos/Capture-2026-06-19-114350.png
which 404s on the Tina asset CDN, failing the 'Images load successfully on
consulting page' Playwright test. Point it at the existing hearing-australia.png.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add an optional `thumbnail` prop so a CMS-supplied poster wins over the
auto-derived YouTube/Vimeo poster. Used by the new v3 video blocks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New v3-styled blocks copying the structure of their v2 counterparts:
- Video Highlights: video + brow/heading/description + icon highlights
- Card Carousel: stacked/carousel video cards with a single category pill

Register both in the block schema list and the renderer component map.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add the Video Highlights and Card Carousel blocks to the React consulting
page content, plus their image assets, and refresh the Tina lock.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Give each card a solid #212121 surface (no border), make the video flush
to the card edges with a fixed aspect-video height so badges/titles align,
pad the text block to 32px, and widen the gap between cards.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Set the section heading/body copy and drop the placeholder buttons.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The highlights Icon field uses IconPickerInput, whose props type no
longer matches Tina 3.8.x's Field type, breaking `next build`. Add the
same @ts-expect-error used by other custom-component fields.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

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

@github-actions

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/ 73 (⬆️14) 88 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/articles 89 (⬆️12) 93 59 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/about-us 66 (⬆️10) 97 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/clients 92 (⬆️5) 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/contact-us 76 (⬆️6) 89 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting 56 (⬆️4) 89 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/net-upgrade 80 (⬆️12) 92 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/web-applications 79 (⬆️12) 95 59 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/employment 78 (⬆️4) 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/angular-superpowers-tour 68 (⬆️1) 93 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop 93 (⬆️23) 88 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop-essentials 47 (⬆️7) 95 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/netug/sydney 79 (⬆️6) 90 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/training/internship-fullstack 79 (⬆️1) 89 59 61 (⬇️31) 0.00 MB 0.00 MB

joshbermanssw and others added 3 commits June 19, 2026 16:49
JotForm's location field expects country and state as two separate
options rather than one combined string. Encode array field values as
submission[qid][index] and map AU state codes to full names.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The testimonial referenced a stray screenshot (Capture-*.png) that was
never uploaded to Tina, returning 404 and failing the Playwright image
check. Point companyLogo at the existing logos/hearing-australia.png.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

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

@github-actions

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/ 62 (⬆️3) 88 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/articles 93 (⬆️16) 93 59 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/about-us 67 (⬆️11) 97 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/clients 93 (⬆️6) 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/company/contact-us 75 (⬆️5) 89 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting 55 (⬆️3) 89 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/net-upgrade 74 (⬆️6) 92 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/consulting/web-applications 78 (⬆️11) 95 59 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/employment 60 (⬇️14) 92 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/angular-superpowers-tour 71 (⬆️4) 93 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop 91 (⬆️21) 88 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/events/ai-workshop-essentials 45 (⬆️5) 95 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/netug/sydney 79 (⬆️6) 90 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4777.azurewebsites.net/training/internship-fullstack 80 (⬆️2) 89 59 61 (⬇️31) 0.00 MB 0.00 MB

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.

✨ React V3 - Upgrade Consulting React page to V3 template 🎨 React Consulting page rework — Redesign for A/B Test (v3 template style)

3 participants