{% 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 confidence–and 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, the XRPL can fuel expansive use cases")},
        { "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 XRPL’s 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 XRPL’s 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">Learn More</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 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 %}