Website: update /app-library page (#24778)

Closes: #24259
Closes: fleetdm/confidential#9070

Changes:
- Added a section about custom packages and app store apps to the
/app-library page.
- Updated the "Request an app" button to "Add an app" and updated it to
link to the maintained apps JSON.

website/assets/styles/pages/app-library.less

@@ -149,6 +149,7 @@
     margin-left: -8px;
     margin-bottom: -8px;
     margin-top: -8px;
+    padding-bottom: 32px;
   }
 
   [purpose='app-card'] {
@@ -205,6 +206,38 @@
     }
   }
 
+
+
+  [purpose='feature-cards'] {
+    margin-top: 64px;
+  }
+  [purpose='feature-card'] {
+    width: 50%;
+    &:first-of-type {
+      margin-right: 64px;
+    }
+    img {
+      height: 64px;
+      margin-right: 24px;
+    }
+    h3 {
+      color: #192147;
+      font-size: 20px;
+      font-weight: 800;
+      line-height: 120%;
+      margin-bottom: 16px;
+    }
+    p {
+      color: #515774;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 150%;
+    }
+    [purpose='feature-footnote'] {
+      color: #8B8FA2;
+    }
+  }
+
   @media (max-width: 991px) {
     [purpose='page-container'] {
       padding: 64px 32px;
@@ -232,6 +265,24 @@
         width: 100%;
       }
     }
+    [purpose='app-cards'] {
+      padding-bottom: 0px;
+    }
+    [purpose='feature-cards'] {
+      margin-top: 52px;
+    }
+    [purpose='feature-card'] {
+      width: 100%;
+      &:first-of-type {
+        margin-right: 0px;
+        margin-bottom: 48px;
+      }
+      img {
+        height: 64px;
+        margin-right: 0px;
+        margin-bottom: 16px;
+      }
+    }
   }
 
   @media (max-width: 575px) {

website/views/pages/app-library.ejs

@@ -26,7 +26,7 @@
       <div purpose="count-and-cta" class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start justify-content-sm-between justify-content-center mb-3">
         <div><p class="mb-0"><strong>{{allApps.length}} and counting....</strong></p></div>
         <div class="d-sm-block d-none">
-          <a purpose="request-button" href="/contact?sendMessage">Request an app</a>
+          <a purpose="request-button" href="https://github.com/fleetdm/fleet/edit/main/server/mdm/maintainedapps/apps.json" target="_blank">Add an app</a>
         </div>
       </div>
       <div purpose="app-cards" class="card-deck flex-wrap">
@@ -49,7 +49,28 @@
         <div purpose="app-card" class="card d-flex invisible"></div>
       </div>
       <div class="d-flex d-sm-none w-100">
-        <a purpose="request-button" href="/contact?sendMessage">Request an app</a>
+        <a purpose="request-button" href="https://github.com/fleetdm/fleet/edit/main/server/mdm/maintainedapps/apps.json" target="_blank">Add an app</a>
+      </div>
+      <div purpose="feature-cards" class="d-flex flex-md-row flex-column">
+        <div purpose="feature-card" class="d-flex flex-md-row flex-column">
+          <div>
+            <img alt="Custom packages" src="/images/[email protected]">
+          </div>
+          <div class="d-flex flex-column">
+            <h3>Custom Packages</h3>
+            <p>Upload any third-party software as a custom package to deploy all of the tools your end users need to work.</p>
+          </div>
+        </div>
+        <div purpose="feature-card" class="d-flex flex-md-row flex-column">
+          <div>
+            <img alt="App store" src="/images/[email protected]">
+          </div>
+          <div class="d-flex flex-column">
+            <h3>App store</h3>
+            <p>Manage app deployments and updates for your computers and mobile devices from any app store.</p>
+            <p purpose="feature-footnote">*Microsoft Store and Google Play coming soon</p>
+          </div>
+        </div>
       </div>
     </div>
   </div>