Automotive page: swap traceability card for torque demo video

nuxt/components/LiteYoutube.vue

@@ -2,6 +2,7 @@
 const props = defineProps<{
     videoid: string
     title: string
+    poster?: string
 }>()
 
 // Register stylesheet and script via useHead so they're present in the initial SSR HTML.
@@ -22,5 +23,10 @@ useHead({
 </script>
 
 <template>
-  <lite-youtube :videoid="videoid" params="rel=0" style="width: 100%; height: 480px;" :title="`${title} - YouTube video`" />
+  <lite-youtube
+      :videoid="videoid"
+      params="rel=0"
+      :style="{ width: '100%', height: '480px', backgroundImage: poster ? `url('${poster}')` : undefined }"
+      :title="`${title} - YouTube video`"
+  />
 </template>

nuxt/components/industry-page/Applications.vue

@@ -10,6 +10,7 @@ type Item = {
     image: string
     imageAlt: string
     variant: 'indigo' | 'red' | 'mixed'
+    videoId?: string
     id?: string
 }
 
@@ -41,13 +42,20 @@ const VARIANTS: Record<string, { gradient: string, border: string, mobileGradien
         >
           <!-- Image (desktop): full-size screenshot offset over a colored panel -->
           <div class="max-md:hidden md:w-[45%]">
-            <div class="relative aspect-[430/289]">
+            <div class="relative" :class="item.videoId ? 'aspect-video' : 'aspect-[430/289]'">
               <div
                   class="absolute -top-5 w-full h-full rounded-lg bg-gradient-to-tl"
                   :class="[VARIANTS[item.variant].gradient, index % 2 === 0 ? '-left-5' : '-right-5']"
               />
               <div class="absolute inset-0 rounded-lg border-2 overflow-hidden ff-image-cover" :class="VARIANTS[item.variant].border">
-                <img :src="item.image" :alt="item.imageAlt" loading="lazy">
+                <LiteYoutube
+                    v-if="item.videoId"
+                    :videoid="item.videoId"
+                    :title="item.imageAlt"
+                    :poster="item.image"
+                    class="application-video"
+                />
+                <img v-else :src="item.image" :alt="item.imageAlt" loading="lazy">
               </div>
             </div>
           </div>
@@ -56,7 +64,14 @@ const VARIANTS: Record<string, { gradient: string, border: string, mobileGradien
             <h3 class="text-gray-700 text-3xl font-medium m-0">{{ item.title }}</h3>
             <div class="md:hidden rounded-xl w-full bg-gradient-to-tl max-w-[500px] mx-auto my-4 p-4" :class="VARIANTS[item.variant].mobileGradient">
               <div class="ff-image-rounded w-full border overflow-hidden" :class="VARIANTS[item.variant].mobileBorder">
-                <img :src="item.image" :alt="item.imageAlt" loading="lazy">
+                <LiteYoutube
+                    v-if="item.videoId"
+                    :videoid="item.videoId"
+                    :title="item.imageAlt"
+                    :poster="item.image"
+                    class="application-video"
+                />
+                <img v-else :src="item.image" :alt="item.imageAlt" loading="lazy">
               </div>
             </div>
             <!-- A blank line in the source splits the description into separate paragraphs,
@@ -78,3 +93,13 @@ const VARIANTS: Record<string, { gradient: string, border: string, mobileGradien
     </div>
   </section>
 </template>
+
+<style scoped>
+.application-video {
+    border-radius: 0;
+}
+
+.application-video :deep(.lty-playbtn) {
+    background-image: none;
+}
+</style>

nuxt/content.config.ts

@@ -590,6 +590,7 @@ export default defineContentConfig({
                         image: z.string(),
                         imageAlt: z.string(),
                         variant: z.enum(['indigo', 'red', 'mixed']),
+                        videoId: z.string().optional(),
                         // Anchor id for the item's wrapping element, so an old URL (a
                         // retired page folded into this one) or another page's inline
                         // link can deep-link straight to this card.

nuxt/content/industries/automotive.yml

@@ -38,29 +38,30 @@ applications:
       description: "No rip and replace; instead, connect PLCs, robots, SCADA, historians, MES, ERP systems, databases, and cloud services using open industrial protocols. Bring data from across your factory into one platform to build custom low-code applications."
       linkText: "See how FlowFuse connects your existing systems"
       linkHref: "/use-cases/data-integration/"
-      image: "/images/industries/automotive/1-connect-systems.png"
-      imageAlt: "Screenshot of a FlowFuse application connecting manufacturing systems"
+      image: "/images/industries/energy-utilities/connect-scada-utility-systems.png"
+      imageAlt: "Screenshot of a Node-RED flow in FlowFuse reading Siemens S7, Allen-Bradley, OPC UA, and Modbus sources, adding context, and publishing to structured topics"
       variant: "indigo"
+    - title: "Improve Quality with Complete Traceability"
+      description: "Trace every VIN back to the exact torque-angle curve for each bolt. See how Claude uses the FlowFuse MCP integration to build an app that verifies every tightening against its Pset, stores results by VIN, and blocks the line on any NOK."
+      linkText: "Learn about FlowFuse AI and see how it builds apps"
+      linkHref: "/ai/"
+      image: "/images/industries/automotive/4-torque-monitoring-video.jpg"
+      imageAlt: "Video: Building a Torque Monitoring App in 68 Minutes"
+      videoId: "kPBLW-kMfsg"
+      variant: "red"
     - title: "Monitor Production in Real Time"
       description: "Build production dashboards with low-code and AI assistance to monitor machine status, production counts, cycle time, OEE, alarms, and line performance using live data from your manufacturing systems."
       linkText: "See what production monitoring looks like with FlowFuse"
       linkHref: "/use-cases/production-monitoring/"
       image: "/images/industries/automotive/2-monitor-production.png"
       imageAlt: "Screenshot of a real-time production monitoring dashboard"
-      variant: "red"
+      variant: "mixed"
     - title: "Reduce Downtime with Live Visibility"
       description: "Automatically detect stoppages, capture downtime events, analyze root causes, and understand where production time is being lost with applications built on live machine data."
       linkText: "Read how to build a downtime logger"
       linkHref: "/blog/2026/07/build-downtime-logger/"
       image: "/images/industries/automotive/3-reduce-downtime.png"
       imageAlt: "Screenshot of a live downtime tracking dashboard"
-      variant: "mixed"
-    - title: "Improve Quality with Complete Traceability"
-      description: "Trace every VIN and manufactured part through its complete production history, including torque values, weld parameters, barcode scans, batch records, and vision inspection results to accelerate investigations and improve quality."
-      linkText: "Read how to build a defect and quality monitoring dashboard"
-      linkHref: "/blog/2026/07/defect-and-quality-monitoring/"
-      image: "/images/industries/automotive/4-quality-traceability.png"
-      imageAlt: "Screenshot of a quality traceability application"
       variant: "indigo"
 compliance:
   description: "Automotive carries traceability requirements most industries don't. FlowFuse helps ensure the data an auditor asks for exists and is queryable when they ask for it."