From 7352b820c52d7364751ff242284eae6f50353535 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 15 Jun 2026 12:21:58 -0500
Subject: [PATCH] Website: Add CTA to article template (#47546)

Closes: https://github.com/fleetdm/fleet/issues/47406

Changes:
- Added a CTA to the article template page.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added Call-To-Action sections to certain article pages with a "Read
case studies" link and a "Try it yourself" sign-up button for select
categories.

* **Style**
* Updated CTA styling and layout, including a new CTA container and
button row.
* Improved mobile behavior: buttons stack, center, and become full-width
on small screens.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../styles/pages/articles/basic-article.less  | 52 ++++++++++++++-----
 .../views/pages/articles/basic-article.ejs    | 12 ++++-
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less
index 83f8096c63..90963f36c8 100644
--- a/website/assets/styles/pages/articles/basic-article.less
+++ b/website/assets/styles/pages/articles/basic-article.less
@@ -796,20 +796,33 @@
       }
     }
   }
-  [purpose='bottom-cta'] {
-    padding-bottom: 40px;
-    h3 {
-      margin-bottom: 24px;
+
+  [purpose='cta-container'] {
+    padding-top: 64px;
+  }
+  [purpose='article-cta'] {
+    border-top: 2px solid #E2E4EA;
+    padding: 64px 0px;
+    h2 {
+      .section-heading();
+      margin-top: 0px;
+      margin-bottom: 8px;
     }
-    [purpose='next-steps-button'] {
-      padding: 16px 32px;
-      line-height: 21px;
-      font-size: 16px;
-      img {
-        height: 24px;
-      }
-      a {
-        color: unset;
+    p {
+      .body-l();
+    }
+    [purpose='button-row'] {
+      display: flex;
+      flex-direction: row;
+      gap: 24px;
+      [purpose='cta-button'] {
+        .cta-button();
+        padding: 8px 16px;
+        color: #FFF;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 21px;
       }
     }
   }
@@ -911,7 +924,6 @@
         margin-bottom: 16px;
       }
     }
-
   }
   @media (max-width: 575px) {
     [purpose='page-container'] {
@@ -923,6 +935,18 @@
         margin-bottom: 32px;
       }
     }
+    [purpose='article-cta'] {
+      [purpose='button-row'] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        [purpose='cta-button'] {
+          width: 100%;
+        }
+
+      }
+    }
     [purpose='article-details'] {
       flex-direction: column;
       [purpose='divider'] {
diff --git a/website/views/pages/articles/basic-article.ejs b/website/views/pages/articles/basic-article.ejs
index c7d1a250db..64df4f8663 100644
--- a/website/views/pages/articles/basic-article.ejs
+++ b/website/views/pages/articles/basic-article.ejs
@@ -93,7 +93,7 @@
             </div>
           </div>
         </div>
-        <div purpose="article-content" parasails-has-no-page-script>
+        <div purpose="article-content" :class="[[['articles', 'releases', 'guides', 'announcements', 'podcasts', 'securing'].includes(articleCategorySlug) ? 'pb-0' : '']]" parasails-has-no-page-script>
           <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, thisPage.htmlId)))) %>
 
           <div purpose="about-fleet-section" v-if="articleCategorySlug === 'customers'">
@@ -105,6 +105,16 @@
 
             <p>Fleet offers total deployment flexibility: on-premises, air-gapped, container-native (Docker and Kubernetes), or cloud-agnostic (AWS, Azure, GCP, DigitalOcean). Organizations can also choose fully managed SaaS via Fleet Cloud, ensuring complete control over data residency and legal jurisdiction.</p>
           </div>
+          <div purpose="cta-container">
+            <div purpose="article-cta" v-if="['articles', 'releases', 'guides', 'announcements', 'podcasts', 'securing'].includes(articleCategorySlug)">
+              <h2>Manage all your devices like it's 2026</h2>
+              <p>Open MDM, patching, and vuln management for every OS.</p>
+              <div purpose="button-row">
+                <a purpose="cta-button" href="/customers">Read case studies</a>
+                <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>