From 26757ebdf71d307d0ce9467cfbdd660416201ccd Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 6 Dec 2024 15:58:15 -0600
Subject: [PATCH] Website: update cards on /testimonials page to be clickable
 links (#24498)

Closes: #24104

Changes:
- Updated the cards on the /testimonials page to be clickable links to
the author's LinkedIn profile page.
---
 website/assets/styles/pages/testimonials.less |  7 +++++++
 website/views/pages/testimonials.ejs          | 18 +++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/website/assets/styles/pages/testimonials.less b/website/assets/styles/pages/testimonials.less
index 7c797eb394..787c64738c 100644
--- a/website/assets/styles/pages/testimonials.less
+++ b/website/assets/styles/pages/testimonials.less
@@ -103,6 +103,13 @@
   [purpose='testimonials-container'] {
     columns: 3;
     margin-bottom: 32px;
+    a {
+      color: unset;
+      &:hover {
+        text-decoration: none;
+        color: unset;
+      }
+    }
   }
 
   [purpose='testimonial-card'] {
diff --git a/website/views/pages/testimonials.ejs b/website/views/pages/testimonials.ejs
index a1d1005b65..5fd1f40323 100644
--- a/website/views/pages/testimonials.ejs
+++ b/website/views/pages/testimonials.ejs
@@ -30,7 +30,7 @@
       <div v-if="selectedContent === 'mdm'">
         <div purpose="testimonials-container" class="card-columns">
           <% for(let testimonial of testimonialsForMdm) {%>
-            <div purpose="testimonial-card" class="card">
+            <a href="<%- testimonial.quoteLinkUrl%>" target="_blank" purpose="testimonial-card" class="card" >
               <% if(testimonial.quoteImageFilename){ %>
                 <div purpose="logo" class="mb-4">
                   <img alt="logo" height="<%- testimonial.imageHeight%>"  src="/images/<%- testimonial.quoteImageFilename %>"/>
@@ -39,7 +39,7 @@
               <p purpose="quote">
                 <%- testimonial.quote %>
                 <%if(testimonial.youtubeVideoUrl) {%>
-                  <a purpose="video-link" @click="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</a>
+                  <span purpose="video-link" @click.prevent.self="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</span>
                 <% } %>
               </p>
               <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
@@ -51,14 +51,14 @@
                   <p purpose="job-title" class="m-0"><%- testimonial.quoteAuthorJobTitle %></p>
                 </div>
               </div>
-            </div>
+            </a>
           <% } %>
         </div>
       </div>
       <div v-if="selectedContent === 'it'">
         <div purpose="testimonials-container" class="card-columns">
           <% for(let testimonial of testimonialsForObservability) {%>
-            <div purpose="testimonial-card" class="card">
+            <a href="<%- testimonial.quoteLinkUrl%>" target="_blank" purpose="testimonial-card" class="card" >
               <% if(testimonial.quoteImageFilename){ %>
                 <div purpose="logo" class="mb-4">
                   <img alt="logo" height="<%- testimonial.imageHeight%>"  src="/images/<%- testimonial.quoteImageFilename %>"/>
@@ -67,7 +67,7 @@
               <p purpose="quote">
                 <%- testimonial.quote %>
                 <%if(testimonial.youtubeVideoUrl) {%>
-                  <a purpose="video-link" @click="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</a>
+                  <span purpose="video-link" @click.prevent.self="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</span>
                 <% } %>
               </p>
               <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
@@ -79,14 +79,14 @@
                   <p purpose="job-title" class="m-0"><%- testimonial.quoteAuthorJobTitle %></p>
                 </div>
               </div>
-            </div>
+            </a>
           <% } %>
         </div>
       </div>
       <div v-if="selectedContent === 'security'">
         <div purpose="testimonials-container" class="card-columns">
           <% for(let testimonial of testimonialsForSoftwareManagement) {%>
-            <div purpose="testimonial-card" class="card">
+            <a href="<%- testimonial.quoteLinkUrl%>" target="_blank" purpose="testimonial-card" class="card" >
               <% if(testimonial.quoteImageFilename){ %>
                 <div purpose="logo" class="mb-4">
                   <img alt="logo" height="<%- testimonial.imageHeight%>"  src="/images/<%- testimonial.quoteImageFilename %>"/>
@@ -95,7 +95,7 @@
               <p purpose="quote">
                 <%- testimonial.quote %>
                 <%if(testimonial.youtubeVideoUrl) {%>
-                  <a purpose="video-link" @click="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</a>
+                  <span purpose="video-link" @click.prevent.self="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</span>
                 <% } %>
               </p>
               <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
@@ -107,7 +107,7 @@
                   <p purpose="job-title" class="m-0"><%- testimonial.quoteAuthorJobTitle %></p>
                 </div>
               </div>
-            </div>
+            </a>
           <% } %>
         </div>
       </div>