Add case studies overview

src/css/styles.css

@@ -392,6 +392,7 @@ a {
   display: none;
 }
 #contributors,
+#caseStudies,
 .video-holder-watch-video {
   text-align: center;
   background: linear-gradient(
@@ -408,6 +409,43 @@ a {
 .video-holder-watch-video + .video-holder-watch-video {
   margin-top: 0 !important;
 }
+#caseStudies h2 {
+  margin: 0 0 3rem;
+}
+#caseStudies ul {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 1320px;
+  gap: 2rem;
+  justify-content: center;
+  margin: 0 auto 3rem;
+  padding: 0;
+}
+#caseStudies ul li {
+  flex: 0 1 300px;
+}
+#caseStudies ul li a {
+  display: block;
+  height: 100%;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px var(--shadow-20);
+  color: var(--black);
+  background: var(--light-grey);
+  overflow: hidden;
+}
+#caseStudies ul li img {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  object-position: top;
+}
+#caseStudies ul li h3 {
+  margin: .5rem 0;
+}
+#caseStudies ul li p {
+  margin: .5rem 1rem 1rem;
+}
 .check-list {
   margin-left: 2rem;
   text-align: left;

src/html/tmpl.html

@@ -194,6 +194,61 @@ <h3>{{automation-via-api}}</h3>
 				</div>
 			</div>
 
+			<div class="page-item case-studies -bg-grey-l" id="caseStudies">
+				<h2>{{case-studies}}</h2>
+        <ul>
+          <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>
+          </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>
+          </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>
+          </li>
+        </ul>
+ 			</div>
+
 			<div class="page-item-free -bg-grey" id="po0">
 				<div class="pageItemInnerSpacer -ta-c">
 					<h2 class="desktop-only">{{integrations-and-plugins}}</h2>

transifex/resources/website.json

@@ -16,6 +16,7 @@
   "live-demo": "Live Demo",
   "donate": "Donate",
   "woocommerce": "WooCommerce",
+  "smartstore": "SmartStore",
   "drupal": "Drupal",
   "magento": "Magento",
   "prestashop": "PrestaShop",
@@ -68,5 +69,6 @@
   "this-website-does": "This website does not use cookies nor collect personal data.",
   "btcpay-for-communities": "BTCPay Server for local communities",
   "what-is-btcpay": "What is BTCPay Server?",
-  "shopify": "Shopify"
+  "shopify": "Shopify",
+  "case-studies": "Case Studies"
 }