{% 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" style="position: relative;">

 <div class="d-lg-block d-none">
    <img alt="People sitting at a conference" class="parallax one" width="152px" height="102px" src="./assets/img/community/community-one.png">
    <img alt="Person speaking at a conference" class="parallax two"  src="./assets/img/community/community-two.png">
    <img alt="Person sitting and speaking" class="parallax three"  src="./assets/img/community/community-three.png">
    <img alt="People chatting" class="parallax four" width="120px" height="160px" src="./assets/img/community/community-four.png">
    <img alt="Person speaking at Apex" class="parallax five" src="./assets/img/community/community-five.png">
  </div>

<div class="mx-auto text-left col-lg-6 text-md-center hero-title" >
    <div class="d-flex flex-column-reverse align-items-center sm-align-items-start">
      <img src="../assets/img/icons/arrow-down.svg" class="bounce-arrow" alt="Down Arrow" />
      <h1 class="mb-0 main-title">
          {% trans %}A Global Blockchain {% endtrans %}
          <br class="until-sm"/>
          {% trans %}Community of {% endtrans %}
          <span class="builders-wrap">Builders</span>
          <br class="until-sm" />
        {% trans %}  and Innovators{% endtrans %}
      </h1>
      <h6 class="mb-3 eyebrow">{% trans %}XRPL Community{% endtrans %}</h6>
    </div>
  </div>
</section>

<section id="community-table" class="hot-topics">
    <h6 class="eyebrow-convo">{% trans %}Join the Conversation{% endtrans %}</h6>
    <h4 >{% trans %}Hot Topics Happening Now{% endtrans %}</h4>
    <table>
        <tr>
            <td class="td-img"><img class="discord-icon" alt="discord icon"></td>
            <td>{% trans %}AMA with Edge Wallet: Learn more about Edge Wallet and how they are building on the XRP Ledger.{% endtrans %}</td>
             <td>
                <a href="https://discord.com/channels/886050993802985492/950893687313940582/1162480612209332345" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
             </td>
        </tr>
        <tr>
            <td class="td-img"><img class="twitter-icon" alt="twitter icon"></td>
              <td>{% trans %}Clawback: A newly proposed feature that adds to the XRP Ledger's token asset control capabilities.{% endtrans %}</td>
            <td>
                <a href="https://x.com/RippleXDev/status/1708889238471950610?s=20" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
             </td>
        </tr>
        <tr>
            <td class="td-img"><img class="youtube-icon" alt="youtube icon"></td>
              <td>{% trans %}APEX 2023: View keynote sessions from the annual developer summit where developers, contributors, and thought leaders come together to learn, build, and celebrate all things XRP Ledger.{% endtrans %}</td>
            <td>
                <a href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZBdGc33An5Is6IFMxw3D7u" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
             </td>
        </tr>
        <tr class="final-tr">
            <td class="td-img"><img class="xrpl-icon" alt="xrpl icon"></td>
              <td>{% trans %}Deep Dive into XRPL DeFi Course: Learn about the inner workings of decentralized finance including safety and security, auto-bridging, pathfinding, liquidity pools, and more.{% endtrans %}</td>
            <td>
                <a href="https://learn.xrpl.org/course/deep-dive-into-xrpl-defi/" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
             </td>
        </tr>

    </table>
</section>

<section class="xrpl-events-section">
<div class="header-div">
    <div class="header">
        <h6 class="events-text">{% trans %}XRPL Events{% endtrans %}</h6>
        <h4 class="events-text">{% trans %}Check out global events hosted <br class="d-none-sm" /> by the XRPL community{% endtrans %}</h4>
    </div>
    <p class="description">{% trans %}Meet the XRPL community at meetups, hackathons, blockchain conferences, and more across global regions.{% endtrans %}</p>
    <a class="cd-none-sm btn btn-primary btn-arrow view-all-events-btn" target="_blank" href="events.html">{% trans %}View All Events{% endtrans %}</a>
</div>
    <div class="upcoming-event" id="upcoming-events-section">
        <p class="upcoming-label">{% trans %}UPCOMING EVENT{% endtrans %}</p>
        <div id="days-count" class="days-count">13</div>
        <div class="days-word">{% trans %}days{% endtrans %}</div>
        <div class="num-separator"></div>
        <h5 id="upcoming-event-name" class="event-name">{% trans %}XRPL Warsaw Meetup 2023{% endtrans %}</h5>
        <p class="mb-2 event-details d-flex icon"> <span class="icon-location"> </span><span id="upcoming-event-date">September 08-09, 2023</span></p>
        <p class="event-location d-flex icon"> <span class="icon-date" id="upcoming-event-location"> </span><span id="location-tag"> Warsaw, Poland </span></p>
    </div>
    <a target="_blank" class="cd-none-lg btn btn-primary btn-arrow view-all-events-btn" href="events.html">{% trans %}View All Events{% endtrans %}</a>
</section>
<section class="carousel">
    <div class="image-container">
      <img id="left-image"  alt="Left Event Image">
      <div class="center-image-wrapper">
          <img id="center-image"  alt="Featured Event Image">
          <div class="event-info">
              <span class="name" id="event-name"></span>
              <div class="flex-align">
                <span class="icon-location"> </span>
                <span id="event-location"></span>
              </div>
              <div class="flex-align">
                <span class="icon-date">  </span>
                <span id="event-date"> </span>
              </div>
          </div>
      </div>
      <img id="right-image"  alt="Right Event Image">
    </div>

    <div class="arrow-wrapper">
      <button class="arrow-button left-arrow" id="prev-btn">
        <img  alt="left arrow">
      </button>
      <button class="arrow-button right-arrow" id="next-btn">
        <img  alt="right arrow">
      </button>
    </div>
</section>

<section class="community-funding">
    <a target="_blank" class="cd-none-lg btn btn-primary btn-arrow view-all-events-btn get-funding-btn" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
    <div class="stats">
        <div class="stacked-stats">
            <div class="stat">
                <span class="small-text">{% trans %}funding been awarded{% endtrans %}</span>
                  <div id="staticImage" class="number gradient-num" >
                  <span class="surround-gradient">$</span>
                  13
                  <span class="surround-gradient">M+</span>
             </div>
                  <div class=" ml-8 stat-separator"></div>


            </div>
            <div class="stat">
                <span class="small-text">{% trans %}teams awarded globally{% endtrans %}</span>
                <div class="number gradient-num-two" >120
                                  <span class="surround-gradient-two">+</span>
                </div>
                <div class="ml-14 stat-separator"></div>
            </div>
        </div>
        <div class="stat">
            <span class="small-text">{% trans %}countries represented{% endtrans %}</span>
            <div class="number gradient-num-three">28
                              <span class="surround-gradient-three">+</span>
            </div>
            <div class="ml-19 stat-separator"></div>
        </div>
    </div>
    <div class="funding-section">
        <span class="funding-text">{% trans %}XRPL Developer Funding{% endtrans %}</span>
        <h2>{% trans %}Funding Opportunities for Blockchain Businesses{% endtrans %}</h2>
        <p>{% trans %}If you're a software developer or team looking to build your next blockchain business on the XRP Ledger (XRPL), numerous funding opportunities like grants and hackathons await your innovation.{% endtrans %}</p>
     <a class="cd-none-sm btn btn-primary btn-arrow view-all-events-btn" target="_blank" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
    </div>
</section>

<section class="community-spotlight-wrapper">
    <div class="community-spotlight">
        <h6 class="funding-text">{% trans %}XRPL Community Spotlight{% endtrans %}</h6>
        <h2 class="spotlight-subtitle">{% trans %}Showcase your blockchain project, application, or product{% endtrans %}</h2>
        <p class="spotlight-description">{% trans %}Get featured on the Developer Reflections blog or Ecosystem page, and amplify your innovation within the blockchain community.{% endtrans %}</p>
        <a target="_blank" class="w-222 btn btn-primary btn-arrow view-all-events-btn" data-tf-popup="ssHZA7Ly" data-tf-iframe-props="title=Developer Reflections" data-tf-medium="snippet">{% trans %}Submit Your Project{% endtrans %}</a>
    </div>
    <div class="projects-wrapper">
        <div class="project-card top-left">
            <div class="card-image">
            <img class="middle-image" src="./assets/img/community/blockdaemon.png" />
            </div>
            <div class="card-details">
              <h6 class="project-title">Blockdaemon</h6>
              <p class="project-description">{% trans %}Your go-to independent blockchain infrastructure provider, offering secure and scalable blockchain services, including wallets, nodes, staking, protocols, and integrations for developers and institutions alike.{% endtrans %}</p>
              <a href="https://xrpl.org/blog/2023/blockdaemon.html" target="_blank" class="view-project external-link">{% trans %}View Project{% endtrans %}</a>
            </div>
        </div>
        <div class="project-card bottom-right">
              <div class="card-image">
              <img class="middle-image-two" src="./assets/img/community/xrp-cafe.png" />
              </div>
            <div class="card-details">
              <h6 class="project-title">XRPCafe</h6>
              <p class="project-description">{% trans %}A premier NFT marketplace dedicated to fostering mass adoption of the XRP Ledger.{% endtrans %}</p>
              <a href="https://xrpl.org/blog/2023/xrpcafe.html" target="_blank" class="view-project external-link">{% trans %}View Project{% endtrans %}</a>
            </div>
        </div>
    </div>
</section>

<section class="bottom-cards-section">
  <div class="com-card">
    <img class="top-left-img" />
    <div class="card-content">
      <h6 class="card-title">{% trans %}Contribute to Consensus{% endtrans %} </h6>
      <h6 class="card-subtitle">{% trans %}Run an XRP Ledger network node{% endtrans %} </h6>
      <p class="card-description">{% trans %}Thank you for your interest in contributing to XRPL.org. {% endtrans %}</p>
      <div class="card-links">
        <a class="com-card-link" target="_blank" href="the-rippled-server.html">{% trans %}The <code>rippled</code> Server{% endtrans %}</a>
        <a class="com-card-link" href="run-rippled-as-a-validator.html" target="_blank">{% trans %}Join UNL{% endtrans %} </a>
        <a class="com-card-link" target="_blank" href="install-rippled.html">{% trans %}Install & Configure {% endtrans %}</a>
        <a class="com-card-link" target="_blank" href="troubleshoot-the-rippled-server.html">{% trans %}Troubleshooting{% endtrans %}</a>
      </div>
     </div>
  </div>
  <div class="com-card">
    <img class="bottom-right-img" />
    <div class="card-content">
      <h6 class="card-title">{% trans %}XRPL Careers {% endtrans %}</h6>
      <h6 class="card-subtitle">{% trans %}Discover your next career opportunity in the XRPL community {% endtrans %}</h6>
      <p class="card-description">{% trans %}Teams across the XRPL community are looking for talented individuals to help build their next innovation.{% endtrans %} </p>
      <div class="card-links">
      <a class="com-card-link" target="_blank" href="https://jobs.xrpl.org/jobs">{% trans %}View Open Roles{% endtrans %}</a>
      </div>
    </div>
  </div>
  <div class="com-card">
    <img class="top-right-img" />
    <div class="card-content">
      <h6 class="card-title">{% trans %}Contribute to XRPL.org{% endtrans %} </h6>
      <h6 class="card-subtitle">{% trans %}A Community-Driven Resource for All Things XRPL.org {% endtrans %}</h6>
      <p class="card-description">{% trans %}Contribute to XRPL.org, the go-to resource for XRP Ledger. This open-source portal welcomes contributions from anyone for suggested changes.{% endtrans %} </p>
      <div class="card-links">
      <a class="com-card-link" target="_blank" href="https://github.com/XRPLF/xrpl-dev-portal/blob/master/CONTRIBUTING.md">{% trans %}Read Contributor Guidelines{% endtrans %} </a>
      </div>
    </div>
  </div>
</section>
{% 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 %}

{% block endbody %}
<script type="text/javascript">
var events = {{[
  { "name": _("New Horizon: Innovate Without Limits: New Horizons Await"),
    "description": _("Join our EVM-compatible chain launch for a chance to win $50,000 in prizes! Unleash your creativity in DeFi and NFTs, with judging criteria focused on novelty, impact, and community engagement."),
    "type": "hackathon",
    "link": "https://newhorizon.devpost.com/",
    "location": _("Virtual"),
    "date": "October 19, 2023 - December 22, 2023",
    "image": "Hackathons.png",
    "end_date": "December 22, 2023",
    "start_date": "October 19, 2023"
    },
  {
    "name":_("XRPL Community Report Launch Party"),
    "description": _("Celebrate the XRPL Community Report launch at 7pm! Join blockchain enthusiasts, connect with experts, and discover opportunities in the XRP Ledger ecosystem. Limited space available, so register now for a night of celebration and networking!"),
    "type": "meetup",
    "link": "https://www.eventbrite.fr/e/billets-xrpl-community-report-launch-party-753788370307",
    "location": _("Paris, France"),
    "date": "November 28, 7pm - 9pm",
    "image": "paris.png",
    "end_date": "November 28, 2023",
    "start_date": "November 28, 2023"
    },
   {
    "name": _("XRPL Toronto Meetup Community - Celebrate with Us!"),
    "description": _("To connect the blockchain community, showcase campus ambassador projects, and celebrate the year's progress with a holiday theme."),
    "type": "meetup",
    "link": "https://www.meetup.com/xrpl-toronto-community-meetup/events/294766059",
    "location": _("Downtown, Toronto"),
    "date": "December 7th, 6pm - 9pm",
    "image": "event-meetup-toronto@2x.jpg",
    "end_date": "December 7, 2023",
    "start_date": "December 7, 2023"
    },
  {
    "name": _("XRPL Grants Info Session: Decentralized Exchange (DEX) Focused"),
    "description":
      _("Watch the recorded information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Decentralized Exchange (DEX) projects."),
    "type": "info-session",
    "link": "https://www.youtube.com/watch?v=BbGu0QC5WEE",
    "location": _("Virtual - Zoom"),
    "date": "September 06, 2023",
    "image": "InfoSessions.png",
    "end_date": "September 06, 2023",
    "start_date": "September 06, 2023",
  },
  {
    "name": _("APEX 2024: The XRPL Developer Summit"),
    "description":
      _("Apex XRPL Developer Summit is the annual event where developers, contributors, and thought leaders come together to learn, build, share, network, and celebrate all things XRP Ledger."),
    "type": "conference",
    "link": "http://apexdevsummit.com",
    "location": _("Amsterdam"),
    "date": "June 11 - 13, 2024",
    "image": "Conference.png",
    "end_date": "June 13, 2024",
    "start_date": "June 11, 2024",
  },
  {
    "name": _("XRPL Developers Reddit AMA: Real World Assets"),
    "description":
      _("Join us for a live chat on Reddit and learn more about how developers are building real world assets with confidence on the XRP Ledger."),
    "type": "ama",
    "link": "https://xrplresources.org/rwa-ama?utm_source=web&utm_medium=web&utm_campaign=bwc",
    "location":_("Virtual - Reddit"),
    "date": "October 17, 2023",
    "image": "AMAs.png",
    "end_date": "October 17, 2023",
    "start_date": "October 17, 2023",
  },
  {
    "name": _("Paris Blockchain Week"),
    "description": _("Paris Blockchain Week is Europe's biggest blockchain & digital assets event that covers all aspects of blockchain technology."),
    "type": "conference",
    "link": "https://www.parisblockchainweek.com/",
    "location": _("Paris, France"),
    "date": "April 9 - 12, 2024",
    "image": "Conference.png",
    "end_date": "April 12, 2024",
    "start_date": "April 12, 2024",
  },
  {
    "name": _("Consensus"),
    "description": _("Join us at Consensus! This event is the world's largest, longest-running and most influential gathering that brings together all sides of the cryptocurrency, blockchain and Web3 community."),
    "type": "conference",
    "link": "https://consensus2024.coindesk.com/sponsors/",
    "location": _("Austin, Texas"),
    "date": "May 29 - June 1, 2024",
    "image": "Conference.png",
    "end_date": "June 1, 2024",
    "start_date": "June 1, 2024",
  },

]}};
$(document).ready(() => {
 // Function to convert string date to Date object
const parseDate = (dateString) => {
  const [monthDay, year] = dateString.split(", ");
  const [month, day] = monthDay.split(" ");
  const months = {
    "January": 0, "February": 1, "March": 2, "April": 3,
    "May": 4, "June": 5, "July": 6, "August": 7,
    "September": 8, "October": 9, "November": 10, "December": 11
  };
  return new Date(year, months[month], day);
};
  // Get today's date (without time)
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  // Find the closest future event
  let closestEvent = null;
  let minDaysDiff = Infinity;

  events.forEach(event => {
    const eventEndDate = parseDate(event.start_date);
    const diffTime = eventEndDate - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    if (diffDays >= 0 && diffDays < minDaysDiff) {
      closestEvent = event;
      minDaysDiff = diffDays;
    }
  });

  if (closestEvent) {
    document.getElementById('days-count').textContent = `${minDaysDiff}`;
    document.getElementById('upcoming-event-name').textContent = closestEvent.name;
    document.getElementById('upcoming-event-date').textContent = closestEvent.date;
    document.getElementById('location-tag').textContent = closestEvent.location;
  } else {
    console.log('No upcoming events found. Hiding upcoming events section');
    document.getElementById('upcoming-events-section').style = 'display:none'
  }
});
</script>
<script type="application/javascript" src="{{currentpage.prefix}}assets/js/contribute-carousel.js"></script>
<script src="//embed.typeform.com/next/embed.js"></script>

{% endblock %}