Rebuild AI page with sticky capability sections

[dimitrieh]

Description

Outcome: the AI page presents its capabilities as sticky-header scrolling sections over a video hero, a clearer and more engaging AI story than the previous static layout.

Builds on: the AI hero clip from the hero-media PR and the use-case link cards from the use-case PR (the featured production-monitoring and shop-floor cards), plus the navigation PR's shared styles.

Related Issue(s)

Split from #5371.

Checklist

• I have read the contribution guidelines
• I have considered the performance impact of these changes

---

Stack (left to right is merge order; #5373 punctuation is independent, off main):

flowchart LR
    main([main])
    main --> P73["#5373 punctuation"]
    main --> P74["#5374 shop-floor"] --> P75["#5375 nav"] --> P76["#5376 use-cases"] --> P77["#5377 hero-media"] --> P78["#5378 industry"] --> P79["#5379 AI"] --> P80["#5380 homepage"] --> P81["#5381 polish"]
    classDef here stroke-width:4px;
    class P79 here;

Loading

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	bc87304
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/6a63af17f518f0000865b4fe
😎 Deploy Preview	https://deploy-preview-5379--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 63 (🟢 up 2 from production) Accessibility: 96 (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.

[Yndira-E]

I like the sticky behavior in the light blue section, it makes these long sections easier to follow.

I’m less convinced about the hero, though:

• I’m not sure the background video reinforces the AI message. Without reading the headline, it feels more related to logistics or shipping than AI, so it doesn’t immediately help explain the product.
• The video quality also isn’t good enough; it looks blurry/pixelated, which makes it feel less polished.
• The video isn’t a seamless loop either, so there’s a noticeable jump when it restarts.
• The transition between the hero and the first content section also feels a bit abrupt. The large white gap makes the hero feel visually disconnected from the rest of the page.

I also miss some product imagery. The current page quickly shows FlowFuse Expert in action, which helps visitors connect the messaging with the actual product. The proposed version relies much more heavily on text, and I think showing the product earlier builds more confidence.

[ZJvandeWeg]

@dgatti0213 Please update the script (and link the script in the handbook) to make sure we explain how AI governance works in FlowFuse.