Render every use case from one template and share repeated bands

[ZJvandeWeg]

Summary

All eight /use-cases/ pages now render through one template, and four bands that were copied across the site are now shared components.

One use-case template

• pages/use-cases/[slug].vue renders every use case from content/use-cases/<slug>.yml. Each file has the listing metadata plus an ordered sections: list, and each section's type picks a component in components/use-case/. Adding a use case or reordering its bands is a YAML change.
• The six hand-written pages (scada, mes, uns, data-integration, it-ot-middleware, remote-device-management) are deleted, and their copy moved into YAML. A script confirmed every sentence from the old pages is in the new YAML; the one change is a typo fix ("Additional additional data formats").
• The two operational pages (production-monitoring, shop-floor-communication) had their blocks moved under sections:. Their parsed content is the same as before.
• Copy in YAML is HTML (accent spans, links, <strong>, <br>) rendered with v-html, the same convention as content/industries/*.yml. The YAML lives in this repo and renders at build time, so there's no escaping layer. FAQ answers are the exception: BlogFaq still renders them as markdown.

Shared components

New	Replaces
ClosingCta	IndustryPageCta, IndustryCta, and the use-case closing CTA. Each caller keeps its own PostHog position.
FaqSection	The heading, BlogFaq and hand-written FAQPage structured data on index, ai, node-red, landing/plc, platform/device-agent, platform/why-flowfuse, resources/roi-calculator, the industry template and the use cases. BlogFaq loses its now-unused page variant.
StepList	The sticky-heading step list on integrations/opcua, platform/device-agent and remote-device-management.
ResourceList	The ff-nodered-resources thumbnail cards on landing/plc, integrations/opcua (twice) and the use-case resources band.

Most of the Vue removed is copy that moved into YAML; the rest is the duplicated bands above.

Changes reviewers should check

• Spacing has been made the same everywhere: use-case bands, and the gap between each FAQ heading and its first question. Each page previously used its own negative-margin trick. Expect small visual shifts.
• SCADA, MES and UNS now end on the shared closing card, which adds the default line "Talk to an expert, or get started with FlowFuse today."
• Use-case CTA positions in PostHog are now hero and footer. They were primary/secondary on SCADA, MES and UNS, and final-cta on remote device management, so those series break at this PR. The IT/OT deployment cards sent manufacturing (a page name, which the CTA convention rules out) and now send deployment-options.
• Step titles are the same h3 style on all three step-list pages; OPC UA's was an h4, and its sticky heading column is now a fixed 373px instead of a third of the width.
• FAQ placement: on why-flowfuse and node-red the FAQ is now its own section instead of sitting inside the preceding container.
• Data integration now shows the challenges diagram on mobile too.

Not included

• The blog, webinar and customer-story FAQs stay on BlogFaq. They sit inside a narrow article column, and customer stories emits a different structured-data format.
• integrations/opcua has a FAQ but no FAQPage structured data. That was already the case and is unchanged here.

Test plan

• npm test: all 321 pass (after merging main)
• npm run build:nuxt:skip-images: succeeds with no errors or Vue warnings, and all eight use-case pages prerender
• Built HTML checked on every touched page: accent spans, links and <strong> render as markup with nothing escaped, plus CTAs, step counts, resource card counts, and exactly one FAQPage block per FAQ page with the same number of questions as the accordion (Device Agent keeps plain "Node-RED" in the schema)
• Visual check on the deploy preview, especially /use-cases/*, /integrations/opcua/, /platform/device-agent/, /landing/plc/, /industries/automotive/ and one legacy industry page (e.g. /industries/food-beverage/)

[netlify]

✅ Deploy Preview for flowfuse-website ready!

Name	Link
🔨 Latest commit	759bb21
🔍 Latest deploy log	https://app.netlify.com/projects/flowfuse-website/deploys/6abfbc331f02f400088ffc3d
😎 Deploy Preview	https://deploy-preview-5900--flowfuse-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 44 (🟢 up 13 from production) Accessibility: 95 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ZJvandeWeg]

Copy in YAML goes through lib/rich-text.mjs. It supports links, bold, ==indigo== and !!red!! accents, and line breaks, and escapes everything else, so YAML can't inject raw HTML. It has unit tests.

@Yndira-E This is the part I like least, and am happy to revert to just HTML, as it's a static one that gets copied during build time