mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 20:05:50 +00:00
Migrate marketing pages to Redocly
adds events page, updates convert-template script adds proper filter logic to events page, adds moment converts history page converts impact and xrpl-ledger-overview page try getting animation on impact to work converts xrp overview page and logic adds contribute page, still needs typeform integration and animations converts developer funding page adds dev tools page add missing image adds code samples py conversion to js adds hook to read current theme, adds animations to impact page adds careers animations adds correct animations for contribute page adds light mode v of animations on contribute page adds animations to uses page adds modal logos and uses modal logic completes uses page more changes Fix casing issues with use case files fix grid issue on uses
This commit is contained in:
akcodez
@@ -24,7 +24,6 @@ export function Navbar(props) {
|
||||
// const [isOpen, setIsOpen] = useMobileMenu(false);
|
||||
const themeConfig = useThemeConfig();
|
||||
const { changeLanguage } = useI18n();
|
||||
|
||||
const menu = themeConfig.navbar?.items;
|
||||
const logo = themeConfig.logo;
|
||||
|
||||
|
||||
@@ -1,14 +1,53 @@
|
||||
/**
|
||||
* Slugify function, has to match the formula used in interactive-tutorial.js
|
||||
*/
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const useThemeFromClassList = (classNames) => {
|
||||
const [currentTheme, setCurrentTheme] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Function to update the theme based on the class list
|
||||
const updateTheme = () => {
|
||||
for (const className of classNames) {
|
||||
if (document.documentElement.classList.contains(className)) {
|
||||
setCurrentTheme(className);
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initial update
|
||||
updateTheme();
|
||||
|
||||
// Create an observer instance linked to the callback function
|
||||
const observer = new MutationObserver(() => {
|
||||
updateTheme();
|
||||
});
|
||||
|
||||
// Start observing the target node for configured mutations
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true, // Listen for attribute changes
|
||||
attributeFilter: ['class'], // Specifically, listen only to "class" attribute changes
|
||||
});
|
||||
|
||||
// Cleanup: Disconnect the observer
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [classNames]);
|
||||
|
||||
return currentTheme;
|
||||
};
|
||||
|
||||
export function slugify(s) {
|
||||
const unacceptable_chars = /[^A-Za-z0-9._ ]+/g;
|
||||
const whitespace_regex = /\s+/g;
|
||||
s = s.replace(unacceptable_chars, '');
|
||||
s = s.replace(whitespace_regex, '_');
|
||||
s = s.replace(unacceptable_chars, "");
|
||||
s = s.replace(whitespace_regex, "_");
|
||||
s = s.toLowerCase();
|
||||
if (!s) {
|
||||
s = '_';
|
||||
s = "_";
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
414
content/ambassadors.page.tsx
Normal file
414
content/ambassadors.page.tsx
Normal file
@@ -0,0 +1,414 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslate } from '@portal/hooks';
|
||||
|
||||
false
|
||||
|
||||
const target= {prefix: ''}; // TODO: fixme
|
||||
|
||||
export default function Ambassadors() {
|
||||
const { translate } = useTranslate();
|
||||
|
||||
return (
|
||||
<div className="landing page-ambassadors">
|
||||
<div>
|
||||
<div className="position-relative d-none-sm">
|
||||
<img alt="background purple waves" src={require("./img/backgrounds/ambassador-purple.svg")} className="position-absolute" style={{top: 0, right: 0}} />
|
||||
</div>
|
||||
<section className="container-new py-26 text-lg-center">
|
||||
<div className="p-0 col-lg-8 mx-lg-auto">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0">{translate("Become an XRP Ledger Campus Ambassador")}</h1>
|
||||
<h6 className="eyebrow mb-3">{translate("Join the Student Cohort")}</h6>
|
||||
</div>
|
||||
<p className="mt-3 py-3 col-lg-8 mx-lg-auto p-0">{translate("The XRPL Campus Ambassador program engages, supports, connects, and recognizes a group of student champions of the XRPL and empowers them to further advance engagement on the ledger.")}</p>
|
||||
<button data-tf-popup="rTioxhMY" data-tf-iframe-props="title=XRPL Campus Ambassador" data-tf-medium="snippet" className="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply for Fall 2023</button>
|
||||
</div>
|
||||
</section>
|
||||
{/* Current Students */}
|
||||
<section className="container-new py-26">
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
<div className="order-lg-2 mx-lg-4 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 pr-lg-5">
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("XRPL Campus Ambassadors")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("Current Students")}</h6>
|
||||
</div>
|
||||
<p className="p-lg-3 mb-2 longform">{translate("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.")}</p>
|
||||
<div className="d-none d-lg-block p-lg-3">
|
||||
<button data-tf-popup="rTioxhMY" data-tf-iframe-props="title=XRPL Campus Ambassador" data-tf-medium="snippet" className="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply for Fall 2023</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-lg-1 col-lg-6 px-0 mr-lg-4">
|
||||
<div className="row m-0">
|
||||
<img alt="Person speaking and person taking photo" src={require("./static/img/ambassadors/developer-hero@2x.png")} className="w-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-lg-none order-3 mt-4 pt-3 p-lg-3">
|
||||
<button data-tf-popup="rTioxhMY" data-tf-iframe-props="title=XRPL Campus Ambassador" data-tf-medium="snippet" className="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply for Fall 2023</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Benefits */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
<div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("Why become an XRPL Campus Ambassador?")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("Benefits")}</h6>
|
||||
</div>
|
||||
<p className="p-lg-3 mb-2 longform">{translate("Join a global cohort of students empowering others to build on the XRPL.")}</p>
|
||||
</div>
|
||||
<div className="order-2 col-lg-6 px-0 mr-lg-5">
|
||||
<div className="row align-items-center m-0" id="benefits-list">
|
||||
{/* benefitslist */}
|
||||
<div className="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="Smiley face" id="benefits-01" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Exclusive Opportunities")}</h6>
|
||||
<p>{translate(" Get access and invitations to Ambassador-only events, conferences, and opportunities")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none ">
|
||||
<img alt="Book" id="benefits-02" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Education")}</h6>
|
||||
<p>{translate("Tutorials and workshops from leading XRPL and blockchain developers")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="Gift" id="benefits-03" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Swag")}</h6>
|
||||
<p>{translate("New XRPL swag for Ambassadors and swag to share with other students")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="Medallion" id="benefits-04" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Mentorship")}</h6>
|
||||
<p>{translate("Serve as an advocate and receive support from notable members of the community")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="Up Arrow" id="benefits-05" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3 pb-lg-0">
|
||||
<h6 className="mb-3">{translate("Career Acceleration")}</h6>
|
||||
<p className="pb-lg-0">{translate("Gain hands-on experience building communities and grow your professional network in the blockchain industry")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="Dollar Sign" id="benefits-06" className="pl-lg-3" />
|
||||
<div className="pb-lg-0">
|
||||
<h6 className="mb-3">{translate("Stipend")}</h6>
|
||||
<p className="pb-lg-0">{translate("Receive a stipend to fund your ideas and initiatives that fuel XRPL growth on your campus")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 1 */}
|
||||
{/* Show on large */}
|
||||
<div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
|
||||
<div className="px-lg-3 pb-3 pt-5 mt-5">
|
||||
<img alt="Book" id="benefits-02" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Education")}</h6>
|
||||
<p>{translate("Tutorials and workshops from leading XRPL and blockchain developers")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 ">
|
||||
<img alt="Medallion" id="benefits-04" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Mentorship")}</h6>
|
||||
<p>{translate("Serve as an advocate and receive support from notable members of the community")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="Dollar Sign" id="benefits-06" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3 pb-lg-0">
|
||||
<h6 className="mb-3">{translate("Stipend")}</h6>
|
||||
<p className="pb-lg-0">{translate("Receive a stipend to fund your ideas and initiatives that fuel XRPL growth on your campus")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 2 */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Eligibility */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
|
||||
<div className="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 mr-lg-5">
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("Should You Apply?")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("Eligibility for XRPL Campus Ambassadors")}</h6>
|
||||
</div>
|
||||
<p className="p-lg-3 mb-2 longform">{translate("Students currently enrolled in an undergraduate or postgraduate program at an accredited college or university are eligible to apply.")}</p>
|
||||
</div>
|
||||
<div className="order-2 order-lg-1 col-lg-6 px-0">
|
||||
<div className="row align-items-center m-0" id="eligibility-list">
|
||||
<div className="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="Calendar" id="eligibility-01" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("A Leader")}</h6>
|
||||
<p>{translate("Interested in leading meetups and workshops for your local campus community")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none ">
|
||||
<img alt="Book" id="eligibility-02" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Active")}</h6>
|
||||
<p>{translate("An active participant in the XRPL community or interested in blockchain and crypto technologies")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="CPU" id="eligibility-03" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Curious")}</h6>
|
||||
<p>{translate("Eager to learn more about technical blockchain topics and the XRPL")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="Quote Bubble" id="eligibility-04" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3 pb-lg-0">
|
||||
<h6 className="mb-3">{translate("Passionate")}</h6>
|
||||
<p>{translate("Passionate about increasing XRPL education and awareness through events, content, and classroom engagement")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-lg-3 pb-3">
|
||||
<img alt="People" id="eligibility-05" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3 pb-lg-0">
|
||||
<h6 className="mb-3">{translate("Creative")}</h6>
|
||||
<p className="pb-lg-0 mb-0">{translate("Ability to think outside the box to grow the XRPL student community")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 1 */}
|
||||
{/* Show on large */}
|
||||
<div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
|
||||
<div className="px-lg-3 pb-3 ">
|
||||
<img alt="Book" id="eligibility-02" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Active")}</h6>
|
||||
<p>{translate("An active participant in the XRPL community or interested in blockchain and crypto technologies")} </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 ">
|
||||
<img alt="Quote Bubble" id="eligibility-04" className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3 pb-lg-0">
|
||||
<h6 className="mb-3">{translate("Passionate")}</h6>
|
||||
<p> {translate("Passionate about increasing XRPL education and awareness through events, content, and classroom engagement")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 2 */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Current Students */}
|
||||
<section className="container-new py-26">
|
||||
{/* Quotes */}
|
||||
<div id="carouselSlidesOnly" className="carousel slide col-lg-10 mx-auto px-0" data-ride="carousel">
|
||||
<div className="carousel-inner">
|
||||
<div className="carousel-item active">
|
||||
<div className="p-0">
|
||||
<div className="mb-4 p-lg-3">
|
||||
<img alt="I have learned so much through creating programs and connecting with the XRPL community. Im truly grateful for everyone's support along the way and for the opportunity to gain so much knowledge from this expierence" src={require("./static/img/ambassadors/quote1-small.svg")} className="h-100 d-lg-none mb-4" />
|
||||
<img alt="I have learned so much through creating programs and connecting with the XRPL community. Im truly grateful for everyone's support along the way and for the opportunity to gain so much knowledge from this expierence" src={require("./static/img/ambassadors/quote1.svg")} className="h-100 d-none d-lg-block" />
|
||||
<div className="p-0 col-lg-7 mx-lg-auto">
|
||||
<p className="p-lg-3 mb-2"><strong>Derrick N.</strong><br />
|
||||
Toronto Metropolitan University<br />
|
||||
Spring 2023 XRPL Campus Ambassador</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-item mb-20">
|
||||
<div className="p-0">
|
||||
<div className="mb-4 p-lg-3">
|
||||
<img alt="The XRPL Campus Ambassador program really helped broaden my view of the blockchain industry with their learning resource and virtual community. Being an ambassador allowed me to meet industry professionals and likeminded peers which have given me invaluable experiences and insights." src={require("./static/img/ambassadors/quote2-small.svg")} className="h-150 d-lg-none mb-4" />
|
||||
<img alt="The XRPL Campus Ambassador program really helped broaden my view of the blockchain industry with their learning resource and virtual community. Being an ambassador allowed me to meet industry professionals and likeminded peers which have given me invaluable experiences and insights." src={require("./static/img/ambassadors/quote2.svg")} className="h-100 d-none d-lg-block" />
|
||||
<div className="p-0 col-lg-7 mx-lg-auto">
|
||||
<p className="p-lg-3 mb-2"><strong>Sally Z.</strong><br />
|
||||
Toronto Metropolitan University<br />
|
||||
Spring 2023 XRPL Campus Ambassador</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-item mb-40">
|
||||
<div className="p-0">
|
||||
<div className="mb-4 p-lg-3">
|
||||
<img alt="Ive had the pleasure over the course of this program to speak with amazing individuals, I encourage you all to reach out to other people in this program and make as many connections as you can. You will quickly find out that by speaking with other people in this cohort you can learn just about anything if you ask the right people." src={require("./static/img/ambassadors/quote3-small.svg")} className="h-150 d-lg-none mb-4" />
|
||||
<img alt="Ive had the pleasure over the course of this program to speak with amazing individuals, I encourage you all to reach out to other people in this program and make as many connections as you can. You will quickly find out that by speaking with other people in this cohort you can learn just about anything if you ask the right people." src={require("./static/img/ambassadors/quote3.svg")} className="h-100 d-none d-lg-block" />
|
||||
<div className="p-0 col-lg-7 mx-lg-auto">
|
||||
<p className="p-lg-3 mb-2"><strong>Nick D.</strong><br />
|
||||
Miami University<br />
|
||||
Spring 2023 XRPL Campus Ambassador</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* How it Works */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
<div className="order-1 mr-lg-4 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("Process to become a Campus Ambassador")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("How it Works")}</h6>
|
||||
</div>
|
||||
<p className="p-lg-3 mb-2 longform">{translate("Apply now to become an XRPL Campus Ambassador.")}</p>
|
||||
<div className="d-none d-lg-block p-lg-3">
|
||||
<button data-tf-popup="rTioxhMY" data-tf-iframe-props="title=XRPL Campus Ambassador" data-tf-medium="snippet" className="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply for Fall 2023</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 col-lg-6 px-0 ml-lg-2">
|
||||
<div className="row m-0">
|
||||
<div className="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img src={require("./static/img/ambassadors/01.svg")} className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Apply")}</h6>
|
||||
<p>{translate("Submit an application to be considered for the Campus Ambassador program.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none ">
|
||||
<img src={require("./static/img/ambassadors/02.svg")} className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Interview")}</h6>
|
||||
<p>{translate("Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img src={require("./static/img/ambassadors/03.svg")} className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Join")}</h6>
|
||||
<p>{translate("Congrats on your new role! Join the global cohort of Ambassadors and meet with community participants during onboarding.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="p-lg-3 pb-3 d-lg-none">
|
||||
<img src={require("./static/img/ambassadors/04.svg")} className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Learn")}</h6>
|
||||
<p> {translate("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 className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block mt-5">
|
||||
<div className="px-lg-3 pb-3 mt-5">
|
||||
<img src={require("./static/img/ambassadors/02.svg")} className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3">
|
||||
<h6 className="mb-3">{translate("Interview")}</h6>
|
||||
<p>{translate("Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-lg-3 pb-3 ">
|
||||
<img src={require("./static/img/ambassadors/04.svg")} className="pl-lg-3" />
|
||||
<div className="p-lg-3 pt-3 pb-lg-0">
|
||||
<h6 className="mb-3">{translate("Learn")}</h6>
|
||||
<p className="pb-lg-0">{translate("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 className="d-lg-none order-3 mt-4 pt-3">
|
||||
<button data-tf-popup="rTioxhMY" data-tf-iframe-props="title=XRPL Campus Ambassador" data-tf-medium="snippet" className="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">{translate("Apply for Fall 2023")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Image Block */}
|
||||
<div>
|
||||
<img alt="Ripple Conferences and two people Sitting" src={require("./static/img/ambassadors/students-large.png")} className="w-100" />
|
||||
</div>
|
||||
{/* Global Community Carousel */}
|
||||
<section className="container-new pt-26">
|
||||
<div className="p-0 col-lg-5">
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("Join a global cohort of Student Ambassadors")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("Global Community")}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="container-scroll">
|
||||
<div className="photobanner">
|
||||
<img src={require("./static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
|
||||
<img src={require("./static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
|
||||
<img src={require("./static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
|
||||
</div>
|
||||
<div className="photobanner photobanner-bottom">
|
||||
<img src={require("./static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
|
||||
<img src={require("./static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
|
||||
<img src={require("./static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Connect */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
<div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("Stay connected to the XRPL Campus Ambassadors")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("Connect")}</h6>
|
||||
</div>
|
||||
<p className="p-lg-3 mb-2 longform">{translate("To stay up-to-date on the latest activity, meetups, and events of the XRPL Campus Ambassadors be sure to follow these channels:")}</p>
|
||||
<div className="d-none d-lg-block p-lg-3">
|
||||
<button data-tf-popup="rTioxhMY" data-tf-iframe-props="title=XRPL Campus Ambassador" data-tf-medium="snippet" className="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply for Fall 2023</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 col-lg-6 px-0 ml-lg-5">
|
||||
<div className="row align-items-center m-0">
|
||||
<div className="col-12 col-lg-6 p-0 pr-lg-4">
|
||||
<div className="p-lg-3 mb-3 pb-3">
|
||||
<img alt="meetup" src={require("./static/img/ambassadors/icon_meetup.svg")} className="mb-3" />
|
||||
<div>
|
||||
<h6 className="mb-3"><a className="btn-arrow" href="https://www.meetup.com/pro/xrpl-community/">{translate("MeetUp")}</a></h6>
|
||||
<p>{translate("Attend an XRPL Meetup in your local area")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-lg-3 mb-3 pb-3">
|
||||
<img alt="devto" src={require("./static/img/ambassadors/icon_devto.svg")} className="mb-3" />
|
||||
<div>
|
||||
<h6 className="mb-3"><a className="btn-arrow" href="https://dev.to/t/xrpl">{translate("Dev.to Blog")}</a></h6>
|
||||
<p>{translate("Read more about the activity of the XRPL Ambassadors")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6 p-0 pl-lg-4">
|
||||
<div className="p-lg-3 mb-3 pb-3 ">
|
||||
<img alt="discord" src={require("./static/img/ambassadors/icon_discord.svg")} className="mb-3" />
|
||||
<div>
|
||||
<h6 className="mb-3"><a className="btn-arrow" href="https://xrpldevs.org">{translate("Discord")}</a></h6>
|
||||
<p>{translate("Join the conversation on the XRPL Developer Discord")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-lg-none order-3 mt-4 pt-3">
|
||||
<button data-tf-popup="rTioxhMY" data-tf-iframe-props="title=XRPL Campus Ambassador" data-tf-medium="snippet" className="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply for Fall 2023</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -6,6 +6,7 @@ const langIcons = {
|
||||
go: require('./static/img/logos/golang.svg'),
|
||||
java: require('./static/img/logos/java.svg'),
|
||||
js: require('./static/img/logos/javascript.svg'),
|
||||
php: require('./static/img/logos/php.svg'),
|
||||
py: require('./static/img/logos/python.svg'),
|
||||
http: require('./static/img/logos/globe.svg'),
|
||||
};
|
||||
|
||||
528
content/contribute.page.tsx
Normal file
528
content/contribute.page.tsx
Normal file
@@ -0,0 +1,528 @@
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
import NetworkNodeLight from "./static/js/community/NetworkNodeLight.json";
|
||||
import GrantsDark from "./static/js/community/XRPLGrantsDark.json";
|
||||
import CareersDark from "./static/js/community/CareersDark.json";
|
||||
import { useLottie } from "lottie-react";
|
||||
import { useThemeFromClassList } from "./@theme/helpers";
|
||||
|
||||
// This page still needs typeform integration and animations
|
||||
const 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",
|
||||
},
|
||||
];
|
||||
|
||||
const contributeLedger = [
|
||||
{
|
||||
href: "the-rippled-server",
|
||||
title: "The Rippled Server",
|
||||
desc: "Learn about the core servers that power the XRP Ledger",
|
||||
},
|
||||
{
|
||||
href: "run-rippled-as-a-validator",
|
||||
title: "Join UNL",
|
||||
desc: "Have your server vote on the consensus ledger",
|
||||
},
|
||||
{
|
||||
href: "install-rippled",
|
||||
title: "Install & Configure",
|
||||
desc: "Install and update the rippled server.",
|
||||
},
|
||||
{
|
||||
href: "troubleshoot-the-rippled-server",
|
||||
title: "Troubleshooting",
|
||||
desc: "Troubleshoot all kinds of problems with the rippled server.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Contribute() {
|
||||
const { translate } = useTranslate();
|
||||
//Network Node lg
|
||||
const options = {
|
||||
animationData: NetworkNodeLight,
|
||||
loop: true,
|
||||
};
|
||||
const NetNodeLg = useLottie(options);
|
||||
const NetNodeLgView = NetNodeLg.View;
|
||||
//Network Node sm
|
||||
const NetNodeSm = useLottie(options);
|
||||
const NetNodeSmView = NetNodeSm.View;
|
||||
|
||||
// Grants lg
|
||||
const grantsOptions = {
|
||||
animationData: GrantsDark,
|
||||
loop: true,
|
||||
};
|
||||
const grantsAnimationLg = useLottie(grantsOptions);
|
||||
const GrantsDarkAnimationLg = grantsAnimationLg.View;
|
||||
// Grants Sm
|
||||
const grantsAnimationSm = useLottie(grantsOptions);
|
||||
const GrantsDarkAnimationSm = grantsAnimationSm.View;
|
||||
//Careers lg
|
||||
const careersOptions = {
|
||||
animationData: CareersDark,
|
||||
loop: true,
|
||||
};
|
||||
const carDarkLg = useLottie(careersOptions);
|
||||
const CareersDarkLg = carDarkLg.View;
|
||||
//Careers sm
|
||||
const carDarkSm = useLottie(careersOptions);
|
||||
const CareersDarkSm = carDarkSm.View;
|
||||
|
||||
return (
|
||||
<div className="landing page-community">
|
||||
<div>
|
||||
<section className="text-center" id="community-heading">
|
||||
<div className="d-lg-block d-none">
|
||||
<img
|
||||
alt="People sitting at a conference"
|
||||
className="parallax one"
|
||||
width="220px"
|
||||
height="160px"
|
||||
src={require("./static/img/community/community-one.png")}
|
||||
/>
|
||||
<img
|
||||
alt="Person speaking at a conference"
|
||||
className="parallax two"
|
||||
width="120px"
|
||||
height="160px"
|
||||
src={require("./static/img/community/community-two.png")}
|
||||
/>
|
||||
<img
|
||||
alt="Person sitting and speaking"
|
||||
className="parallax three"
|
||||
width="102px"
|
||||
height="102px"
|
||||
src={require("./static/img/community/community-three.png")}
|
||||
/>
|
||||
<img
|
||||
alt="People chatting"
|
||||
className="parallax four"
|
||||
width="120px"
|
||||
height="160px"
|
||||
src={require("./static/img/community/community-four@2x.png")}
|
||||
/>
|
||||
<img
|
||||
alt="Person speaking at Apex"
|
||||
className="parallax five"
|
||||
width="216px"
|
||||
height="160px"
|
||||
src={require("./static/img/community/community-five@2x.png")}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6 mx-auto text-left text-md-center">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0">
|
||||
{translate("Open for Business, ")}
|
||||
<br className="until-sm" />
|
||||
{translate("Driven to Innovate")}
|
||||
</h1>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("The XRPL Community")}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Join conversation */}
|
||||
<section className="container-new" id="find-us-on-platforms">
|
||||
<div className="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 className="h4 h2-sm">
|
||||
{translate("Find the community on the platforms below")}
|
||||
</h3>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("Join the Conversation")}
|
||||
</h6>
|
||||
</div>
|
||||
<div className="row row-cols-2 row-cols-lg-4 card-deck">
|
||||
{platforms.map((plat) => (
|
||||
<a className="card mb-10" href={plat.link} target="_blank">
|
||||
<div className="card-body">
|
||||
<div className="circled-logo">
|
||||
<img
|
||||
id={`platform-${plat.id}`}
|
||||
alt="(logo)"
|
||||
className={plat?.imgclasses || ""}
|
||||
/>
|
||||
</div>
|
||||
<h4 className="card-title h5">{plat.name}</h4>
|
||||
</div>
|
||||
<div className="card-footer"> </div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
{/* Contribute */}
|
||||
<section className="container-new" id="run-a-network-node">
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div className="col d-none d-lg-block align-self-center">
|
||||
{NetNodeLgView}
|
||||
</div>
|
||||
<div className="col pt-lg-5">
|
||||
<div className="d-flex flex-column-reverse mb-8 pl-0">
|
||||
<h2 className="h4 h2-sm">
|
||||
{translate("Run an XRP Ledger network node")}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("Contribute to Consensus")}
|
||||
</h6>
|
||||
</div>
|
||||
<div className="col d-lg-none d-block">{NetNodeSmView}</div>
|
||||
<div className="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards">
|
||||
{contributeLedger.map((cc) => (
|
||||
<div key={cc.href} className="text-card">
|
||||
<a className="btn-arrow" href={cc.href}>
|
||||
{cc.title}
|
||||
</a>
|
||||
<p className="mt-3 mb-0">{cc.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Grants */}
|
||||
<section className="container-new" id="xrpl-grants">
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div className="col pr-2">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="h4 h2-sm">
|
||||
{translate("Apply for funding to build your XRPL project")}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">{translate("XRPL Grants")}</h6>
|
||||
</div>
|
||||
<p className="mb-lg-3 py-lg-4 pt-4 mb-0">
|
||||
{translate(
|
||||
"The XRPL Grants program funds select open-source projects that solve problems and grow the XRP Ledger community."
|
||||
)}
|
||||
</p>
|
||||
<div className="d-lg-block d-none">
|
||||
<div id="xrplGrantsDark">{GrantsDarkAnimationLg}</div>
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="https://xrplgrants.org/"
|
||||
>
|
||||
{translate("Apply for a Grant")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<h6 className="eyebrow mb-2">
|
||||
{translate("Awarded in a single grant")}
|
||||
</h6>
|
||||
<img
|
||||
alt="$10K - $200K"
|
||||
src={require("./static/img/community/community-grants-1.svg")}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<h6 className="eyebrow mb-2">
|
||||
{translate("Distributed to grant recipients")}
|
||||
</h6>
|
||||
<img
|
||||
alt="$6.0M"
|
||||
src={require("./static/img/community/community-grants-2.svg")}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<h6 className="eyebrow mb-2">
|
||||
{translate("Open-source projects funded ")}
|
||||
</h6>
|
||||
<img
|
||||
alt="50+"
|
||||
src={require("./static/img/community/community-grants-3.svg")}
|
||||
/>
|
||||
</div>
|
||||
<div id="xrplGrantsDark-small" className="d-lg-none d-block mt-4 pt-3">
|
||||
{GrantsDarkAnimationSm}
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="https://xrplgrants.org/"
|
||||
>
|
||||
{translate("Learn More")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Blog */}
|
||||
<section className="container-new" id="xrpl-blog">
|
||||
<div className="card-grid card-grid-2xN align-items-lg-center">
|
||||
<div className="col pr-2 d-lg-block d-none">
|
||||
<img
|
||||
alt="Bubbles with people inside"
|
||||
src={require("./static/img/community/community-blog@2x.png")}
|
||||
className="w-100 blog-graphic"
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||||
<h2 className="h4 h2-sm">
|
||||
{translate(
|
||||
"Showcase your XRPL project, application or product"
|
||||
)}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("XRPL Community Spotlight")}
|
||||
</h6>
|
||||
</div>
|
||||
<p className="mb-3 py-4">
|
||||
{translate(
|
||||
'Get featured on the Developer Reflections blog or <a href="uses.html">Blockchain Use Cases</a> page, and explore XRPL community highlights.'
|
||||
)}
|
||||
</p>
|
||||
<div className="d-lg-none d-block">
|
||||
<img
|
||||
alt="Bubbles with people inside"
|
||||
src={require("./static/img/community/community-blog@2x.png")}
|
||||
className="w-100 blog-graphic"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-lg-left text-center">
|
||||
<a
|
||||
className="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"
|
||||
>
|
||||
{translate("Submit Your Projects")}
|
||||
</a>
|
||||
<a
|
||||
className="ml-lg-4 video-external-link"
|
||||
target="_blank"
|
||||
href="https://xrpl.org/blog/"
|
||||
>
|
||||
{translate("Read the Blog")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Events */}
|
||||
<section className="container-new" id="xrpl-events">
|
||||
<div className="card-grid card-grid-2xN ">
|
||||
<div className="col pr-2 d-lg-block d-none">
|
||||
{/* Large. 3 image in col */}
|
||||
<div className="d-flex flex-row h-100">
|
||||
<div className=" pr-1 mr-3 align-self-start">
|
||||
<img
|
||||
alt="People standing at Apex"
|
||||
src={require("./static/img/community/community-events-apex-small@2x.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
<p className="bold text-light mt-3">
|
||||
{translate("Welcome to Apex 2021")}
|
||||
</p>
|
||||
</div>
|
||||
<div className=" px-1 mx-3 align-self-center">
|
||||
<img
|
||||
alt="People standing in a circle"
|
||||
src={require("./static/img/community/community-events-meetup-small@2x.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
<p className="bold text-light mt-3">
|
||||
{translate("XRPL Community Meetup")}
|
||||
</p>
|
||||
</div>
|
||||
<div className=" pl-1 ml-3 align-self-end">
|
||||
<img
|
||||
alt="Blue and pink card"
|
||||
src={require("./static/img/community/community-events-hackathon-small@2x.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
<p className="bold text-light mt-3">
|
||||
{translate("XRPL Hackathon 2022")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col pt-5">
|
||||
<div className="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||||
<h2 className="h4 h2-sm">
|
||||
{translate(
|
||||
"Check out global events across the XRPL community"
|
||||
)}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">{translate("XRPL Events")}</h6>
|
||||
</div>
|
||||
<p className="mb-3 py-4">
|
||||
{translate(
|
||||
"Meet the XRPL community at meetups, hackathons, conferences, and more across global regions."
|
||||
)}
|
||||
</p>
|
||||
{/* Mobile. 3 inline images. */}
|
||||
<div className="col pr-2 d-lg-none d-block">
|
||||
<div className="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<img
|
||||
alt="People standing at Apex"
|
||||
src={require("./static/img/community/community-events-apex@2x.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
<h6 className="mt-3">{translate("Welcome to Apex 2021")}</h6>
|
||||
</div>
|
||||
<div className="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<img
|
||||
alt="People standing in a circle"
|
||||
src={require("./static/img/community/community-events-meetup@2x.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
<h6 className="mt-3">{translate("XRPL Community Meetup")}</h6>
|
||||
</div>
|
||||
<div className="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<img
|
||||
alt="Blue and pink card"
|
||||
src={require("./static/img/community/community-events-hackathon@2x.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
<h6 className="mt-3">{translate("XRPL Hackathon 2022")}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="/events.html"
|
||||
>
|
||||
{translate("View All Events")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Careers */}
|
||||
<section className="container-new" id="xrpl-careers">
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div id="careersDark" className="col pr-2 d-lg-block d-none">{CareersDarkLg}</div>
|
||||
<div className="col pt-5">
|
||||
<div className="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||||
<h2 className="h4 h2-sm">
|
||||
{translate(
|
||||
"Discover your next career opportunity in the XRPL community"
|
||||
)}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">{translate("XRPL Careers")}</h6>
|
||||
</div>
|
||||
<p className="mb-3 py-4">
|
||||
{translate(
|
||||
"Teams across the XRPL community are looking for talented individuals to help build their next innovation."
|
||||
)}
|
||||
</p>
|
||||
<div id="careersDark-small" className="d-lg-none d-block">{CareersDarkSm}</div>
|
||||
<div className="d-lg-block">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="https://jobs.xrpl.org/jobs"
|
||||
>
|
||||
{translate("View Open Roles")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* XRPL Design Assets */}
|
||||
<section className="container-new" id="xrpl-design-assets">
|
||||
<div className="card-grid card-grid-2xN ">
|
||||
<div className="col pt-5">
|
||||
<div className="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||||
<h2 className="h4 h2-sm">
|
||||
{translate("Review guidelines for using XRPL design assets")}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">{translate("XRPL Assets")}</h6>
|
||||
</div>
|
||||
<p className="mb-3 py-4">
|
||||
{translate(
|
||||
"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. "
|
||||
)}
|
||||
</p>
|
||||
<div className="col pr-2 d-lg-none d-block mb-4 pb-3 mb-lg-3">
|
||||
<div className=" pr-1 mr-3">
|
||||
<img
|
||||
alt="Preview of xrpl community design assets webpages"
|
||||
src={require("./static/img/community/community-design-assets.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="https://github.com/XRPLF/xrpl-dev-portal/raw/master/content/XRPL_Logo_Kit.zip"
|
||||
>
|
||||
{translate("Download the PDF and Assets")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col pr-2 d-lg-block d-none">
|
||||
<div className=" pr-1 mr-3">
|
||||
<img
|
||||
alt="Preview of xrpl community design assets webpages"
|
||||
src={require("./static/img/community/community-design-assets.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new">
|
||||
<div className="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-community-purple.svg")}
|
||||
className="d-none-sm cta cta-top-left"
|
||||
/>
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-community-green.svg")}
|
||||
className="cta cta-bottom-right"
|
||||
/>
|
||||
<div className="z-index-1 position-relative">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="h4 mb-10-until-sm mb-8-sm">
|
||||
{translate(
|
||||
"A community-driven resource for all things XRPL.org"
|
||||
)}
|
||||
</h2>
|
||||
<h5 className="eyebrow mb-3">
|
||||
{translate("Contribute to XRPL.org")}
|
||||
</h5>
|
||||
</div>
|
||||
<p className="mb-10">
|
||||
{translate(
|
||||
"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."
|
||||
)}
|
||||
</p>
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
href="https://github.com/XRPLF/xrpl-dev-portal/blob/master/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
>
|
||||
{translate("Read Contributor Guidelines")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
content/declaration.d.ts
vendored
Normal file
5
content/declaration.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
declare module "*.svg" {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
||||
300
content/dev-tools.page.tsx
Normal file
300
content/dev-tools.page.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
const explorers_tools = [
|
||||
{
|
||||
id: "xrp-explorer",
|
||||
title: "XRPL Explorer",
|
||||
description:
|
||||
"View validations of new ledger versions in real-time, or chart the location of servers in the XRP Ledger.",
|
||||
href: "https://livenet.xrpl.org",
|
||||
img: require("img/dev-tools/explorer.png"),
|
||||
},
|
||||
{
|
||||
id: "bithomp-explorer",
|
||||
title: "Bithomp Explorer",
|
||||
description:
|
||||
"Explore public ledger data including accounts' transaction history and known names.",
|
||||
href: "https://bithomp.com/",
|
||||
img: require("img/dev-tools/bithomp.png"),
|
||||
},
|
||||
{
|
||||
id: "xrpscan",
|
||||
title: "XRPScan",
|
||||
description:
|
||||
"Explore ledger activity, view amendment voting in real-time, and get account information. API access is also available.",
|
||||
href: "https://xrpscan.com/",
|
||||
img: require("img/dev-tools/xrpscan.png"),
|
||||
},
|
||||
{
|
||||
id: "token-list",
|
||||
title: "Token List",
|
||||
description:
|
||||
"See all tokens issued in the XRP Ledger and use preset tools to issue custom tokens at the click of a button.",
|
||||
href: "https://xumm.community/tokens",
|
||||
img: require("img/dev-tools/tokenlist.png"),
|
||||
},
|
||||
];
|
||||
|
||||
const api_access_tools = [
|
||||
{
|
||||
id: "websocket",
|
||||
title: "WebSocket Tool",
|
||||
description:
|
||||
"Send sample requests and get responses from the rippled API. ",
|
||||
href: "websocket-api-tool",
|
||||
img: require("img/dev-tools/websocket-tool.png"),
|
||||
},
|
||||
{
|
||||
id: "rpc",
|
||||
title: "RPC Tool",
|
||||
description:
|
||||
"Print raw information about an XRP Ledger account, transaction, or ledger.",
|
||||
href: "xrp-ledger-rpc-tool",
|
||||
img: require("img/dev-tools/rpc-tool.png"),
|
||||
},
|
||||
{
|
||||
id: "technical-explorer",
|
||||
title: "Technical Explorer",
|
||||
description: "Browse API objects from the ledger with real-time updates. ",
|
||||
href: "https://explorer.xrplf.org/",
|
||||
img: require("img/dev-tools/technical-explorer.png"),
|
||||
},
|
||||
{
|
||||
id: "faucets",
|
||||
title: "Faucets",
|
||||
description:
|
||||
"Get credentials and test-XRP for XRP Ledger Testnet or Devnet.",
|
||||
href: "xrp-testnet-faucet",
|
||||
img: require("img/dev-tools/faucets.png"),
|
||||
},
|
||||
{
|
||||
id: "trasaction-sender",
|
||||
title: "Transaction Sender",
|
||||
description:
|
||||
"Test how your code handles various XRP Ledger transactions by sending them over the Testnet to the address.",
|
||||
href: "tx-sender",
|
||||
img: require("img/dev-tools/transaction-sender.png"),
|
||||
},
|
||||
];
|
||||
|
||||
const other = [
|
||||
{
|
||||
id: "domain",
|
||||
title: "Domain Verification Checker",
|
||||
description: "Verify your validator's domain.",
|
||||
href: "validator-domain-verifier",
|
||||
img: require("img/dev-tools/domain-checker.png"),
|
||||
},
|
||||
{
|
||||
id: "xrp-ledger",
|
||||
title: "xrp-ledger.toml Checker",
|
||||
description: "Verify that your xrp-ledger.toml file is set up properly.",
|
||||
href: "xrp-ledger-toml-checker",
|
||||
img: require("img/dev-tools/toml-checker.png"),
|
||||
},
|
||||
{
|
||||
id: "binary-visualizer",
|
||||
title: "Binary Visualizer",
|
||||
description:
|
||||
"Parse the XRP Ledger's native binary format with a visual representation breaking down the raw structure into its parts.",
|
||||
href: "https://richardah.github.io/xrpl-binary-visualizer/",
|
||||
img: require("img/dev-tools/binary-visualizer.png"),
|
||||
},
|
||||
{
|
||||
id: "token-metadata-lookup",
|
||||
title: "Token Metadata Lookup",
|
||||
description:
|
||||
"Query known information about any token issued on the XRP Ledger.",
|
||||
href: "https://xrplmeta.org/",
|
||||
img: require("img/dev-tools/token-metadata.png"),
|
||||
},
|
||||
];
|
||||
|
||||
export default function DevTools() {
|
||||
const { translate } = useTranslate();
|
||||
|
||||
return (
|
||||
<div className="page-dev-tools">
|
||||
<div>
|
||||
<section className="py-20">
|
||||
<div className="mx-auto text-lg-left">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<p className="mb-0">
|
||||
{translate(
|
||||
"Use the developer tools to test, explore, and validate XRP Ledger\n API requests and behavior."
|
||||
)}
|
||||
</p>
|
||||
<h3 className="eyebrow mb-3"> {translate("Dev Tools")}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="py-10">
|
||||
<div className="mx-auto text-lg-left">
|
||||
<div className="sticky">
|
||||
<ul className="nav nav-tabs pb-15" role="tablist">
|
||||
<li className="nav-item" role="presentation">
|
||||
<button
|
||||
className="nav-link active dev-tools-tab"
|
||||
id="explorers-tab"
|
||||
data-toggle="tab"
|
||||
data-target="#explorers"
|
||||
role="tab"
|
||||
aria-controls="explorers"
|
||||
aria-selected="true"
|
||||
>
|
||||
{translate("Explorers")}
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button
|
||||
className="nav-link dev-tools-tab"
|
||||
id="api-access-tab"
|
||||
data-toggle="tab"
|
||||
data-target="#api-access"
|
||||
role="tab"
|
||||
aria-controls="api-access"
|
||||
aria-selected="false"
|
||||
>
|
||||
{translate("API Access")}
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button
|
||||
className="nav-link dev-tools-tab"
|
||||
id="other-tab"
|
||||
data-toggle="tab"
|
||||
data-target="#other"
|
||||
role="tab"
|
||||
aria-controls="other"
|
||||
aria-selected="false"
|
||||
>
|
||||
{translate("Other")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="tab-content pt-20">
|
||||
<div
|
||||
className="tab-pane show active"
|
||||
id="explorers"
|
||||
role="tabpanel"
|
||||
aria-labelledby="explorers-tab"
|
||||
>
|
||||
<h4> {translate("Explorers")}</h4>
|
||||
<div className="row row-cols-1 row-cols-lg-3 card-deck">
|
||||
{explorers_tools.map((card) => (
|
||||
<a
|
||||
className="card"
|
||||
href={card.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
id={card.id}
|
||||
key={card.id}
|
||||
>
|
||||
{card.img && (
|
||||
<img src={card.img} alt={`${card.title} Screenshot`} />
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h4 className="card-title h5">{card.title}</h4>
|
||||
<p className="card-text">{card.description}</p>
|
||||
</div>
|
||||
<div className="card-footer"> </div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="tab-pane"
|
||||
id="api-access"
|
||||
role="tabpanel"
|
||||
aria-labelledby="api-access-tab"
|
||||
>
|
||||
<h4> {translate("API Access")}</h4>
|
||||
<div className="row row-cols-1 row-cols-lg-3 card-deck">
|
||||
{api_access_tools.map((card) => (
|
||||
<a
|
||||
className="card"
|
||||
href={card.href}
|
||||
target="_blank"
|
||||
id={card.id}
|
||||
>
|
||||
{
|
||||
card.img && (
|
||||
<img src={card.img} alt={card.title + " Screenshot"} />
|
||||
)
|
||||
}
|
||||
<div className="card-body">
|
||||
<h4 className="card-title h5">{card.title}</h4>
|
||||
<p className="card-text">{card.description}</p>
|
||||
</div>
|
||||
<div className="card-footer"> </div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="tab-pane"
|
||||
id="other"
|
||||
role="tabpanel"
|
||||
aria-labelledby="other-tab"
|
||||
>
|
||||
<h4> {translate("Other")}</h4>
|
||||
<div className="row row-cols-1 row-cols-lg-3 card-deck">
|
||||
{other.map((card) => (
|
||||
<a
|
||||
className="card"
|
||||
href={card.href}
|
||||
target="_blank"
|
||||
id={card.id}
|
||||
>
|
||||
{
|
||||
card.img && (
|
||||
<img src={card.img} alt={card.title + " Screenshot"} />
|
||||
)
|
||||
}
|
||||
<div className="card-body">
|
||||
<h4 className="card-title h5">{card.title}</h4>
|
||||
<p className="card-text">{card.description}</p>
|
||||
</div>
|
||||
<div className="card-footer"> </div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-10 px-0">
|
||||
<div className="col-lg-12 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-home-purple.svg")}
|
||||
className="d-none-sm cta cta-top-left"
|
||||
/>
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-home-green.svg")}
|
||||
className="cta cta-bottom-right"
|
||||
/>
|
||||
<div className="z-index-1 position-relative">
|
||||
<h2 className="h4 mb-8-sm mb-10-until-sm">
|
||||
{translate("Have an Idea For a Tool?")}
|
||||
</h2>
|
||||
<p className="mb-10">
|
||||
{translate(
|
||||
"Contribute to the XRP Ledger community by submitting your idea for a tool or open a pull request if you've developed a tool."
|
||||
)}
|
||||
</p>
|
||||
<a
|
||||
className="btn btn-primary btn-arrow-out"
|
||||
href="https://github.com/XRPLF/xrpl-dev-portal/"
|
||||
>
|
||||
{translate("Open a pull Request")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
414
content/developer-funding.page.tsx
Normal file
414
content/developer-funding.page.tsx
Normal file
@@ -0,0 +1,414 @@
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
|
||||
false;
|
||||
|
||||
const target = { prefix: "" }; // TODO: fixme
|
||||
|
||||
export default function Funding() {
|
||||
const { translate } = useTranslate();
|
||||
|
||||
return (
|
||||
<div className="landing page-funding">
|
||||
<div>
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/funding-purple.svg")}
|
||||
className="position-absolute"
|
||||
style={{ top: 0, right: 0 }}
|
||||
/>
|
||||
</div>
|
||||
<section className="container-new py-26 text-lg-center">
|
||||
<div className="p-0 col-lg-6 mx-lg-auto">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0">
|
||||
{translate("XRPL Developer Funding Programs")}
|
||||
</h1>
|
||||
<h6 className="eyebrow mb-3">{translate("Project Resources")}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="p-0 col-lg-6 mx-lg-auto" style={{ maxWidth: 520 }}>
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0 h4 h2-sm">
|
||||
{translate(
|
||||
"Explore funding opportunities for developers and teams"
|
||||
)}
|
||||
</h1>
|
||||
<h6 className="eyebrow mb-3">{translate("Funding Overview")}</h6>
|
||||
</div>
|
||||
<p className="mt-3 py-3 p-0 longform">
|
||||
{translate(
|
||||
"If you’re a software developer or team looking to build your next project or venture on the XRP Ledger (XRPL), there are a number of opportunities to fund your next innovation."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/* Hackathons */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
<div
|
||||
className="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0"
|
||||
style={{ maxWidth: 520 }}
|
||||
>
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("XRPL Hackathons")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("Join an Event")}</h6>
|
||||
</div>
|
||||
<p className="p-lg-3 mb-2 longform">
|
||||
{translate(
|
||||
"Hackathons are open to all developers to explore and invent a project on the XRP Ledger. Visit the events page for updates on upcoming hackathons."
|
||||
)}
|
||||
</p>
|
||||
<div className="d-none d-lg-block p-lg-3">
|
||||
<a className="btn btn-primary btn-arrow" href="events">
|
||||
{translate("See Upcoming Events")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 order-lg-1 col-lg-6 px-0">
|
||||
<div className="row align-items-center m-0 funding-list">
|
||||
{/* funding list */}
|
||||
<div className="col-12 col-lg-6 p-0">
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="default-alt-text" id="funding-01" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Best for")}</h6>
|
||||
<p>
|
||||
{translate(
|
||||
"Software developers and teams building directly on the XRP Ledger"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="default-alt-text" id="funding-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Required")}</h6>
|
||||
<p>{translate("Some coding experience")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-lg-5">
|
||||
<img alt="default-alt-text" id="funding-03" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Level")}</h6>
|
||||
<p>{translate("XRPL beginner to advanced developers")}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="default-alt-text" id="funding-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Funding Levels")}</h6>
|
||||
<p>{translate("Prize money and awards")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 1 */}
|
||||
{/* Show on large */}
|
||||
<div className="col-12 col-lg-6 p-0 d-none d-lg-block">
|
||||
<div className="px-lg-3 pb-3 pt-5 mt-5">
|
||||
<div className="pt-1 mt-3">
|
||||
<img alt="default-alt-text" id="funding-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Required")}</h6>
|
||||
<p>{translate("Some coding experience")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-5">
|
||||
<img alt="default-alt-text" id="funding-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Funding Levels")}</h6>
|
||||
<p>{translate("Prize money and awards")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 2 */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-lg-none order-3 mt-4 pt-3">
|
||||
<a className="btn btn-primary btn-arrow" href="events">
|
||||
{translate("See Upcoming Events")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Eligibility */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
|
||||
<div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 p-lg-3">
|
||||
<div className="d-flex flex-column-reverse py-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("XRPL Grants")}</h3>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("Fund Your Project")}
|
||||
</h6>
|
||||
</div>
|
||||
<p className="py-lg-3 mb-2 longform" style={{ maxWidth: 520 }}>
|
||||
{translate(
|
||||
"Developer grants for projects that contribute to the growing XRP Ledger community."
|
||||
)}
|
||||
</p>
|
||||
<div className="mt-4 pt-3" style={{ maxWidth: 520 }}>
|
||||
<span className="h6" style={{ fontSize: "1rem" }}>
|
||||
{translate("Past awardees include:")}
|
||||
</span>
|
||||
<div className="mb-4 py-3" id="xrplGrantsDark" />
|
||||
</div>
|
||||
<div className="d-none d-lg-block py-lg-3">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow-out"
|
||||
target="_blank"
|
||||
href="https://xrplgrants.org/"
|
||||
>
|
||||
{translate("Visit XRPL Grants")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 col-lg-6 px-0 pl-lg-3">
|
||||
<div className="row align-items-center m-0 funding-list">
|
||||
{/* funding list */}
|
||||
<div className="col-12 col-lg-6 p-0">
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="default-alt-text" id="funding-01" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Best for")}</h6>
|
||||
<p>
|
||||
{translate(
|
||||
"Software developers, teams, and start-ups building directly on the XRP Ledger"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="default-alt-text" id="funding-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Required")}</h6>
|
||||
<p>
|
||||
{translate("Coding experience")}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate(" Github repository ")}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate(" Project narrative/description ")}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate(" At least one developer on the core team ")}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate(" Budget and milestones")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-lg-5">
|
||||
<img alt="default-alt-text" id="funding-03" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Level")}</h6>
|
||||
<p>
|
||||
{translate("XRPL intermediate to advanced developers")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="default-alt-text" id="funding-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Funding Levels")}</h6>
|
||||
<p>{translate("$10,000 - $200,000")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 1 */}
|
||||
{/* Show on large */}
|
||||
<div className="col-12 col-lg-6 p-0 d-none d-lg-block">
|
||||
<div className="px-lg-3 pb-3 pt-5 mt-5">
|
||||
<div className="pt-1 mt-3">
|
||||
<img alt="default-alt-text" id="funding-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Required")}</h6>
|
||||
<p>
|
||||
{translate("Coding experience")}{" "}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate("Github repository")}{" "}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate("Project narrative/description")}{" "}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate(
|
||||
"At least one developer on the core team"
|
||||
)}{" "}
|
||||
<span style={{ color: "#7919FF" }}>•</span>
|
||||
{translate("Budget and milestones")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-5">
|
||||
<img alt="default-alt-text" id="funding-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Funding Levels")}</h6>
|
||||
<p>{translate("$10,000 - $200,000")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 2 */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-lg-none order-3 mt-4 pt-3">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow-out"
|
||||
target="_blank"
|
||||
href="https://xrplgrants.org/"
|
||||
>
|
||||
{translate("Visit XRPL Grants")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Accelerator */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center">
|
||||
<div
|
||||
className="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0"
|
||||
style={{ maxWidth: 520 }}
|
||||
>
|
||||
<div className="d-flex flex-column-reverse p-lg-3">
|
||||
<h3 className="h4 h2-sm">{translate("XRPL Accelerator")}</h3>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("Advance your project")}
|
||||
</h6>
|
||||
</div>
|
||||
<p className="p-lg-3 mb-2 longform">
|
||||
{translate(
|
||||
"12-week program for entrepreneurs building on the XRP Ledger to scale their projects into thriving businesses."
|
||||
)}
|
||||
</p>
|
||||
<div className="d-none d-lg-block p-lg-3">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
href="https://xrplaccelerator.org/"
|
||||
>
|
||||
{translate("View XRPL Accelerator")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 order-lg-1 col-lg-6 px-0">
|
||||
<div className="row align-items-center m-0 funding-list">
|
||||
{/* funding list */}
|
||||
<div className="col-12 col-lg-6 p-0">
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img alt="default-alt-text" id="funding-01" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Best for")}</h6>
|
||||
<p>
|
||||
{translate(
|
||||
"Start-ups building scalable products on XRPL that can capture a large market opportunity"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="default-alt-text" id="funding-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Required")}</h6>
|
||||
<p>
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate("Strong founding team")}
|
||||
<br />
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate("Bold, ambitious vision")}
|
||||
<br />
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate("Ideally an MVP and monetization strategy")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-lg-5">
|
||||
<img alt="default-alt-text" id="funding-03" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Level")}</h6>
|
||||
<p>
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate("XRPL advanced developers")}
|
||||
<br />
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate("Business acumen")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img alt="default-alt-text" id="funding-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Funding Levels")}</h6>
|
||||
<p>
|
||||
{translate(
|
||||
"$50,000 (grant) + pitch for venture funding"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 1 */}
|
||||
{/* Show on large */}
|
||||
<div className="col-12 col-lg-6 p-0 d-none d-lg-block">
|
||||
<div className="px-lg-3 pb-3 pt-5 mt-5">
|
||||
<div className="pt-1 mt-3">
|
||||
<img alt="default-alt-text" id="funding-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Required")}</h6>
|
||||
<p>
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate("Strong founding team")}
|
||||
<br />
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate("Bold, ambitious vision")}
|
||||
<br />
|
||||
<span style={{ color: "#7919FF" }}>•</span>{" "}
|
||||
{translate(
|
||||
"Ideally an MVP and monetization strategy"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-5">
|
||||
<img alt="default-alt-text" id="funding-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Funding Levels")}</h6>
|
||||
<p>
|
||||
{translate(
|
||||
"$50,000 (grant) + pitch for venture funding"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 2 */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-lg-none order-3 mt-4 pt-3">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
href="https://xrplaccelerator.org/"
|
||||
>
|
||||
{translate("View XRPL Accelerator")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/funding-orange.svg")}
|
||||
id="funding-orange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
868
content/events.page.tsx
Normal file
868
content/events.page.tsx
Normal file
@@ -0,0 +1,868 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
const moment = require('moment');
|
||||
|
||||
|
||||
function categorizeDates(arr) {
|
||||
const past = [];
|
||||
const upcoming = [];
|
||||
const today = moment().startOf('day'); // set the time to midnight
|
||||
|
||||
arr.forEach((obj) => {
|
||||
const endDate = moment(obj.end_date, "MMMM D, YYYY"); // parse the 'end_date' string into a moment object
|
||||
if (endDate.isBefore(today)) {
|
||||
obj.type = `${obj.type}-past`;
|
||||
past.push(obj);
|
||||
} else {
|
||||
obj.type = `${obj.type}-upcoming`;
|
||||
upcoming.push(obj);
|
||||
}
|
||||
});
|
||||
|
||||
return { past, upcoming };
|
||||
}
|
||||
|
||||
const events = [
|
||||
{
|
||||
name: "Hackathon: 2021",
|
||||
description:
|
||||
"Explore the exciting project submissions from the fall 2021 XRPL Hackathon that focused on the NFT and Hooks smart contract functionalities on the ledger.",
|
||||
type: "hackathon",
|
||||
link: "https://xrpl-hackathon-2021.devpost.com/project-gallery",
|
||||
location: "Virtual",
|
||||
date: "September 13-October 6, 2021",
|
||||
image: "Hackathons.png",
|
||||
end_date: "October 6, 2021",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: San Diego",
|
||||
description:
|
||||
"The first official Meetup hosted by the XRPL Community. Community members in Southern California gathered around a firepit and shared their experiences with the XRPL.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrpl-community/events/281806645/",
|
||||
location: "San Diego, CA",
|
||||
date: "Saturday, November 20, 2021",
|
||||
image: "event-meetup-san-diego@2x.jpg",
|
||||
end_date: "November 20, 2021",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: Atlanta",
|
||||
description:
|
||||
"The inaugural Meetup in the Southeast region of the United States got community members excited to meet like-minded individuals in their area.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrpl-community/events/281980446/",
|
||||
location: "Atlanta, GA",
|
||||
date: "Saturday, November 27, 2021",
|
||||
image: "event-meetup-alanta@2x.jpg",
|
||||
end_date: "November 27, 2021",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: San Francisco",
|
||||
description:
|
||||
"Community members in the Bay Area with diverse backgrounds in technology and beyond met in downtown San Francisco.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrpl-community/events/281806676/",
|
||||
location: "San Francisco, CA",
|
||||
date: "Monday, November 29, 2021",
|
||||
image: "event-meetup-san-francisco@2x.jpg",
|
||||
end_date: "November 29, 2021",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: Miami",
|
||||
description:
|
||||
"One of the biggest Meetups held so far, this was the first of an ongoing series of local XRPL Community Meetup events in Miami. ",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrpl-community/events/281829463/",
|
||||
location: "Miami, FL ",
|
||||
date: "Thursday, December 9, 2021",
|
||||
image: "event-meetup-miami@2x.jpg",
|
||||
end_date: "December 8, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: Nashville",
|
||||
description:
|
||||
"Nashville-based members of the XRPL Community came together to network, learn, share ideas, and form new partnerships. ",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrp-ledger-nashville-community/events/282538189/",
|
||||
location: "Nashville, TN",
|
||||
date: "Saturday, December 18, 2021",
|
||||
image: "event-meetup-nashville@2x.jpg",
|
||||
end_date: "December 18, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "NYC Meetup/Hackathon XRPL Celebration",
|
||||
id: "upcoming-xrpl-new-york",
|
||||
description:
|
||||
"The NYC/XRP community and Dev Null Productions cordially invites you to attend our 10th meetup, being held in celebration of the on-going XRPL Hackathon, at the unique and artistic TALS studio in Midtown Manhattan.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/NYC-XRP/events/284485901/",
|
||||
location: "NYC, NY",
|
||||
date: "March 30, 2022",
|
||||
image: "event-meetup-new-york@2x.jpg",
|
||||
end_date: "March 30, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: London",
|
||||
id: "upcoming-xrpl-london",
|
||||
description:
|
||||
"Join for an evening of programming and networking with members of the XRPL Community in London, co-organised by Peerkat - the NFT platform for creators on the XRPL.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrp-ledger-london-community/events/283536458/",
|
||||
location: "IDEALondon",
|
||||
date: "March 31, 2022",
|
||||
image: "event-meetup-london.png",
|
||||
end_date: "March 31, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: Toronto",
|
||||
id: "upcoming-xrpl-toronto",
|
||||
description:
|
||||
"Join us for our first Toronto meetup with an evening of programming and networking with other members of the XRP Ledger Community with special guests from the XUMM Wallet and ARK PLATES teams!",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrpl-toronto-community-meetup/events/284177188/",
|
||||
location: "Toronto",
|
||||
date: "March 31, 2022",
|
||||
image: "event-meetup-toronto@2x.jpg",
|
||||
end_date: "March 31, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: San Diego",
|
||||
id: "upcoming-xrpl-san-diego",
|
||||
description:
|
||||
"Get together with other San Diego-based members of the XRP Ledger Community to network and discuss all things XRPL! Join us for our second San Diego XRPL Meetup.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrp-ledger-san-diego-community/events/284663355/",
|
||||
location: "San Diego, CA",
|
||||
date: "April 1st 2022",
|
||||
image: "event-meetup-san-diego@2x.jpg",
|
||||
end_date: "April 1, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: Irvine LA",
|
||||
id: "upcoming-xrpl-irvine",
|
||||
description:
|
||||
"Get together with other LA-based members of the XRP Ledger Community to network and discuss all things XRPL.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrp-ledger-la-community-meetup/events/284824635/",
|
||||
location: "UC Irvine, CA",
|
||||
date: "April 3rd 2022",
|
||||
image: "event-meetup-irvine@2x.jpg",
|
||||
end_date: "April 2, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "XRPL Community Meetup: Miami #2",
|
||||
id: "upcoming-xrpl-miami-2",
|
||||
description:
|
||||
"We're excited to host our second Miami meetup for XRP Ledger community members on April 6th from 6-8pm, featuring Marco Neri, Developer Advocate at Ripple, who will join us to give a presentation on the XRP Ledger.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrp-ledger-miami-community/events/284463736/",
|
||||
location: "The LAB Miami, FL",
|
||||
date: "April 6th 2022",
|
||||
image: "event-meetup-miami@2x.jpg",
|
||||
end_date: "April 6, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Hackathon:New Year, New NFT",
|
||||
id: "upcoming-xrpl-hackathon-new-year",
|
||||
description:
|
||||
"Build Functional NFTs that span across a full range of use cases.",
|
||||
type: "hackathon",
|
||||
link: "https://xrplnft2022.devpost.com/",
|
||||
location: "Virtual",
|
||||
date: "January 31 - March 14, 2022",
|
||||
image: "Hackathons.png",
|
||||
end_date: "March 14, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Hackathon: Creating Real World Impact",
|
||||
description:
|
||||
"Build apps to improve lives in the real world using any of the SDKs and APIs for the XRP Ledger.",
|
||||
type: "hackathon",
|
||||
link: "https://xrplimpact.devpost.com/",
|
||||
location: "Virtual",
|
||||
date: "May 26 - Jul 11, 2022",
|
||||
image: "Hackathons.png",
|
||||
end_date: "July 11, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Conference:Apex 2021",
|
||||
description:
|
||||
"View sessions from the Apex 2021 stages in Las Vegas and Tallinn.",
|
||||
type: "conference",
|
||||
link: "https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZgnreb8ODgxJW032M9Z2XZ",
|
||||
location: "Las Vegas, Tallinn",
|
||||
date: "September 29-30, 2021",
|
||||
image: "Conference.png",
|
||||
end_date: "September 30, 2022",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Hackathon:NFT Launch Party",
|
||||
description:
|
||||
"Build Functional NFTs that span across a full range of use cases.",
|
||||
type: "hackathon",
|
||||
link: "https://xrplnft.devpost.com/",
|
||||
location: "Virtual",
|
||||
date: "Oct 31 - Dec 12, 2022",
|
||||
image: "Hackathons.png",
|
||||
end_date: "December 12, 2022",
|
||||
},
|
||||
{
|
||||
name: "XRPL Zone @ Consensus",
|
||||
description:
|
||||
"XRPL Zone: your all-in-one location for creating and collaborating on XRP Ledger (XRPL) projects.",
|
||||
type: "zone",
|
||||
link: "https://xrplzone-consensus.splashthat.com/",
|
||||
location: "Austin, Texas",
|
||||
date: "April 27, 2023",
|
||||
image: "XRPLZone.png",
|
||||
end_date: "April 27, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Developer AMAs",
|
||||
description:
|
||||
"A chat with Crossmark about wallet development on the XRP Ledger!",
|
||||
type: "ama",
|
||||
link: "https://discord.com/invite/xrpl",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "April 14, 2023",
|
||||
image: "AMAs.png",
|
||||
end_date: "April 14, 2023",
|
||||
},
|
||||
{
|
||||
name: "NFTs with xrp.cafe",
|
||||
description:
|
||||
"A cozy discussion with xrp.cafe about NFTs and the future of NFT infrastructure on the XRP Ledger.",
|
||||
type: "ama",
|
||||
link: "https://dev.to/ripplexdev/xrpcafe-ama-on-xrpl-developers-discord-36gp",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "January 1, 2023",
|
||||
image: "AMAs.png",
|
||||
end_date: "January 1, 2023",
|
||||
},
|
||||
{
|
||||
name: "Community Calls #1",
|
||||
description:
|
||||
"An open discussion about the development of XLS-20 and NFTs on the XRP Ledger.",
|
||||
type: "cc",
|
||||
link: "https://youtu.be/KpSt0PFT2QM",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "June 02, 2022",
|
||||
image: "CommunityCalls.png",
|
||||
end_date: "June 02, 2022",
|
||||
},
|
||||
{
|
||||
name: "Community Calls #2",
|
||||
description: "A community call about XRPL amendments with Chris McKay.",
|
||||
type: "cc",
|
||||
link: "https://youtu.be/oNJ1Qqns2Gw",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "August 8, 2022",
|
||||
image: "CommunityCalls.png",
|
||||
end_date: "August 8, 2022",
|
||||
},
|
||||
{
|
||||
name: "AMAs: POS and Crypto Payments with FriiPay",
|
||||
description:
|
||||
"A discussion with FriiPay about payment rails and POS integrations through the XRP Ledger",
|
||||
type: "ama",
|
||||
link: "https://dev.to/ripplexdev/xrpl-developer-ama-pos-and-crypto-payments-with-friipay-13hm",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "February 15, 2023",
|
||||
image: "AMAs.png",
|
||||
end_date: "February 15, 2023",
|
||||
},
|
||||
{
|
||||
name: "AMAs: On-chain Data with Bithomp",
|
||||
description:
|
||||
"A discuss with Bithomp about data infrastructure and their NFT integrations in one of the most popular explorers on the XRP Ledger.",
|
||||
type: "ama",
|
||||
link: "https://dev.to/ripplexdev/xrpl-developer-ama-bithomp-4a8d",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "March 15, 2023",
|
||||
image: "AMAs.png",
|
||||
end_date: "March 15, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Community Meetup: Madrid",
|
||||
description:
|
||||
"Get together with other Madrid-based members of the XRP Ledger community to network and discuss all things XRPL.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrp-ledger-espana-madrid-y-barcelona/events/292597878",
|
||||
location: "Madrid",
|
||||
date: "April 29, 2023",
|
||||
image: "Madrid.png",
|
||||
end_date: "April 29, 2023",
|
||||
},
|
||||
{
|
||||
name: "APEX 2023: 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: "September 6 - 8, 2023",
|
||||
image: "Conference.png",
|
||||
end_date: "September 8, 2023",
|
||||
},
|
||||
{
|
||||
name: "Community Calls #3",
|
||||
description:
|
||||
"An open chat with the XRP Ledger community about NFTs and the EVM sidechain testnet.",
|
||||
type: "cc",
|
||||
link: "https://discord.com/invite/xrpl",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "March 30, 2023",
|
||||
image: "CommunityCalls.png",
|
||||
end_date: "March 30, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Roundtable: XRPL @ Consensus",
|
||||
description:
|
||||
"A roundtable chat with those who represented the XRP Ledger at Consensus 2023.",
|
||||
type: "ama",
|
||||
link: "https://twitter.com/RippleXDev",
|
||||
location: "Twitter Spaces",
|
||||
date: "June 24, 2023",
|
||||
image: "AMAs.png",
|
||||
end_date: "June 24, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL BUIDLERS BOOTCAMP",
|
||||
description:
|
||||
"First XRPL Ideathon in Japan Held Ahead of Crypto Event IVS Crypto.",
|
||||
type: "hackathon",
|
||||
link: "https://lu.ma/xrpl_builders_bootcamp",
|
||||
location: "Tokyo",
|
||||
date: "June 25, 2023",
|
||||
image: "Hackathons.png",
|
||||
end_date: "June 25, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Workshop at WebX Asia",
|
||||
description:
|
||||
"Workshop with XRP Ledger co-developer David Schwartz and leading Japanese XRPL developers.",
|
||||
type: "conference",
|
||||
link: "https://lu.ma/mn90h3h9",
|
||||
location: "Tokyo",
|
||||
date: "July 26, 2023",
|
||||
image: "Conference.png",
|
||||
end_date: "July 26, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Summer Hackathon",
|
||||
description:
|
||||
"The XRPL Hackathon is all about supporting innovative projects and getting developers from diverse backgrounds to explore creative ideas and transition from centralized systems to the exciting world of blockchain. Bring your innovative projects to life and get a chance to secure up to $10,000 in funding.",
|
||||
type: "hackathon",
|
||||
link: "https://dorahacks.io/hackathon/xrpl-hackathon",
|
||||
location: "Online",
|
||||
date: "June 5, 2023 - July 30, 2023",
|
||||
image: "Hackathons.png",
|
||||
end_date: "July 30, 2023",
|
||||
},
|
||||
{
|
||||
name: "AMAs: XRPL Developer AMAs",
|
||||
description:
|
||||
"A chat with Matt Mankins from Lorem Labs to discuss Kudos for Code and his recent XRPL Accelerator acceptance.",
|
||||
type: "ama",
|
||||
link: "http://xrpldevs.org/",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "July 18, 2023",
|
||||
image: "AMAs.png",
|
||||
end_date: "July 18, 2023",
|
||||
},
|
||||
{
|
||||
name: "Q3 2023 Ripple XRP Meetup",
|
||||
description:
|
||||
"Join your fellow Ripple XRP Enthusiasts for a 90-minute discussion. Topics: XRP, Flare, XRPL, Ripple (Company), General Crypto QA.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/ripple-xrp-community/events/292740612",
|
||||
location: "Online",
|
||||
date: "July 13, 2023",
|
||||
image: "Virtual-Event.png",
|
||||
end_date: "July 13, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Toronto Meetup",
|
||||
description:
|
||||
"Prepare for an evening of XRPL Toronto Meetup – a celebration of discovery and connection. Join enthusiasts, innovators, and developers for inspiring talks, conversations, and learning. All are welcome, from seasoned developers to curious newcomers.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrpl-toronto-community-meetup/events/294766059",
|
||||
location: "Downtown Toronto",
|
||||
date: "August 14, 2023",
|
||||
image: "event-meetup-toronto@2x.jpg",
|
||||
end_date: "August 14, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL London Meetup (Accelerator Edition)",
|
||||
description:
|
||||
"Join us for a Happy Hour hosted by the XRPL Accelerator Team! Connect with fellow start-ups in the blockchain space and gain insights into cutting-edge projects and founders.",
|
||||
type: "meetup",
|
||||
link: "https://lu.ma/xrplacceleratorhappyhour",
|
||||
location: "Central London",
|
||||
date: "September 04, 2023",
|
||||
image: "event-meetup-london.png",
|
||||
end_date: "September 04, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Accelerator Demo Day",
|
||||
description:
|
||||
"Join us for our very first XRPL Accelerator Demo Day in London. Witness pitches from nine portfolio startups, engage in Q&A sessions, and network with founders and investors. ",
|
||||
type: "conference",
|
||||
link: "https://lu.ma/xrplaccelerator",
|
||||
location: "Central London and Online",
|
||||
date: "September 05, 2023",
|
||||
image: "Conference.png",
|
||||
end_date: "September 05, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Hackathon - Apex 2023",
|
||||
description:
|
||||
"Join the XRPL Hackathon - APEX 2023, a week before the XRP Ledger's annual developer conference. Explore the Future of Finance and Web3 tracks, collaborate, learn, and compete for 10K USD in prizes.",
|
||||
type: "hackathon",
|
||||
link: "https://lu.ma/4h3bqfw1",
|
||||
location: "Delft, Netherlands ",
|
||||
date: "August 30, 2023 - August 31, 2023",
|
||||
image: "Hackathons.png",
|
||||
end_date: "August 31, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL Grants Info Session: Financial Inclusion Focused",
|
||||
description:
|
||||
"Join us for a live 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 Financial Inclusion projects.",
|
||||
type: "info-session",
|
||||
link: "https://www.youtube.com/watch?v=TgLaAXTZY7Q",
|
||||
location: "Virtual - Zoom",
|
||||
date: "September 05, 2023",
|
||||
image: "InfoSessions.png",
|
||||
end_date: "September 05, 2023",
|
||||
},
|
||||
{
|
||||
name: "XRPL South Korea Meetup - XCCESS",
|
||||
description:
|
||||
"We are excited to introduce the XRP Ledger XCCESS - an exclusive meetup bringing together the brightest minds, innovators, and enthusiasts from South Korea's blockchain industry. Join us for an engaging experience during the Korea Blockchain Week.",
|
||||
type: "meetup",
|
||||
link: "https://lu.ma/xrplxccess",
|
||||
location: "South Korea - JBK Tower",
|
||||
date: "September 06, 2023",
|
||||
image: "SouthKoreaMeetup.png",
|
||||
end_date: "September 06, 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",
|
||||
},
|
||||
{
|
||||
name: "XRPL Developers Discord AMA: Edge Wallet",
|
||||
description:
|
||||
"Join us for a live chat on Discord and learn more about Edge Wallet and how they are building on the XRP Ledger.",
|
||||
type: "ama",
|
||||
link: "http://xrpldevs.org/",
|
||||
location: "XRPL Developers Discord",
|
||||
date: "October 13, 2023",
|
||||
image: "AMAs.png",
|
||||
end_date: "October 13, 2023",
|
||||
},
|
||||
|
||||
{
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Events() {
|
||||
const { translate } = useTranslate();
|
||||
const { past, upcoming } = useMemo(() => categorizeDates(events), []);
|
||||
|
||||
const [upcomingFilters, setUpcomingFilters] = useState({
|
||||
conference: true,
|
||||
meetup: true,
|
||||
hackathon: true,
|
||||
ama: true,
|
||||
cc: true,
|
||||
zone: true,
|
||||
"info-session": true,
|
||||
});
|
||||
|
||||
const [pastFilters, setPastFilters] = useState({
|
||||
conference: true,
|
||||
meetup: true,
|
||||
hackathon: true,
|
||||
ama: true,
|
||||
cc: true,
|
||||
zone: true,
|
||||
"info-session": true,
|
||||
});
|
||||
|
||||
const filteredUpcoming = useMemo(() => {
|
||||
return upcoming.filter(
|
||||
(event) => upcomingFilters[event.type.split("-")[0]]
|
||||
);
|
||||
}, [upcoming, upcomingFilters]);
|
||||
|
||||
const filteredPast = useMemo(() => {
|
||||
return past.filter((event) => pastFilters[event.type.split("-")[0]]);
|
||||
}, [past, pastFilters]);
|
||||
|
||||
const handleUpcomingFilterChange = (event) => {
|
||||
const { name, checked } = event.target;
|
||||
setUpcomingFilters((prevFilters) => ({
|
||||
...prevFilters,
|
||||
[name.replace('-upcoming','')]: checked,
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePastFilterChange = (event) => {
|
||||
const { name, checked } = event.target;
|
||||
setPastFilters((prevFilters) => ({
|
||||
...prevFilters,
|
||||
[name.replace('-past','')]: checked,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="landing page-events">
|
||||
<div>
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/events-orange.svg")}
|
||||
id="events-orange"
|
||||
/>
|
||||
</div>
|
||||
<section className="text-center py-26">
|
||||
<div className="mx-auto text-center col-lg-5">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0">
|
||||
{translate("Find the XRPL Community Around the World")}
|
||||
</h1>
|
||||
<h6 className="mb-3 eyebrow">{translate("Events")}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="event-hero card-grid card-grid-2xN">
|
||||
<div className="pr-2 col">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./static/img/events/event-hero3@2x.png")}
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-5 pr-2 col">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="mb-8 h4 h2-sm">
|
||||
{translate("The XRPL Developer Summit")}
|
||||
</h2>
|
||||
<h6 className="mb-3 eyebrow">{translate("Save the Date")}</h6>
|
||||
</div>
|
||||
<p className="mb-4">
|
||||
{translate(
|
||||
"Apex is back and headed to Amsterdam. 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."
|
||||
)}
|
||||
</p>
|
||||
<div className="py-2 my-3 event-small-gray">
|
||||
Location: Amsterdam
|
||||
</div>
|
||||
<div className="py-2 my-3 event-small-gray">
|
||||
Date: September 6-8, 2023
|
||||
</div>
|
||||
<div className="d-lg-block">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow-out"
|
||||
target="_blank"
|
||||
href="http://apexdevsummit.com/"
|
||||
>
|
||||
{translate("Learn More")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Upcoming Events */}
|
||||
<section className="container-new py-26" id="upcoming-events">
|
||||
<div className="p-0 pb-2 mb-4 d-flex flex-column-reverse col-lg-6 pr-lg-5">
|
||||
<h3 className="h4 h2-sm">
|
||||
{translate(
|
||||
"Check out meetups, hackathons, and other events hosted by the XRPL Community"
|
||||
)}
|
||||
</h3>
|
||||
<h6 className="mb-3 eyebrow">{translate("Upcoming Events")}</h6>
|
||||
</div>
|
||||
<div className="filter row col-12 mt-lg-5 d-flex flex-column">
|
||||
<h6 className="mb-3">Filter By:</h6>
|
||||
<div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="conference"
|
||||
id="conference-upcoming"
|
||||
name="conference-upcoming"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={upcomingFilters.conference}
|
||||
onChange={handleUpcomingFilterChange}
|
||||
/>
|
||||
<label htmlFor="conference-upcoming">Conference</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="meetup"
|
||||
id="meetup-upcoming"
|
||||
name="meetup-upcoming"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={upcomingFilters.meetup}
|
||||
onChange={handleUpcomingFilterChange}
|
||||
/>
|
||||
<label htmlFor="meetup-upcoming">Meetups</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="hackathon"
|
||||
id="hackathon-upcoming"
|
||||
name="hackathon-upcoming"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={upcomingFilters.hackathon}
|
||||
onChange={handleUpcomingFilterChange}
|
||||
/>
|
||||
<label htmlFor="hackathon-upcoming">Hackathons</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="ama"
|
||||
id="ama-upcoming"
|
||||
name="ama-upcoming"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={upcomingFilters.ama}
|
||||
onChange={handleUpcomingFilterChange}
|
||||
/>
|
||||
<label htmlFor="ama-upcoming">AMAs</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="cc"
|
||||
id="cc-upcoming"
|
||||
name="cc-upcoming"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={upcomingFilters.cc}
|
||||
onChange={handleUpcomingFilterChange}
|
||||
/>
|
||||
<label htmlFor="cc-upcoming">Community Calls</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="zone"
|
||||
id="zone-upcoming"
|
||||
name="zone-upcoming"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={upcomingFilters.zone}
|
||||
onChange={handleUpcomingFilterChange}
|
||||
/>
|
||||
<label htmlFor="zone-upcoming">XRPL Zone</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="info-session"
|
||||
id="info-session-upcoming"
|
||||
name="info-session-upcoming"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={upcomingFilters["info-session"]}
|
||||
onChange={handleUpcomingFilterChange}
|
||||
/>
|
||||
<label htmlFor="info-session-upcoming">Info Session</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* # Available Types - conference, hackathon, ama, cc, zone, meetup, info-session */}
|
||||
<div className="mt-2 row row-cols-1 row-cols-lg-3 card-deck">
|
||||
{filteredUpcoming.map((event) => (
|
||||
<a
|
||||
className={`event-card ${event.type}`}
|
||||
href={event.link}
|
||||
style={{}}
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
className="event-card-header"
|
||||
style={{
|
||||
background: `no-repeat url(./img/events/${event.image})`,
|
||||
}}
|
||||
>
|
||||
<div className="event-card-title">{event.name}</div>
|
||||
</div>
|
||||
<div className="event-card-body">
|
||||
<p>{event.description}</p>
|
||||
</div>
|
||||
<div className="mt-lg-auto event-card-footer d-flex flex-column">
|
||||
<span className="mb-2 d-flex icon icon-location">
|
||||
{event.location}
|
||||
</span>
|
||||
<span className="d-flex icon icon-date">{event.date}</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
{/* Past Events */}
|
||||
<section className="container-new pt-26" id="past-events">
|
||||
<div className="p-0 pb-2 mb-4 d-flex flex-column-reverse col-lg-6 pr-lg-5">
|
||||
<h3 className="h4 h2-sm">
|
||||
{translate("Explore past community-hosted events")}
|
||||
</h3>
|
||||
<h6 className="mb-3 eyebrow">{translate("Past Events")}</h6>
|
||||
</div>
|
||||
<div className="filter row col-12 mt-lg-5 d-flex flex-column">
|
||||
<h6 className="mb-3">Filter By:</h6>
|
||||
<div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="conference"
|
||||
id="conference-past"
|
||||
name="conference-past"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={pastFilters.conference}
|
||||
onChange={handlePastFilterChange}
|
||||
/>
|
||||
<label htmlFor="conference-past">Conference</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="meetup"
|
||||
id="meetup-past"
|
||||
name="meetup-past"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={pastFilters.meetup}
|
||||
onChange={handlePastFilterChange}
|
||||
/>
|
||||
<label htmlFor="meetup-past">Meetups</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="hackathon"
|
||||
id="hackathon-past"
|
||||
name="hackathon-past"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={pastFilters.hackathon}
|
||||
onChange={handlePastFilterChange}
|
||||
/>
|
||||
<label htmlFor="hackathon-past">Hackathons</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="ama"
|
||||
id="ama-past"
|
||||
name="ama-past"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={pastFilters.ama}
|
||||
onChange={handlePastFilterChange}
|
||||
/>
|
||||
<label htmlFor="ama-past">AMAs</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="cc"
|
||||
id="cc-past"
|
||||
name="cc-past"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={pastFilters.cc}
|
||||
onChange={handlePastFilterChange}
|
||||
/>
|
||||
<label htmlFor="cc-past">Community Calls</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="zone"
|
||||
id="zone-past"
|
||||
name="zone-past"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={pastFilters.zone}
|
||||
onChange={handlePastFilterChange}
|
||||
/>
|
||||
<label htmlFor="zone-past">XRPL Zone</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input
|
||||
defaultValue="info-session"
|
||||
id="info-session-past"
|
||||
name="info-session-past"
|
||||
type="checkbox"
|
||||
className="events-filter"
|
||||
checked={pastFilters["info-session"]}
|
||||
onChange={handlePastFilterChange}
|
||||
/>
|
||||
<label htmlFor="info-session-past">Info Session</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 mb-0 row row-cols-1 row-cols-lg-3 card-deck ">
|
||||
{filteredPast.map((event) => (
|
||||
<a
|
||||
className="event-card {event.type}"
|
||||
href={event.link}
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
className="event-card-header"
|
||||
style={{
|
||||
background: `no-repeat url(./img/events/${event.image})`,
|
||||
}}
|
||||
>
|
||||
<div className="event-card-title">{event.name}</div>
|
||||
</div>
|
||||
<div className="event-card-body">
|
||||
<p>{event.description}</p>
|
||||
</div>
|
||||
<div className="mt-lg-auto event-card-footer d-flex flex-column">
|
||||
<span className="mb-2 d-flex icon icon-location">
|
||||
{event.location}
|
||||
</span>
|
||||
<span className="d-flex icon icon-date">{event.date}</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
85
content/filterCodeSamples.js
Normal file
85
content/filterCodeSamples.js
Normal file
@@ -0,0 +1,85 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const MarkdownIt = require('markdown-it');
|
||||
const { JSDOM } = require('jsdom');
|
||||
|
||||
const csDir = 'content/_code-samples/';
|
||||
const skipDirs = ['node_modules', '.git', '__pycache__'];
|
||||
const wordsToCaps = ['xrp'];
|
||||
|
||||
const markdown = new MarkdownIt();
|
||||
let net, tls;
|
||||
if (typeof window === 'undefined') {
|
||||
net = require('net');
|
||||
tls = require('tls');
|
||||
}
|
||||
|
||||
const toTitleCase = (s) => {
|
||||
const words = s.split(/_|[^\w']/);
|
||||
return words
|
||||
.filter((word) => word)
|
||||
.map((word) => (wordsToCaps.includes(word) ? word.toUpperCase() : word.charAt(0).toUpperCase() + word.slice(1)))
|
||||
.join(' ')
|
||||
.replace("'S", "'s")
|
||||
.replace(" A ", " a ");
|
||||
};
|
||||
|
||||
let langs = [];
|
||||
|
||||
const sortfunc = (cs) => {
|
||||
if (cs.title.includes('Intro') || cs.title.includes('Quickstart')) {
|
||||
return ` ${cs.title}`;
|
||||
}
|
||||
return cs.title;
|
||||
};
|
||||
|
||||
const allCodeSamples = () => {
|
||||
const cses = [];
|
||||
|
||||
const walkDir = (dirPath) => {
|
||||
const filenames = fs.readdirSync(dirPath);
|
||||
|
||||
for (const skip of skipDirs) {
|
||||
const index = filenames.indexOf(skip);
|
||||
if (index > -1) filenames.splice(index, 1);
|
||||
}
|
||||
|
||||
filenames.forEach((file) => {
|
||||
const fullPath = path.join(dirPath, file);
|
||||
|
||||
if (fs.statSync(fullPath).isDirectory()) {
|
||||
walkDir(fullPath);
|
||||
} else if (file === 'README.md') {
|
||||
const md = fs.readFileSync(fullPath, 'utf-8');
|
||||
const html = markdown.render(md);
|
||||
const dom = new JSDOM(html);
|
||||
const document = dom.window.document;
|
||||
|
||||
const h = document.querySelector('h1, h2, h3');
|
||||
const p = document.querySelector('p');
|
||||
|
||||
const cs = {
|
||||
path: dirPath,
|
||||
title: h ? h.textContent : toTitleCase(path.basename(dirPath)),
|
||||
description: p ? p.textContent : '',
|
||||
href: dirPath,
|
||||
// you can fill the 'langs' array as per your logic
|
||||
langs: [],
|
||||
};
|
||||
|
||||
// Add unique names to list for sorting
|
||||
if (!langs.includes(cs.langs)) {
|
||||
langs.push(cs.langs);
|
||||
}
|
||||
|
||||
cses.push(cs);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
walkDir(csDir);
|
||||
|
||||
return cses.sort((a, b) => sortfunc(a).localeCompare(sortfunc(b)));
|
||||
};
|
||||
|
||||
export { allCodeSamples, langs as allLangs };
|
||||
247
content/history.page.tsx
Normal file
247
content/history.page.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
|
||||
export default function History() {
|
||||
const { translate } = useTranslate();
|
||||
const [openSections, setOpenSections] = React.useState({});
|
||||
|
||||
const toggleSection = (sectionId) => {
|
||||
setOpenSections({
|
||||
...openSections,
|
||||
[sectionId]: !openSections[sectionId],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="landing">
|
||||
<div className="overflow-hidden">
|
||||
<div className="position-relative">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/history-orange.svg")}
|
||||
className="landing-bg"
|
||||
id="history-orange"
|
||||
/>
|
||||
</div>
|
||||
<section className="py-26 text-center">
|
||||
<div className="col-lg-5 mx-auto text-center">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0">
|
||||
{translate("Provide a Better Alternative to Bitcoin")}
|
||||
</h1>
|
||||
<h6 className="eyebrow mb-3">{translate("XRPL's Origin")}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="col-lg-6 offset-lg-3">
|
||||
<h4 className="longform mb-10">
|
||||
{translate(
|
||||
"In 2011, three engineers—David Schwartz, Jed McCaleb, and Arthur Britto—began developing the XRP Ledger (XRPL). Fascinated by Bitcoin, they set out to create a better version that improved upon its limitations—with the goal of creating a digital asset that was more sustainable and built specifically for payments."
|
||||
)}
|
||||
</h4>
|
||||
<p className="mb-6">
|
||||
{translate(
|
||||
"The XRP Ledger first launched in June 2012. Shortly thereafter, they were joined by Chris Larsen, and the group started the Company NewCoin in September 2012 (quickly renamed OpenCoin and now named Ripple)."
|
||||
)}
|
||||
</p>
|
||||
<p className="mb-0">
|
||||
{translate(
|
||||
"The XRPL founders gifted 80 billion XRP, the platform’s native currency, to the company. Ripple has since put the majority in escrow."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/history-purple.svg")}
|
||||
id="history-purple"
|
||||
/>
|
||||
</div>
|
||||
<div className="container-new marketing-wrapper">
|
||||
<section className="row mb-60">
|
||||
<div className="timeline">
|
||||
<div className="timeline-block mb-20-sm mb-10-until-sm">
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-content text-sm-left text-md-right">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="mb-6 h5 h2-sm">
|
||||
{translate("2011 XRP Ledger Development")}
|
||||
</h2>
|
||||
<h6 className="h1 mb-3">2011</h6>
|
||||
</div>
|
||||
<p>
|
||||
{translate(
|
||||
"In early 2011, three developers—David Schwartz, Jed McCaleb, and Arthur Britto—were fascinated with Bitcoin but observed the waste inherent in mining. They sought to create a more sustainable system for sending value (an idea outlined in a "
|
||||
)}
|
||||
<a
|
||||
href="https://bitcointalk.org/index.php?topic=10193.0"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{translate(
|
||||
"May 2011 forum post: “Bitcoin without mining”"
|
||||
)}
|
||||
</a>
|
||||
{")."}
|
||||
</p>
|
||||
<a
|
||||
className={`btn btn-primary read-more mt-10 ${
|
||||
openSections["section-1"] && "d-none"
|
||||
}`}
|
||||
onClick={() => toggleSection("section-1")}
|
||||
>
|
||||
Read More
|
||||
</a>
|
||||
<div
|
||||
className={`hidden-section ${
|
||||
openSections["section-1"] && "show"
|
||||
}`}
|
||||
id="section-1"
|
||||
>
|
||||
<p>
|
||||
{translate(
|
||||
"Their initial observations about the high energy consumption and scalability issues that would plague Bitcoin proved prescient. In 2019, estimates suggest Bitcoin mining used more energy than the entire country of Portugal. Moreover, their initial read indicated that significant problems could arise if any miner obtained (or miners colluded to obtain) greater than 50% of the mining power. That risk persists with Bitcoin (and Ethereum) today as mining power has consolidated in China."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="timeline-block mb-20-sm mb-10-until-sm">
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-content">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="mb-6 h5 h2-sm">
|
||||
{translate("XRPL Launches its Native Currency, XRP")}
|
||||
</h2>
|
||||
<h6 className="h1 mb-3">2012</h6>
|
||||
</div>
|
||||
<p>
|
||||
{translate(
|
||||
"The trio of developers continued the work to build a distributed ledger that improved upon these fundamental limitations of Bitcoin, originally naming the code Ripple. The ledger included a digital asset that would originally be called “ripples” (XRP as the currency code) to follow the same naming convention as Bitcoin (BTC). At the time, the name Ripple stood for the open-source project, the unique consensus ledger (Ripple Consensus Ledger), transaction protocol (Ripple Transaction Protocol or RTXP), the network (Ripple network), and the digital asset (known as “ripples”)."
|
||||
)}
|
||||
</p>
|
||||
<a
|
||||
className={`btn btn-primary read-more mt-10 ${
|
||||
openSections["section-2"] && "d-none"
|
||||
}`}
|
||||
data-target="section-2"
|
||||
onClick={() => toggleSection("section-2")}
|
||||
>
|
||||
Read More
|
||||
</a>
|
||||
<div
|
||||
className={`hidden-section ${
|
||||
openSections["section-2"] && "show"
|
||||
}`}
|
||||
id="section-2"
|
||||
>
|
||||
<p>
|
||||
{translate(
|
||||
"In practice, this approach led to many broad uses of “Ripple.” For clarity, the community simply started calling the digital asset by its currency code, “XRP.”"
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{translate(
|
||||
"By June 2012, Schwartz, McCaleb, and Britto finished code development, and the Ledger was complete."
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{translate(
|
||||
"Once the XRP Ledger was live, 80% of the XRP was gifted to a new company that set out to build use cases for the digital asset—initially called NewCoin and renamed quickly to OpenCoin."
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{translate(
|
||||
"Chris Larsen was the CEO of OpenCoin, and at the company's founding, Jed was co-founder and CTO, David Schwartz was the Chief Cryptography Officer, and Arthur Britto an advisor."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="timeline-block mb-20-sm mb-10-until-sm">
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-content text-sm-left text-md-right">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="mb-6 h5 h2-sm">
|
||||
{translate("OpenCoin Rebranded to Ripple Labs")}
|
||||
</h2>
|
||||
<h6 className="h1 mb-3">2013</h6>
|
||||
</div>
|
||||
<p>
|
||||
{translate(
|
||||
"Since the early days, OpenCoin set out to revolutionize the global financial system. Despite the revolutionary ideals of many of Bitcoin’s early believers, Larsen never thought blockchain technology should be used to overthrow the existing financial system. He believed that history’s most transformative innovations have always relied on the great ideas that came before them—not displacing them."
|
||||
)}
|
||||
</p>
|
||||
<a
|
||||
className={`btn btn-primary read-more mt-10 ${
|
||||
openSections["section-3"] && "d-none"
|
||||
}`}
|
||||
data-target="section-3"
|
||||
style={{
|
||||
display: openSections["section-3"]
|
||||
? "none"
|
||||
: "inline-block",
|
||||
}}
|
||||
onClick={() => toggleSection("section-3")}
|
||||
>
|
||||
Read More
|
||||
</a>
|
||||
<div
|
||||
className={`hidden-section ${
|
||||
openSections["section-3"] && "show"
|
||||
}`}
|
||||
id="section-3"
|
||||
>
|
||||
<p>
|
||||
{translate(
|
||||
"In early conversations with potential customers, the team was asked about the differences between the Ripple project and OpenCoin company. With the community starting to refer to the digital asset as XRP, company leaders decided to rebrand the company to Ripple Labs, which has been shortened over time to “Ripple.”"
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{translate(
|
||||
"Today, Ripple has created a use case leveraging the XRP Ledger and XRP for liquidity management in its cross-border payments business. Ripple also remains a stakeholder and contributor to the broader XRPL community."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="timeline-block mb-20-sm mb-10-until-sm">
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-content">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="mb-6 h5 h2-sm">
|
||||
{translate("XRPL Foundation Launched")}
|
||||
</h2>
|
||||
<h6 className="h1 mb-3">2020</h6>
|
||||
</div>
|
||||
<p>
|
||||
<a
|
||||
href="https://foundation.xrpl.org/2020/09/24/xrp-ledger-foundation-launches-to-drive-growth-and-development-of-the-core-xrp-ledger-and-community/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{translate("Founded")}
|
||||
</a>
|
||||
{translate(
|
||||
" September 24, 2020, the XRPL Foundation is an independent and nonprofit entity with a mission to accelerate the development and adoption of the decentralized XRP Ledger. The Foundation received an initial donation of over $6.5M from Coil, Ripple, and Gatehub to fund the Foundation’s work in service of the growing number of developers and other "
|
||||
)}
|
||||
<a
|
||||
href="contribute.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{translate("global blockchain community")}
|
||||
</a>
|
||||
{translate(" members building on the XRP Ledger.")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
320
content/impact.page.tsx
Normal file
320
content/impact.page.tsx
Normal file
@@ -0,0 +1,320 @@
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
import mapDark from "./static/js/impact/mapDark.json"
|
||||
import mapLight from "./static/js/impact/mapLight.json"
|
||||
import { useLottie } from "lottie-react";
|
||||
import { useThemeFromClassList } from "./@theme/helpers";
|
||||
|
||||
export default function Impact() {
|
||||
const theme = useThemeFromClassList(['dark', 'light'])
|
||||
const { translate } = useTranslate();
|
||||
const options = React.useMemo(() => {
|
||||
return {
|
||||
animationData: theme === 'dark' ? mapDark : mapLight,
|
||||
loop: true
|
||||
};
|
||||
},[theme])
|
||||
const { View } = useLottie(options);
|
||||
return (
|
||||
<div className="landing page-impact">
|
||||
<div className="overflow-hidden">
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/community-purple.svg")}
|
||||
className="landing-bg"
|
||||
id="impact-purple"
|
||||
/>
|
||||
</div>
|
||||
<section className="container-new py-26 text-lg-center">
|
||||
<div className="p-0 col-lg-8 mx-lg-auto">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0">
|
||||
{translate("Today’s Value, Tomorrow’s Vision")}
|
||||
</h1>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("XRPL Today, XRPL Tomorrow")}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/home-green.svg")}
|
||||
id="impact-green"
|
||||
/>
|
||||
</div>
|
||||
{/* World map */}
|
||||
<section className="container-new py-10">
|
||||
<div className="col-sm-10 col-lg-6 offset-md-3 p-10-until-sm pl-0-sm pr-0-sm">
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("Building for the Future")}
|
||||
</h6>
|
||||
<h2 className="h4 h2-sm mb-8">
|
||||
{translate("Consensus protocol is efficient and sustainable")}
|
||||
</h2>
|
||||
<h5 className="longform mb-10">
|
||||
{translate(
|
||||
"For more than 272 million migrants worldwide, sending and receiving money across borders is expensive, unreliable and complex."
|
||||
)}
|
||||
</h5>
|
||||
<p className="mb-6">
|
||||
{`${translate(
|
||||
"Open and decentralized, blockchain and crypto are seeing an increase in adoption across the financial services industry, from retail and institutional investment to "
|
||||
)} `}
|
||||
<a href="uses">{translate("commercial use cases")}</a>
|
||||
{` ${translate("like CBDCs, NFTs, and cross-border payments.")}`}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{/* Large */}
|
||||
<div className="col d-none d-lg-block align-self-center">
|
||||
{/* <div className="mt-10" id="map-dark" />
|
||||
<div className="mt-10" id="map-light" /> */}
|
||||
{View}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Video sidebar */}
|
||||
<section className="container-new py-26">
|
||||
<div className="mt-10 card-grid card-grid-2xN">
|
||||
<div className="col">
|
||||
<iframe
|
||||
id="video1"
|
||||
style={{ display: "none" }}
|
||||
width={560}
|
||||
height={315}
|
||||
src="https://www.youtube.com/embed/WsmldDNGQ9s"
|
||||
title="What makes the XRPL sustainable?"
|
||||
frameBorder={0}
|
||||
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
<a href="#" id="playvideo">
|
||||
<img
|
||||
alt="Preview of man speaking with a play button"
|
||||
src={require("./static/img/impact/video_sustainable@2x.png")}
|
||||
id="xrpl-overview-video-intro"
|
||||
className="w-100 video-image"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col ls-none mb-16-sm">
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("A Sustainable Future")}
|
||||
</h6>
|
||||
<h2 className="h4 h2-sm mb-8">
|
||||
{translate("What makes the XRPL sustainable?")}
|
||||
</h2>
|
||||
<h5 className="longform mb-10">
|
||||
{translate(
|
||||
"XRPL’s unique consensus mechanism is eco-friendly—it does not require mining to settle transactions. This results in efficiency without sacrificing security, decentralization, or scalability."
|
||||
)}
|
||||
</h5>
|
||||
<p>
|
||||
{translate(
|
||||
"The trivial amount of energy it does consume is then neutralized with carbon credits through EW Zero, an open-source blockchain decarbonization tool."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Card */}
|
||||
<section className="container-new py-26">
|
||||
<div className="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-community-purple.svg")}
|
||||
className="cta cta-top-left"
|
||||
/>
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-calculator-green.svg")}
|
||||
className="cta cta-bottom-right"
|
||||
/>
|
||||
<div className="z-index-1 position-relative">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="h4 h2-sm mb-10-until-sm mb-8-sm">
|
||||
{translate(
|
||||
"Featured companies & projects running on the XRP Ledger."
|
||||
)}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("Sustainable Projects")}
|
||||
</h6>
|
||||
</div>
|
||||
<p className="mb-10">
|
||||
{translate(
|
||||
"Learn more about companies and developers who are using the XRP Ledger to solve interesting problems efficiently and sustainably."
|
||||
)}
|
||||
</p>
|
||||
<a href="/uses" className="btn btn-primary btn-arrow">
|
||||
{translate("See More")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Connect */}
|
||||
<section className="container-new py-26">
|
||||
{/* flex. Col for mobile. Row for large. on large align content to the center */}
|
||||
<div className="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
|
||||
<div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 p-lg-3">
|
||||
<div className="d-flex flex-column-reverse py-lg-3">
|
||||
<h3 className="h4 h2-sm">
|
||||
{translate(
|
||||
"How can businesses and developers connect and contribute?"
|
||||
)}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="py-lg-3 mb-2 longform" style={{ maxWidth: 520 }}>
|
||||
{translate(
|
||||
"If you want to advance business with sustainable solutions to real-world problems, you’re invited to join the global, growing XRPL community. Here are some ways to get involved:"
|
||||
)}
|
||||
</p>
|
||||
<div className="d-none d-lg-block py-lg-3">
|
||||
<a className="btn btn-primary btn-arrow" href="/contribute">
|
||||
{translate("Join the Community")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 col-lg-6 px-0 pl-lg-3">
|
||||
<div className="row align-items-center m-0 connect-list">
|
||||
{/* connect list */}
|
||||
<div className="col-12 col-lg-6 p-0 pr-3">
|
||||
<div className="px-lg-3 pb-3">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-01"
|
||||
// src={require("data:,")}
|
||||
/>
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Blog")}</h6>
|
||||
<p>
|
||||
{`${translate("Check out the ")} `}
|
||||
<a href="https://xrpl.org/blog/">
|
||||
{translate("XRPL dev blog")}
|
||||
</a>
|
||||
{` ${translate(
|
||||
"to stay up-to-date on the latest innovations and developments in the XRPL community."
|
||||
)}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-02"
|
||||
// src={require("data:,")}
|
||||
/>
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Events")}</h6>
|
||||
<p>
|
||||
{`${translate("Attend ")} `}
|
||||
<a href="/events">
|
||||
{translate("meetups, hackathons, and conferences")}
|
||||
</a>
|
||||
{` ${translate(
|
||||
"to meet other members of the community."
|
||||
)}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-lg-5">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-03"
|
||||
// src={require("data:,")}
|
||||
/>
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Code")}</h6>
|
||||
<p>
|
||||
{`${translate("View the")} `}
|
||||
<a
|
||||
href="https://github.com/XRPLF/xrpl-dev-portal/"
|
||||
target="_blank"
|
||||
>
|
||||
{translate("Github repositories")}
|
||||
</a>
|
||||
{` ${translate(
|
||||
"to find blockchain projects to see how you can contribute."
|
||||
)}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-04"
|
||||
// src={require("data:,")}
|
||||
/>
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Connect")}</h6>
|
||||
<p>
|
||||
{translate(
|
||||
"Join the conversation on social media using #XRPLCommunity."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 1 */}
|
||||
{/* Show on large */}
|
||||
<div className="col-12 col-lg-6 p-0 pr-3 d-none d-lg-block">
|
||||
<div className="px-lg-3 pb-3 pt-5 mt-5">
|
||||
<div className="pt-1 mt-3">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-02"
|
||||
// src={require("data:,")}
|
||||
/>
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Events")}</h6>
|
||||
<p>
|
||||
{`${translate("Attend ")} `}
|
||||
<a href="/events">
|
||||
{translate("meetups, hackathons, and conferences")}
|
||||
</a>
|
||||
{` ${translate(
|
||||
"to meet other members of the community."
|
||||
)}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-5">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-04"
|
||||
// src={require("data:,")}
|
||||
/>
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Connect")}</h6>
|
||||
<p>
|
||||
{translate(
|
||||
"Join the conversation on social media using #XRPLCommunity."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end col 2 */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-lg-none order-3 mt-4 pt-3">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="/contribute"
|
||||
>
|
||||
{translate("Join the Community")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
BIN
content/static/img/uses/lightmode/xrp-oval.png
Normal file
BIN
content/static/img/uses/lightmode/xrp-oval.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
11194
content/static/js/community/CareersDark.json
Normal file
11194
content/static/js/community/CareersDark.json
Normal file
File diff suppressed because it is too large
Load Diff
2447
content/static/js/community/NetworkNodeLight.json
Normal file
2447
content/static/js/community/NetworkNodeLight.json
Normal file
File diff suppressed because one or more lines are too long
2826
content/static/js/community/XRPLGrantsDark.json
Normal file
2826
content/static/js/community/XRPLGrantsDark.json
Normal file
File diff suppressed because one or more lines are too long
1
content/static/js/ecosystem/arrow-animation.json
Normal file
1
content/static/js/ecosystem/arrow-animation.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
content/static/js/impact/map-animation-dark.json → content/static/js/impact/mapDark.json
Executable file → Normal file
2
content/static/js/impact/map-animation-dark.json → content/static/js/impact/mapDark.json
Executable file → Normal file
File diff suppressed because one or more lines are too long
189321
content/static/js/impact/mapLight.json
Normal file
189321
content/static/js/impact/mapLight.json
Normal file
File diff suppressed because one or more lines are too long
@@ -1,6 +1,43 @@
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
const cards = [
|
||||
import numLight from "./static/js/ecosystem/numbers-animation-light.json";
|
||||
import numDark from "./static/js/ecosystem/numbers-animation.json";
|
||||
import arrow from "./static/js/ecosystem/arrow-animation.json";
|
||||
|
||||
import { useLottie } from "lottie-react";
|
||||
import { useThemeFromClassList } from "./@theme/helpers";
|
||||
|
||||
const logos = {
|
||||
infrastructure: [
|
||||
"XRP-Ledger",
|
||||
"Gatehub",
|
||||
"towoLabs",
|
||||
"xrpscan",
|
||||
"xrp-toolkit",
|
||||
"bithomp",
|
||||
"onthedex",
|
||||
],
|
||||
developer_tooling: ["blockforce", "Evernode", "threezy", "tokenize"],
|
||||
interoperability: ["Allbridge", "multichain"],
|
||||
wallet: ["Bitfrost", "Crossmark", "Edge", "gem-wallet", "Xumm"],
|
||||
nfts: [
|
||||
"aesthetes",
|
||||
"audiotarky",
|
||||
"nftmaster",
|
||||
"peerkat",
|
||||
"sologenic_dex",
|
||||
"xrp-cafe",
|
||||
"xrp-oval",
|
||||
],
|
||||
exchanges: ["sologenic_dex", "XPMarket"],
|
||||
gaming: ["Forte", "Futureverse", "ledger-city", "onXRP", "styngr"],
|
||||
security: ["Anchain"],
|
||||
payments: ["ripple", "SuperMojo"],
|
||||
cbdc: ["ripple"],
|
||||
sustainability: ["carbonland-trust", "Rootmaker"],
|
||||
custody: ["Gatehub", "Bitgo"],
|
||||
};
|
||||
const cardsData = [
|
||||
{
|
||||
id: "aesthetes",
|
||||
title: "Aesthetes",
|
||||
@@ -136,6 +173,16 @@ const cards = [
|
||||
category_name: "Interoperability",
|
||||
link: "https://multichain.org/",
|
||||
},
|
||||
{
|
||||
id: "allbridge",
|
||||
title: "Allbridge",
|
||||
description:
|
||||
"Allbridge is a generalized bridge between EVM and non-EVM compatible blockchains, supporting native and wrapped token transfers."
|
||||
,
|
||||
category_id: "interoperability",
|
||||
category_name: "Interoperability",
|
||||
link: "https://allbridge.io/",
|
||||
},
|
||||
{
|
||||
id: "nft-master",
|
||||
title: "NFT Master",
|
||||
@@ -345,7 +392,7 @@ const uses = [
|
||||
{
|
||||
id: "interoperability",
|
||||
title: "Interoperability",
|
||||
number: 3,
|
||||
number: 2,
|
||||
description:
|
||||
"Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.",
|
||||
},
|
||||
@@ -418,114 +465,211 @@ const uses = [
|
||||
},
|
||||
];
|
||||
|
||||
const target = { prefix: "" }; // TODO: fixme
|
||||
|
||||
export default function Uses() {
|
||||
const theme = useThemeFromClassList(["dark", "light"]);
|
||||
const { translate } = useTranslate();
|
||||
const [displayModal, setDisplayModal] = React.useState(false);
|
||||
const [currentIndex, setCurrentIndex] = React.useState(0);
|
||||
const defaultSelectedCategories = new Set(Object.keys(featured_categories));
|
||||
|
||||
const [selectedCategories, setSelectedCategories] = React.useState(
|
||||
defaultSelectedCategories
|
||||
);
|
||||
const [cards, setCards] = React.useState(cardsData);
|
||||
|
||||
const toggleCategory = (category) => {
|
||||
const newSelectedCategories = new Set(selectedCategories);
|
||||
if (newSelectedCategories.has(category)) {
|
||||
newSelectedCategories.delete(category);
|
||||
} else {
|
||||
newSelectedCategories.add(category);
|
||||
}
|
||||
setSelectedCategories(newSelectedCategories);
|
||||
};
|
||||
|
||||
const filteredCards = cards.filter((card) =>
|
||||
selectedCategories.has(card.category_id)
|
||||
);
|
||||
const featuredCount = Array.from(selectedCategories).filter((category) =>
|
||||
featured_categories.hasOwnProperty(category)
|
||||
).length;
|
||||
const otherCount = Array.from(selectedCategories).filter((category) =>
|
||||
other_categories.hasOwnProperty(category)
|
||||
).length;
|
||||
|
||||
const modalRef = React.useRef(null); // Create a reference
|
||||
React.useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target)) {
|
||||
setDisplayModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Attach the event listener
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
|
||||
return () => {
|
||||
// Remove the event listener
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [modalRef, displayModal]);
|
||||
|
||||
const handleArrowClick = (direction) => {
|
||||
let newIndex = currentIndex;
|
||||
if (direction === "left" && currentIndex > 0) {
|
||||
newIndex = currentIndex - 1;
|
||||
} else if (direction === "right" && currentIndex < uses.length - 1) {
|
||||
newIndex = currentIndex + 1;
|
||||
}
|
||||
setModalData(uses[newIndex]);
|
||||
setCurrentIndex(newIndex);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const closeOnEscape = (e) => {
|
||||
if (e.key === "Escape") {
|
||||
setDisplayModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (displayModal) {
|
||||
window.addEventListener("keydown", closeOnEscape);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", closeOnEscape);
|
||||
};
|
||||
}, [displayModal]);
|
||||
|
||||
const options = React.useMemo(() => {
|
||||
return {
|
||||
animationData: theme === "dark" ? numDark : numLight,
|
||||
loop: false,
|
||||
};
|
||||
}, [theme]);
|
||||
const [modalData, setModalData] = React.useState({
|
||||
id: "",
|
||||
src: "",
|
||||
title: "",
|
||||
description: "",
|
||||
number: "",
|
||||
});
|
||||
const { View } = useLottie(options);
|
||||
|
||||
//arrow
|
||||
const optionsArrow = React.useMemo(() => {
|
||||
return {
|
||||
animationData: arrow,
|
||||
loop: true,
|
||||
};
|
||||
}, [theme]);
|
||||
|
||||
const arrowView = useLottie(optionsArrow);
|
||||
const arrowAnimation = arrowView.View;
|
||||
const UpdateModalContent = ({ id, title, description, logos }) => {
|
||||
const logoArray = logos[id] || [];
|
||||
const createLogoElement = (logoClassName, title, id) => {
|
||||
return (
|
||||
<div className={`logo-item ${logoClassName}`}>
|
||||
{/* Whatever content here */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLogoRows = () => {
|
||||
if (logoArray.length === 0) return null;
|
||||
|
||||
let topRow = [];
|
||||
let bottomRow = [];
|
||||
let bottomRowStyle = {};
|
||||
|
||||
if (logoArray.length === 7) {
|
||||
topRow = logoArray.slice(0, 4);
|
||||
bottomRow = logoArray.slice(4);
|
||||
} else if (logoArray.length === 6) {
|
||||
topRow = logoArray.slice(0, 3);
|
||||
bottomRow = logoArray.slice(3);
|
||||
} else if (logoArray.length === 5) {
|
||||
topRow = logoArray.slice(0, 3);
|
||||
bottomRow = logoArray.slice(3);
|
||||
bottomRowStyle = { justifyContent: "center" };
|
||||
} else if (logoArray.length === 4) {
|
||||
topRow = logoArray.slice(0, 2);
|
||||
bottomRow = logoArray.slice(2);
|
||||
bottomRowStyle = { justifyContent: "center" };
|
||||
} else {
|
||||
topRow = logoArray;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="top-row">
|
||||
{topRow.map((logoClassName) =>
|
||||
createLogoElement(logoClassName, title, id)
|
||||
)}
|
||||
</div>
|
||||
{bottomRow.length > 0 && (
|
||||
<div className="bottom-row" style={bottomRowStyle}>
|
||||
{bottomRow.map((logoClassName) =>
|
||||
createLogoElement(logoClassName, title, id)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="arrows-container" id="arrows-container">
|
||||
{currentIndex !== 0 && (
|
||||
<button
|
||||
className="arrow-button left-arrow"
|
||||
id="leftArrow"
|
||||
style={{ position: "absolute", left: "0" }}
|
||||
onClick={() => handleArrowClick("left")}
|
||||
>
|
||||
<img alt="left arrow" />
|
||||
</button>
|
||||
)}
|
||||
{currentIndex !== uses.length - 1 && (
|
||||
<button
|
||||
className="arrow-button right-arrow"
|
||||
id="rightArrow"
|
||||
style={{ position: "absolute", right: "0" }}
|
||||
onClick={() => handleArrowClick("right")}
|
||||
>
|
||||
<img alt="right arrow" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<img
|
||||
className="section-image"
|
||||
alt="section image"
|
||||
width={40}
|
||||
height={40}
|
||||
id={id}
|
||||
/>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<p className="section-text-title">{title}</p>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<p className="section-text-description">{description}</p>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<hr className="section-separator" />
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<div className="section-logos px-5">{renderLogoRows()}</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="landing page-uses landing-builtin-bg">
|
||||
<div>
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal fade "
|
||||
id="categoryFilterModal"
|
||||
tabIndex={-1}
|
||||
aria-labelledby="categoryFilterModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<a className="btn cancel" data-dismiss="modal">
|
||||
<span className="chevron">
|
||||
<span />
|
||||
<span />
|
||||
</span>{" "}
|
||||
{translate("Cancel")}
|
||||
</a>
|
||||
<a className="btn apply" data-dismiss="modal">
|
||||
{translate("Apply")}{" "}
|
||||
<span className="chevron">
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{/* */}
|
||||
<div className="p-3 page-events">
|
||||
<form>
|
||||
<p className="category-header mb-4">
|
||||
{translate("Featured Categories")}{" "}
|
||||
<span
|
||||
id="featured_count_old"
|
||||
className="featured_count category_count"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</p>
|
||||
{/* $$ for category_id, category_name in featured_categories.items() $$ */}
|
||||
<div className="cat_checkbox category-checkbox pb-2">
|
||||
<input
|
||||
className="events-filter input_$$category_id$$"
|
||||
type="checkbox"
|
||||
name="categories"
|
||||
id="input_$$category_id$$"
|
||||
defaultValue="$$category_id$$"
|
||||
defaultChecked
|
||||
/>
|
||||
<label
|
||||
className="font-weight-bold"
|
||||
htmlFor="input_$$category_id$$"
|
||||
>
|
||||
$$ category_name $$
|
||||
</label>
|
||||
</div>
|
||||
{/* )) } */}
|
||||
<p className="category-header pt-5 mt-3 mb-4">
|
||||
{translate("Other Categories")}{" "}
|
||||
<span
|
||||
id="other_count_old"
|
||||
className="other_count category_count"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</p>
|
||||
{/* $$ for category_id, category_name in other_categories.items() $$ */}
|
||||
<div className="cat_checkbox category-checkbox pb-2">
|
||||
<input
|
||||
className="events-filter input_$$category_id$$"
|
||||
type="checkbox"
|
||||
name="categories"
|
||||
id="input_$$category_id$$"
|
||||
defaultValue="$$category_id$$"
|
||||
/>
|
||||
<label htmlFor="input_$$category_id$$">
|
||||
$$ category_name $$
|
||||
</label>
|
||||
</div>
|
||||
{/* )) } */}
|
||||
</form>
|
||||
</div>
|
||||
{/* */}
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
data-dismiss="modal"
|
||||
>
|
||||
{translate("Apply")}
|
||||
</button>
|
||||
<a className="btn " data-dismiss="modal">
|
||||
{translate("Cancel")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end modal */}
|
||||
<div className="overflow-hidden">
|
||||
<section className="container-new py-26 text-lg-center">
|
||||
<div className="p-3 col-lg-8 mx-lg-auto">
|
||||
@@ -542,7 +686,7 @@ export default function Uses() {
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<div className="arrow-animation" id="arrowAnimation">
|
||||
{" "}
|
||||
{arrowAnimation}
|
||||
</div>
|
||||
<span className="explore-projects">
|
||||
Explore Featured Projects{" "}
|
||||
@@ -559,23 +703,17 @@ export default function Uses() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 offset-lg-2 p-5 d-flex">
|
||||
<div
|
||||
className="mb-4 pb-3 numbers-animation"
|
||||
id="numbersAnimation"
|
||||
/>
|
||||
<div
|
||||
className="mb-4 pb-3 numbers-animation"
|
||||
id="numbersAnimationLight"
|
||||
/>
|
||||
<div className="mb-4 pb-3 numbers-animation">{View}</div>
|
||||
<div className="apps-built">
|
||||
Apps/exchanges <br /> built on the <br /> XRPL{" "}
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
className="card-grid card-grid-4xN ls-none mt-4 pt-lg-2"
|
||||
style={{gridTemplateColumns: 'repeat(4,1fr)'}}
|
||||
className="card-grid use-cases-grid ls-none mt-4 pt-lg-2"
|
||||
id="use-case-card-grid"
|
||||
>
|
||||
{uses.map((use) => (
|
||||
{uses.map((use, index) => (
|
||||
<li
|
||||
key={use.id}
|
||||
className="col use-case-circle ls-none p-3 open-modal"
|
||||
@@ -583,7 +721,11 @@ export default function Uses() {
|
||||
data-title={use.title}
|
||||
data-description={use.description}
|
||||
data-number={use.number}
|
||||
// data-src={use.src}
|
||||
onClick={() => {
|
||||
setModalData(use);
|
||||
setDisplayModal(true);
|
||||
setCurrentIndex(index);
|
||||
}}
|
||||
>
|
||||
<div className="circle-content">
|
||||
<img className="circle-img" id={use.id} alt="use-logos" />
|
||||
@@ -596,36 +738,20 @@ export default function Uses() {
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
<div className="modal modal-uses" id="myModal">
|
||||
<div className="modal-content-uses">
|
||||
<div className="arrows-container" id="arrows-container">
|
||||
<button className="arrow-button left-arrow" id="leftArrow">
|
||||
<img alt="left arrow" />
|
||||
</button>
|
||||
<button className="arrow-button right-arrow" id="rightArrow">
|
||||
<img alt="right arrow" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<img
|
||||
className="section-image"
|
||||
alt="section image"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<p className="section-text-title">Title</p>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<p className="section-text-description">Description</p>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<hr className="section-separator" />
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<div className="section-logos">Group of logos here...</div>
|
||||
</div>
|
||||
<div
|
||||
className={`modal modal-uses ${displayModal ? "d-block" : ""}`}
|
||||
id="myModal"
|
||||
>
|
||||
<div
|
||||
ref={modalRef} // Attach the reference to the modal
|
||||
className="modal-content-uses"
|
||||
>
|
||||
<UpdateModalContent
|
||||
id={modalData?.id}
|
||||
title={modalData?.title}
|
||||
description={modalData?.description}
|
||||
logos={logos}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<section className="join-xrpl-section py-26">
|
||||
@@ -691,50 +817,57 @@ export default function Uses() {
|
||||
id="featured_count_old"
|
||||
className="featured_count category_count"
|
||||
>
|
||||
2
|
||||
{featuredCount}
|
||||
</span>
|
||||
</p>
|
||||
{/* $$ for category_id, category_name in featured_categories.items() $$ */}
|
||||
<div className="cat_checkbox category-checkbox pb-2">
|
||||
<input
|
||||
className="events-filter input_$$category_id$$"
|
||||
type="checkbox"
|
||||
name="categories"
|
||||
id="input_$$category_id$$"
|
||||
defaultValue="$$category_id$$"
|
||||
defaultChecked
|
||||
/>
|
||||
<label
|
||||
className="font-weight-bold"
|
||||
htmlFor="input_$$category_id$$"
|
||||
{Object.keys(featured_categories).map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="cat_checkbox category-checkbox pb-2"
|
||||
>
|
||||
$$ category_name $$
|
||||
</label>
|
||||
</div>
|
||||
{/* )) } */}
|
||||
<input
|
||||
className={`events-filter input_${item}`}
|
||||
type="checkbox"
|
||||
name="categories"
|
||||
id={`input_${item}`}
|
||||
defaultValue={`${item}`}
|
||||
onChange={() => toggleCategory(item)}
|
||||
defaultChecked
|
||||
/>
|
||||
<label
|
||||
className="font-weight-bold"
|
||||
htmlFor={`input_${item}`}
|
||||
>
|
||||
{featured_categories[item]}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
<p className="category-header pt-5 mt-3 mb-4">
|
||||
{translate("Other Categories")}{" "}
|
||||
<span
|
||||
id="other_count_old"
|
||||
className="other_count category_count"
|
||||
>
|
||||
0
|
||||
{otherCount}
|
||||
</span>
|
||||
</p>
|
||||
{/* $$ for category_id, category_name in other_categories.items() $$ */}
|
||||
<div className="cat_checkbox category-checkbox pb-2">
|
||||
<input
|
||||
className="events-filter input_$$category_id$$"
|
||||
type="checkbox"
|
||||
name="categories"
|
||||
id="input_$$category_id$$"
|
||||
defaultValue="$$category_id$$"
|
||||
/>
|
||||
<label htmlFor="input_$$category_id$$">
|
||||
$$ category_name $$
|
||||
</label>
|
||||
</div>
|
||||
{/* )) } */}
|
||||
{Object.keys(other_categories).map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="cat_checkbox category-checkbox pb-2"
|
||||
>
|
||||
<input
|
||||
className={`events-filter input_${item}`}
|
||||
type="checkbox"
|
||||
name="categories"
|
||||
id={`input_${item}`}
|
||||
onChange={() => toggleCategory(item)}
|
||||
/>
|
||||
<label htmlFor={`input_${item}`}>
|
||||
{other_categories[item]}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</form>
|
||||
</div>
|
||||
{/* End sidebar desktop */}
|
||||
@@ -744,9 +877,9 @@ export default function Uses() {
|
||||
className="right row col row-cols-lg-2 m-0 p-0"
|
||||
id="use_case_companies_list"
|
||||
>
|
||||
{cards.map((card) => (
|
||||
{filteredCards.map((card) => (
|
||||
<a
|
||||
className="card-uses category_{card.category_id}"
|
||||
className={`card-uses category_${card.category_id}`}
|
||||
href={card.link}
|
||||
target="_blank"
|
||||
id={card.id}
|
||||
@@ -755,13 +888,13 @@ export default function Uses() {
|
||||
<span className="w-100 mb-3 pb-3">
|
||||
<img
|
||||
className="mw-100 biz-logo"
|
||||
alt="$$card.title|default(card.id)$$"
|
||||
alt={`${card.title}|default${card.id}`}
|
||||
/>
|
||||
</span>
|
||||
<h4 className="card-title h6">{card.title}</h4>
|
||||
<p className="card-text">{card.description}</p>
|
||||
<div className="align-self-end">
|
||||
<span className="label label-use-{card.category_id}">
|
||||
<span className={`label label-use-${card.category_id}`}>
|
||||
{card.category_name}
|
||||
</span>
|
||||
</div>
|
||||
@@ -771,7 +904,6 @@ export default function Uses() {
|
||||
</div>
|
||||
{/* end cards */}
|
||||
</div>
|
||||
{/* end company cards */}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
438
content/xrp-ledger-overview.page.tsx
Normal file
438
content/xrp-ledger-overview.page.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
import * as React from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "Is XRPL a private blockchain, owned by Ripple?",
|
||||
answer:
|
||||
"No, the XRP Ledger is a decentralized, public blockchain. Any changes that would impact transaction processing or consensus need to be approved by at least 80%% of the network. Ripple is a contributor to the network, but its rights are the same as those of other contributors. In terms of validation, there are 150+ validators on the network with 35+ on the Unique Node List (see “What are Unique Node Lists (UNLs)?” in the Full FAQ) — Ripple runs 6 of these nodes.",
|
||||
},
|
||||
{
|
||||
question: "Isn’t Proof of Work the best validation mechanism?",
|
||||
answer:
|
||||
"Proof of Work (PoW) was the first mechanism to solve the double spend problem without requiring a trusted 3rd party. However the XRP Ledger’s consensus mechanism solves the same problem in a far faster, cheaper and more energy efficient way.",
|
||||
},
|
||||
{
|
||||
question: "How can a blockchain be sustainable?",
|
||||
answer:
|
||||
"It’s been widely reported that Bitcoin’s energy consumption, as of 2021, is equivalent to that used by Argentina, with much of the electricity Bitcoin miners use coming from polluting sources. The XRP Ledger confirms transactions through a “consensus” mechanism - which does not waste energy like proof of work does - and leverages carbon offsets to be <a href='https://ripple.com/ripple-press/ripple-leads-sustainability-agenda-to-achieve-carbon-neutrality-by-2030/' target='_blank'>one of the first truly carbon neutral blockchains</a>.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function XrplOverview() {
|
||||
const { translate } = useTranslate();
|
||||
const [videoOne, setVideoOne] = React.useState(false);
|
||||
const [currentVideoUrl, setCurrentVideoUrl] = React.useState("");
|
||||
const modalRef = React.useRef(null);
|
||||
|
||||
// Close modal on outside click
|
||||
const handleOutsideClick = (event) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target)) {
|
||||
setCurrentVideoUrl("");
|
||||
}
|
||||
};
|
||||
|
||||
// Close modal on escape key press
|
||||
const handleEscapeKeyPress = (event) => {
|
||||
if (event.key === "Escape") {
|
||||
setCurrentVideoUrl("");
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
// Add event listeners
|
||||
document.addEventListener("mousedown", handleOutsideClick);
|
||||
document.addEventListener("keydown", handleEscapeKeyPress);
|
||||
|
||||
// Remove event listeners on cleanup
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleOutsideClick);
|
||||
document.removeEventListener("keydown", handleEscapeKeyPress);
|
||||
};
|
||||
}, []); // Empty dependency array means this useEffect runs once when the component mounts
|
||||
return (
|
||||
<div className="landing">
|
||||
<div className="overflow-hidden">
|
||||
<div
|
||||
id="video-overlay"
|
||||
className={`${!!currentVideoUrl?.length && "d-block"}`}
|
||||
/>
|
||||
<div id="video" className={`${!!currentVideoUrl?.length && "d-block"}`}>
|
||||
<div id="videoWrapper" ref={modalRef}>
|
||||
<iframe
|
||||
id="player"
|
||||
width={853}
|
||||
height={480}
|
||||
src={currentVideoUrl}
|
||||
frameBorder={0}
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="position-relative">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/xrpl-overview-purple.svg")}
|
||||
className="landing-bg"
|
||||
id="xrpl-overview-purple"
|
||||
/>
|
||||
</div>
|
||||
<section className="py-26 text-center">
|
||||
<div className="col-lg-5 mx-auto text-center">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className="mb-0">
|
||||
{translate("The Business ")}
|
||||
<br className="until-sm" />
|
||||
{translate(" of Impact")}
|
||||
</h1>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("XRPL Today, XRPL Tomorrow")}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/xrpl-overview-orange.svg")}
|
||||
id="xrpl-overview-orange"
|
||||
/>
|
||||
</div>
|
||||
<section className="container-new py-26">
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div className="col">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="h4 h2-sm mb-8">
|
||||
{translate("How the XRP Ledger works")}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">
|
||||
{translate("XRP Ledger Basics")}
|
||||
</h6>
|
||||
</div>
|
||||
<h5 className="longform mb-10">
|
||||
{translate(
|
||||
"The XRP Ledger is a decentralized public blockchain built for business. "
|
||||
)}
|
||||
</h5>
|
||||
<p className="mb-4">
|
||||
{translate(
|
||||
"The peer-to-peer network that manages the ledger is open to everyone. The XRP Ledger is maintained by software engineers, server operators, users, and businesses–a global community working to solve problems and create real-world value."
|
||||
)}
|
||||
</p>
|
||||
<div className="d-none d-lg-block">
|
||||
<a className="btn btn-primary btn-arrow" href="docs">
|
||||
{translate("Read Technical Docs")}
|
||||
</a>{" "}
|
||||
<a
|
||||
className="ml-4 video-external-link"
|
||||
target="_blank"
|
||||
href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
|
||||
>
|
||||
{translate("Watch Explainer Videos ")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col">
|
||||
{videoOne ? (
|
||||
<iframe
|
||||
id="video1"
|
||||
width={560}
|
||||
height={315}
|
||||
src="https://www.youtube.com/embed/sVTybJ3cNyo"
|
||||
title="Intro to the XRP Ledger"
|
||||
frameBorder={0}
|
||||
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
) : (
|
||||
<a onClick={() => setVideoOne(!videoOne)} id="playvideo">
|
||||
<img
|
||||
alt="XRPL logo with play button surrounded with image bubbles of various people"
|
||||
src={require("./static/img/overview/video_explainer_intro@2x.png")}
|
||||
id="xrpl-overview-video-intro"
|
||||
className="w-100 video-image"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
<div className="text-center d-lg-none">
|
||||
<a className="btn btn-primary btn-arrow mt-5 mb-4" href="docs">
|
||||
{translate("Read Technical Docs")}
|
||||
</a>{" "}
|
||||
<a
|
||||
className="ml-4 video-external-link"
|
||||
target="_blank"
|
||||
href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
|
||||
>
|
||||
{translate("Watch Explainer Videos ")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div className="col">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h2 className="h4 h2-sm mb-8">
|
||||
{translate("How the Consensus Protocol works")}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">{translate("Consensus")}</h6>
|
||||
</div>
|
||||
<h5 className="longform mb-10">
|
||||
{`${translate(
|
||||
"To uphold performance, XRPL uses a consensus protocol. Designated servers called"
|
||||
)}`}
|
||||
<a href="run-a-rippled-validator">{translate("validators")}</a>
|
||||
{`${translate(
|
||||
", which anyone can operate, come to an agreement on the order and outcome of XRP transactions every three to five seconds."
|
||||
)}`}
|
||||
</h5>
|
||||
|
||||
<p className="mb-6">
|
||||
{translate(
|
||||
"All servers in the network process each transaction according to the same rules, and any transaction that follows the protocol is confirmed right away. All transactions are public, and strong cryptography guarantees the integrity of the system."
|
||||
)}
|
||||
</p>
|
||||
<p className="mb-0">
|
||||
{translate(
|
||||
'Currently, over 120 <a href="https://livenet.xrpl.org/network/validators" target="_blank">validators</a> are active on the ledger, operated by universities, exchanges, businesses, and individuals. As the validator pool grows, the consensus protocol ensures decentralization of the blockchain over time.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col mb-16-sm">
|
||||
<img
|
||||
className="mw-100"
|
||||
id="validator-graphic"
|
||||
alt="(Graphic: Validators in Consensus)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-xrpl-overview-green.svg")}
|
||||
className="cta cta-bottom-right"
|
||||
/>
|
||||
<div className="z-index-1 position-relative">
|
||||
<h2 className="h4 mb-10-until-sm mb-8-sm">
|
||||
{translate("A Sustainable Blockchain")}
|
||||
</h2>
|
||||
<p className="mb-10">
|
||||
{translate(
|
||||
"Unlike most other blockchains, the XRP Ledger requires no mining and uses negligible energy, key to long-term growth and stability."
|
||||
)}
|
||||
</p>
|
||||
<a className="btn btn-primary btn-arrow" href="impact">
|
||||
{translate("Learn More")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div className="col">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h4 className="h4 h2-sm mb-8">
|
||||
{translate("Building with confidence on ")}
|
||||
<br className="until-sm" />
|
||||
{translate(" proven technology")}
|
||||
</h4>
|
||||
<h6 className="eyebrow mb-3">{translate("XRPL Today")}</h6>
|
||||
</div>
|
||||
<h5 className="longform mb-10">
|
||||
{translate(
|
||||
"With 10+ years of error-free functioning and enterprise companies as champions, XRPL has established reliability."
|
||||
)}
|
||||
</h5>
|
||||
<p className="mb-10">
|
||||
{translate(
|
||||
"With the XRPL, these developers are building innovative blockchain projects and applications across use cases including tokenization of assets, online gaming, asset custody, NFTs, and DeFi."
|
||||
)}
|
||||
</p>
|
||||
<a className="btn btn-primary btn-arrow mb-10-sm" href="uses">
|
||||
{translate("Explore More")}
|
||||
</a>
|
||||
</div>
|
||||
<div className="col mb-0">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h4 className="h4 h2-sm mb-8">
|
||||
{translate("Creating new value for long-term growth")}
|
||||
</h4>
|
||||
<h6 className="eyebrow mb-3">{translate("XRPL Tomorrow")}</h6>
|
||||
</div>
|
||||
<h5 className="longform mb-10">
|
||||
{translate(
|
||||
"As a community-led blockchain built for business, XRPL attracts companies and developers driven to solve real problems and generate real value–now and into the future."
|
||||
)}
|
||||
</h5>
|
||||
<p className="mb-0">
|
||||
{translate(
|
||||
"Significant investment in development, along with low transaction costs and energy usage, is fueling growth and opening up a wide variety of use cases at scale."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="d-flex flex-column-reverse col-xl-6 mb-lg-4 pl-0 ">
|
||||
<h2 className="h4 h2-sm">
|
||||
{translate(
|
||||
"Watch the explainer video series to learn more about the XRP Ledger"
|
||||
)}
|
||||
</h2>
|
||||
<h6 className="eyebrow mb-3">{translate("Tune In")}</h6>
|
||||
</div>
|
||||
<div className="row row-cols-1 row-cols-lg-3 d-flex justify-content-between w-100 mx-0 mx-md-n3 mt-md-5">
|
||||
<div className="px-md-3 pt-5 pt-md-0">
|
||||
<a
|
||||
onClick={() =>
|
||||
setCurrentVideoUrl(
|
||||
"https://www.youtube.com/embed/k6VqEkqRTmk?rel=0&showinfo=0&autoplay=1"
|
||||
)
|
||||
}
|
||||
className="btn1"
|
||||
>
|
||||
<img
|
||||
alt="Two Monitors with person image bubbles inside, facing each other with a play button in between"
|
||||
src={require("./static/img/overview/video_explainer_consensus@2x.png")}
|
||||
id="xrpl-overview-video-consensus"
|
||||
className="w-100 video-image"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-2">
|
||||
<h4 className="video-title mt-3 mb-0">
|
||||
{translate("The Consensus Mechanism")}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-md-3 pt-5 pt-md-0">
|
||||
<a
|
||||
onClick={() =>
|
||||
setCurrentVideoUrl(
|
||||
"https://www.youtube.com/embed/JjaVDXPqnbA?rel=0&showinfo=0&autoplay=1"
|
||||
)
|
||||
}
|
||||
className="btn1"
|
||||
>
|
||||
<img
|
||||
alt="graphlike background with play button in center"
|
||||
src={require("./static/img/overview/video_explainer_nodes@2x.png")}
|
||||
id="xrpl-overview-video-nodes"
|
||||
className="w-100 video-image"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-2">
|
||||
<h4 className="video-title mt-3 mb-0">
|
||||
{translate("Nodes and Validators")}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-md-3 pt-5 pt-md-0">
|
||||
<a
|
||||
onClick={() =>
|
||||
setCurrentVideoUrl(
|
||||
"https://www.youtube.com/embed/WsmldDNGQ9s?rel=0&showinfo=0&autoplay=1"
|
||||
)
|
||||
}
|
||||
className="btn1"
|
||||
>
|
||||
<img
|
||||
alt="A globe graph with a play button in center"
|
||||
src={require("./static/img/overview/video_explainer_sustainability@2x.png")}
|
||||
id="xrpl-overview-video-sustainability"
|
||||
className="w-100 video-image"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-2">
|
||||
<h4 className="video-title mt-3 mb-0">
|
||||
{translate("Sustainability of the XRP Ledger")}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-5 w-100">
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="https://www.youtube.com/channel/UC6zTJdNCBI-TKMt5ubNc_Gg"
|
||||
>
|
||||
{translate("Watch Full Series on YouTube")}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div className="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
src={require("./img/backgrounds/cta-xrpl-overview-orange.svg")}
|
||||
className="cta cta-bottom-right"
|
||||
/>
|
||||
<div className="z-index-1 position-relative">
|
||||
<h4 className="h4 mb-10-until-sm mb-8-sm">
|
||||
{translate("Tomorrow’s Blockchain Starts With You")}
|
||||
</h4>
|
||||
<p className="mb-10">
|
||||
{`${translate(
|
||||
"XRP Ledger’s innovation relies on the shared community experience of builders like you. If you’re ready to start your next big blockchain project, explore the XRPL now and consider applying for funding on your next"
|
||||
)}`}
|
||||
<a href="developer-funding">
|
||||
{translate(" blockchain project")}
|
||||
</a>
|
||||
{"."}
|
||||
</p>
|
||||
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
href="https://xrplgrants.org/"
|
||||
target="_blank"
|
||||
>
|
||||
{translate("Explore XRPL Developer Funding")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new py-26">
|
||||
<div
|
||||
className="col-md-6 offset-md-3 w-100 pl-0 pr-0 mini-faq"
|
||||
id="minifaq-accordion"
|
||||
>
|
||||
{faqs.map((faq, index) => (
|
||||
<div className="q-wrapper" key={index}>
|
||||
<a
|
||||
href={`#heading${index + 1}`}
|
||||
className="expander collapsed"
|
||||
data-toggle="collapse"
|
||||
data-target={`#answer${index + 1}`}
|
||||
aria-expanded="false"
|
||||
aria-controls={`answer${index + 1}`}
|
||||
>
|
||||
<h4 id={`heading${index + 1}`}>
|
||||
{faq.question}
|
||||
<span className="chevron">
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
</h4>
|
||||
</a>
|
||||
<div
|
||||
id={`answer${index + 1}`}
|
||||
className="answer-wrapper collapse"
|
||||
aria-labelledby={`heading${index + 1}`}
|
||||
>
|
||||
<p dangerouslySetInnerHTML={{ __html: faq.answer }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<center>
|
||||
<a className="btn btn-primary btn-arrow mt-20" href="faq">
|
||||
{translate("View Full FAQ")}
|
||||
</a>
|
||||
</center>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -50,15 +50,36 @@ const jsx = HtmlToJsxInst.convert(replacedJinja);
|
||||
|
||||
// replace trans
|
||||
|
||||
// Specifically handling <img> tags
|
||||
const handleImgTags = (str) => {
|
||||
return str.replace(/<img ([^>]*?)>/g, function(match) {
|
||||
// If alt is not present, add a default one
|
||||
if (!/alt=/.test(match)) {
|
||||
return match.replace(/<img /, '<img alt="default-alt-text" ');
|
||||
}
|
||||
// If alt is present but malformed
|
||||
if (/alt=\{(\d+)\}/.test(match)) {
|
||||
return match.replace(/alt=\{(\d+)\}/, `alt="default-alt-text"`);
|
||||
}
|
||||
return match; // if alt is fine, return as is
|
||||
});
|
||||
};
|
||||
const jsxWithHandledImgTags = handleImgTags(jsx);
|
||||
|
||||
// replace $$ for card in cards3 $$
|
||||
const jsxWithReplacedForLoops = jsx
|
||||
const jsxWithReplacedForLoops = jsxWithHandledImgTags
|
||||
.replace(/\$\$ for ([\w\d]+) in ([\w\d]+) \$\$/g, ' { $2.map($1 => (')
|
||||
.replace(/\$\$ endfor \$\$/g, ')) }')
|
||||
.replace(/="\$\$(\w+\.\w+)\$\$"/g, '={$1}')
|
||||
.replace(/="\$\$(\w+\.\w+)\$\$\$\$(\w+\.\w+)\$\$"/g, '={$1 + $2}')
|
||||
.replace(/="\$\$(\w+\.\w+)\$\$(.+?)"/g, '={$1 + "$2"}')
|
||||
.replace(/\$\$(\w+\.\w+)\$\$/g, '{$1}')
|
||||
.replace(/<img ([^>]*?)src="(.*?)"/g, '<img $1src={require("$2")}');
|
||||
.replace(/<img ([^>]*?)src="(.*?)"/g, '<img $1src={require("$2")}')
|
||||
.replace(/<img ([^>]*?)src="(.*?)"/g, (match, attrs, src) => {
|
||||
// Replace ./assets with ./static in the src attribute
|
||||
const newSrc = src.replace('./assets', './static');
|
||||
return `<img ${attrs}src={require("${newSrc}")}`;
|
||||
});
|
||||
|
||||
const jsxWithReplacedTranslate = jsxWithReplacedForLoops.replace(
|
||||
/\$\$ trans \$\$((?:.|\n)+?)\$\$ endtrans \$\$/g,
|
||||
@@ -74,7 +95,7 @@ const jsxWithReplacedTranslate = jsxWithReplacedForLoops.replace(
|
||||
const output = `import * as React from 'react';
|
||||
import { useTranslate } from '@portal/hooks';
|
||||
|
||||
${sets?.map(set => `const ${set.name} = ${set.value};`).join('\n\n')}
|
||||
${!!sets && sets.map(set => `const ${set.name} = ${set.value};`).join('\n\n')}
|
||||
|
||||
const target= {prefix: ''}; // TODO: fixme
|
||||
|
||||
|
||||
@@ -566,4 +566,4 @@ html.light {
|
||||
content: " ➝";
|
||||
padding-left: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1027,10 +1027,10 @@ pre code {
|
||||
color: $black !important;
|
||||
}
|
||||
|
||||
#xrplGrantsDark,
|
||||
#xrplGrantsDark-small,
|
||||
#careersDark,
|
||||
#careersDark-small {
|
||||
#xrplGrantsDark g,
|
||||
#xrplGrantsDark-small g,
|
||||
#careersDark g,
|
||||
#careersDark-small g{
|
||||
filter: invert(100%) brightness(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"baseUrl": ".",
|
||||
"jsx": "react-jsx",
|
||||
"resolveJsonModule": true,
|
||||
|
||||
Reference in New Issue
Block a user