Route page CTAs to sales: drop self-serve sign-up from page bodies

nuxt/components/BlogPostCta.vue

@@ -8,10 +8,6 @@ const props = defineProps<{
 // copy/href/event) instead of a local buttonText/buttonUrl pair, so the blog
 // CTA can't drift from the rest of the site's copy.
 const CTA_VARIANTS: Record<string, { title: string, description: string }> = {
-    'sign-up': {
-        title: 'Start building with your own industrial data',
-        description: 'Connect your systems, automate workflows, and see what’s possible in your environment.',
-    },
     demo: {
         title: 'See how FlowFuse works in real environments',
         description: 'Walk through real use cases and see how teams connect systems, automate workflows, and deploy at scale.',
@@ -26,14 +22,28 @@ const CTA_VARIANTS: Record<string, { title: string, description: string }> = {
     },
 }
 
-// Missing type, or an unrecognised one (e.g. typo'd `type: signup`), falls
-// back to 'sign-up'.
-const KNOWN_TYPES = new Set(['sign-up', 'demo', 'contact', 'pricing'])
+// Self-serve sign-up is not offered from page content for now, so a post
+// asking for the sign-up CTA gets the demo one instead. That is most posts:
+// the ones with no `cta` block (or no `type`) reach this through the
+// fallback, the rest ask for `sign-up` or a typo'd `signup`.
+//
+// Those posts' own `cta.title`/`cta.description` are ignored too (see
+// `heading`/`body`): they pitch signing up or a free trial in the copy
+// directly above the button, which would otherwise now sit above a Book a
+// Demo. Ignoring the override keeps every post's copy truthful without
+// editing their markdown, so putting sign-up back is this block and nothing
+// else. nuxt/server/routes/blog/index.xml.ts mirrors this for the feed.
+const SIGNUP_TYPES = new Set(['sign-up', 'signup'])
+const KNOWN_TYPES = new Set(['demo', 'contact', 'pricing'])
+const FALLBACK_TYPE = 'demo'
 const ctaType = computed(() => {
     const type = props.cta?.type
-    return type && KNOWN_TYPES.has(type) ? type : 'sign-up'
+    return type && KNOWN_TYPES.has(type) ? type : FALLBACK_TYPE
 })
 const currentCta = computed(() => CTA_VARIANTS[ctaType.value])
+const isRedirectedSignUp = computed(() => SIGNUP_TYPES.has(props.cta?.type ?? ''))
+const heading = computed(() => (isRedirectedSignUp.value ? currentCta.value.title : props.cta?.title || currentCta.value.title))
+const body = computed(() => (isRedirectedSignUp.value ? currentCta.value.description : props.cta?.description || currentCta.value.description))
 
 // Kept as-is from Eleventy for data continuity - fires alongside, not
 // instead of, each Cta* component's own cta-* event.
@@ -53,11 +63,10 @@ function onCtaClick (event: MouseEvent) {
 <template>
   <div class="ff-blue-card blog-post-cta p-8 sm:p-12 m-auto">
     <div class="flex flex-col gap-6 sm:gap-8 text-center sm:text-left">
-      <h3 class="mt-0 mb-0 !text-3xl text-indigo-800">{{ cta?.title || currentCta.title }}</h3>
-      <p class="mt-0 mb-0 max-w-4xl mx-auto sm:mx-0 leading-relaxed">{{ cta?.description || currentCta.description }}</p>
+      <h3 class="mt-0 mb-0 !text-3xl text-indigo-800">{{ heading }}</h3>
+      <p class="mt-0 mb-0 max-w-4xl mx-auto sm:mx-0 leading-relaxed">{{ body }}</p>
       <div class="flex justify-center sm:justify-start" @click="onCtaClick">
-        <CtaSignUp v-if="ctaType === 'sign-up'" variant="highlight" position="blog-post-cta" />
-        <CtaBookDemo v-else-if="ctaType === 'demo'" variant="highlight" position="blog-post-cta" />
+        <CtaBookDemo v-if="ctaType === 'demo'" variant="highlight" position="blog-post-cta" />
         <CtaContactUs v-else-if="ctaType === 'contact'" variant="highlight" position="blog-post-cta" />
         <CtaPricing v-else variant="highlight" position="blog-post-cta" />
       </div>

nuxt/components/RoiCalculator.vue

@@ -246,7 +246,6 @@ const faultFields = [
       </div>
 
       <div class="mt-6 flex flex-col sm:flex-row gap-3">
-        <CtaSignUp variant="highlight" :position="ctaPosition" />
         <CtaBookDemo variant="ghost" color="white" icon="i-lucide-arrow-right" :position="ctaPosition" />
       </div>
       <p class="text-xs text-indigo-200 mt-4 leading-snug">Directional estimate for comparison, not a quote. Every input is yours to change.</p>

nuxt/components/content/AgentSetupTabs.vue

@@ -46,7 +46,7 @@ const CLIENTS = [
         name: 'FlowFuse Expert',
         builtIn: true,
         step1Title: 'Sign in to FlowFuse',
-        step1Body: 'A new account puts you in a hosted instance with Expert already in the editor. Nothing to add, no connector, no token.',
+        step1Body: 'A hosted instance has the FlowFuse Expert already in the editor. Nothing to add, no connector, no token.',
         step2Title: 'Or start with the Device Agent',
         step2Body: 'Already running Node-RED on your own hardware? Connect it as a remote instance and Expert works there in the same way.',
         step2Label: 'Install the Device Agent',
@@ -177,7 +177,7 @@ function selectClient (id: string) {
         <p class="ff-agent-step__title"><span class="ff-agent-step__num">01</span>{{ client.step1Title || STEP1.title }}</p>
         <p class="ff-agent-step__body">{{ client.step1Body || STEP1.description }}</p>
         <div v-if="client.builtIn" class="ff-agent-step__cta">
-          <CtaSignUp variant="primary" :position="`${surface}-tab-expert`" class="w-full" />
+          <CtaSignIn variant="primary" :position="`${surface}-tab-expert`" class="w-full" />
         </div>
         <div v-else class="ff-agent-step__cta">
           <FfCommand :command="client.step1Command || ENDPOINT" event="cta-copy-mcp-endpoint" :position="pos(client.id)" stacked host-swap :wrap="Boolean(client.step1Command)" />

nuxt/components/landing/Abm.vue

@@ -48,7 +48,6 @@ defineProps<{
             </div>
             <div class="md:mt-3 gap-4 hidden md:flex md:flex-row md:items-start md:justify-start md:m-0">
               <CtaBookDemo variant="primary" position="hero" class="min-h-[40px]" />
-              <CtaSignUp variant="ghost" position="hero" icon="i-lucide-arrow-right" />
             </div>
           </div>
           <div class="md:w-2/5 flex-grow relative">
@@ -58,7 +57,6 @@ defineProps<{
           </div>
           <div class="flex flex-col sm:flex-row md:hidden gap-3">
             <CtaBookDemo variant="primary" position="hero-mobile" class="w-full mt-12 min-h-[40px]" />
-            <CtaSignUp variant="ghost" position="hero-mobile" icon="i-lucide-arrow-right" class="w-full m-auto sm:mt-12" />
           </div>
         </div>
       </div>
@@ -184,7 +182,6 @@ defineProps<{
         <p class="text-center">{{ page.ctaSection.description }}</p>
         <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center mt-8">
           <CtaBookDemo variant="primary" position="secondary" class="min-h-[40px]" />
-          <CtaSignUp variant="primary-outlined" position="secondary" class="min-h-[40px]" />
         </div>
       </div>
     </div>

nuxt/components/use-case/ClosingCta.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 // The closing CTA band that layouts/use-case.njk and src/use-cases.njk both ended on.
-// The markup and the sign-up button are identical; they differ only in the lead CTA
-// (the layout asks for a demo, the listing asks for contact), so that stays a prop
-// rather than being flattened to one of the two.
+// The markup is identical; they differ only in the CTA (the layout asks for a demo,
+// the listing asks for contact), so that stays a prop rather than being flattened
+// to one of the two.
 withDefaults(defineProps<{
     heading?: string
     description?: string
     lead?: 'book-demo' | 'contact-us'
 }>(), {
     heading: 'See it on your operations',
-    description: 'Talk to an expert, or get started with FlowFuse today.',
+    description: 'Talk to an expert about your operations.',
     lead: 'book-demo',
 })
 </script>
@@ -22,7 +22,6 @@ withDefaults(defineProps<{
       <div class="flex flex-wrap gap-4 justify-center">
         <CtaBookDemo v-if="lead === 'book-demo'" variant="highlight" position="footer" class="min-h-[40px]" />
         <CtaContactUs v-else variant="highlight" position="footer" class="min-h-[40px]" />
-        <CtaSignUp variant="primary-outlined" position="footer" class="min-h-[40px]" />
       </div>
     </div>
   </div>

nuxt/pages/index.vue

@@ -136,7 +136,6 @@ useSchemaOrg([
                       <div class="flex flex-col mt-12">
                           <div class="m-auto flex gap-4 items-center justify-center flex-row">
                               <CtaBookDemo variant="highlight" position="hero" />
-                              <CtaSignUp variant="ghost" color="white" position="hero" icon="i-lucide-arrow-right" />
                           </div>
                       </div>
                   </div>
@@ -222,7 +221,6 @@ useSchemaOrg([
           <p>Whether you're extending an existing system, standardizing a proven solution across sites, or connecting OT and IT data flows, FlowFuse gives your team the platform to <strong>build once and run everywhere</strong>.</p>
           <div class="flex gap-4 items-center max-md:justify-center flex-wrap mt-6">
               <CtaBookDemo variant="primary" position="secondary" />
-              <CtaSignUp variant="ghost" position="secondary" icon="i-lucide-arrow-right" />
           </div>
       </div>
   </div>
@@ -380,7 +378,7 @@ useSchemaOrg([
       <!-- Get Started -->
       <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
           <p class="text-white text-5xl font-medium m-0">Get Started with FlowFuse</p>
-          <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">Your first operational application could be running this week. Book a demo to see how, or start a free trial and build it yourself.</p>
+          <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">Your first operational application could be running this week. Book a demo and we will show you how.</p>
           <CtaBookDemo variant="highlight" position="get-started" />
       </div>
       <!-- FF Content -->

nuxt/pages/industries/index.vue

@@ -7,7 +7,7 @@
 //    industriesLegacy (the seven restored pages, transitional) and industries (the
 //    automotive-page template, starting with automotive itself and industrial-machinery).
 //    Once industriesLegacy is retired this page only needs the second query.
-//  - The CTA macros become <CtaContactUs> and <CtaSignUp>.
+//  - The CTA macro becomes <CtaContactUs>.
 const { data: legacyIndustries } = await useAsyncData('industries-legacy-listing', () =>
     queryCollection('industriesLegacy').select('slug', 'seoMeta', 'hero').all()
 )
@@ -92,10 +92,9 @@ useSeoMeta({
     <div class="w-full px-6 py-20">
       <div class="ff-blue-card max-md:max-w-xl md:max-w-screen-lg mx-auto pt-12 pb-10 text-center">
         <h3 class="mb-4 w-full text-center">See it in your plant</h3>
-        <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">Talk to an expert, or get started with FlowFuse today.</p>
+        <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">Talk to an expert about your plant.</p>
         <div class="flex flex-wrap gap-4 justify-center">
           <CtaContactUs variant="highlight" position="footer" class="min-h-[40px]" />
-          <CtaSignUp variant="primary-outlined" position="footer" class="min-h-[40px]" />
         </div>
       </div>
     </div>

nuxt/pages/integrations/opcua.vue

@@ -318,7 +318,6 @@ function toggleFaq (i: number) {
             </p>
             <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
               <CtaBookDemo variant="highlight" position="opcua-hero" />
-              <CtaSignUp variant="ghost" position="opcua-hero" icon="i-lucide-arrow-right" />
             </div>
           </div>
           <div class="md:w-1/2 flex-grow relative max-md:mt-12">
@@ -628,10 +627,9 @@ function toggleFaq (i: number) {
       <div class="max-w-screen-lg mx-auto">
         <div class="rounded-xl px-6 md:px-9 py-8 md:py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
           <h2 class="text-white font-medium">Ready to build an OPC UA client or server the right way?</h2>
-          <p class="text-indigo-50 font-light text-xl max-w-3xl mt-0">No per-tag licensing. No Security Policy left at None. Connect to any OPC UA server, host your own, and bridge both to Modbus, MQTT, or a historian without extra middleware. See it live, or start free.</p>
+          <p class="text-indigo-50 font-light text-xl max-w-3xl mt-0">No per-tag licensing. No Security Policy left at None. Connect to any OPC UA server, host your own, and bridge both to Modbus, MQTT, or a historian without extra middleware. See it live.</p>
           <div class="flex flex-col sm:flex-row gap-4 items-center">
             <CtaBookDemo variant="highlight" position="opcua-final" />
-            <CtaSignUp variant="ghost" color="white" icon="i-lucide-arrow-right" position="opcua-final" />
           </div>
         </div>
       </div>

nuxt/pages/landing/plc.vue

@@ -271,7 +271,6 @@ useSchemaOrg([
                       </p>
                       <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
                           <CtaContactUs variant="primary" position="primary" class="min-h-[40px]" />
-                          <CtaSignUp variant="primary-outlined" position="primary" class="min-h-[40px]" />
                       </div>
                   </div>
                   <div class="md:w-2/5 flex-grow relative">
@@ -560,11 +559,10 @@ useSchemaOrg([
               <div class="ff-blue-card">
                   <h4 class="mb-6 w-full text-center">Ready to unlock your PLC data?</h4>
                   <p class="text-center text-gray-600 mb-8">
-                      Stop paying for expensive gateways and inflexible SCADA licenses. See how FlowFuse connects your PLCs to the modern industrial stack, in a live demo or a free trial.
+                      Stop paying for expensive gateways and inflexible SCADA licenses. See how FlowFuse connects your PLCs to the modern industrial stack, in a live demo.
                   </p>
                   <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
                       <CtaBookDemo variant="primary" position="secondary" class="min-h-[40px]" />
-                      <CtaSignUp variant="primary-outlined" position="secondary" class="min-h-[40px]" />
                   </div>
               </div>
           </div>

nuxt/pages/node-red/index.vue

@@ -122,9 +122,9 @@ useSchemaOrg([
               <p><span class="font-semibold">FlowFuse enhances Node-RED with enterprise features</span> to accelerate digitalization and optimize industrial processes.</p>
               <p class="md:mb-6">Ready to <span class="font-semibold">get started building with Node-RED</span>? There are two ways in.</p>
               <div class="max-md:hidden md:mb-10">
-                  <CtaSignUp variant="primary" position="nodered" class="min-h-[40px] md:inline" />
+                  <CtaBookDemo variant="primary" position="nodered" class="min-h-[40px] md:inline" />
                   <p class="font-light mt-3 mb-0">
-                      Nothing to install, you get an editor in the browser. Or
+                      See FlowFuse's hosted Node-RED editor with our team. Or
                       <a href="#install-node-red-from-your-terminal" @click="capture('cta-install-terminal', {'position': 'nodered-hero'})">install Node-RED on your own machine</a>
                       with one command.
                   </p>
@@ -134,9 +134,9 @@ useSchemaOrg([
               <img src="/images/pseudo-editor.png" alt="Node-RED pseudo UI" width="500" class="w-full h-auto">
           </div>
           <div class="md:hidden w-full max-w-md m-auto">
-              <CtaSignUp variant="primary" position="nodered-mobile" class="flex flex-col w-full" />
+              <CtaBookDemo variant="primary" position="nodered-mobile" class="flex flex-col w-full" />
               <p class="font-light mt-3 mb-0 text-center">
-                  Nothing to install, you get an editor in the browser. Or
+                  See FlowFuse's hosted Node-RED editor with our team. Or
                   <a href="#install-node-red-from-your-terminal" @click="capture('cta-install-terminal', {'position': 'nodered-hero'})">install Node-RED on your own machine</a>
                   with one command.
               </p>
@@ -145,7 +145,7 @@ useSchemaOrg([
   </div>
 
       <!--Install commands, directly under the hero. This is the second of the two routes
-          the hero names: TRY IT NOW signs you up for a hosted editor, this one runs
+          the hero names: BOOK A DEMO walks you through the hosted editor, this one runs
           Node-RED on hardware you already have.-->
       <div id="install-node-red-from-your-terminal" class="w-full scroll-mt-24 pb-16">
           <div class="max-w-screen-lg mx-auto px-6">

nuxt/pages/platform/dashboard.vue

@@ -13,8 +13,8 @@
 //  - The three tutorial <lite-youtube> elements become <LiteYoutube>.
 //  - The hero and footer CTAs were hand-written <a class="ff-btn"> links, so the footer
 //    "Book a Demo" fired capture('cta-book-demo') from an inline onclick and the others
-//    fired nothing. They are <CtaBookDemo>, <CtaPricing> and <CtaSignUp> now, which is
-//    where those three destinations' copy and events are defined.
+//    fired nothing. They are <CtaBookDemo> and <CtaPricing> now, which is
+//    where those destinations' copy and events are defined.
 const RESOURCES = [
     { url: '/blog/2024/03/dashboard-getting-started/', title: 'Getting started with FlowFuse Dashboard', image: '/blog/2024/03/images/getting-started-with-dashboard-2.png' },
     { url: '/webinars/2024/node-red-dashboard-multi-user/', title: 'Multi-user dashboards: a screen per person', image: '/images/webinars/multi-user-dashboard-with-node-red-dashboard-2-0-webinar-2024-february.jpg' },
@@ -294,7 +294,6 @@ useSeoMeta({
           </p>
           <div class="flex flex-col sm:flex-row gap-4 items-center">
             <CtaBookDemo variant="highlight" position="dashboard-footer" uppercase />
-            <CtaSignUp variant="ghost" position="dashboard-footer" color="white" uppercase />
           </div>
         </div>
       </div>

nuxt/pages/platform/why-flowfuse.vue

@@ -8,7 +8,7 @@
 //  - The four quote glyphs were {% include %}d raw at w-16 with no ff-icon wrapper, so
 //    they resolve through <UIcon> against the installed heroicons set.
 //  - faq.njk becomes <BlogFaq> plus useSchemaOrg.
-//  - The CTA macros become <CtaBookDemo> and <CtaSignUp>.
+//  - The CTA macro becomes <CtaBookDemo>.
 //  - The <title> and meta description are FIXED here. This page's frontmatter carried
 //    MES's meta block verbatim, so production serves
 //    "FlowFuse for your own MES • FlowFuse" and the MES description on
@@ -83,7 +83,6 @@ useSchemaOrg([
               </div>
               <div class="flex gap-3 max-md:mx-auto max-sm:flex-col max-md:justify-center">
                 <CtaBookDemo variant="primary" position="primary" class="min-h-[40px]" />
-                <CtaSignUp variant="ghost" position="primary" icon="i-lucide-arrow-right" class="min-h-[40px]" />
               </div>
             </div>
             <div class="flex max-md:hidden justify-center m-auto max-w-[550px] ff-image-rounded rounded-lg drop-shadow-lg w-full">