Website: personalize /better page for Secure Frame users (#20890)

Related to: https://github.com/fleetdm/confidential/issues/7227

Changes:
- Added a banner to the /better page that is visible to users who visit
it with a `?utm_content=secureframe` query param.
- Updated the `<animated-arrow-button>` component to support customizing
text and arrow color.

website/api/controllers/view-transparency.js

@@ -6,7 +6,6 @@ module.exports = {
 
   description: 'Display "Transparency" page.',
 
-
   exits: {
 
     success: {
@@ -17,9 +16,8 @@ module.exports = {
 
 
   fn: async function () {
-
     // Respond with view.
-    return {};
+    return {showSecureframeBanner: this.req.param('utm_content') === 'secureframe'};
 
   }
 

website/assets/js/components/animated-arrow-button.component.js

@@ -14,6 +14,8 @@ parasails.registerComponent('animatedArrowButton', {
   //  ╩  ╩╚═╚═╝╩  ╚═╝
   props: [
     'buttonType',
+    'arrowColor',// For customizing the color of the animated arrow. e.g., arrow-color="#FFF"
+    'textColor',// For customizing the color of the button text. e.g., text-color="#FFF"
   ],
 
   //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
@@ -22,6 +24,8 @@ parasails.registerComponent('animatedArrowButton', {
   data: function (){
     return {
       type: 'secondary',
+      strokeColor: this.arrowColor ? this.arrowColor : '#FF5C83',
+      fontColor: this.textColor ? this.textColor : '#192147'
       // FUTURE: support more button types (primary and secondary)
       // type: this.buttonType && this.buttonType === 'primary' ? 'primary' : 'secondary',
     };
@@ -32,8 +36,8 @@ parasails.registerComponent('animatedArrowButton', {
   //  ╩ ╩ ╩ ╩ ╩╩═╝
   template: `
   <a :class="type" style="text-decoration: none;">
-    <span purpose="button-text"><slot name="default"></slot></span>
-    <svg purpose="animated-arrow" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <span purpose="button-text" :style="'color: '+fontColor+';'"><slot name="default"></slot></span>
+    <svg purpose="animated-arrow" :style="'stroke: '+strokeColor+';'" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
       <path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
       <path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>

website/assets/js/pages/transparency.page.js

@@ -4,6 +4,7 @@ parasails.registerPage('transparency', {
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
     //…
+    showSecureframeBanner: false,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗

website/assets/styles/components/animated-arrow-button.component.less

@@ -21,7 +21,7 @@
     height: 12px;
     width: 12px;
     fill: none;
-    stroke: #FF5C83;
+    // stroke: #FF5C83; « Note: this is overridden by the arrow-color prop;
   }
   [purpose='arrow-line'] {
     opacity: 0;

website/assets/styles/pages/transparency.less

@@ -128,6 +128,31 @@
       }
     }
   }
+  [purpose='secureframe-banner'] {
+    width: 100%;
+    text-align: center;
+    color: #FFF;
+    h2, p {
+      color: #FFF;
+    }
+    h2 {
+      margin-bottom: 16px;
+    }
+    [parasails-component='animated-arrow-button'] {
+      font-weight: 600;
+    }
+    border-radius: 16px;
+    background: #091922;
+    padding: 32px;
+    img {
+      height: 48px;
+      width: 45.474px;
+      margin-bottom: 16px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
   [purpose='feature-headline'] {
     max-width: 510px;
     margin-bottom: 80px;
@@ -332,6 +357,12 @@
         margin-right: auto;
       }
     }
+    [purpose='secureframe-banner'] {
+      padding: 32px 16px;
+      h2 {
+        font-size: 24px;
+      }
+    }
   }
 
   @media (max-width: 375px) {

website/views/pages/transparency.ejs

@@ -25,7 +25,14 @@
       <div purpose="logos" class="mx-auto">
         <logo-carousel></logo-carousel>
       </div>
-    
+    <div purpose="secureframe-section" v-if="showSecureframeBanner">
+      <div purpose="secureframe-banner" class="d-flex flex-column">
+        <img alt="Secureframe logo" src="/images/logo-secureframe-46x48@2x.png">
+        <h2>Automate compliance. <br>Improve security. Reduce risk.</h2>
+        <p>Build trust with customers using automation backed by world-class experts</p>
+      <animated-arrow-button class="mx-auto" href="https://secureframe.com" target="_blank" text-color="#FFFFFF" arrow-color="#0FD082">Learn more</animated-arrow-button>
+      </div>
+    </div>
     <div purpose="page-section">
       <div purpose="feature-headline" style="max-width: 580px;">
         <h2>Don’t make me think about IT</h2>