mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
239 lines
10 KiB
Django/Jinja
239 lines
10 KiB
Django/Jinja
{% 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">{% trans %}Building for the Future{% endtrans %}</h6>
|
||
|
||
<h2 class="h4 h2-sm mb-8">{% trans %}Consensus protocol is efficient and sustainable{% endtrans %}</h2>
|
||
|
||
<h5 class="longform mb-10">{% trans %}For more than 272 million migrants worldwide, sending and receiving money across borders is expensive, unreliable and complex.{% endtrans %}</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">{% trans %}A Sustainable Future{% endtrans %}</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>{% trans %}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.{% endtrans %}</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>{% trans %}Attend <a href="/events.html">meetups, hackathons, and conferences</a> to meet other members of the community.{% endtrans %}</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>{% trans %}View the <a href="https://github.com/XRPLF/xrpl-dev-portal/" target="_blank">Github repositories</a> to find blockchain projects to see how you can contribute.{% endtrans %}</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>{% trans %}Attend <a href="/events.html">meetups, hackathons, and conferences</a> to meet other members of the community.{% endtrans %}</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 %}
|