mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 03:05:49 +00:00
631 lines
26 KiB
Django/Jinja
631 lines
26 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]-->
|
||
|
||
{% endblock %}
|
||
|
||
{% block bodyclasses %}no-sidebar{% endblock %}
|
||
{% block mainclasses %}landing page-uses landing-builtin-bg{% endblock %}
|
||
|
||
{% block breadcrumbs %}{% endblock %}
|
||
|
||
{% block main %}
|
||
|
||
{% set cards = [
|
||
{
|
||
"id": "aesthetes",
|
||
"title": _("Aesthetes"),
|
||
"description": _("Aesthetes is a bridge between fine art and blockchain, enabling everyone, around the world, to buy and sell with just a click for fractional ownership of international physical art."),
|
||
"category_id": "nfts",
|
||
"category_name": _("NFTs"),
|
||
"link": "https://aesthetes.art/",
|
||
},
|
||
{
|
||
"id": "anchain-ai",
|
||
"title": _("Anchain.AI"),
|
||
"description": _("AnChain.AI offers AI-powered intelligence enhancing blockchain security, risk, and compliance strategies."),
|
||
"category_id": "security",
|
||
"category_name": _("Security"),
|
||
"link": "https://anchain.ai",
|
||
},
|
||
{
|
||
"id": "audiotarky",
|
||
"title": _("Audiotarky"),
|
||
"description": _("Audiotarky is a new music streaming platform that prioritises artists and privacy over algorithms and shareholders."),
|
||
"category_id": "nfts",
|
||
"category_name": _("NFTs"),
|
||
"link": "https://www.audiotarky.com/",
|
||
},
|
||
{
|
||
"id": "bitgo",
|
||
"title": _("BitGo"),
|
||
"description": _("BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems."),
|
||
"category_id": "custody",
|
||
"category_name": _("Custody"),
|
||
"link": "https://www.bitgo.com/",
|
||
},
|
||
{
|
||
"id": "gatehub",
|
||
"title": _("Gatehub"),
|
||
"description": _("Gatehub XRP Ledger Markets is an explorer to track Gatehub's inssuances on the XRP Ledger."),
|
||
"category_id": "custody",
|
||
"category_name": _("Custody"),
|
||
"link": "https://gatehub.net/markets",
|
||
},
|
||
{
|
||
"id": "bithomp",
|
||
"title": _("Bithomp"),
|
||
"description": _("Bithomp is an XRPL explorer and toolkit, used by many cryptocurrency exchanges. Bithomp was launched in 2015 with a mission to build the most user-friendly XRPL explorer."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://bithomp.com/",
|
||
},
|
||
{
|
||
"id": "bitpay",
|
||
"title": _("bitpay"),
|
||
"description": _("BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP."),
|
||
"category_id": "payments",
|
||
"category_name": _("Payments"),
|
||
"link": "https://bitpay.com/",
|
||
},
|
||
{
|
||
"id": "carbonland-trust",
|
||
"title": _("Carbonland Trust"),
|
||
"description": _("Carbonland Trust offers transparent nature-based carbon credits, and inclusive access to voluntary carbon markets for landowners and corporations alike. "),
|
||
"category_id": "sustainability",
|
||
"category_name": _("Carbon Markets/Sustainability"),
|
||
"link": "https://www.carbonlandtrust.com/",
|
||
},
|
||
{
|
||
"id": "cryptum",
|
||
"title": _("Cryptum"),
|
||
"description": _("Cryptum is an API/SDK platform for integrating the XRP Ledger with any application."),
|
||
"category_id": "developer_tooling",
|
||
"category_name": _("Developer Tooling"),
|
||
"link": "https://blockforce.in/products/cryptum",
|
||
},
|
||
{
|
||
"id": "evernode",
|
||
"title": _("Evernode"),
|
||
"description": _("Evernode proposes a permissionless, flexible, scalable Layer 2 smart contract network built from the XRP Ledger."),
|
||
"category_id": "developer_tooling",
|
||
"category_name": _("Developer Tooling"),
|
||
"link": "https://evernode.org/",
|
||
},
|
||
{
|
||
"id": "forte",
|
||
"title": _("Forte"),
|
||
"description": _("Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world."),
|
||
"category_id": "gaming",
|
||
"category_name": _("Gaming"),
|
||
"link": "https://www.forte.io/",
|
||
},
|
||
{
|
||
"id": "gatehub",
|
||
"title": _("Gatehub"),
|
||
"description": _("Gatehub XRP Ledger Markets is an explorer to track Gatehub's inssuances on the XRP Ledger."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://gatehub.net/markets",
|
||
},
|
||
{
|
||
"id": "gem-wallet",
|
||
"title": _("Gem Wallet"),
|
||
"description": _("GemWallet is a web extension that enables users to make fast payments on the XRP Ledger via a browser. It's a safer alternative to copying and pasting private keys for use with web applications."),
|
||
"category_id": "wallet",
|
||
"category_name": _("Wallet"),
|
||
"link": "https://gemwallet.app/",
|
||
},
|
||
{
|
||
"id": "ledger-city",
|
||
"title": _("Ledger City"),
|
||
"description": _("Ledger City is a crypto real estate game powered by the XRP Ledger."),
|
||
"category_id": "gaming",
|
||
"category_name": _("Gaming"),
|
||
"link": "https://ledgercitygame.com/",
|
||
},
|
||
{
|
||
"id": "multichain",
|
||
"title": _("Multichain"),
|
||
"description": _("Multichain is the ultimate Router for web3. It is an infrastructure developed for arbitrary cross-chain interactions."),
|
||
"category_id": "interoperability",
|
||
"category_name": _("Interoperability"),
|
||
"link": "https://multichain.org/",
|
||
},
|
||
{
|
||
"id": "nft-master",
|
||
"title": _("NFT Master"),
|
||
"description": _("NFT Master is an NFT marketplace where creators can buy, mint and sell NFTs."),
|
||
"category_id": "nfts",
|
||
"category_name": _("NFTs"),
|
||
"link": "https://nftmaster.com/",
|
||
},
|
||
{
|
||
"id": "onthedex",
|
||
"title": _("OnTheDex"),
|
||
"description": _("OnTheDex is a quality source of information for aggregator sites to take live feeds of XRPL token activity."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://onthedex.live/",
|
||
},
|
||
{
|
||
"id": "onxrp",
|
||
"title": _("onXRP"),
|
||
"description": _("onXRP is an NFT marketplace where creators can buy, mint and sell NFTs built by the XPUNKs."),
|
||
"category_id": "nfts",
|
||
"category_name": _("NFTs"),
|
||
"link": "https://onxrp.com/about/",
|
||
},
|
||
{
|
||
"id": "peerkat",
|
||
"title": _("Peerkat"),
|
||
"description": _("Peerkat is an NFT services and tooling provider for the XRPL community."),
|
||
"category_id": "nfts",
|
||
"category_name": _("NFTs"),
|
||
"link": "https://peerkat.io/",
|
||
},
|
||
{
|
||
"id": "Crossmark",
|
||
"title": _("Crossmark"),
|
||
"description": _("Crossmark is a browser extension wallet built for interacting with the XRP Ledger."),
|
||
"category_id": "wallet",
|
||
"category_name": _("Wallet"),
|
||
"link": "https://github.com/crossmarkio",
|
||
},
|
||
{
|
||
"id": "Edge",
|
||
"title": _("Edge"),
|
||
"description": _("Edge is a secure, easy, and private way to use, store, trade, and exchange crypto assets. Edge ensures sure you’re always in control of your money and information while also providing the tools necessary to protect yourself from others and your own mistakes. Edge has rich functionality, a battle-tested security architecture, and the industry’s best customer support."),
|
||
"category_id": "wallet",
|
||
"category_name": "Wallet",
|
||
"link": "https://edge.app/ripple-wallet/",
|
||
},
|
||
{
|
||
"id": "ripples-cbdc-platform",
|
||
"title": _("Ripple's CBDC Platform"),
|
||
"description": _("Ripple's Central Bank Digital Currency (CBDC) solution enables banks to mint, manage, transact and redeem currency to easily manage the full CBDC lifecycle. Each solution is built on a private ledger that is based upon XRP Ledger technology."),
|
||
"category_id": "cbdcs",
|
||
"category_name": _("CBDC"),
|
||
"link": "https://ripple.com/solutions/central-bank-digital-currency/",
|
||
},
|
||
{
|
||
"id": "ripples-on-demand-liquidity",
|
||
"title": _("Ripple's On-Demand Liquidity"),
|
||
"description": _("Ripple powers real-time, low-cost cross-border payment settlement by using XRP as a bridge currency between two fiat currencies."),
|
||
"category_id": "payments",
|
||
"category_name": _("Payments"),
|
||
"link": "https://ripple.com/",
|
||
},
|
||
{
|
||
"id": "sologenic-dex",
|
||
"title": _("Sologenic DEX"),
|
||
"description": _("Sologenic DEX is a popular decentralized exchange on the XRP Ledger made by Sologenic."),
|
||
"category_id": "exchanges",
|
||
"category_name": _("Exchanges"),
|
||
"link": "https://sologenic.org/",
|
||
},
|
||
{
|
||
"id": "sologenic-nft",
|
||
"title": _("Sologenic NFT"),
|
||
"description": _("Sologenic NFT is an NFT marketplace designed by Sologenic."),
|
||
"category_id": "nfts",
|
||
"category_name": _("NFTs"),
|
||
"link": "https://sologenic.org/nfts/marketplace?network=mainnet",
|
||
},
|
||
{
|
||
"id": "towo-labs",
|
||
"title": _("Towo Labs"),
|
||
"description": _("Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://towolabs.com/",
|
||
},
|
||
{
|
||
"id": "x-tokenize",
|
||
"title": _("X-tokenize"),
|
||
"description": _("X-Tokenize is a command line tool to simplify the process of creating, managing and distributing issued currencies and eventually NFTs on the XRPL."),
|
||
"category_id": "developer_tooling",
|
||
"category_name": _("Developer Tooling"),
|
||
"link": "https://x-tokenize.com/",
|
||
},
|
||
{
|
||
"id": "xp-market",
|
||
"title": _("XP Market"),
|
||
"description": _("XP Market is a price-tracking website for cryptoassets on the XRPL coupled with a decentralized exchange."),
|
||
"category_id": "exchanges",
|
||
"category_name": _("Exchanges"),
|
||
"link": "https://xpmarket.com/",
|
||
},
|
||
{
|
||
"id": "xrp-cafe",
|
||
"title": _("XRP Cafe"),
|
||
"description": _("XRP Cafe is an NFT marketplace built by the community that aims to be the easiest way to build, sell and mint NFTs."),
|
||
"category_id": "nfts",
|
||
"category_name": _("NFTs"),
|
||
"link": "https://xrp.cafe/",
|
||
},
|
||
{
|
||
"id": "xrp-toolkit",
|
||
"title": _("XRP Toolkit"),
|
||
"description": _("XRP Toolkit is a platform for managing crypto assets and trading on the XRP Ledger's decentralized exchange."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://www.xrptoolkit.com/",
|
||
},
|
||
{
|
||
"id": "xrpl-rosetta",
|
||
"title": _("XRPL Rosetta"),
|
||
"description": _("XRPL Rosetta explores fiat data on XRPL through visualization."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://threexrp.dev/",
|
||
},
|
||
{
|
||
"id": "xrpl-org-ledger-explorer",
|
||
"title": _("XRPL.org Ledger Explorer"),
|
||
"description": _("XRPL.org's Ledger Explorer is a block explorer of the XRP Ledger."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://livenet.xrpl.org/",
|
||
},
|
||
{
|
||
"id": "xrpscan",
|
||
"title": _("XRPScan"),
|
||
"description": _("XRPSCAN is an explorer and analytics platform for the XRP Ledger. We provide a clean and simple way to look up accounts, ledgers and transactions."),
|
||
"category_id": "infrastructure",
|
||
"category_name": _("Infrastructure"),
|
||
"link": "https://xrpscan.com/",
|
||
},
|
||
{
|
||
"id": "xumm-wallet",
|
||
"title": _("Xumm Wallet"),
|
||
"description": _("Xumm Wallet is a non custodial wallet with superpower for the XRP Ledger."),
|
||
"category_id": "wallet",
|
||
"category_name": _("Wallet"),
|
||
"link": "https://xumm.app/#team",
|
||
},
|
||
|
||
] %}
|
||
|
||
|
||
{% set featured_categories = {
|
||
"infrastructure": _("Infrastructure"),
|
||
"developer_tooling": _("Developer Tooling"),
|
||
} %}
|
||
|
||
{% set other_categories = {
|
||
"interoperability": _("Interoperability"),
|
||
"wallet": _("Wallet"),
|
||
"nfts": _("NFTs"),
|
||
"exchanges": _("Exchanges"),
|
||
"gaming": _("Gaming"),
|
||
"security": _("Security"),
|
||
"payments": _("Payments"),
|
||
"sustainability": _("Sustainability"),
|
||
"cbdcs": _("CBDCs"),
|
||
"custody": _("Custody")
|
||
} %}
|
||
|
||
|
||
<!-- Modal -->
|
||
<div class="modal fade " id="categoryFilterModal" tabindex="-1" aria-labelledby="categoryFilterModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<a class="btn cancel" data-dismiss="modal"><span class="chevron"><span></span><span></span></span> {% trans %}Cancel{% endtrans %}</a>
|
||
<a class="btn apply" data-dismiss="modal">{% trans %}Apply{% endtrans %} <span class="chevron"><span></span><span></span></span></a>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- -->
|
||
<div class="p-3 page-events">
|
||
<form >
|
||
<p class="category-header mb-4">{% trans %}Featured Categories{% endtrans %} <span id="featured_count_old" class="featured_count category_count">2</span></p>
|
||
{% for category_id, category_name in featured_categories.items() %}
|
||
<div class="cat_checkbox category-checkbox pb-2">
|
||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}" checked>
|
||
<label class="font-weight-bold" for="input_{{category_id}}">{{ category_name }}</label>
|
||
</div>
|
||
{% endfor %}
|
||
<p class="category-header pt-5 mt-3 mb-4">{% trans %}Other Categories{% endtrans %} <span id="other_count_old" class="other_count category_count">0</span></p>
|
||
{% for category_id, category_name in other_categories.items() %}
|
||
<div class="cat_checkbox category-checkbox pb-2">
|
||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}">
|
||
<label for="input_{{category_id}}">{{ category_name }}</label>
|
||
</div>
|
||
{% endfor %}
|
||
</form>
|
||
</div>
|
||
<!-- -->
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" data-dismiss="modal">{% trans %}Apply{% endtrans %}</button>
|
||
<a class="btn " data-dismiss="modal">{% trans %}Cancel{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end modal -->
|
||
|
||
|
||
<div class="overflow-hidden">
|
||
|
||
<section class="container-new py-26 text-lg-center">
|
||
<div class="p-3 col-lg-8 mx-lg-auto">
|
||
<div class="d-flex flex-column-reverse">
|
||
<h1 class="mb-0">{% trans %}Powering Innovative Use Cases and Projects.{% endtrans %}</h1>
|
||
<h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container-new py-26">
|
||
<div class="col-lg-5 p-3">
|
||
<div class="d-flex flex-column-reverse">
|
||
<div class="d-flex justify-content-start align-items-center">
|
||
<div class="arrow-animation" id="arrowAnimation"> </div>
|
||
<span class="explore-projects">Explore Featured Projects </span>
|
||
</div>
|
||
<p class="text-sm">{% trans %}The XRPL has a rich ecosystem with many contributors globally. Explore the community of developers, validators, and partners.{% endtrans %}</p>
|
||
<h6 class="eyebrow mb-3">{% trans %}Introducing the XRPL Ecosystem{% endtrans %}</h6>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5 offset-lg-2 p-5 d-flex">
|
||
<div class="mb-4 pb-3 numbers-animation" id="numbersAnimation"></div>
|
||
<div class="mb-4 pb-3 numbers-animation" id="numbersAnimationLight"></div>
|
||
<div class="apps-built">Apps/exchanges <br/> built on the <br/> XRPL </div>
|
||
</div>
|
||
|
||
|
||
<ul class="card-grid card-grid-4xN ls-none mt-4 pt-lg-2" id="use-case-card-grid">
|
||
{% set uses = [
|
||
{"id": "infrastructure",
|
||
"title": _("Infrastructure"),
|
||
"number": 7,
|
||
"description" : _("Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more.")
|
||
},
|
||
|
||
{"id": "developer_tooling",
|
||
"title": _("Developer Tooling"),
|
||
"number": 4,
|
||
"description" : _("Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality.")
|
||
},
|
||
{"id": "interoperability",
|
||
"title": _("Interoperability"),
|
||
"number": 3,
|
||
"description": _("Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.")
|
||
},
|
||
{"id": "wallet",
|
||
"title": _("Wallet"),
|
||
"number": 4,
|
||
"description": _("Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.")
|
||
},
|
||
{"id": "nfts",
|
||
"title": _("NFTs"),
|
||
"number": 7,
|
||
"description": _("XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs).")
|
||
},
|
||
{"id": "exchanges",
|
||
"title": _("Exchanges"),
|
||
"number": 2,
|
||
"description": _("Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.")
|
||
},
|
||
{"id": "gaming",
|
||
"title": _("Gaming"),
|
||
"number": 5,
|
||
"description": _("The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.")
|
||
},
|
||
{"id": "security",
|
||
"title": _("Security"),
|
||
"number": 1,
|
||
"description": _("Build services and tools that help prevent and combat fraudulent activity with the XRPL.")
|
||
},
|
||
|
||
{"id": "payments",
|
||
"title": _("Payments"),
|
||
"number": 2,
|
||
"description": _("Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.")
|
||
},
|
||
|
||
{"id": "cbdc",
|
||
"title": _("CBDC"),
|
||
"number": 1,
|
||
"description": "A private version of the XRP Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs)."
|
||
},
|
||
|
||
{"id": "sustainability",
|
||
"title": _("Sustainability"),
|
||
"number": 2,
|
||
"description": _("Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs).")
|
||
},
|
||
|
||
{"id": "custody",
|
||
"title": _("Custody"),
|
||
"number": 2,
|
||
"description": _("Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.")
|
||
},
|
||
] %}
|
||
{% for use in uses %}
|
||
<li class="col use-case-circle ls-none p-3 open-modal" data-id="{{use.id}}" data-title="{{use.title}}" data-description="{{use.description}}" data-number="{{use.number}}" data-src="{{use.src}}">
|
||
<div class="circle-content">
|
||
<img class="circle-img" id={{use.id}} alt="use-logos">
|
||
<p class="circle-text">{{use.title}}</p>
|
||
<div class="pill-box">
|
||
<span class="pill-number">{{use.number}}</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
{% endfor %}
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
<div class="modal modal-uses" id="myModal">
|
||
<div class="modal-content-uses">
|
||
<div class="arrows-container" id="arrows-container">
|
||
<button class="arrow-button left-arrow" id="leftArrow">
|
||
<img alt="left arrow">
|
||
</button>
|
||
<button class="arrow-button right-arrow" id="rightArrow">
|
||
<img alt="right arrow">
|
||
</button>
|
||
</div>
|
||
|
||
<div class="content-section">
|
||
<img class="section-image" alt="section image" width="40" height="40">
|
||
</div>
|
||
<div class="content-section">
|
||
<p class="section-text-title">Title</p>
|
||
</div>
|
||
<div class="content-section">
|
||
<p class="section-text-description">Description</p>
|
||
</div>
|
||
<div class="content-section">
|
||
<hr class="section-separator">
|
||
</div>
|
||
<div class="content-section">
|
||
<div class="section-logos">Group of logos here...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<section class="join-xrpl-section py-26">
|
||
<div class="colorful-join-text-wrapper">
|
||
<span class="colorful-join-text"> Join the XRPL Ecosystem and showcase your XRPL project, application, or product. Get featured on the Developer Reflections blog or Ecosystem page. </span>
|
||
<div class="mt-10">
|
||
<a target="_blank" class="btn btn-primary btn-arrow" href="https://xrpl.typeform.com/dev-spotlight">{% trans %}Submit Your Project{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container-new py-26">
|
||
<div class="col-12 col-lg-8 col-xl-6 p-3 mb-5">
|
||
<div class="d-flex flex-column-reverse">
|
||
<h3 class="h4 h2-sm">{% trans %}Businesses and developers <br class="until-sm"/> rely on the XRP Ledger{% endtrans %}</h3>
|
||
<h6 class="eyebrow mb-3">{% trans %}Solving Real-World Problems{% endtrans %}</h6>
|
||
</div>
|
||
<p class="mb-0 longform mt-8-until-sm mt-3 ">{% trans %}With intentional innovations, tools and documentation that accelerate development and minimize time to market, XRP Ledger is used to create solutions across an expansive range of industries and use cases.{% endtrans %}</p>
|
||
</div>
|
||
|
||
<a class="btn d-block d-lg-none" data-toggle="modal" data-target="#categoryFilterModal">
|
||
<span class="mr-3"><img src="./assets/img/uses/usecase-filter.svg" alt="Filter button"></span>{% trans %}Filter by Categories{% endtrans %}<span class="ml-3 total_count category_count">2</span>
|
||
</a>
|
||
|
||
<!-- Start company cards -->
|
||
<div class="row col-12 m-0 p-0 mt-4 pt-2">
|
||
<div class="left col-3 m-0 p-0 mt-2 d-none d-lg-block">
|
||
|
||
<!-- Side bar Desktop. -->
|
||
<div class="p-3 category_sidebar">
|
||
<form >
|
||
<p class="category-header mb-4">{% trans %}Featured Categories{% endtrans %} <span id="featured_count_old" class="featured_count category_count">2</span></p>
|
||
{% for category_id, category_name in featured_categories.items() %}
|
||
<div class="cat_checkbox category-checkbox pb-2">
|
||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}" checked>
|
||
<label class="font-weight-bold" for="input_{{category_id}}">{{ category_name }}</label>
|
||
</div>
|
||
{% endfor %}
|
||
|
||
<p class="category-header pt-5 mt-3 mb-4">{% trans %}Other Categories{% endtrans %} <span id="other_count_old" class="other_count category_count">0</span></p>
|
||
{% for category_id, category_name in other_categories.items() %}
|
||
<div class="cat_checkbox category-checkbox pb-2">
|
||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}">
|
||
<label for="input_{{category_id}}">{{ category_name }}</label>
|
||
</div>
|
||
{% endfor %}
|
||
</form>
|
||
</div>
|
||
<!-- End sidebar desktop -->
|
||
|
||
</div>
|
||
|
||
<!-- cards -->
|
||
<div class="right row col row-cols-lg-2 m-0 p-0" id="use_case_companies_list">
|
||
|
||
{% for card in cards %}
|
||
<a class="card-uses category_{{card.category_id}}" href="{{card.link}}" target="_blank" id="{{card.id}}">
|
||
<div class="card-body row">
|
||
<span class="w-100 mb-3 pb-3">
|
||
<img class="mw-100 biz-logo" alt="{{card.title|default(card.id)}}">
|
||
</span>
|
||
<h4 class="card-title h6">{{card.title}}</h4>
|
||
<p class="card-text">{{card.description}}</p>
|
||
<div class="align-self-end"><span class="label label-use-{{card.category_id}}">{{card.category_name}}</span></div>
|
||
</div>
|
||
</a>
|
||
{% endfor %}
|
||
|
||
</div>
|
||
<!-- end cards -->
|
||
|
||
</div>
|
||
<!-- end company cards -->
|
||
|
||
</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": "About"
|
||
})
|
||
</script>
|
||
{% endblock analytics %}
|
||
|
||
|
||
|
||
{% block endbody %}
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/bodymovin.min.js"></script>
|
||
<script type="application/javascript" src="{{currentpage.prefix}}assets/js/modal.js"></script>
|
||
<script type="application/javascript" src="{{currentpage.prefix}}assets/js/use-cases.js"></script>
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/ecosystem/numbers-animation.json"></script>
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/ecosystem/numbers-animation-light.json"></script>
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/ecosystem/arrow-animation.json"></script>
|
||
|
||
<script type="text/javascript">
|
||
function numAnimate(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('numbersAnimation'),
|
||
renderer: 'svg',
|
||
loop: false,
|
||
autoplay: true,
|
||
animationData: numAnimation
|
||
});
|
||
};
|
||
|
||
function numAnimateLight(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('numbersAnimationLight'),
|
||
renderer: 'svg',
|
||
loop: false,
|
||
autoplay: true,
|
||
animationData: numAnimationLight
|
||
});
|
||
};
|
||
|
||
function arrowAnimate(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('arrowAnimation'),
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: arrowAnimation
|
||
});
|
||
};
|
||
numAnimate();
|
||
numAnimateLight()
|
||
arrowAnimate()
|
||
</script>
|
||
{% endblock %}
|