Standardize logo carousel eyebrow across 11ty and Nuxt

nuxt/components/MqlContactPage.vue

@@ -9,7 +9,7 @@ withDefaults(defineProps<{
     subtitleIcon?: string
     description: string
     highlights?: string[]
-    socialProofTitle?: string
+    socialProofTitle?: string | false
     otherChannels?: Array<{
         title: string
         description: string
@@ -77,10 +77,7 @@ withDefaults(defineProps<{
       </div>
 
       <div class="order-3 md:col-start-1 md:col-span-2 md:row-start-3 min-w-0 border-t border-gray-200 pt-6">
-        <p v-if="socialProofTitle" class="text-center text-gray-500 font-medium mb-6">
-          {{ socialProofTitle }}
-        </p>
-        <SocialProof />
+        <SocialProof :eyebrow="socialProofTitle" />
       </div>
     </div>
   </div>

nuxt/components/SocialProof.vue

@@ -6,6 +6,18 @@
 // payload, avoiding a client/server hydration mismatch.
 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.
+const props = withDefaults(defineProps<{
+    eyebrow?: string | false
+    eyebrowBg?: boolean
+}>(), {
+    eyebrow: DEFAULT_EYEBROW,
+    eyebrowBg: false,
+})
+
 function altFromPath (path: string) {
     return path
         .replace('/images/home-logos/', '')
@@ -16,12 +28,19 @@ function altFromPath (path: string) {
 </script>
 
 <template>
-  <div v-if="logos?.length" class="social-proof-carousel">
-    <div class="mix-blend-luminosity opacity-70 saturate-0">
-      <img v-for="logo in logos" :key="logo" :src="logo" :alt="altFromPath(logo)" loading="lazy">
+  <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 }">
+      <h2 class="text-gray-600 text-lg font-semibold">
+        {{ props.eyebrow }}
+      </h2>
     </div>
-    <div class="mix-blend-luminosity opacity-70 saturate-0" aria-hidden="true">
-      <img v-for="logo in logos" :key="`dup-${logo}`" :src="logo" :alt="altFromPath(logo)" loading="lazy">
+    <div v-if="logos?.length" class="social-proof-carousel">
+      <div class="mix-blend-luminosity opacity-70 saturate-0">
+        <img v-for="logo in logos" :key="logo" :src="logo" :alt="altFromPath(logo)" loading="lazy">
+      </div>
+      <div class="mix-blend-luminosity opacity-70 saturate-0" aria-hidden="true">
+        <img v-for="logo in logos" :key="`dup-${logo}`" :src="logo" :alt="altFromPath(logo)" loading="lazy">
+      </div>
     </div>
   </div>
 </template>

nuxt/pages/book-demo/index.vue

@@ -20,7 +20,6 @@ useSeoMeta({
     subtitle-icon="i-lucide-arrow-right"
     description="See how you'd build, deploy, and govern operational applications across your own plants and production lines."
     :highlights="highlights"
-    social-proof-title="Over 36,000 users have trusted FlowFuse"
   >
     <HubSpotMeetings data-src="https://meetings-eu1.hubspot.com/michael-davis/round-robin-sales-team?embed=true" />
   </MqlContactPage>

src/_includes/layouts/industry.njk

@@ -194,8 +194,8 @@ layout: default
     ============================================================ -->
     <div class="w-full py-12 px-6">
         <div class="max-w-screen-lg mx-auto">
-            <p class="text-center text-indigo-800 font-semibold mb-6">{{ socialProofText }}</p>
             <div class="max-md:max-w-xl max-md:mx-auto">
+                {% set socialProofEyebrow = socialProofText %}
                 {% include "social-proof.njk" %}
             </div>
         </div>

src/_includes/social-proof.njk

@@ -1,3 +1,8 @@
+{% if socialProofEyebrow != false %}
+<div class="w-full text-center min-h-14 flex justify-center items-center mt-8{% if socialProofEyebrowBg %} bg-radial-indigo{% endif %}">
+    <h2 class="text-gray-600 text-lg font-semibold">{{ socialProofEyebrow if socialProofEyebrow else "Over 36,000 users have trusted FlowFuse" }}</h2>
+</div>
+{% endif %}
 <div class="social-proof-carousel">
     <div class="mix-blend-luminosity opacity-70 saturate-0">
     {%- for logo in collections.homeLogos | shuffle -%}

src/index.njk

@@ -196,10 +196,8 @@ hubspot:
 <div class="w-full px-6 pt-8">
     <!-- Social Proof -->
     <div class="sm:max-w-screen-lg m-auto max-w-5xl mb-10">
-        <div class="w-full text-center min-h-14 flex justify-center items-center mt-8 bg-radial-indigo">
-            <h2 class="text-gray-600 text-lg font-semibold">Over 36,000 users have trusted FlowFuse</h2>
-        </div>
         <div class="mx-auto text-center -mt-0.5">
+            {% set socialProofEyebrowBg = true %}
             {% include "social-proof.njk" %}
         </div>
     </div>

src/industries/automotive.njk

@@ -172,8 +172,8 @@ cta:
             </div>
         </div>
         <div class="max-w-screen-lg mx-auto mt-16 text-center">
-            <p class="text-gray-500 text-lg font-semibold">{{ hero.trustedByText }}</p>
             <div class="mx-auto text-center -mt-0.5 -mb-10">
+                {% set socialProofEyebrow = hero.trustedByText %}
                 {% include "social-proof.njk" %}
             </div>
         </div>

src/vs/ignition.njk

@@ -207,10 +207,10 @@ cta:
     </div>
 </div>
 <div class="w-full px-6 pb-24">
-    <p class="text-center md:max-w-screen-lg m-auto mt-24 font-medium text-indigo-900">Trusted by industrial teams worldwide to modernize their OT‑IT data infrastructure and edge architectures.</p>
     <!-- Social proof -->
-    <div class="max-w-md sm:max-w-screen-lg m-auto max-w-5xl mb-14">
+    <div class="max-w-md sm:max-w-screen-lg m-auto max-w-5xl mb-14 mt-16">
         <div class="mx-auto w-full">
+            {% set socialProofEyebrow = "Trusted by industrial teams worldwide to modernize their OT‑IT data infrastructure and edge architectures." %}
             {% include "social-proof.njk" %}
         </div>
     </div>

src/vs/litmus.njk

@@ -204,10 +204,10 @@ cta:
     </div>
 </div>    
 <div class="w-full px-6 pb-24">
-    <p class="text-center md:max-w-screen-lg m-auto mt-24 font-medium text-indigo-900">Trusted by industrial teams worldwide to modernize their OT‑IT data infrastructure and edge architectures.</p>
     <!-- Social proof -->
-    <div class="max-w-md sm:max-w-screen-lg m-auto max-w-5xl mb-14">
+    <div class="max-w-md sm:max-w-screen-lg m-auto max-w-5xl mb-14 mt-16">
         <div class="mx-auto w-full">
+            {% set socialProofEyebrow = "Trusted by industrial teams worldwide to modernize their OT‑IT data infrastructure and edge architectures." %}
             {% include "social-proof.njk" %}
         </div>
     </div>