mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-18 18:55:49 +00:00
410 lines
16 KiB
Django/Jinja
410 lines
16 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-community{% endblock %}
|
||
|
||
{% block breadcrumbs %}{% endblock %}
|
||
|
||
{% block main %}
|
||
|
||
|
||
<section class="text-center" id="community-heading">
|
||
|
||
<div class="d-lg-block d-none">
|
||
<img class="parallax one" width="220px" height="160px" src="./assets/img/community/community-one@2x.png" >
|
||
<img class="parallax two" width="120px" height="160px" src="./assets/img/community/community-two@2x.png" >
|
||
<img class="parallax three" width="102px" height="102px" src="./assets/img/community/community-three@2x.png" >
|
||
<img class="parallax four" width="120px" height="160px" src="./assets/img/community/community-four@2x.png" >
|
||
<img class="parallax five" width="216px" height="160px" src="./assets/img/community/community-five@2x.png" >
|
||
</div>
|
||
|
||
<div class="col-lg-6 mx-auto text-left text-md-center">
|
||
<div class="d-flex flex-column-reverse">
|
||
<h1 class="mb-0">{% trans %}Open for Business, <br class="until-sm"/> Driven to Innovate{% endtrans %}</h1>
|
||
<h6 class="eyebrow mb-3">{% trans %}The XRPL Community{% endtrans %}</h6>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Join conversation -->
|
||
<section class="container-new" id="find-us-on-platforms">
|
||
<div class="d-flex flex-column-reverse col-sm-8 p-0">
|
||
<h3 class="h4 h2-sm">{% trans %}Find the community on the platforms below{% endtrans %}</h3>
|
||
<h6 class="eyebrow mb-3">{% trans %}Join the Conversation{% endtrans %}</h6>
|
||
</div>
|
||
|
||
{% set platforms = [
|
||
{ "name": "Twitter",
|
||
"id": "twitter",
|
||
"link": "https://twitter.com/XRPLF/"},
|
||
{ "name": "Discord",
|
||
"id": "discord",
|
||
"link": "https://xrpldevs.org"},
|
||
{ "name": "YouTube",
|
||
"id": "youtube",
|
||
"link": "https://www.youtube.com/channel/UC6zTJdNCBI-TKMt5ubNc_Gg"},
|
||
{ "name": "GitHub",
|
||
"id": "github",
|
||
"link": "https://github.com/XRPLF/xrpl-dev-portal",
|
||
"imgclasses": "invertible-img"},
|
||
{ "name": "Stack Overflow",
|
||
"id": "stack-overflow",
|
||
"link": "https://stackoverflow.com/questions/tagged/xrp"},
|
||
] %}
|
||
<div class="row row-cols-2 row-cols-lg-4 card-deck">
|
||
{% for plat in platforms %}
|
||
<a class="card mb-10" href="{{plat.link}}" target="_blank">
|
||
<div class="card-body">
|
||
<div class="circled-logo"><img id="platform-{{plat.id}}" alt="(logo)" {% if plat.imgclasses %}class="{{plat.imgclasses}}"{% endif %}/></div>
|
||
<h4 class="card-title h5">{{plat.name}}</h4>
|
||
</div>
|
||
<div class="card-footer"> </div>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Contribute -->
|
||
<section class="container-new" id="run-a-network-node">
|
||
<div class="card-grid card-grid-2xN">
|
||
<div class="col d-none d-lg-block align-self-center">
|
||
<div class="mt-10" id="networkNode"></div>
|
||
</div>
|
||
|
||
<div class="col pt-lg-5">
|
||
<div class="d-flex flex-column-reverse mb-8 pl-0">
|
||
<h2 class="h4 h2-sm">{% trans %}Run an XRP Ledger network node{% endtrans %}</h2>
|
||
<h6 class="eyebrow mb-3">{% trans %}Contribute to Consensus{% endtrans %}</h6>
|
||
</div>
|
||
|
||
<div class="col d-lg-none d-block">
|
||
<div class="mt-10" id="networkNode-small"></div>
|
||
</div>
|
||
|
||
<div class="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards">
|
||
{% set curated_links = [
|
||
"the-rippled-server.html",
|
||
"run-rippled-as-a-validator.html",
|
||
"install-rippled.html",
|
||
"troubleshoot-the-rippled-server.html"
|
||
] %}
|
||
{% for cc in curated_links %}
|
||
{% set page = pages|selectattr("html", "defined_and_equalto", cc)|first %}
|
||
<div class="text-card">
|
||
<a class="btn-arrow" href="{{currentpage.prefix}}{{page.html}}">{% if page.top_nav_name is defined %}{{page.top_nav_name}}{% else %}{{page.name}}{% endif %}</a>
|
||
<p class="mt-3 mb-0">{{page.blurb}}</p>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Grants -->
|
||
<section class="container-new" id="xrpl-grants">
|
||
<div class="card-grid card-grid-2xN">
|
||
<div class="col pr-2">
|
||
<div class="d-flex flex-column-reverse">
|
||
<h2 class="h4 h2-sm">{% trans %}Apply for funding to build your XRPL project{% endtrans %}</h2>
|
||
<h6 class="eyebrow mb-3">{% trans %}XRPL Grants{% endtrans %}</h6>
|
||
</div>
|
||
<p class="mb-lg-3 py-lg-4 pt-4 mb-0">{% trans %}The XRPL Grants program funds select open-source projects that solve problems and grow the XRP Ledger community.{% endtrans %}</p>
|
||
|
||
<div class="d-lg-block d-none">
|
||
<div class="mb-4 pb-3" id="xrplGrantsDark"></div>
|
||
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Apply for a Grant{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col">
|
||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||
<h6 class="eyebrow mb-2">{% trans %}Awarded in a single grant{% endtrans %}</h6>
|
||
<img src="./assets/img/community/community-grants-1.svg">
|
||
</div>
|
||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||
<h6 class="eyebrow mb-2">{% trans %}Distributed to grant recipients{% endtrans %}</h6>
|
||
<img src="./assets/img/community/community-grants-2.svg">
|
||
</div>
|
||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||
<h6 class="eyebrow mb-2">{% trans %}Open-source projects funded {% endtrans %}</h6>
|
||
<img src="./assets/img/community/community-grants-3.svg">
|
||
</div>
|
||
|
||
<div class="d-lg-none d-block mt-4 pt-3">
|
||
<div class="mb-4 pb-3" id="xrplGrantsDark-small"></div>
|
||
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Learn More{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Blog -->
|
||
<section class="container-new" id="xrpl-blog">
|
||
<div class="card-grid card-grid-2xN align-items-lg-center">
|
||
|
||
<div class="col pr-2 d-lg-block d-none">
|
||
<img src="./assets/img/community/community-blog@2x.png" class="w-100 blog-graphic">
|
||
</div>
|
||
|
||
<div class="col">
|
||
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||
<h2 class="h4 h2-sm">{% trans %}Showcase your XRPL project, application or product{% endtrans %}</h2>
|
||
<h6 class="eyebrow mb-3">{% trans %}XRPL Community Spotlight{% endtrans %}</h6>
|
||
</div>
|
||
<p class="mb-3 py-4">{% trans %}Get featured on the Developer Reflections blog or Use Cases page, and explore XRPL community highlights.{% endtrans %}</p>
|
||
|
||
<div class="d-lg-none d-block">
|
||
<img src="./assets/img/community/community-blog@2x.png" class="w-100 blog-graphic">
|
||
</div>
|
||
|
||
<div class="text-lg-left text-center">
|
||
<a class="btn btn-primary btn-arrow mb-4 mb-md-0" data-tf-popup="ssHZA7Ly" data-tf-iframe-props="title=Developer Reflections" data-tf-medium="snippet">{% trans %}Submit Your Projects{% endtrans %}</a>
|
||
<a class="ml-lg-4 video-external-link" target="_blank" href="https://xrpl.org/blog/">{% trans %}Read the Blog{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Events -->
|
||
<section class="container-new" id="xrpl-events">
|
||
<div class="card-grid card-grid-2xN ">
|
||
|
||
<div class="col pr-2 d-lg-block d-none">
|
||
<!-- Large. 3 image in col -->
|
||
<div class="d-flex flex-row h-100">
|
||
<div class=" pr-1 mr-3 align-self-start">
|
||
<img src="./assets/img/community/community-events-apex-small@2x.png" class="w-100">
|
||
<p class="bold text-light mt-3">{% trans %}Welcome to Apex 2021{% endtrans %}</p>
|
||
</div>
|
||
<div class=" px-1 mx-3 align-self-center">
|
||
<img src="./assets/img/community/community-events-meetup-small@2x.png" class="w-100">
|
||
<p class="bold text-light mt-3">{% trans %}XRPL Community Meetup{% endtrans %}</p>
|
||
</div>
|
||
<div class=" pl-1 ml-3 align-self-end">
|
||
<img src="./assets/img/community/community-events-hackathon-small@2x.png" class="w-100">
|
||
<p class="bold text-light mt-3">{% trans %}XRPL Hackathon 2022{% endtrans %}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col pt-5">
|
||
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||
<h2 class="h4 h2-sm">{% trans %}Check out global events across the XRPL community{% endtrans %}</h2>
|
||
<h6 class="eyebrow mb-3">{% trans %}XRPL Events{% endtrans %}</h6>
|
||
</div>
|
||
<p class="mb-3 py-4">{% trans %}Meet the XRPL community at meetups, hackathons, conferences, and more across global regions.{% endtrans %}</p>
|
||
|
||
<!-- Mobile. 3 inline images. -->
|
||
<div class="col pr-2 d-lg-none d-block">
|
||
|
||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||
<img src="./assets/img/community/community-events-apex@2x.png" class="w-100">
|
||
<h6 class="mt-3">{% trans %}Welcome to Apex 2021{% endtrans %}</h6>
|
||
</div>
|
||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||
<img src="./assets/img/community/community-events-meetup@2x.png" class="w-100">
|
||
<h6 class="mt-3">{% trans %}XRPL Community Meetup{% endtrans %}</h6>
|
||
</div>
|
||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||
<img src="./assets/img/community/community-events-hackathon@2x.png" class="w-100">
|
||
<h6 class="mt-3">{% trans %}XRPL Hackathon 2022{% endtrans %}</h6>
|
||
</div>
|
||
</div>
|
||
|
||
<div >
|
||
<a class="btn btn-primary btn-arrow" target="_blank" href="/events.html">{% trans %}View All Events{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Careers -->
|
||
<section class="container-new" id="xrpl-careers">
|
||
<div class="card-grid card-grid-2xN">
|
||
|
||
<div class="col pr-2 d-lg-block d-none">
|
||
<div class="mb-4 pb-3" id="careersDark"></div>
|
||
</div>
|
||
|
||
<div class="col pt-5">
|
||
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||
<h2 class="h4 h2-sm">{% trans %}Discover your next career opportunity in the XRPL community{% endtrans %}</h2>
|
||
<h6 class="eyebrow mb-3">{% trans %}XRPL Careers{% endtrans %}</h6>
|
||
</div>
|
||
<p class="mb-3 py-4">{% trans %}Teams across the XRPL community are looking for talented individuals to help build their next innovation.{% endtrans %}</p>
|
||
|
||
<div class="d-lg-none d-block">
|
||
<div class="mb-4 pb-3" id="careersDark-small"></div>
|
||
</div>
|
||
<div class="d-lg-block">
|
||
<a class="btn btn-primary btn-arrow" target="_blank" href="https://jobs.xrpl.org/jobs">{% trans %}View Open Roles{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- XRPL Design Assets -->
|
||
<section class="container-new" id="xrpl-design-assets">
|
||
<div class="card-grid card-grid-2xN ">
|
||
<div class="col pt-5">
|
||
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||
<h2 class="h4 h2-sm">{% trans %}Review guidelines for using XRPL design assets{% endtrans %}</h2>
|
||
<h6 class="eyebrow mb-3">{% trans %}XRPL Assets{% endtrans %}</h6>
|
||
</div>
|
||
<p class="mb-3 py-4">{% trans %}Just like the technology itself, XRPL assets are open source and available for anyone to use. Check out this helpful framework for using XRPL visuals. {% endtrans %}</p>
|
||
<div class="col pr-2 d-lg-none d-block mb-4 pb-3 mb-lg-3">
|
||
<div class=" pr-1 mr-3">
|
||
<img src="./assets/img/community/community-design-assets.png" class="w-100">
|
||
</div>
|
||
</div>
|
||
|
||
<div >
|
||
<a class="btn btn-primary btn-arrow" target="_blank" href="{{target.github_forkurl}}/raw/{{target.github_branch}}/content/XRPL_Logo_Kit.zip">{% trans %}Download the PDF and Assets{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col pr-2 d-lg-block d-none">
|
||
<div class=" pr-1 mr-3">
|
||
<img src="./assets/img/community/community-design-assets.png" class="w-100">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container-new">
|
||
<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="d-none-sm cta cta-top-left">
|
||
<img src="./img/backgrounds/cta-community-green.svg" class="cta cta-bottom-right">
|
||
<div class="z-index-1 position-relative">
|
||
<div class="d-flex flex-column-reverse">
|
||
<h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}A community-driven resource for all things XRPL.org{% endtrans %}</h2>
|
||
<h5 class="eyebrow mb-3">{% trans %}Contribute to XRPL.org{% endtrans %}</h5>
|
||
</div>
|
||
<p class="mb-10">{% trans %}Thank you for your interest in contributing to XRPL.org. This website was created as an XRPL community resource and is meant to be a living, breathing source of truth for XRP Ledger resources. This portal is open-source and anyone can suggest changes.{% endtrans %}</p>
|
||
<a class="btn btn-primary btn-arrow" href="https://github.com/XRPLF/xrpl-dev-portal/blob/master/CONTRIBUTING.md" target="_blank">{% trans %}Read Contributor Guidelines{% endtrans %}</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
|
||
{% block endbody %}
|
||
|
||
<!-- TypeFrom for blog -->
|
||
<script src="//embed.typeform.com/next/embed.js"></script>
|
||
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/bodymovin.min.js"></script>
|
||
|
||
<!-- Light version for network node looks ok for both light/dark.-->
|
||
<!-- Dark version for other two and using filter invert and adjust brightness for light mode -->
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/network-node-light.json"></script>
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/XRPL-grants-dark.json"></script>
|
||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/careers-dark.json"></script>
|
||
|
||
<script type="text/javascript">
|
||
function networkNodeAnimation(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('networkNode'),
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: networkNodeLight
|
||
});
|
||
};
|
||
|
||
function networkNodeSmallAnimation(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('networkNode-small'),
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: networkNodeLight
|
||
});
|
||
};
|
||
|
||
|
||
function xrplGrantsAnimation(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('xrplGrantsDark'),
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: xrplGrantsDark
|
||
});
|
||
};
|
||
|
||
function xrplGrantsSmallAnimation(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('xrplGrantsDark-small'),
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: xrplGrantsDark
|
||
});
|
||
};
|
||
|
||
|
||
function careersAnimation(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('careersDark'),
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: careersDark
|
||
});
|
||
};
|
||
|
||
function careersSmallAnimation(){
|
||
bodymovin.loadAnimation({
|
||
container: document.getElementById('careersDark-small'),
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: careersDark
|
||
});
|
||
};
|
||
|
||
careersAnimation();
|
||
careersSmallAnimation();
|
||
|
||
|
||
xrplGrantsAnimation();
|
||
xrplGrantsSmallAnimation();
|
||
|
||
|
||
networkNodeSmallAnimation();
|
||
networkNodeAnimation();
|
||
|
||
</script>
|
||
|
||
{% endblock %}
|
||
|
||
|
||
{% block analytics %}
|
||
<script type="application/javascript">
|
||
window.dataLayer = window.dataLayer || [];
|
||
window.dataLayer.push({
|
||
"event": "page_info",
|
||
"page_type": "Splash Page",
|
||
"page_group": "Community"
|
||
})
|
||
</script>
|
||
{% endblock analytics %}
|