From c6f922ba6b5657d95d54a0b429b93697de1e49be Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 16 Dec 2024 17:07:02 -0600
Subject: [PATCH] Website: add links to recent case studies to /testimonials.
 (#24814)

Related to: #24746

Changes:
- Added links to recent case studies articles to the /testimonials page.
---
 website/assets/styles/pages/testimonials.less | 38 +++++++++++++++++++
 website/views/pages/testimonials.ejs          | 26 +++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/website/assets/styles/pages/testimonials.less b/website/assets/styles/pages/testimonials.less
index 787c64738c..f825fed4ab 100644
--- a/website/assets/styles/pages/testimonials.less
+++ b/website/assets/styles/pages/testimonials.less
@@ -100,6 +100,34 @@
     }
   }
 
+  [purpose='section-headline'] {
+    padding-top: 64px;
+    padding-bottom: 64px;
+    p {
+      margin-bottom: 0px;
+    }
+  }
+  [purpose='articles'] {
+    padding-bottom: 64px;
+  }
+  [purpose='article-link'] {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--Fleet-Black-10, #E2E4EA);
+    [parasails-component='animated-arrow-button'] {
+      width: fit-content;
+      display: flex;
+      align-items: center;
+      padding: 0;
+      text-decoration: none;
+      font-weight: 700;
+      [purpose='button-text'] {
+        width: 100%;
+      }
+    }
+  }
+
+
   [purpose='testimonials-container'] {
     columns: 3;
     margin-bottom: 32px;
@@ -427,6 +455,16 @@
         height: 304px;
       }
     }
+    [purpose='section-headline'] {
+      padding-top: 32px;
+      padding-bottom: 32px;
+      p {
+        margin-bottom: 0px;
+      }
+    }
+    [purpose='articles'] {
+      padding-bottom: 48px;
+    }
     [purpose='statistics'] {
       [purpose='statistics-column'] {
         display: flex;
diff --git a/website/views/pages/testimonials.ejs b/website/views/pages/testimonials.ejs
index 5fd1f40323..d4dd1c7153 100644
--- a/website/views/pages/testimonials.ejs
+++ b/website/views/pages/testimonials.ejs
@@ -112,6 +112,32 @@
         </div>
       </div>
       <div purpose="page-section">
+        <div purpose="section-headline">
+          <h2>Case strudies</h2>
+          <p>Real-world stories of why the community and customers love Fleet.</p>
+        </div>
+        <div purpose="articles">
+          <div purpose="articles">
+            <div purpose="article-link">
+              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/consolidate-multiple-tools-with-fleet">🥀 Leading financial company consolidates multiple tools with Fleet</animated-arrow-button>
+            </div>
+            <div purpose="article-link">
+              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/global-cloud-platform-simplifies-device-management-with-fleet">🪟 Global edge cloud platform simplifies device management with Fleet</animated-arrow-button>
+            </div>
+            <div purpose="article-link">
+              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/worldwide-security-and-authentication-platform-chooses-fleet-for-linux">🚪 Worldwide security and authentication platform chooses Fleet for Linux management</animated-arrow-button>
+            </div>
+            <div purpose="article-link">
+              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/large-gaming-company-enhances-server-observability-with-fleet">🔌 Large gaming company enhances server observability with Fleet</animated-arrow-button>
+            </div>
+            <div purpose="article-link">
+              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/vehicle-manufacturer-transitions-to-fleet-for-endpoint-security">🚪 Vehicle manufacturer transitions to Fleet for endpoint security</animated-arrow-button>
+            </div>
+            <div purpose="article-link">
+              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/foursquare-quickly-migrates-to-fleet">🚪 Foursquare quickly migrates to Fleet for Device Management</animated-arrow-button>
+            </div>
+          </div>
+        </div>
         <div class="d-flex flex-row align-items-center justify-content-center">
           <a purpose="share-button" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml" target="_blank">Share your story</a>
         </div>