Merge pull request #5733 from FlowFuse/integrations-opcua-logo-carousel

Add logos carusel to OPC UA landing

Author: JoycePlaysFootball

nuxt/components/SocialProof.vue

@@ -9,15 +9,21 @@ const logos = useState('home-logos', () => useHomeLogos())
 const DEFAULT_EYEBROW = 'Over 36,000 users have trusted FlowFuse'
 
 // String to override the copy, `false` to hide it, omitted for the homepage default.
-// eyebrowBg: the homepage-only radial-gradient glow behind the eyebrow — off by default.
+// eyebrowBg: radial-gradient glow behind the eyebrow — off by default. `true` (or 'indigo')
+// matches the homepage; 'red' is for pages themed around the red accent (e.g. /integrations/opcua/).
 const props = withDefaults(defineProps<{
     eyebrow?: string | false
-    eyebrowBg?: boolean
+    eyebrowBg?: boolean | 'indigo' | 'red'
 }>(), {
     eyebrow: DEFAULT_EYEBROW,
     eyebrowBg: false,
 })
 
+const eyebrowBgClass = computed(() => {
+    if (!props.eyebrowBg) return ''
+    return props.eyebrowBg === 'red' ? 'bg-radial-red' : 'bg-radial-indigo'
+})
+
 function altFromPath (path: string) {
     return path
         .replace('/images/home-logos/', '')
@@ -29,7 +35,7 @@ function altFromPath (path: string) {
 
 <template>
   <div>
-    <div v-if="props.eyebrow" class="w-full text-center min-h-14 flex justify-center items-center mt-8" :class="{ 'bg-radial-indigo': props.eyebrowBg }">
+    <div v-if="props.eyebrow" class="w-full text-center min-h-14 flex justify-center items-center mt-8" :class="eyebrowBgClass">
       <h2 class="text-gray-600 text-lg font-semibold">
         {{ props.eyebrow }}
       </h2>

nuxt/pages/integrations/opcua.vue

@@ -307,7 +307,7 @@ function toggleFaq (i: number) {
 
     <!-- Hero -->
     <div class="w-full px-6">
-      <div class="max-w-screen-lg mx-auto pt-12 pb-20 md:pt-20 md:pb-24">
+      <div class="max-w-screen-lg mx-auto pt-12 pb-3 md:pt-20">
         <div class="md:flex md:flex-row md:justify-between items-stretch gap-12">
           <div class="m-auto md:w-1/2">
             <h1 class="w-full mt-0 mb-6 m-auto font-medium">
@@ -327,6 +327,7 @@ function toggleFaq (i: number) {
             </div>
           </div>
         </div>
+        <SocialProof class="mt-12" eyebrow-bg="red" />
       </div>
     </div>
 

src/css/style.css

@@ -2360,7 +2360,7 @@ lite-youtube::before {
 }
 
 .bg-radial-red {
-    background: radial-gradient(ellipse 30% 70% at center bottom, rgb(from var(--color-red-50) r g b / 0.3) 0%, rgb(from var(--color-red-50) r g b / 0) 100%);
+    background: radial-gradient(ellipse 30% 70% at center bottom, rgb(from var(--color-red-100) r g b / 0.3) 0%, rgb(from var(--color-red-100) r g b / 0) 100%);
 }
 
 /* AI Chat Interface Styles */