Merge pull request #5725 from FlowFuse/JoycePlaysFootball-patch-2

Update CTA section on main navigation

Author: Yndira-E

nuxt/components/AppHeader.vue

@@ -149,7 +149,7 @@ onMounted(() => {
 
       <!-- Mobile hamburger -->
       <div class="flex items-center gap-2 md:hidden relative z-20">
-        <CtaContactUs variant="primary" position="header-mobile" />
+        <CtaBookDemo variant="primary" position="header-mobile" />
         <button id="nav-toggle" class="text-gray-700 flex items-center text-red-hero">
           <svg class="burger fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
           <svg class="close fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
@@ -187,7 +187,7 @@ onMounted(() => {
       <ul class="cta hidden md:flex flex-row items-center justify-end font-medium text no-underline z-10 bg-transparent w-auto">
         <li class="hidden md:flex"><CtaSignUp variant="nav-text" position="main-nav" padded class="ff-nav-freetrial text-base" /></li>
         <li class="flex">
-          <CtaContactUs variant="primary" position="main-nav" class="ml-2" />
+          <CtaBookDemo variant="primary" position="main-nav" class="ml-2" />
         </li>
       </ul>
     </nav>
@@ -198,7 +198,7 @@ onMounted(() => {
         <CtaSignIn variant="primary-outlined" position="mobile-cta-bar" />
         <CtaSignUp variant="primary-outlined" position="mobile-cta-bar" />
       </div>
-      <CtaContactUs variant="primary" position="mobile-cta-bar" />
+      <CtaBookDemo variant="primary" position="mobile-cta-bar" />
     </div>
   </header>
 </template>

nuxt/content/handbook/marketing/website.md

@@ -140,6 +140,8 @@ The site has five main call-to-action destinations, each with **fixed copy** —
 | `<CtaBookDemo>`  | `/book-demo/`                     | "Book a Demo"                                        |
 | `<CtaPricing>`   | `/pricing/`                       | "View Pricing"                                       |
 
+Contact Us vs. Book a Demo: these two CTAs carry different intent signals and should be treated accordingly. Contact Us is for general inquiries — support questions, partnership asks, anything that isn't a sales-ready request. Book a Demo is a high-intent motion: someone clicking it has effectively raised their hand to buy, so the path from click to booked call should have as little friction as possible. This is why Book a Demo needs to be visible from the main nav and not buried.
+
 If a page needs different wording than what's listed above, that's a sign the destination needs a sixth CTA, not a new prop on these five or custom inline code.
 
 **These components only exist on Nuxt-rendered pages** (`nuxt/pages/`, `nuxt/content/`), part of the site is still served by Eleventy and doesn't have access to them yet. On an Eleventy page, a CTA is still a hand-written `<a class="ff-btn ...">` link.

src/_includes/layouts/base.njk

@@ -183,8 +183,8 @@ eleventyComputed:
                         {% include "components/flowfuse-square.svg" %}
                     </a>
                     <div class="flex items-center gap-2 md:hidden relative z-20">
-                        <a class="ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/contact-us" onclick="capture('cta-talk-us', {'position': 'header-mobile'})">
-                            Contact Us
+                        <a class="ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'header-mobile'})">
+                            Book a Demo
                         </a>
                         <button id="nav-toggle" class="text-gray-700 flex items-center text-red-hero">
                             <svg class="burger fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
@@ -224,8 +224,8 @@ eleventyComputed:
                     <ul class="cta hidden md:flex flex-row items-center justify-end font-medium text no-underline z-10 bg-transparent w-auto">
 			            <li class="hidden md:flex"><a class="ff-nav-freetrial" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'header'})"><span class="ff-nav-label">Free Trial</span></a></li>
                         <li class="flex">
-                            <a class="ml-2 ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/contact-us" onclick="capture('cta-talk-us', {'position': 'header'})">
-                                Contact Us
+                            <a class="ml-2 ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'header'})">
+                                Book a Demo
                             </a>
                         </li>
                     </ul>
@@ -236,7 +236,7 @@ eleventyComputed:
                         <a href="{{ site.appURL }}" class="ff-btn ff-btn--primary-outlined">Sign In</a>
                         <a href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'header'})" class="ff-btn ff-btn--primary-outlined">Free Trial</a>
                     </div>
-                    <a class="ff-btn ff-btn--primary" href="/contact-us" onclick="capture('cta-talk-to-sales', {'position': 'header'})">Contact Us</a>
+                    <a class="ff-btn ff-btn--primary" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'mobile-cta-bar'})">Book a Demo</a>
                 </div>
             </header>
     <!-- Main Content: wrapped in the flex-grow base so the column layout still