{% 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">&nbsp;</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 %}