From c009ab96e55947f2c9fbc20f88df7146abf542d5 Mon Sep 17 00:00:00 2001
From: Francesco Siddi <francesco@blender.org>
Date: Wed, 6 Dec 2023 18:23:17 +0100
Subject: [PATCH] Add DevFund campaign snippet

This will display a call to action to support the Blender project in
every page, before the footer.
---
 source/templates/banner_devfund.php | 141 ++++------------------------
 source/templates/footer.php         |   9 ++
 2 files changed, 26 insertions(+), 124 deletions(-)

diff --git a/source/templates/banner_devfund.php b/source/templates/banner_devfund.php
index f688b8f..f8b63e2 100644
--- a/source/templates/banner_devfund.php
+++ b/source/templates/banner_devfund.php
@@ -1,129 +1,22 @@
 <div class="devfund">
-  <p class="lead">
-    Blender is made possible thanks to people like you. ❤️
-    <br>
-    Support with a monthly donation:
-  </p>
-
-  <style>
-    .cards-list {
-      --cards-item-max-width: 108px;
-      --cards-list-items-per-row: 5;
-      max-width: 840px;
-    }
-
-    .cards-list-item-inner {
-      max-width: var(--cards-item-max-width);
-    }
-
-    .cards-list-item-thumbnail {
-      overflow: initial;
-      margin: .5rem auto;
-      max-width: 80px;
-      opacity: .6;
-      transition: all 150ms;
-    }
-
-    .cards-list-item-title { opacity: .6;}
-
-    .is-default .cards-list-item-title,
-    .is-default .cards-list-item-thumbnail,
-    .cards-list-item-inner:hover .cards-list-item-title,
-    .cards-list-item-inner:hover .cards-list-item-thumbnail { opacity: 1;}
-    .cards-list-item-excerpt span {opacity: .5}
-  </style>
-
-  <?php
-    /* Analytics.
-    * Must match the goal name set in analytics.blender.org */
-    $analytics_goal_name = 'DevFund+Buttons';
-  ?>
-
-  <div class="cards-list card-layout-card-transparent card-aspect-ratio-square pb-5 pt-2 mx-auto text-center">
-    <div class="cards-list-item-outer card-aspect-ratio-inherit">
-      <div class="cards-list-item-inner mx-auto">
-        <a href="https://fund.blender.org/checkout/1?utm_medium=buildbot-subscribe-bronze" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=bronze plausible-event-medium=thumbnail cards-list-item-thumbnail">
-          <img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_bronze.png" alt="Bronze">
-        </a>
-
-        <div class="cards-list-item-info">
-          <span class="cards-list-item-excerpt">
-            <strong>$6</strong><span>/month</span>
-            <a href="https://fund.blender.org/checkout/1?utm_medium=buildbot-subscribe-bronze" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=bronze plausible-event-medium=button btn btn-link mt-3">
-              Donate
-            </a>
-          </span>
-        </div>
+  <div class="container py-4 px-5">
+    <div class="row dfdb mt-4">
+      <div class="col-lg-6 col-12 col-msg text-light">
+        <h2 class="fs-0 fw-bold mb-5">
+          A <strong>birthday gift</strong><br>
+          for Blender
+        </h2>
+        <p class="fs-5">
+          On January 2<sup>nd</sup> Blender turns 30!<br>
+          Celebrate the Freedom to Create with a donation.
+        </p>
+        <p class="fs-5">
+          <a href="https://fund.blender.org">Learn more</a> and join the fun!
+        </p>
+      </div>
+      <div class="col-lg-6 col-12">
+        <div id="js-donation-box"></div>
       </div>
     </div>
-
-    <div class="cards-list-item-outer card-aspect-ratio-inherit">
-      <div class="cards-list-item-inner mx-auto">
-        <a href="https://fund.blender.org/checkout/2?utm_medium=buildbot-subscribe-silver" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=silver plausible-event-medium=thumbnail cards-list-item-thumbnail">
-          <img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_silver.png" alt="Silver">
-        </a>
-
-        <div class="cards-list-item-info">
-          <span class="cards-list-item-excerpt">
-            <strong>$12</strong><span>/month</span>
-            <a href="https://fund.blender.org/checkout/2?utm_medium=buildbot-subscribe-silver" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=silver plausible-event-medium=button btn btn-link mt-3">
-              Donate
-            </a>
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div class="cards-list-item-outer card-aspect-ratio-inherit is-default">
-      <div class="cards-list-item-inner mx-auto">
-        <a href="https://fund.blender.org/checkout/3?utm_medium=buildbot-subscribe-gold" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=gold plausible-event-medium=thumbnail cards-list-item-thumbnail">
-          <img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_gold.png" alt="Gold">
-        </a>
-
-        <div class="cards-list-item-info">
-          <span class="cards-list-item-excerpt">
-            <strong>$30</strong><span>/month</span>
-            <a href="https://fund.blender.org/checkout/3?utm_medium=buildbot-subscribe-gold" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=gold plausible-event-medium=button btn btn-accent mt-3">
-              Donate
-            </a>
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div class="cards-list-item-outer card-aspect-ratio-inherit">
-      <div class="cards-list-item-inner mx-auto">
-        <a href="https://fund.blender.org/checkout/5?utm_medium=buildbot-subscribe-titanium" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=titanium plausible-event-medium=thumbnail cards-list-item-thumbnail">
-          <img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_titanium.png" alt="Titanium">
-        </a>
-
-        <div class="cards-list-item-info">
-          <span class="cards-list-item-excerpt">
-            <strong>$120</strong><span>/month</span>
-            <a href="https://fund.blender.org/checkout/5?utm_medium=buildbot-subscribe-titanium" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=titanium plausible-event-medium=button btn btn-link mt-3">
-              Donate
-            </a>
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div class="cards-list-item-outer card-aspect-ratio-inherit">
-      <div class="cards-list-item-inner mx-auto">
-        <a href="https://fund.blender.org/corporate-memberships" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=corporate plausible-event-medium=thumbnail cards-list-item-thumbnail">
-          <img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_corporate.png" alt="Corporate">
-        </a>
-
-        <div class="cards-list-item-info">
-        </div>
-        <div class="cards-list-item-excerpt d-flex align-items-end" href="https://fund.blender.org/corporate-memberships">
-          <a href="https://fund.blender.org/corporate-memberships" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=corporate plausible-event-medium=button btn btn-link mt-3">Corporate</a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="pb-6">
-    You can also <a href="https://fund.blender.org/donate-once/" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=donate-once">donate once</a>.
   </div>
 </div>
diff --git a/source/templates/footer.php b/source/templates/footer.php
index b72f8fa..8508e8f 100644
--- a/source/templates/footer.php
+++ b/source/templates/footer.php
@@ -279,5 +279,14 @@
         };
       })();
     </script>
+    <script src="https://fund.blender.org/static/fetch-donation-box.js?v=1.0.1"></script>
+    <script>
+        fetchDonationBox({
+            jsUrl: 'https://fund.blender.org/static/js/donation-box.js',
+            selector: '#js-donation-box',
+            url: 'https://fund.blender.org/static/donation-box.html',
+            darkMode: false
+            });
+    </script>
   </body>
 </html>
-- 
2.30.2