{% extends "base.html.jinja" %}
{% block head %}

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <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 %}
{% block mainclasses %}landing page-impact{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block main %}
<div class="overflow-hidden">

  <div class="position-relative d-none-sm">
    <img src="./img/backgrounds/community-purple.svg" class="landing-bg" id="impact-purple">
  </div>

  <section class="container-new py-26 text-lg-center">
    <div class="p-0 col-lg-8 mx-lg-auto">
      <div class="d-flex flex-column-reverse">
        <h1 class="mb-0">{% trans %}The first major, global, public carbon-neutral blockchain{% endtrans %}</h1>
        <h6 class="eyebrow mb-3">{% trans %}XRPL Sustainability & Impact{% endtrans %}</h6>
      </div>
      <p class="px-lg-4 mt-4">The XRPL was designed to settle transactions sustainably in addition to providing developers with utility, speed, and low fees.</p>
    </div>
  </section>

  <div class="position-relative d-none-sm">
    <img src="./img/backgrounds/home-green.svg" id="impact-green">
  </div>

  <!-- World map -->
  <section class="container-new py-10">
    <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>
      
      <h5 class="longform mb-10">For more than 272 million migrants worldwide, sending and receiving money across borders is expensive, unreliable and complex.</h5>
      <p class="mb-6">{% trans %}Open and decentralized, blockchain and crypto are seeing an increase in adoption across the financial services industry, from retail and institutional investment to commercial use cases like CBDCs, NFTs and cross-border payments.{% endtrans %}</p>
      <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>
      <!-- Large -->
      <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>
  
    </div>
  </section>

  <!-- Video sidebar -->
  <section class="container-new py-26">
    <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/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>
      </div>

      <div class="col ls-none mb-16-sm">
        <h6 class="eyebrow mb-3">A Sustainable Future</h6>
        <h2 class="h4 h2-sm mb-8">{% trans %}What makes the XRPL sustainable?{% endtrans %}</h2>
        <h5 class="longform mb-10">{% trans %}XRPL’s unique consensus mechanism is eco-friendly—it does not require mining to settle transactions. This results in efficiency without sacrificing security, decentralization, or scalability.{% endtrans %}</h5>
        <p>{% trans %}The trivial amount of energy it does consume is then neutralized with carbon credits through EW Zero, an open-source blockchain decarbonization tool.{% endtrans %}</p>
      </div>
      
    </div>
  </section>

  <!-- Card -->
  <section class="container-new py-26">
    <div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
      
      <img src="./img/backgrounds/cta-community-purple.svg" class="cta cta-top-left">
      <img src="./img/backgrounds/cta-calculator-green.svg" class="cta cta-bottom-right">
      <div class="z-index-1 position-relative">
        <div class="d-flex flex-column-reverse">
          <h2 class="h4 h2-sm mb-10-until-sm mb-8-sm">{% trans %}Featured companies & projects running on the XRP Ledger.{% endtrans %}</h2>
          <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>
        <a class="btn btn-primary btn-arrow" href="{{currentpage.prefix}}uses.html">{% trans %}See More{% endtrans %}</a>
      </div>
    </div>
</section>

<!-- Connect -->
<section class="container-new py-26">
  <!-- flex. Col for mobile. Row for large. on large align content to the center  -->
  <div class="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">

      <div class="order-1  mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 p-lg-3">
          <div class="d-flex flex-column-reverse py-lg-3">
              <h3 class="h4 h2-sm">{% trans %}How can developers connect and contribute?{% endtrans %}</h3>
          </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>

          <div class="d-none d-lg-block py-lg-3">
              <a class="btn btn-primary btn-arrow" href="/contribute.html">{% trans %}Join the Community{% endtrans %}</a>
          </div>
      </div>

      <div class="order-2 col-lg-6 px-0 pl-lg-3">
          <div class="row align-items-center m-0 connect-list"> 
              <!-- connect list -->
              <div class="col-12 col-lg-6 p-0 pr-3">
                  <div class="px-lg-3 pb-3">
                      <img id="connect-01" src="data:," />
                      <div class="pt-3">
                          <h6 class="mb-3">{% trans %}Blog{% endtrans %}</h6>
                          <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 -->
                  <div class="px-lg-3 pb-3 d-lg-none">
                      <img id="connect-02" src="data:," />
                      <div class="pt-3">
                          <h6 class="mb-3">{% trans %}Events{% endtrans %}</h6>
                          <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">{% trans %}Code{% endtrans %}</h6>
                          <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 -->
                  <div class="px-lg-3 pb-3 d-lg-none">
                      <img id="connect-04" src="data:," />
                      <div class="pt-3">
                          <h6 class="mb-3">{% trans %}Connect{% endtrans %}</h6>
                          <p>{% trans %}Join the conversation on social media using #XRPLCommunity.{% endtrans %}</p>
                      </div>
                  </div>
              </div>
              <!-- end col 1 -->

              <!-- Show on large -->
              <div class="col-12 col-lg-6 p-0  pr-3 d-none d-lg-block">
                  <div class="px-lg-3 pb-3 pt-5 mt-5">
                      <div class="pt-1 mt-3">
                          <img id="connect-02" src="data:," />
                          <div class="pt-3">
                              <h6 class="mb-3">{% trans %}Events{% endtrans %}</h6>
                              <p>Attend <a href="/events.html">meetups, hackathons, and conferences</a> to meet other members of the community.</p>
                          </div>
                      </div>
                  </div>
                  <div class="px-lg-3 pb-3 pt-5">
                      <img id="connect-04" src="data:," />
                      <div class="pt-3">
                          <h6 class="mb-3">{% trans %}Connect{% endtrans %}</h6>
                          <p>{% trans %}Join the conversation on social media using #XRPLCommunity.{% endtrans %}</p>
                      </div>
                  </div>
              </div>
              <!-- end col 2 -->
          </div>
      </div>

      <div class="d-lg-none order-3 mt-4 pt-3">
        <a class="btn btn-primary btn-arrow" target="_blank" href="/contribute.html">{% trans %}Join the Community{% endtrans %}</a>
      </div>
  </div>
</section>


{% 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>

<!-- Dark -->
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-dark.json"></script>

<script type="text/javascript">

  //Light
  function mapLightAnimation(){
    bodymovin.loadAnimation({
      container: document.getElementById('map-light'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: mapLight
    });
  };
  
  mapLightAnimation();


  //Dark
  function mapDarkAnimation(){
    bodymovin.loadAnimation({
      container: document.getElementById('map-dark'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: mapDark
    });
  };
  
  mapDarkAnimation();
  
</script>

{% endblock %}

{% block analytics %}
    <script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      "event": "page_info",
      "page_type": "Splash Page",
      "page_group": "About"
    })
    </script>
{% endblock analytics %}