bitcoin-dot-org · Cobra-Bitcoin · May 1, 2025 · Aug 1, 2024 · Sep 7, 2024 · Sep 11, 2024
diff --git a/_includes/animations/herecomesbitcoin/astronaut.html b/_includes/animations/herecomesbitcoin/astronaut.html
@@ -0,0 +1,19 @@
+<html xmlns="http://www.w4.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+    <style>
+        #animation-astronaut {
+            width:100%;
+            height:100%;
+            display:block;
+            overflow: hidden;
+            transform: translate3d(0,0,0);
+            text-align: center;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+  <lottie-player id="animation-astronaut" src="/json/astronaut.json" autoplay></lottie-player>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/cat.html b/_includes/animations/herecomesbitcoin/cat.html
@@ -0,0 +1,19 @@
+<html xmlns="http://www.w4.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+    <style>
+        #animation-cat {
+            width:100%;
+            height:100%;
+            display:block;
+            overflow: hidden;
+            transform: translate3d(0,0,0);
+            text-align: center;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+  <lottie-player id="animation-cat" src="/json/cat.json" autoplay loop></lottie-player>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/coder.html b/_includes/animations/herecomesbitcoin/coder.html
@@ -0,0 +1,19 @@
+<html xmlns="http://www.w4.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+    <style>
+        #animation-coder {
+            width:100%;
+            height:100%;
+            display:block;
+            overflow: hidden;
+            transform: translate3d(0,0,0);
+            text-align: center;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+  <lottie-player id="animation-coder" src="/json/coder.json" autoplay loop></lottie-player>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/construction.html b/_includes/animations/herecomesbitcoin/construction.html
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w4.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+    <style>
+        #animation-construction{
+            width:100%;
+            height:100%;
+            display:block;
+            overflow: hidden;
+            transform: translate3d(0,0,0);
+            text-align: center;
+            opacity: 1;
+        }
+
+    </style>
+</head>
+<body>
+  <lottie-player id="animation-construction" src="/json/construction.json" autoplay></lottie-player>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/fairy.html b/_includes/animations/herecomesbitcoin/fairy.html
@@ -0,0 +1,32 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+  <style>
+      #animation-fairy {
+          width:100%;
+          height:100%;
+          display:block;
+          overflow: hidden;
+          transform: translate3d(0,0,0);
+          text-align: center;
+          opacity: 1;
+      }
+  </style>
+</head>
+<body>
+  <lottie-player id="animation-fairy" src="/json/fairy.json"></lottie-player>
+  <script>
+    const animFairy = document.querySelector('#animation-fairy');
+    animFairy.addEventListener('click', playFairyAnimation);
+    animFairy.addEventListener('complete', stopFairyAnimation);
+
+    function stopFairyAnimation() {
+      animFairy.stop();
+    }
+
+    function playFairyAnimation() {
+      animFairy.play(animFairy.firstFrame);
+    }
+  </script>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/fancy.html b/_includes/animations/herecomesbitcoin/fancy.html
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+  <style>
+      #animation-fancy {
+          width:100%;
+          height:100%;
+          display:block;
+          overflow: hidden;
+          transform: translate3d(0,0,0);
+          text-align: center;
+          opacity: 1;
+      }
+  </style>
+  <script src="/js/lottie-player.js"></script>
+</head>
+<body>
+  <lottie-player id="animation-fancy" src="/json/fancy.json" autoplay loop></lottie-player>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/flower_heads.html b/_includes/animations/herecomesbitcoin/flower_heads.html
@@ -0,0 +1,34 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+  <style>
+      #animation-flower-heads {
+          width:100%;
+          height:100%;
+          display:block;
+          overflow: hidden;
+          transform: translate3d(0,0,0);
+          text-align: center;
+          opacity: 1;
+      }
+  </style>
+</head>
+<body>
+  <lottie-player id="animation-flower-heads" src="/json/flower_heads.json"></lottie-player>
+  <script>
+    const animFlowerHeads = document.querySelector('#animation-flower-heads');
+    animFlowerHeads.addEventListener('click', playFlowerHeadsAnimation);
+    animFlowerHeads.addEventListener('complete', stopFlowerHeadsAnimation);
+
+    document.querySelector('#flower-heads-hoverable').addEventListener('mouseenter', playFlowerHeadsAnimation);
+
+    function stopFlowerHeadsAnimation() {
+      animFlowerHeads.stop();
+    }
+
+    function playFlowerHeadsAnimation() {
+      animFlowerHeads.play(animFlowerHeads.firstFrame);
+    }
+  </script>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/hungry.html b/_includes/animations/herecomesbitcoin/hungry.html
@@ -0,0 +1,32 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+  <style>
+      #animation-hungry {
+          width:100%;
+          height:100%;
+          display:block;
+          overflow: hidden;
+          transform: translate3d(0,0,0);
+          text-align: center;
+          opacity: 1;
+      }
+  </style>
+</head>
+<body>
+  <lottie-player id="animation-hungry" src="/json/hungry.json"></lottie-player>
+  <script>
+    const animHungry = document.querySelector('#animation-hungry');
+    animHungry.addEventListener('click', playHungryAnimation);
+    animHungry.addEventListener('complete', stopHungryAnimation);
+
+    function stopHungryAnimation() {
+      animHungry.stop();
+    }
+
+    function playHungryAnimation() {
+      animHungry.play(animHungry.firstFrame);
+    }
+  </script>
+</body>
+</html>
diff --git a/_includes/animations/herecomesbitcoin/sir.html b/_includes/animations/herecomesbitcoin/sir.html
@@ -0,0 +1,19 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+  <style>
+      #animation-sir {
+          width:100%;
+          height:100%;
+          display:block;
+          overflow: hidden;
+          transform: translate3d(0,0,0);
+          text-align: center;
+          opacity: 1;
+      }
+  </style>
+</head>
+<body>
+  <lottie-player id="animation-sir" src="/json/sir.json" autoplay loop></lottie-player>
+</body>
+</html>
diff --git a/_includes/layout/base/footer-menu.html b/_includes/layout/base/footer-menu.html
@@ -12,6 +12,9 @@
         <p class="donate-text">{% translate donate-community-support layout %}
           <a class="donate-link" href="bitcoin:bc1qx3u4njquj0ux63030r4nat8awqrlm0x2zlt96h" target="_blank">bc1qx3u4njquj0ux63030r4nat8awqrlm0x2zlt96h</a>
         </p>
+        {% if page.id == 'bitcoin-for-businesses' %}
+          {% include animations/herecomesbitcoin/construction.html %}
+        {% endif %}
       </div>
     </div>
   </div>

diff --git a/_includes/layout/base/html-head.html b/_includes/layout/base/html-head.html
@@ -16,6 +16,7 @@
 {% if page.lang == 'bg' or page.lang == 'el' or page.lang == 'ko' or page.lang == 'hi' or page.lang == 'pl' or page.lang == 'sl' or page.lang == 'ro' or page.lang == 'ru' or page.lang == 'tr' or page.lang == 'uk' or page.lang == 'zh_CN' or page.lang == 'zh_TW' %}<link rel="stylesheet" href="/css/sans.css?{{site.time | date: '%s'}}">{% endif %}
 <script type="text/javascript" src="/js/base.js?{{site.time | date: '%s'}}"></script>
 <script type="text/javascript" src="/js/main.js?{{site.time | date: '%s'}}"></script>
+<script type="text/javascript" src="/js/lottie-player.js?{{site.time | date: '%s'}}"></script>
 <script src="/js/jquery/jquery-1.11.2.min.js"></script>
 <script src="/js/jquery/jquery-ui.min.js"></script>
 <script src="/js/jquery/jquery.qrcode.min.js"></script>

diff --git a/_includes/templates/index.html b/_includes/templates/index.html
@@ -1,5 +1,4 @@
-{% comment %} This file is licensed under the MIT License (MIT) available on http://opensource.org/licenses/MIT. {% endcomment
-%}
+{% comment %} This file is licensed under the MIT License (MIT) available on http://opensource.org/licenses/MIT. {% endcomment %}
 
 
 <div class="mainhero">
@@ -17,34 +16,44 @@
 
   </div>
 </div>
-<div class="mainoverview">
-  <div class="container">
-    <div class="mainoverview-title">{% translate overview %}</div>
-    <a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}" class="maincard">
-      <img class="maincard-img" src="/img/icons/ico_individuals.svg?{{site.time | date: '%s'}}" alt="Icon">
-      <div>
-        <p class="maincard-title">{% translate menu-bitcoin-for-individuals layout %}</p>
-        <p class="maincard-link">{% translate learn-more layout %}</p>
-      </div>
-    </a>
-    <a href="/{{ page.lang }}/{% translate bitcoin-for-businesses url %}" class="maincard">
-      <img class="maincard-img" src="/img/icons/ico_business.svg?{{site.time | date: '%s'}}" alt="Icon">
-      <div>
-        <p class="maincard-title">{% translate menu-bitcoin-for-businesses layout %}</p>
-        <p class="maincard-link">{% translate learn-more layout %}</p>
-      </div>
-    </a>
-    <a href="https://developer.bitcoin.org/" class="maincard">
-      <img class="maincard-img" src="/img/icons/ico_developers.svg?{{site.time | date: '%s'}}" alt="Icon">
-      <div>
-        <p class="maincard-title">{% translate menu-bitcoin-for-developers layout %}</p>
-        <p class="maincard-link">{% translate learn-more layout %}</p>
-      </div>
+<div class="mainoverview-parent">
+  <div class="herecomesbitcoin-hungry">
+    {% include animations/herecomesbitcoin/hungry.html %}
+    <img class="herecomesbitcoin-hungry-right-hand" src="/img/animations/herecomesbitcoin/hungry_right_hand.svg?{{site.time | date: '%s'}}" alt="right-hand"/>
+    <img class="herecomesbitcoin-hungry-left-hand" src="/img/animations/herecomesbitcoin/hungry_left_hand.svg?{{site.time | date: '%s'}}" alt="left-hand"/>
+  </div>
+  <div class="mainoverview">
+    <div class="container">
+      <div class="mainoverview-title">{% translate overview %}</div>
+      <a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}" class="maincard">
+        <img class="maincard-img" src="/img/icons/ico_individuals.svg?{{site.time | date: '%s'}}" alt="Icon">
+        <div>
+          <p class="maincard-title">{% translate menu-bitcoin-for-individuals layout %}</p>
+          <p class="maincard-link">{% translate learn-more layout %}</p>
+        </div>
+      </a>
+      <a href="/{{ page.lang }}/{% translate bitcoin-for-businesses url %}" class="maincard">
+          <img id="flower-heads-hoverable" class="maincard-img" src="/img/icons/ico_business.svg?{{site.time | date: '%s'}}" alt="Icon">
+          <div>
+            <p class="maincard-title">{% translate menu-bitcoin-for-businesses layout %}</p>
+            <p class="maincard-link">{% translate learn-more layout %}</p>
+          </div>
+          <div class="herecomesbitcoin-flower-heads">
+            {% include animations/herecomesbitcoin/flower_heads.html %}
+          </div>
+      </a>
+      <a href="https://developer.bitcoin.org/" class="maincard">
+        <img class="maincard-img" src="/img/icons/ico_developers.svg?{{site.time | date: '%s'}}" alt="Icon">
+        <div>
+          <p class="maincard-title">{% translate menu-bitcoin-for-developers layout %}</p>
+          <p class="maincard-link">{% translate learn-more layout %}</p>
+        </div>
+      </a>
+    </div>
+    <a class="btn-down" href="#maindesc-title">
+      <img src="/img/icons/ico_arrow_down.svg?{{site.time | date: '%s'}}" alt="Link">
     </a>
   </div>
-  <a class="btn-down" href="#maindesc-title">
-    <img src="/img/icons/ico_arrow_down.svg?{{site.time | date: '%s'}}" alt="Link">
-  </a>
 </div>
 <div class="maindesc">
   <div class="container">
@@ -73,8 +82,12 @@
 
         </ul>
       </div>
-      <img class="maindesc-img" src="/img/home/bitcoin-img.svg?{{site.time | date: '%s'}}" alt="Bitcoin image">
-    </div>
+      <div class="herecomesbitcoin-fairy-container">
+        <div class="herecomesbitcoin-fairy">
+          {% include animations/herecomesbitcoin/fairy.html %}
+        </div>
+      </div>
+   </div>
     <div class="btn-container">
       <a class="btn btn-dark btn-home center" href="/{{ page.lang }}/{% translate getting-started url %}">{% translate getstarted layout %}</a>
     </div>

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -34,6 +34,14 @@
     </div>
     {% include layout/base/footer-license.html %}
   </div>
+
+  {% if page.id == 'index' %}
+    <div class="herecomesbitcoin-container" style="justify-content: center">
+      <div class="herecomesbitcoin-cat">
+        {% include animations/herecomesbitcoin/cat.html %}
+      </div>
+    </div>
+  {% endif %}
 </div>
 
 {% include layout/base/footer-js.html %}