Files
xrpl-dev-portal/template/page-home.html.jinja
2023-09-15 15:03:51 +09:00

219 lines
11 KiB
Django/Jinja
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% 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]-->
{% endblock %}
{% block bodyclasses %}no-sidebar{% endblock %}
{% block mainclasses %}landing page-home{% endblock %}
{% block breadcrumbs %}
{% endblock %}
{% block main %}
<div class="overflow-hidden">
<section class="container-new pb-26-until-sm mt-10 mb-10-sm text-center">
<div class="w-100">
<img id="home-hero-graphic" alt="X" />
</div>
<div class="col-lg-6 mx-auto text-center pl-0 pr-0">
<div class="d-flex flex-column-reverse">
<h1 class="mb-10">{% trans %}The Blockchain<br class="until-sm"/> Built for Business{% endtrans %}</h1>
<h6 class="eyebrow mb-3">{% trans %}XRPL | XRP Ledger{% endtrans %}</h6>
</div>
<a href="docs.html" class="btn btn-primary btn-arrow">{% trans %}Start Building{% endtrans %}</a>
</div>
</section>
<div class="position-relative d-none-sm">
<img src="./img/backgrounds/home-purple.svg" id="home-purple">
<img src="./img/backgrounds/home-green.svg" id="home-green">
</div>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm">
<h2 class="h4 mb-8 h2-sm">{% trans %}The XRP Ledger: The Blockchain Built for Business{% endtrans %}</h2>
<h6 class="longform mb-10">{% trans %}The XRP Ledger (XRPL) is a decentralized, public blockchain led by a global community of businesses and developers looking to solve problems and create value.{% endtrans %}</h6>
<p class="mb-0">{% trans %}Proven reliable over more than a decade of error-free functioning, the XRPL offers streamlined development, low transaction costs, high performance, and sustainability. So you can build with confidenceand move your most critical projects forward.{% endtrans %}</p>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Why developers choose the XRP Ledger{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Benefits{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN" id="benefits-list">
{% set cards = [
{ "id": "public",
"title": _("Public and Decentralized"),
"description": _("Open source, open to anyone to build on, maintained by the community")},
{ "id": "streamlined",
"title": _("Streamlined Development"),
"description": _("Intentional innovations, tools and documentation reduce time to market")},
{ "id": "performance",
"title": _("High Performance"),
"description": _("Thousands of transactions settled in seconds")},
{ "id": "low-cost",
"title": _("Low Cost"),
"description": _("At fractions of a penny per transaction, costs are inexpensive enough to enable a wide variety of <a href='uses.html'>blockchain use cases</a>")},
{ "id": "community",
"title": _("Motivated Community"),
"description": _("Companies, developers, validators, and users work together to make the XRP Ledger better every day")},
{ "id": "reliability",
"title": _("Proven Reliability"),
"description": _("10+ years of error-free, uninterrupted performance over more than 63 million ledgers")},
] %}
{% for card in cards %}
<li class="col ls-none">
<img id="{{card.id}}" alt="{{card.title}} Icon">
<h4 class="mt-3 mb-0 h5">{{card.title}}</h4>
<p class="mt-6-until-sm mt-3 mb-0">{{card.description}}</p>
</li>
{% endfor %}
</ul>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Activate the proven potential of the XRP Ledger and find a trusted foundation for your next innovation{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Powerful Features{% endtrans %}</h6>
</div>
<div class="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="advanced-features">
{% set cards2 = [
{ "href": "decentralized-exchange.html",
"title": _("Decentralized Exchange"),
"description": _("A high-performance decentralized peer-to-peer multi-currency exchange built directly into the blockchain")},
{ "href": "cross-currency-payments.html",
"title": _("Cross-Currency Payments"),
"description": _("Atomically settle multi-hop payments that cross currency or national boundaries with ease")},
{ "href": "payment-channels.html",
"title": _("Payment <br class='until-sm'/>Channels"),
"description": _("Batched micropayments with unlimited speed, secured with XRP")},
{ "href": "multi-signing.html",
"title": _("Multi-Signing"),
"description": _("Flexible options for custody and security of on-ledger accounts")},
{ "href": "tokens.html",
"title": _("Tokens"),
"description": _("All currencies other than XRP can be represented in the XRP Ledger as tokens, sometimes called “IOUs”")},
] %}
{% for card in cards2 %}
<a class="card" href="{{target.prefix}}{{card.href}}">
<div class="card-body">
<h4 class="card-title h5">{{card.title}}</h4>
<p class="card-text">{{card.description}}</p>
</div>
<div class="card-footer">&nbsp;</div>
</a>
{% endfor %}
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Choose a path, and bring your project to life on the XRP Ledger{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Where to Start{% endtrans %}</h6>
</div>
<div class="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="get-started">
{% set cards3 = [
{ "href": "get-started.html",
"title": _("Quickstart"),
"description": _("Access everything you need to get started working with the XRPL")},
{ "href": "tutorials.html",
"title": _("Guided Tutorials"),
"description": _("Follow step-by-step guides for frequent tasks")},
{ "href": "concepts.html",
"title": _("XRPL Fundamentals"),
"description": _("Read about the XRPLs foundational concepts")},
{ "href": "client-libraries.html",
"title": _("Choose a Language"),
"description": _("Find tools, documentation, and sample code in Python, Java, Javascript, or use HTTP APIs")},
{ "href": "uses.html",
"title": _("Get Inspired"),
"description": _("See what your peers have built on the XRPL")},
] %}
{% for card in cards3 %}
<a class="card" id="{{card.id}}" href="{{target.prefix}}{{card.href}}">
<div class="card-body">
<h4 class="card-title h5">{{card.title}}</h4>
<p class="card-text">{{card.description}}</p>
</div>
<div class="card-footer">&nbsp;</div>
</a>
{% endfor %}
</div>
</section>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-home-purple.svg" class="d-none-sm cta cta-top-left">
<img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Our Shared Vision for XRPLs Future{% endtrans %}</h2>
<p class="mb-10">{% trans %}Together, we're building the greenest infrastructure to drive blockchain innovation that doesn't sacrifice utility or performance, to bring the developer community's vision to life.{% endtrans %}</p>
<a class="btn btn-primary btn-arrow" href="overview.html">{% trans %}Learn More{% endtrans %}</a>
</div>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Explore what the community is building to enable new features and use cases on XRPL{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Preview New Features{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
{% set features = [
{ "chip": _("In Development"),
"title": _("Smart Contracts"),
"description": _("Hooks are small, efficient WebAssembly modules designed specifically for the XRPL. Check out the <a href='https://hooks-testnet.xrpl-labs.com/' target='_blank'>hooks amendment and public testnet</a> that enable smart contract functionality."),
"href": "https://hooks-testnet.xrpl-labs.com/" },
{ "chip": _("Enabled"),
"title": _("Non-Fungible Tokens"),
"description": _("Lower fees, faster transactions, and custom token functionality make the XRPL ideally suited for building an ecosystem for NFTs. Explore the XRP Ledger's NFT capabilities."),
"href": "non-fungible-tokens.html"},
] %}
{% for feat in features %}
<li class="col ls-none pt-2">
<a class="label chip-green" href="{{feat.href}}">{{feat.chip}}</a>
<h4 class="mt-3 mb-0 h5">{{feat.title}}</h4>
<p class="mt-6-until-sm mt-3 mb-0">{{feat.description}}</p>
</li>
{% endfor %}
</ul>
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 cta-card">
<img alt="" src="./img/backgrounds/cta-home-magenta.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<div class="d-flex flex-column-reverse">
<h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Join the Community <br class="until-sm"/> at XRPL.org{% endtrans %}</h2>
</div>
<p class="mb-10">{% trans %}Connect at XRPL.org, a community by and for the developers <br class="until-sm"/> and entrepeneurs who rely on the XRPL.{% endtrans %}</p>
<a class="btn btn-primary btn-arrow" href="contribute.html">{% trans %}Get Involved{% endtrans %}</a>
</div>
</div>
</section>
</div>
{% endblock %}
{% block analytics %}
<script type="application/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"event": "page_info",
"page_type": "Splash Page",
"page_group": "Home"
})
</script>
{% endblock analytics %}