From dfc5df0e50cd107ab0216c2689315a4a35de2394 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 23 Feb 2024 11:14:33 +0100
Subject: [PATCH] Update case studies section

---
 src/css/styles.css               | 44 +++++++++++++++++------
 src/html/tmpl.html               | 60 +++++++++++++-------------------
 transifex/resources/website.json |  5 ++-
 3 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index 376c372b..1fc5074a 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -432,28 +432,50 @@ a {
   padding: 0;
 }
 #caseStudies ul li {
-  flex: 0 1 300px;
-}
-#caseStudies ul li a {
-  display: block;
-  height: 100%;
+  flex: 0 1 410px;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
   border-radius: 10px;
-  box-shadow: 0 0 0 1px var(--shadow-20);
-  color: var(--black);
-  background: var(--light-grey);
+  border: 1px solid var(--shadow-20);
   overflow: hidden;
+  background: var(--light-grey);
 }
 #caseStudies ul li img {
   width: 100%;
-  height: 160px;
+  height: 210px;
   object-fit: cover;
   object-position: top;
 }
 #caseStudies ul li h3 {
-  margin: .5rem 0;
+  margin: 0;
 }
 #caseStudies ul li p {
-  margin: .5rem 1rem 1rem;
+  margin: 0 1.5rem auto;
+}
+#caseStudies ul li .buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .75rem;
+  justify-content: space-between;
+  margin: 1rem 1.5rem 1.5rem;
+}
+#caseStudies ul li .buttons a {
+  margin: 0;
+  flex: 1 0 9rem;
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 5px;
+  border: 1px solid var(--shadow-20);
+  color: var(--black);
+  font-weight: 600;
+  padding: .75rem 1rem;
+  transition: 0.2s ease;
+}
+#caseStudies ul li .buttons a:hover {
+  color: var(--sunkist-lime);
+  border-color: var(--sunkist-lime);
 }
 .check-list {
   margin-left: 2rem;
diff --git a/src/html/tmpl.html b/src/html/tmpl.html
index eda040bf..156003fc 100644
--- a/src/html/tmpl.html
+++ b/src/html/tmpl.html
@@ -200,53 +200,43 @@ <h2>{{case-studies}}</h2>
           <li>
             <a href="https://blog.btcpayserver.org/case-study-bitcoin-people/" target="_blank">
               <img src="/img/case-studies/bitcoin-people.png" alt="BTCPay Server Bitcoin People Case Study" />
-              <h3>Bitcoin People</h3>
-              <p>Bitcoin People built a mobile app on top of BTCPay's API to scale bitcoin to 270 merchants in Italy with a total of €406,283 in transaction volumes.</p>
-            </a>
-          </li>
-          <li>
-            <a href="https://blog.btcpayserver.org/case-study-strainly/" target="_blank">
-              <img src="/img/case-studies/strainly.png" alt="BTCPay Server Strainly Case Study" />
-              <h3>Strainly</h3>
-              <p>Empowering hemp growers and breeders: How Strainly leveraged BTCPay Server to enable peer-to-peer and private payments at scale.</p>
             </a>
+            <h3>Bitcoin People</h3>
+            <p>Bitcoin People built a mobile app on top of BTCPay's API to scale bitcoin to 270 merchants.</p>
+            <div class="buttons">
+              <a href="https://blog.btcpayserver.org/case-study-bitcoin-people/" target="_blank">{{view-case-study}}</a>
+              <a href="/case-studies/BitcoinPeople2024.pdf" target="_blank">{{download-pdf}}</a>
+            </div>
           </li>
           <li>
             <a href="https://blog.btcpayserver.org/case-study-bitcoin-jungle-cr/" target="_blank">
               <img src="/img/case-studies/bitcoin-jungle.png" alt="BTCPay Server Bitcoin Jungle Case Study" />
-              <h3>Bitcoin Jungle</h3>
-              <p>Bitcoin Jungle enables 200+ stores in Costa Rica to embrace Bitcoin.</p>
-            </a>
-          </li>
-          <li>
-            <a href="https://blog.btcpayserver.org/case-study-voltage/" target="_blank">
-              <img src="/img/case-studies/voltage.png" alt="BTCPay Server Voltage Study" />
-              <h3>Voltage</h3>
-              <p>World's Fastest BTCPay Deployments with Voltage - generating over 45,000 invoices per month!</p>
-            </a>
-          </li>
-          <li>
-            <a href="https://blog.btcpayserver.org/case-study-coincards/" target="_blank">
-              <img src="/img/case-studies/coincards.png" alt="BTCPay Server Coincards Case Study" />
-              <h3>Coincards</h3>
-              <p>Pioneering BTCPay Server Integration and Pushing Bitcoin Adoption.</p>
-            </a>
-          </li>
-          <li>
-            <a href="https://blog.btcpayserver.org/case-study-technical-prism-sideshift/" target="_blank">
-              <img src="/img/case-studies/technical-case-study.png" alt="BTCPay Server Technical Case Study" />
-              <h3>Technical Case Study</h3>
-              <p>How to enable Bitcoin payments for merchants at events using BTCPay Server.</p>
             </a>
+            <h3>Bitcoin Jungle</h3>
+            <p>Bitcoin Jungle enables 200+ stores in Costa Rica to embrace Bitcoin.</p>
+            <div class="buttons">
+              <a href="https://blog.btcpayserver.org/case-study-bitcoin-jungle-cr/" target="_blank">{{view-case-study}}</a>
+              <a href="/case-studies/BitcoinJungleCR2023.pdf" target="_blank">{{download-pdf}}</a>
+            </div>
           </li>
           <li>
             <a href="https://blog.btcpayserver.org/case-study-hodlhodl-2023/" target="_blank">
               <img src="/img/case-studies/hodlhodl.png" alt="BTCPay Server Hodl Hodl Study" />
-              <h3>Hodl Hodl</h3>
-              <p>How Hodl Hodl used BTCPay to accept bitcoin payments at a conference.</p>
             </a>
+            <h3>Hodl Hodl</h3>
+            <p>How Hodl Hodl used BTCPay to accept bitcoin payments at a conference.</p>
+            <div class="buttons">
+              <a href="https://blog.btcpayserver.org/case-study-hodlhodl-2023/" target="_blank">{{view-case-study}}</a>
+              <a href="/case-studies/hodlhodl2023.pdf" target="_blank">{{download-pdf}}</a>
+            </div>
           </li>
         </ul>
+        <p>
+          <a title="{{view-all-case-studies}}" class="modernLink featuresBlockLink"
+          href="https://blog.btcpayserver.org/category/case-studies/" target="blank_">{{view-all-case-studies}}&nbsp;&nbsp;<i
+            class="fas fa-long-arrow-alt-{{_rl}}"></i>
+          </a>
+        </p>
  			</div>
 
 			<div class="page-item-free -bg-grey" id="po0">
@@ -279,7 +269,7 @@ <h2 class="desktop-only">{{integrations-and-plugins}}</h2>
 							<span class="shopify">{{shopify}}</span>
 							</a>
 
-							
+
 						<a class="svg-link smartstore" href="https://docs.btcpayserver.org/Smartstore/">
 							<span class="smartstore">{{smartstore}}</span>
 							</a>
diff --git a/transifex/resources/website.json b/transifex/resources/website.json
index 65079d71..36c555b4 100644
--- a/transifex/resources/website.json
+++ b/transifex/resources/website.json
@@ -70,5 +70,8 @@
   "btcpay-for-communities": "BTCPay Server for local communities",
   "what-is-btcpay": "What is BTCPay Server?",
   "shopify": "Shopify",
-  "case-studies": "Case Studies"
+  "case-studies": "Case Studies",
+  "view-case-study": "View Case Study",
+  "download-pdf": "Download PDF",
+  "view-all-case-studies": "View All Case Studies"
 }