[4970] Merge certified nodes into /integrations/

[n-lark]

Description

See details here.

TLDR: Added a certified nodes intro and made the certified badge more prominent.

Related Issue(s)

Resolves #4970

Checklist

• I have read the contribution guidelines
• I have considered the performance impact of these changes
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
• For blog PRs, an Art Request has been created (instructions)

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	74dc7dd
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/6a107319e80f1b0009230a87
😎 Deploy Preview	https://deploy-preview-5036--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 91 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (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.

[hardillb]

Looks fine to me, can't see any technical problems, but I defer to marketing/strategy

[allthedoll]

Generally speaking, I think this looks 🔥. The design and copy are ✨ based on the convo we had with @ZJvandeWeg (the hero is doing the economic-buyer proof work, the three pillars map to buyer signals, etc.). Approving, but also including a very special list of nitpicks for funsies.

✏️ Copy

1. Capitalization: the headline says "Certified nodes" lowercase, but then we see "Certified Nodes" as a proper noun. I'd go with proper-noun "Certified Nodes" throughout, since that's how we talk about the program in sales. Name is subject to change later ofc.

2. "Supported" is missing from the pillars. The hero headline promises "backed by their authors and supported long-term" but none of the three pillar titles reinforce "supported", so a budget-holder scanning for that word won't find it. Pillar 2 ("Tested for production") describes the certification gate; it doesn't describe the ongoing commitment. Options:

   • Rename Pillar 2 to something like "Supported through production" or "Backed after launch"
   • Or keep "Tested for production" and add a fourth pillar about support
   • Or rework the Pillar 2 body to lead with the support claim and treat the testing as the entry bar

3. Pillar 3 title "Open source and proprietary, both welcome" reads a touch twee like Reese Witherspoon in Cruel Intentions. 💅🏼 The body is solid. Suggested alternatives:

   • "Open source and commercial"
   • "One standard, two models"
   • "Free or commercial, same bar"

4. The "Learn more" link points to /blog/2025/07/certified-nodes-v2/. Fine for now given the Nuxt migration, but worth a TODO comment in the template so we remember to point this at a proper FlowFuse-owned Certified Nodes explainer page when those exist? A year-old blog post shouldn't be the long-term destination ijs.

🎨 Design / UX

5. The "Show only Certified (…)" button shows a literal ellipsis until JS populates the count. Guard the count span so it just reads "Show only Certified" until catalogue loads, then swap in (N). On a slow connection or if JS fails, the ellipsis looks broken. 💔

6. The aria-live="polite" on the catalogue-meta div is good, but the loading state inside is <div id="count-placeholder"><span id="integrations-count">Loading...</div> which is missing the closing </span>. Pre-existing on main, not introduced by this PR, but worth a follow-up if you're already in there.

7. The .certified-hero { margin-top: -32px } hack is legit and well-commented, so no concern from me. Given the Nuxt migration on the horizon for this whole template, not worth a follow-up issue but worth noting fr fr.

8. The tile pill change (icon-only → icon + "Certified" word): this is the right call for ZJ's Economic-Buyer Goal™️ , but on a dense grid the word "Certified" next to the package scope (@flowfuse/...) is a lot of text in a small space. Worth checking on mobile 📱 that it doesn't push the tile title down or truncate the scope. The truncate class on the scope span should handle it but worth eyeballing. 🎱

9. Mobile: with hero + 3 stacked pillars + sidebar filters, the search box is pretty far below the fold on a phone. Not a blocker, but the hero IS the point of this page now. Worth knowing.

😈 Em dash note

The copy uses em dashes ("— not an anonymous npm publisher", "— and patch CVEs on our own timeline"). I think this is fine in web marketing copy, but worth asking our delightful friend @Yndira-E.

Nice work on the Axios timing on Pillar 1 lands hard, and "patch CVEs on our own timeline" is exactly the supply-chain-security claim we've been building. 📈

[n-lark]

Hey @allthedoll thank you for the review! All feedback has been addressed and I confirmed mobile doesn't look squished to me:

.

---

I'll hold off on merge until we get buy in from @Yndira-E ❤️

[Yndira-E]

Really like the direction overall. I don’t personally mind the em dashes either way tbh. They read slightly more editorial/formal to me, but I don’t think they cause any real issues in this context.

I did a super quick browser tweak locally just to explore whether the hero could feel a bit more integrated into the rest of the page visually, while keeping all the same content/messaging.

Happy to push the changes myself if the direction feels useful.

[n-lark]

@Yndira-E that looks great! We'd love for you to push those changes up its a great improvement. Thank you for taking a look!

[Yndira-E]

@n-lark done!