Add map animations

styles/_pages.scss

@@ -454,6 +454,15 @@
 
 .page-impact {
 
+  #map-light,
+  #map-light-small {
+    display: none;
+  }
+  #map-dark,
+  #map-dark-small {
+    display: block;
+  }
+
   .connect-list {
     @each $connect in "connect-01", "connect-02", "connect-03", "connect-04" {
       ##{$connect} {

styles/light/_light-theme.scss

@@ -998,6 +998,15 @@ $placeholder-color: $gray-600;
     }
   }
 
+  #map-light,
+  #map-light-small {
+    display: block;
+  }
+  #map-dark,
+  #map-dark-small {
+    display: none;
+  }
+
 }
 
 

template/page-impact.html.jinja

@@ -8,6 +8,9 @@
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 
+      <!-- Play videos from youtube -->
+  <script src="{{currentpage.prefix}}assets/js/video.js"></script>
+
 {% endblock %}
 
 {% block bodyclasses %}no-sidebar{% endblock %}
@@ -18,7 +21,7 @@
 {% block main %}
 <div class="overflow-hidden">
 
-  <div class="position-relative">
+  <div class="position-relative d-none-sm">
     <img src="./img/backgrounds/community-purple.svg" class="landing-bg" id="impact-purple">
   </div>
 
@@ -38,7 +41,7 @@
 
   <!-- World map -->
   <section class="container-new py-26">
-    <div class="col-md-6 offset-md-3 p-10-until-sm pl-0-sm pr-0-sm">
+    <div class="col-sm-10 col-lg-6 offset-md-3 p-10-until-sm pl-0-sm pr-0-sm">
       <h6 class="eyebrow mb-3">Building for the Future</h6>
 
       <h2 class="h4 h2-sm mb-8">{% trans %}Consensus protocol is efficient and sustainable{% endtrans %}</h2>
@@ -48,10 +51,19 @@
       <p class="mb-0">{% trans %}With usage growing, it’s critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
     </div>
 
-    <div class="">
+    <div>
-      <img src="./assets/img/impact/world_map@2x.png" class="w-100">
+      <!-- Large -->
-  </div>
+      <div class="col d-none d-lg-block align-self-center">
-
+        <div class="mt-10" id="map-dark"></div>
+        <div class="mt-10" id="map-light"></div>
+      </div>
+  
+      <!-- Small -->
+      <div class="col d-lg-none d-block">
+        <div class="mt-10" id="map-dark-small"></div>
+        <div class="mt-10" id="map-light-small"></div>
+      </div>
+    </div>
   </section>
 
   <!-- Video sidebar -->
@@ -59,7 +71,7 @@
     <div class="mt-10 card-grid card-grid-2xN">
       
       <div class="col">
-        <iframe id="video1" style="display:none;" width="560" height="315" src="https://www.youtube.com/embed/sVTybJ3cNyo" title="What makes the XRPL sustainable?" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe id="video1" style="display:none;" width="560" height="315" src="https://www.youtube.com/embed/WsmldDNGQ9s" title="What makes the XRPL sustainable?" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         <a href="#" id="playvideo">
           <img src="./assets/img/impact/video_sustainable@2x.png" id="xrpl-overview-video-intro" class="w-100 video-image">
         </a>
@@ -87,8 +99,7 @@
           <h6 class="eyebrow mb-3">{% trans %}Sustainable Projects{% endtrans %}</h6>
         </div>
         <p class="mb-10">{% trans %}Learn more about companies and developers who are using the XRP Ledger to solve interesting problems efficiently and sustainably.{% endtrans %}</p>
-        <!-- // TODO: Need link -->
+        <a class="btn btn-primary btn-arrow" href="/">{% trans %}See More{% endtrans %}</a>
-        <a class="btn btn-primary btn-arrow" href="#" target="_blank">{% trans %}See More{% endtrans %}</a>
       </div>
     </div>
 </section>
@@ -104,9 +115,8 @@
           </div>
           <p class="py-lg-3 mb-2 longform" style="max-width: 520px;">{% trans %}If sustainability, security and decentralization are important to you, you’re invited to join the XRPL community in its quest to build a better world. Here are some ways to get involved:{% endtrans %}</p>
 
-          <!-- // TODO: Need link -->
           <div class="d-none d-lg-block py-lg-3">
-              <a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Join the Community{% endtrans %}</a>
+              <a class="btn btn-primary btn-arrow" href="/contribute.html">{% trans %}Join the Community{% endtrans %}</a>
           </div>
       </div>
 
@@ -118,7 +128,7 @@
                       <img id="connect-01" src="data:," />
                       <div class="pt-3">
                           <h6 class="mb-3">Blog</h6>
-                          <p>Check out the <a href=#>XRPL dev blog</a> to stay up-to-date on the latest innovations and developments in the XRPL community.</p>
+                          <p>Check out the <a href="https://xrpl.org/blog/">XRPL dev blog</a> to stay up-to-date on the latest innovations and developments in the XRPL community.</p>
                       </div>
                   </div>
                   <!-- Hide on large -->
@@ -126,14 +136,14 @@
                       <img id="connect-02" src="data:," />
                       <div class="pt-3">
                           <h6 class="mb-3">Events</h6>
-                          <p>Attend <a href=#>meetups, hackathons, and conferences</a> to meet other members of the community.</p>
+                          <p>Attend <a href="/events.html">meetups, hackathons, and conferences</a> to meet other members of the community.</p>
                       </div>
                   </div>
                   <div class="px-lg-3 pb-3 pt-lg-5">
                       <img id="connect-03" src="data:," />
                       <div class="pt-3">
                           <h6 class="mb-3">Code</h6>
-                          <p>View the <a href=#>Github repositories</a> to find projects to see how you can contribute.</p>
+                          <p>View the <a href="https://github.com/XRPLF/xrpl-dev-portal/" target="_blank">Github repositories</a> to find projects to see how you can contribute.</p>
                       </div>
                   </div>
                   <!-- Hide on large -->
@@ -154,7 +164,7 @@
                           <img id="connect-02" src="data:," />
                           <div class="pt-3">
                               <h6 class="mb-3">Events</h6>
-                              <p>Attend <a href=#>meetups, hackathons, and conferences</a> to meet other members of the community.</p>
+                              <p>Attend <a href="/events.html">meetups, hackathons, and conferences</a> to meet other members of the community.</p>
                           </div>
                       </div>
                   </div>
@@ -171,7 +181,7 @@
       </div>
 
       <div class="d-lg-none order-3 mt-4 pt-3">
-        <a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Join the Community{% endtrans %}</a>
+        <a class="btn btn-primary btn-arrow" target="_blank" href="/contribute.html">{% trans %}Join the Community{% endtrans %}</a>
       </div>
   </div>
 </section>
@@ -180,6 +190,74 @@
 {% endblock %}
 
 
+{% block endbody %}
+
+<script type="text/javascript" src="{{currentpage.prefix}}assets/js/bodymovin.min.js"></script>
+
+<!-- Light -->
+<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-light.json"></script>
+<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-light-small.json"></script>
+
+<!-- Dark -->
+<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-dark.json"></script>
+<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-dark-small.json"></script>
+
+<script type="text/javascript">
+
+  //Light
+  function mapLightAnimation(){
+    bodymovin.loadAnimation({
+      container: document.getElementById('map-light'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: mapLight
+    });
+  };
+  
+  function mapLightSmallAnimation(){
+    bodymovin.loadAnimation({
+      container: document.getElementById('map-light-small'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: mapLightSmall
+    });
+  };
+
+  mapLightSmallAnimation();
+  mapLightAnimation();
+
+
+  //Dark
+  function mapDarkAnimation(){
+    bodymovin.loadAnimation({
+      container: document.getElementById('map-dark'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: mapDark
+    });
+  };
+  
+  function mapDarkSmallAnimation(){
+    bodymovin.loadAnimation({
+      container: document.getElementById('map-dark-small'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: mapDarkSmall
+    });
+  };
+
+  mapDarkSmallAnimation();
+  mapDarkAnimation();
+
+  
+</script>
+
+{% endblock %}
+
 {% block analytics %}
     <script type="application/javascript">
     window.dataLayer = window.dataLayer || [];