feat(hero): interactive workbench demo (exclusiveDemo)

[wailingwombat]

Summary

• Adds Hero variation exclusiveDemo: five-step guided workbench walkthrough in a same-origin iframe (/workbench-demo/) with a parent frame (step copy, prev/next dots, refresh on last step).
• HeroExclusiveDemoMedia: mounts iframe only at ≥1080px; below that, static Prismic full_bleed_image / image_mobile.
• Tour copy in workbenchDemoTour.json → npm run sync:workbench-tour → public/workbench-demo/tour-config.js (runs on build / dev).
• next.config.ts: production keeps X-Frame-Options: SAMEORIGIN + frame-ancestors 'self' on /workbench-demo/*; DENY elsewhere.
• Book demo: iframe posts workbench-demo-book-demo; parent WorkbenchDemoFrame calls activateHeroBookDemoCta() on [data-hero-book-demo-cta] (hero Prismic CTA). Ensure copied page CTA targets a real destination (e.g. Contact #book-demo).
• Local-only preview: src/app/[locale]/page.tsx forces exclusiveDemo on / when NODE_ENV !== 'production'. Dev/staging/prod / will not show the demo until Prismic uses exclusiveDemo on that document (use a copied homepage for remote preview).

Pre-flight review

Check	Result
npm run lint	Pass
npm run build	Pass
tour-config.js vs JSON	In sync
prismicio-types.d.ts	Includes HeroSliceExclusiveDemo
Frame headers	Confirmed in next.config.ts

Risks for reviewers

1. CDN + in-browser compile: public/workbench-demo/index.html loads React 18 + Babel standalone from unpkg.com and compiles JSX at runtime. Acceptable for a marketing demo, or pre-bundle later (availability + perf).
2. Real / on deployed envs: No demo without Prismic exclusiveDemo on live home (or copied page UID).
3. Static iframe assets: No HMR under public/workbench-demo/ — hard refresh after edits.
4. Book-demo no-op: If hero CTA is empty or not #book-demo/valid href, modal click may not navigate usefully.

Test plan

• After deploy: open copied page (e.g. /en-us/home-demo) with Hero exclusiveDemo, desktop ≥1080px.
• Walk steps 1→5: saved prompt → send → workbench → job → PR; pointer on workbench step; step 1 only “Investigate Flow 500s” card clickable.
• Frame prev/dots/next stay in sync; refresh on step 5 resets tour.
• PR card opens Book demo modal; confirm triggers hero CTA (scroll to #book-demo if configured).
• Viewport <1080px: static hero image only, no iframe.
• npm run lint && npm run build on branch.
• Slice Machine: Hero slice pushed; homepage copy UID set to exclusiveDemo.

Dev / staging deploy

1. Merge not required for first preview: use image ghcr.io/pluralsh/marketing:marketing-interactive-demo (built on branch push).
2. Point Plural CD dev/staging at that tag; confirm branch image deploy is supported.

Prismic (before sign-off)

1. Push Hero slice (exclusiveDemo) from Slice Machine.
2. Copy homepage → UID e.g. home-demo; set Hero to exclusiveDemo.
3. Preview copied URL on dev/staging.

Plural Flow: marketing
Plural Preview: marketing

[greptile-apps]

Greptile Summary

Introduces the exclusiveDemo Hero variation: a five-step guided workbench walkthrough in a same-origin iframe (/workbench-demo/) with a parent navigation frame (step copy, prev/next/dot controls), responsive gating at ≥1080 px, and a "Book demo" postMessage bridge to the existing Prismic hero CTA.

• The iframe–parent communication uses correct bidirectional origin validation and the nav controls are properly disabled until the iframe signals onLoad, preventing step-counter desyncs during the load phase.
• CSP/X-Frame-Options headers are split correctly between DENY (all routes) and SAMEORIGIN (/workbench-demo/*), and the tour-config sync script is wired into both build and dev:next.
• The ContactDefault slice now carries a global id="book-demo" and tabIndex={-1} on every instance across the site; a setTimeout in cc-job.jsx that fires setPhase('done') is not cancelled on unmount.

Confidence Score: 5/5

Safe to merge — the feature is well-scoped, the iframe communication is correctly origin-validated, and the CSP headers are properly split.

The core iframe–parent postMessage bridge is correctly implemented with origin checks on both sides, nav controls are disabled until the iframe is ready, and production React builds with SRI hashes are used. The two findings are non-blocking: a leaked setTimeout in an iframe animation component and a global id on ContactDefault that could cause duplicate-ID issues only if two Contact slices appear on the same page — an edge case unlikely in a curated marketing site.

src/slices/main/Contact/ContactDefault.tsx warrants a second look if the site ever gains pages with multiple Contact slices, since the hardcoded id is now applied globally.

Important Files Changed

Filename	Overview
src/components/workbench-demo/WorkbenchDemoFrame.tsx	Parent frame managing iframe lifecycle, step sync via postMessage, and navigation controls. Nav buttons are properly gated with disabled={!loaded}. Origin validation is correct on both sides of the postMessage boundary.
next.config.ts	CSP/X-Frame-Options headers correctly split between DENY (everywhere) and SAMEORIGIN (workbench-demo path). isDev is a module-level const evaluated once at server start — correct behavior for Next.js config.
public/workbench-demo/index.html	Runtime JSX compilation via Babel standalone; production React builds and SRI integrity hashes are all present. Uses unpkg.com CDN for React 18 + Babel — acceptable trade-off for a marketing demo as noted in the PR description.
src/slices/main/Contact/ContactDefault.tsx	Adds id="book-demo", tabIndex={-1}, and scroll-mt-24 outline-none to the container — these apply globally to every ContactDefault instance on the site, not just the demo homepage.
public/workbench-demo/cc-job.jsx	Drives the running→done animation via setInterval + a trailing setTimeout; the setTimeout is not cancelled on unmount, leaving a 900 ms window where a stale setPhase('done') can fire on an unmounted component.
src/slices/main/Hero/HeroExclusiveDemoMedia.tsx	Correctly uses a media-query listener to gate the iframe at ≥1080 px, starts showDemo=false for SSR safety, and cleans up the listener on unmount.
src/app/[locale]/page.tsx	Dev-only withHeroDemoPreview forces exclusiveDemo variation on the hero slice; guarded by process.env.NODE_ENV !== 'production' so it has no effect in production.
public/workbench-demo/app.jsx	Top-level App component in the iframe; correctly validates origin on incoming postMessage and wraps outgoing postMessage in try/catch. Auto-advances step 3→4 when the job animation completes, syncing the parent frame without user interaction — this appears intentional.
src/components/workbench-demo/bookDemoTarget.ts	Thin utility; programmatically clicks the hero CTA anchor so the iframe's "Book demo" action reuses whatever href/target is configured in Prismic.
scripts/sync-workbench-tour-config.mjs	Generates public/workbench-demo/tour-config.js from JSON, validates total === steps.length, and round-trip checks the output. Hooked into build and dev:next.

_{Reviews (2): Last reviewed commit: "fix(workbench-demo): address PR review (..." | Re-trigger Greptile}

[wailingwombat]

@greptile

[plural-copilot]

✅ Deploy preview for marketing-pr-185 is ready!

Name	Details
⚡ Service	marketing-pr-185 (5 / 5 ready)
☁️ Cluster	plural (eks)
Commit sha	d5cd66e
Plural URL	https://console.mgmt.plural.sh/cd/clusters/446acdef-8524-425a-a49f-5336a...
🔍 Logs URL	https://console.mgmt.plural.sh/cd/clusters/446acdef-8524-425a-a49f-5336a...
🌊 Flow URL	https://console.mgmt.plural.sh/flows/fbbadfa5-fa67-4c16-ab32-42dca133aa3...
Preview Link	Preview

---

You can learn more about preview environments and Plural Flows here