Engage page rebranding/improvements

[petesfrench]

Done

• Applies the rebranding found in this design
• Implements new component parsers in the Discourse module. PR here. These can be reviewed in tandem.

QA

• Open the DEMO
• Check the design against the different types of engage page:
  whitepaper
  blog
  roadshow
• Check against legacy engage pages

Issue / Card

Fixes
https://warthogs.atlassian.net/browse/WD-35872
https://warthogs.atlassian.net/browse/WD-21992

[webteam-app]

Demo

Jenkins

demos.haus

[Copilot]

Pull request overview

Updates the Engage page templates and resource-listing behavior as part of a Discourse proof-of-concept, including layout changes and a new “Additional resources” section powered by the /engage/resources.json endpoint.

Changes:

• Refactors templates/engage/base.html layout (hero + grid) and adds a sticky right column plus a new resources section/template.
• Extends static/js/src/resources.js to support custom templates and additional rendering behavior (fallback image, resource type, dividers).
• Adjusts Engage Marketo form templates (fieldset border styling) and switches canonicalwebteam.discourse to a Git branch dependency.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
templates/engage/shared/_en_engage_form.html	Refactors Marketo form markup and CTA styling.
templates/engage/shared/_de_engage_form.html	Removes fieldset border via inline style.
templates/engage/shared/_es_engage_form.html	Removes fieldset border via inline style.
templates/engage/shared/_it_engage_form.html	Removes fieldset border via inline style.
templates/engage/shared/_kr_engage_form.html	Removes fieldset border via inline style.
templates/engage/shared/_pt_engage_form.html	Removes fieldset border via inline style.
templates/engage/shared/_ru_engage_form.html	Removes fieldset border via inline style.
templates/engage/shared/_tr_engage_form.html	Removes fieldset border via inline style.
templates/engage/shared/_zh-TW_engage_form.html	Removes fieldset border via inline style.
templates/engage/base.html	Reworks Engage page structure, adds sticky form column and “Additional resources” rendering.
templates/engage/base_engage.html	Changes default nav visibility on Engage pages.
static/sass/styles.scss	Adds .u-sticky-col utility for sticky grid columns.
static/js/src/resources.js	Adds support for custom templates, fallback images, resource type output, and dividers.
requirements.txt	Replaces pinned Discourse dependency with a Git branch reference.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[eliman11]

Thanks @petesfrench!! Could you set up example pages with an image in the hero? Also perhaps recreating an events/roadshow and webinar page to see what the new layout looks like for those page types (designs here btw).

• Sorry for the last min ask, could we add a right aligned, 6-col rule to the top of the content section? To match the way we do it on case studies, like this -

• Also could we display the meta_image above the button like in the ss above
• Resources section should use resources pattern
• There seems to be excessive padding for the headings compared to the headings on Vanilla

• On pages with no resource section, could the content section use deep padding at the bottom? And on pages with a resource section, the content section should have reg padding as the resource section should then have the deep padding

Responsiveness:

• If the viewport is shortened, could we make sure the form is scrollable

• On tablet and mobile, could we reorder the content such that the CTA button or form appears before the content (designs here)
• Also to note - the rule that should be added under the hero section on desktop should appear between the form/button section and the content section

[petesfrench]

• Sorry for the last min ask, could we add a right aligned, 6-col rule to the top of the content section? To match the way we do it on case studies, like this -

I don't understand this one.

• There seems to be excessive padding for the headings compared to the headings on Vanilla

This happened when a heading is below a p. It is a base part of Vanilla.

[eliman11]

Thanks @petesfrench! Are the BrightTalk embeds in webinars not showing because of the demo? (example)

General:

• Is there a way we can remove the additional padding around the bullet points so it matches the styling on Vanilla better?

Forms and primary CTA:

• Can we have the images on the right to fill the width of the container so we don't show the container with the background?

• Can we hida the meta image and button for webinar engage pages with the BrightTalk embeds as there's nothing to "register" for

• If the viewport is shortened, could we make sure the form is scrollable

• This looks much better now - but it seems to cut off the submit button at the bottom of the form, unless you scroll all the way down the page(example)

Screen.Recording.2026-04-29.at.13.32.44.mov

Hero:

• Hide CTAs on the hero - it should only be on the right column

Responsiveness

• On mobile, the form shouldn't have this additional scroll bar

• Is there a way we can remove some of this padding in the hero on tablet/mobile? It seems a bit too space out atm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 48.33%. Comparing base (249c2a8) to head (fd36838).
⚠️ Report is 28 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #16229   +/-   ##
=======================================
  Coverage   48.33%   48.33%           
=======================================
  Files          37       37           
  Lines        5905     5905           
=======================================
  Hits         2854     2854           
  Misses       3051     3051           

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[eliman11]

Thanks @petesfrench!

As mentioned on MM I have a wider q on how we're using the primary_cta field for the button on the right in case there are no forms. For example here, since the primary_cta related fields are currently being used as anchor links in the hero, the button takes you to a #register-section that isn't on the page. I'm not sure what's technically feasible but the idea was to house URLs in the primary_link field (meeting notes). Does it introduce too much complexity to reuse an existing field in a different way? Should we instead set up new fields on Discourse for this button on the right and remove the guidelines around using the primary_cta field so we don't break this functionality for existing pages?

Other than that -
For webinars:

• Can we have the content section above it wrap in a regular section instead of a deep?
• Do we have any flexibility around changing the background of the webinar embed to a paper background? If not. could we have that entire strip in a white background (full width) instead of just having the white container around the embedded section?

Forms:

• (Mentioned on MM) Can we make the form sticky only for content that is longer than the forms
• If possible can we hide the scrollbar so they aren't visible by default. Alternatively if not possible can we truncate the form to the first 3 fields, and "hide" the rest of the fields behind a "view more" link?

Related pages section:

• In the description field instead of displaying "It displays a title, description, and metadata (author and date)." could we pull from the "subtitle" field from the listed posts (example page with this section)
• Hide the author and date published info as we don't have this for engage pages
• Image thumbnails should still be visible on tablet and mobile

[Ataku-B]

The language param isn't used, are there plans to implement it later? Also with this change, the JSDoc above no longer reflects the method accurately.

[Ataku-B]

Is there a valid case where only webinar_date is present without youtube_id and vimeo_id? In that case we wouldn't be handling the deep padding correctly.