mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 11:45:50 +00:00
First pass adding landing page
This commit is contained in:
Jake
471
template/page-ambassadors.html.jinja
Normal file
471
template/page-ambassadors.html.jinja
Normal file
@@ -0,0 +1,471 @@
|
||||
{% 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-ambassadors{% endblock %}
|
||||
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
|
||||
<div class="position-relative d-none-sm">
|
||||
<img src="./img/backgrounds/ambassador-purple.svg" class="position-absolute" style="top: 0; right:0">
|
||||
</div>
|
||||
|
||||
<section class="container-new py-26 text-lg-center">
|
||||
<div class="p-0 col-lg-8 mx-lg-auto">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h1 class="mb-0">{% trans %}Become an XRP Ledger Ambassador{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Join the Cohort{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="mt-3 py-3 col-lg-8 mx-lg-auto p-0">{% trans %}The XRPL Developer and Campus Ambassador program engages, supports, connects and
|
||||
recognizes champions of the XRPL and empowers them to further advance awareness of and development on the
|
||||
ledger.{% endtrans %}</p>
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Current Developers -->
|
||||
<section class="container-new py-26">
|
||||
<div class="card-grid card-grid-2xN">
|
||||
<div class="order-1 order-lg-2">
|
||||
<div class="d-flex flex-column-reverse mb-2 p-lg-3">
|
||||
<h3 class="h4 h2-sm">{% trans %}XRPL Developer Ambassadors{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Current Developers{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="p-lg-3 mb-2 longform">{% trans %}XRPL Developer Ambassadors connect the community through events,
|
||||
workshops, hackathons, content creation and more. Ambassadors help answer questions, share resources on
|
||||
how to build on the XRPL and provide updates on community developments.{% endtrans %}</p>
|
||||
<div class="d-none d-lg-block p-lg-3">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Connect with Ambassadors{%endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-2 order-lg-1 ">
|
||||
<img src="./assets/img/ambassadors/developer-hero@2x.png" class="w-100">
|
||||
</div>
|
||||
|
||||
<div class="d-lg-none order-3">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Connect with Ambassadors{% endtrans%}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- How it Works -->
|
||||
<section class="container-new py-26">
|
||||
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
|
||||
<div class="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
|
||||
<div class="order-1 mr-lg-4 mb-4 pb-3 mb-lg-0 pb-lg-0 half-on-large">
|
||||
<div class="d-flex flex-column-reverse mb-2 p-lg-3">
|
||||
<h3 class="h4 h2-sm">{% trans %}Process to Become an Ambassador{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}How it Works{% endtrans %}</h6>
|
||||
</div>
|
||||
|
||||
<p class="p-lg-3 mb-2 longform">{% trans %}Begin an application to get started in the process of becoming either a XRPL Campus or
|
||||
Developer Ambassador.{% endtrans %}</p>
|
||||
|
||||
<div class="d-none d-lg-block p-lg-3">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="order-2 half-on-large mr-lg-4">
|
||||
|
||||
<div class="row m-0">
|
||||
|
||||
<div class="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/01.svg" class="">
|
||||
<div class="p-3">
|
||||
<h6 class="mb-3">Apply</h6>
|
||||
<p class="">Submit an application to be considered for the Developer or Campus Ambassador program.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hide on large -->
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 d-lg-none ">
|
||||
<img src="./assets/img/ambassadors/02.svg" class="">
|
||||
<div class="p-3">
|
||||
<h6 class="mb-3">Interview</h6>
|
||||
<p class="">Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/03.svg" class="">
|
||||
<div class="p-3">
|
||||
<h6 class="mb-3">Join</h6>
|
||||
<p class="">Congrats on your new role! Join the global cohort of Ambassadors and meet with the community participants during onboarding.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hide on large -->
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 d-lg-none">
|
||||
<img src="./assets/img/ambassadors/04.svg" class="">
|
||||
<div class="p-3">
|
||||
<h6 class="mb-3">Learn</h6>
|
||||
<p class="">Participate in personalized learning and training sessions for Ambassadors on the XRPL and blockchain technology.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col 1 -->
|
||||
|
||||
<!-- Show on large -->
|
||||
<div class="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block mt-5">
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 mt-5">
|
||||
<img src="./assets/img/ambassadors/02.svg" class="">
|
||||
<div class="p-3">
|
||||
<h6 class="mb-3">Interview</h6>
|
||||
<p class="">Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 ">
|
||||
<img src="./assets/img/ambassadors/04.svg" class="">
|
||||
<div class="p-3">
|
||||
<h6 class="mb-3">Learn</h6>
|
||||
<p class="">Participate in personalized learning and training sessions for Ambassadors on the XRPL and blockchain technology.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end col 2 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="d-lg-none order-3 mt-4 pt-3">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{% endtrans%}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Benefits -->
|
||||
<section class="container-new py-26">
|
||||
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
|
||||
<div class="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
|
||||
<div class="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 half-on-large ml-lg-4">
|
||||
<div class="d-flex flex-column-reverse mb-2 p-lg-3">
|
||||
<h3 class="h4 h2-sm">{% trans %}Why Become an XRPL Ambassador?{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Benefits{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="p-lg-3 mb-2 longform">{% trans %}Join a global cohort of Ambassadors.{% endtrans %}</p>
|
||||
</div>
|
||||
|
||||
<div class="order-2 order-lg-1 half-on-large mr-lg-4">
|
||||
|
||||
<div class="row align-items-center m-0">
|
||||
|
||||
<div class="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/benefits-01.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">1 Exclusive Opportunities</h6>
|
||||
<p class="">Get access and invitations to Ambassador-only events, conferences, and opportunities</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hide on large -->
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 d-lg-none ">
|
||||
<img src="./assets/img/ambassadors/benefits-02.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">2 Education</h6>
|
||||
<p class="">Tutorials and workshops from leading XRPL and blockchain developers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/benefits-03.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">3 Swag</h6>
|
||||
<p class="">New XRPL swag for Ambassadors and swag to share with their communities</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hide on large -->
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 d-lg-none">
|
||||
<img src="./assets/img/ambassadors/benefits-04.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">4 Mentorship</h6>
|
||||
<p class="">Serve as an advocate and receive support from notable members of the community</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/benefits-05.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">5 Career Acceleration</h6>
|
||||
<p class="">Gain hands-on experience building communities and grow your professional network in the blockchain industry</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end col 1 -->
|
||||
|
||||
<!-- Show on large -->
|
||||
<div class="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 ">
|
||||
<img src="./assets/img/ambassadors/benefits-02.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">2 Education</h6>
|
||||
<p class="">Tutorials and workshops from leading XRPL and blockchain developers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 ">
|
||||
<img src="./assets/img/ambassadors/benefits-04.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">4 Mentorship</h6>
|
||||
<p class="">Serve as an advocate and receive support from notable members of the community</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end col 2 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Current Students -->
|
||||
<section class="container-new py-26">
|
||||
|
||||
<div class="p-0 col-lg-7 mx-lg-auto">
|
||||
<div class="d-flex flex-column-reverse mb-2 p-lg-3">
|
||||
<h3 class="h4 h2-sm">{% trans %}XRPL Campus Ambassadors{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Current Students{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="p-lg-3 mb-2 longform">{% trans %}The XRPL Campus Ambassador Program aims to elevate the impact of college students who are passionate about blockchain technology. In their role, Campus Ambassadors help educate other students about crypto and how to start building on the XRPL.{% endtrans %}</p>
|
||||
<a class="m-lg-3 btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a>
|
||||
</div>
|
||||
|
||||
<!-- Quotes -->
|
||||
<div class="p-0 col-lg-10 mx-lg-auto ambassador-quote">
|
||||
<div class="mb-4 p-lg-3">
|
||||
<img src="./assets/img/ambassadors/TEMP-quote1.svg" class="w-100">
|
||||
<!-- “I have a sense of fulfilment in knowing that I am playing my part in educating young people in Southern Africa and exposing them to the boundless opportunities that blockchain brings about.” -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-0 col-lg-7 mx-lg-auto">
|
||||
<p class="p-lg-3 mb-2">Titose C.<br >
|
||||
University of Cape Town,<br >
|
||||
Spring 2022 XRPL Campus Ambassador</p>
|
||||
</div>
|
||||
|
||||
<!-- Image Block -->
|
||||
<div class=" mt-4 ">
|
||||
<img src="./assets/img/ambassadors/TEMP-students-large.png" class="w-100">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Eligibility -->
|
||||
<section class="container-new py-26">
|
||||
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
|
||||
<div class="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
|
||||
|
||||
<div class="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 half-on-large mr-lg-5">
|
||||
<div class="d-flex flex-column-reverse mb-2 p-lg-3">
|
||||
<h3 class="h4 h2-sm">{% trans %}Should You Apply?{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Eligibility{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="p-lg-3 mb-2 longform">{% trans %}Interested in empowering and growing the global XRPL developer community.{% endtrans %}</p>
|
||||
</div>
|
||||
|
||||
<div class="order-2 half-on-large ml-lg-4">
|
||||
|
||||
<div class="row align-items-center m-0">
|
||||
|
||||
<div class="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/eligibility-01.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">1 A Leader</h6>
|
||||
<p class="">Interested in leading meetups and workshops for your local community or campus</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hide on large -->
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 d-lg-none ">
|
||||
<img src="./assets/img/ambassadors/eligibility-02.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">2 Active</h6>
|
||||
<p class="">An active participant in the XRPL community or interested in blockchain and crypto technologies</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/eligibility-03.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">3 Curious</h6>
|
||||
<p class="">Eager to learn more about technical blockchain topics and the XRPL</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hide on large -->
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 d-lg-none">
|
||||
<img src="./assets/img/ambassadors/eligibility-04.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">4 Passionate</h6>
|
||||
<p class="">Passionate about increasing XRPL education and awareness through events, content and community forums</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3">
|
||||
<img src="./assets/img/ambassadors/eligibility-05.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">5 Creative</h6>
|
||||
<p class="">Ability to think outside the box to grow the XRPL community</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end col 1 -->
|
||||
|
||||
<!-- Show on large -->
|
||||
<div class="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
|
||||
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 ">
|
||||
<img src="./assets/img/ambassadors/eligibility-02.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">2 Active</h6>
|
||||
<p class="">An active participant in the XRPL community or interested in blockchain and crypto technologies</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-lg-3 mb-lg-4 pb-3 ">
|
||||
<img src="./assets/img/ambassadors/eligibility-04.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">4 Passionate</h6>
|
||||
<p class="">Passionate about increasing XRPL education and awareness through events, content and community forums</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end col 2 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Global Community Carousel -->
|
||||
<section class="container-new py-26">
|
||||
|
||||
<div class="p-0 col-lg-5 mx-lg-auto">
|
||||
<div class="d-flex flex-column-reverse mb-2 p-lg-3">
|
||||
<h3 class="h4 h2-sm">{% trans %}Join a Global Cohort of Ambassadors{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Global Community{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" mt-4 ">
|
||||
<img src="./assets/img/ambassadors/TEMP-locations.png" class="w-100">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Connect -->
|
||||
<section class="container-new py-26">
|
||||
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
|
||||
<div class="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
|
||||
<div class="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 half-on-large">
|
||||
<div class="d-flex flex-column-reverse mb-2 p-lg-3">
|
||||
<h3 class="h4 h2-sm">{% trans %}Stay Connected to the XRPL Ambassadors{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Connect{% endtrans %}</h6>
|
||||
</div>
|
||||
|
||||
<p class="p-lg-3 mb-2 longform">{% trans %}To stay up-to-date on the latest activity, meetups, and events of the XRPL Developer Ambassadors and XRPL Campus Ambassadors be sure to follow these channels:{% endtrans %}</p>
|
||||
|
||||
<div class="d-none d-lg-block p-lg-3">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-2 half-on-large ml-lg-5">
|
||||
<!-- Number blocks Here -->
|
||||
<div class="row align-items-center m-0">
|
||||
|
||||
<div class="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
|
||||
<div class="p-lg-3 mb-3 pb-3">
|
||||
<img src="./assets/img/ambassadors/icon_meetup.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">MeetUp</h6>
|
||||
<p class="">Attend an XRPL Meetup in your local area</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-lg-3 mb-3 pb-3">
|
||||
<img src="./assets/img/ambassadors/icon_devto.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">Dev.to Blog</h6>
|
||||
<p class="">Read more about the activity of the XRPL Ambassadors</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 p-0 pl-lg-4">
|
||||
|
||||
<div class="p-lg-3 mb-3 pb-3 ">
|
||||
<img src="./assets/img/ambassadors/icon_discord.svg" class="mb-3">
|
||||
<div class="">
|
||||
<h6 class="mb-3">Discord</h6>
|
||||
<p class="">Join the conversation on the XRPL Developer Discord</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="d-lg-none order-3 mt-4 pt-3">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{% endtrans%}</a>
|
||||
</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": "Ambassadors"
|
||||
})
|
||||
</script>
|
||||
{% endblock analytics %}
|
||||
Reference in New Issue
Block a user