{% 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 %}Today’s Value, Tomorrow’s Vision{% endtrans %}</h1>
        <h6 class="eyebrow mb-3">{% trans %}XRPL Today, XRPL Tomorrow{% endtrans %}</h6>
      </div>
    </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 <a href='uses.html'>commercial use cases</a> like CBDCs, NFTs, and cross-border payments.{% 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 alt="Preview of man speaking with a play button" 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 alt="" 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 businesses and developers connect and contribute?{% endtrans %}</h3>
          </div>
          <p class="py-lg-3 mb-2 longform" style="max-width: 520px;">{% trans %}If you want to advance business with sustainable solutions to real-world problems, you’re invited to join the global, growing XRPL community. 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 <a href='developer-funding.html'>blockchain projects</a> 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 %}