From b82ab6b2f6e31589a40048f3be9005594658bc32 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 17 Jun 2021 11:11:17 +0200
Subject: [PATCH] Added static benefits list to products card

---
 .../gh-membership-products-alpha.hbs          |  8 ++++
 ghost/admin/app/styles/layouts/products.css   | 42 +++++++++++++++----
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/app/components/gh-membership-products-alpha.hbs b/ghost/admin/app/components/gh-membership-products-alpha.hbs
index 384af7b6b4..8dcf6f3feb 100644
--- a/ghost/admin/app/components/gh-membership-products-alpha.hbs
+++ b/ghost/admin/app/components/gh-membership-products-alpha.hbs
@@ -16,6 +16,14 @@
                 <span class="gh-badge gh-badge-green">Available in Portal</span>
             {{/if}}
         </div>
+        <div class="gh-product-card-block">
+            <h4>Benefits <span class="counter">(3)</span></h4>
+            <ul class="benefits">
+                <li>{{svg-jar "check"}} Access to all J&amp;A Watch J&amp;A episodes, past and future!</li>
+                <li>{{svg-jar "check"}} An exclusive AD-FREE extra video episode of J&amp;A AMA every other week!</li>
+                <li>{{svg-jar "check"}} Includes Discord benefits</li>
+            </ul>
+        </div>
         <div class="gh-product-card-block">
             <div class="gh-product-price-container">
                 <div class="gh-product-card-price">
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index cd6553ea8a..550ba02a02 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -47,27 +47,55 @@
     padding-left: 16px;
 }
 
+.gh-product-card-block h4 {
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.gh-product-card-block h4 .counter {
+    font-weight: 400;
+    color: var(--midgrey);
+}
+
 .gh-product-card-name {
     font-size: 1.8rem;
     font-weight: 600;
     margin: 0;
 }
 
-.gh-product-card-heading {
-    display: inline-block;
-    font-size: 1.3rem;
-    font-weight: 600;
-    margin-bottom: 2px;
-}
-
 .gh-product-card-description {
+    font-size: 1.3rem;
     line-height: 1.45em;
     margin: 4px 20px 4px 0;
     color: var(--midgrey);
 }
 
+.gh-product-card-block ul.benefits {
+    list-style: none;
+    margin: 10px 0 0;
+    padding: 0;
+}
+
+.gh-product-card-block ul.benefits li {
+    display: flex;
+    align-items: flex-start;
+    font-size: 1.3rem;
+    line-height: 1.45em;
+    color: var(--middarkgrey);
+}
+
+.gh-product-card-block ul.benefits li svg {
+    flex-basis: 18px;
+    width: 14px;
+    height: 14px;
+    min-width: 14px;
+    margin-top: 3px;
+    color: var(--black);
+}
+
 .gh-product-price-container {
     display: flex;
+    margin-left: 20px;
 }
 
 .gh-product-card-price {