Merge pull request #5721 from FlowFuse/ai-image

AI Page Update with Image

Author: Yndira-E

nuxt/pages/ai/index.vue

@@ -192,7 +192,11 @@ onUnmounted(() => {
          wash anchored at the top right, and an opaque hero sits exactly over it. The
          connector card below keeps its own white, because that is a card. -->
     <section class="w-full relative">
-      <div class="relative z-10 w-full px-6 pt-12 md:pt-24 pb-12 sm:pb-16">
+      <!-- pb-0: the recording below is the picker's own result, so the space between
+           them belongs to that section's pt rather than being split across a section
+           boundary here. Two paddings meeting in the middle of one thread is what
+           left 128px of empty gradient under the docs card. -->
+      <div class="relative z-10 w-full px-6 pt-12 md:pt-24 pb-0">
         <div class="sm:max-w-screen-lg mt-6 sm:mt-12 mx-auto">
           <div class="container m-auto text-left max-w-screen-lg">
             <div class="max-w-3xl mx-auto">
@@ -230,6 +234,64 @@ onUnmounted(() => {
       </div>
     </section>
 
+    <!-- DEMO: the payoff of the picker above. Those three steps say how to connect
+         an outside agent; this is what it looks like when you do, consent screen
+         included - the part a reader does not take on faith. It also hands off to
+         the governance section directly below, which is the same grant stated as a
+         claim rather than shown.
+         Autoplaying muted loop, the same treatment the install animation uses. The
+         controls stay on for one reason: at 57 seconds this runs long enough that
+         moving content needs a way to stop it, and the play/pause button is it.
+         Browsers pause an offscreen muted autoplay video by themselves, so there is
+         no observer here, and no preload hint either - autoplay settles that. The
+         poster still earns its place as the first paint before playback starts.
+         WebM only, and no MP4 fallback: full WebM support starts at Safari 16 and
+         iOS 17.4, which leaves 1.1% of global users out, and an H.264 copy costs
+         1.9MB to reach them - more than the WebM itself, on a video that now
+         autoplays for everyone. Those readers get the poster and a play button that
+         does nothing, which is the trade. Kept as a <source> with a type rather than
+         src on the video so a browser that cannot play WebM never fetches it.
+         The recording has no audio track at all, so muted is both the autoplay
+         precondition and the truth, and playsinline stops iOS taking it fullscreen.
+         pb-0 for the same reason the hero has it: these three sections are all
+         transparent, so a boundary between them is space and nothing else, and each
+         one owning only its top padding keeps that space to a single 64px. Doubling
+         up here put 128px above the governance card while the card sat 64px above
+         the capabilities band, which reads as the card floating low in a gap rather
+         than as a section change. Doubling is for boundaries that also change
+         background, the way the capabilities band does. -->
+    <section class="ff-ai-demo w-full px-6 pt-12 sm:pt-16 pb-0">
+      <div class="md:max-w-screen-lg m-auto">
+        <h2 class="max-md:text-center">Connect and build <span class="text-indigo-600">faster than ever</span></h2>
+        <p class="mt-3 text-gray-600 max-w-3xl">
+          Connect in seconds and start building. Use natural-language to leverage your company-sanctioned AI in a secure and governed way.
+        </p>
+        <!-- The frame is the wrapper, not the video, and it clips: Chrome builds its
+             native control bar in shadow DOM and ignores the video's own
+             border-radius, so a radius set directly on the video left the bar's
+             square corners poking out past the rounded border. Same rounded /
+             bordered / shadowed treatment the product page gives its hero shot.
+             A plain div rather than a figure now the caption is gone - a figure with
+             nothing to caption is just a wrapper. -->
+        <div class="mt-8 overflow-hidden rounded-lg border-2 border-indigo-100 shadow-2xl">
+          <video
+            class="block w-full"
+            poster="/images/ai/demo-external-agents-poster.jpg"
+            width="1600"
+            height="1056"
+            autoplay
+            loop
+            muted
+            playsinline
+            controls
+            aria-label="Screen recording: Claude adds FlowFuse as a custom MCP connector, signs in, is granted full access to one team, and then provisions a Node-RED instance from the OEE blueprint."
+          >
+            <source src="/images/ai/demo-external-agents.webm" type="video/webm">
+          </video>
+        </div>
+      </div>
+    </section>
+
     <!-- GOVERNANCE: the control plane every AI action runs through. Path-neutral,
          which is what lets it sit above the picker rather than under Expert. -->
     <div class="ff-ai-governance w-full px-6 py-12 sm:py-16">