mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
313 lines
13 KiB
TypeScript
313 lines
13 KiB
TypeScript
import React, { useState } from "react";
|
||
import { useThemeHooks } from '@redocly/theme/core/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";
|
||
import { Link } from "@redocly/theme/components/Link/Link";
|
||
|
||
export const frontmatter = {
|
||
seo: {
|
||
title: "Impact",
|
||
description:
|
||
"Learn how the XRP Ledger helps move money around the world faster, cheaper and more sustainably than any other currency available today.",
|
||
},
|
||
};
|
||
|
||
export default function Impact() {
|
||
const theme = useThemeFromClassList(["dark", "light"]);
|
||
const [videoVisible, setVideoVisible] = useState(false); // State to control visibility
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
const handleVideoClick = () => {
|
||
setVideoVisible(true); // Show the iframe
|
||
};
|
||
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="purple waves"
|
||
src={require("../static/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="green waves"
|
||
src={require("../static/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(
|
||
"about.impact.feature.ppart1",
|
||
"Open and decentralized, blockchain and crypto are seeing an increase in adoption across the financial services industry, from retail and institutional investment to "
|
||
)}`}
|
||
<Link to="/about/uses">{translate("about.impact.feature.ppart2", "commercial use cases ")}</Link>
|
||
{`${translate("about.impact.feature.ppart3", "like CBDCs, NFTs, and cross-border payments.")}`}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
{/* Large */}
|
||
<div className="col d-none d-lg-block align-self-center">
|
||
{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
|
||
style={{ display: videoVisible ? "block" : "none" }} // Use state to control display
|
||
width={560}
|
||
height={315}
|
||
src="https://www.youtube.com/embed/WsmldDNGQ9s?autoplay=1&mute=1"
|
||
title="What makes the XRPL sustainable?"
|
||
frameBorder={0}
|
||
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
/>
|
||
{/* Only show the link if the video is not visible */}
|
||
{!videoVisible && (
|
||
<a onClick={handleVideoClick} 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>
|
||
</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="purple waves"
|
||
src={require("../static/img/backgrounds/cta-community-purple.svg")}
|
||
className="cta cta-top-left"
|
||
/>
|
||
<img
|
||
alt="green waves"
|
||
src={require("../static/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>
|
||
<Link to="/about/uses" className="btn btn-primary btn-arrow">
|
||
{translate("See More")}
|
||
</Link>
|
||
</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">
|
||
<Link className="btn btn-primary btn-arrow" to="/resources/contribute-code">
|
||
{translate("Join the Community")}
|
||
</Link>
|
||
</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="piece of paper" id="connect-01" />
|
||
<div className="pt-3">
|
||
<h6 className="mb-3">{translate("Blog")}</h6>
|
||
<p>
|
||
{`${translate("about.impact.blog.ppart1", "Check out the ")}`}
|
||
<Link to="/blog">
|
||
{translate("about.impact.blog.ppart2", "XRPL dev blog ")}
|
||
</Link>
|
||
{`${translate(
|
||
"about.impact.blog.ppart3",
|
||
"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="piece of paper" id="connect-02" />
|
||
<div className="pt-3">
|
||
<h6 className="mb-3">{translate("Events")}</h6>
|
||
<p>
|
||
{`${translate("about.impact.events.ppart1", "Attend ")}`}
|
||
<Link to="/community/events">
|
||
{translate("about.impact.events.ppart2", "meetups, hackathons, and conferences ")}
|
||
</Link>
|
||
{`${translate(
|
||
"about.impact.events.ppart3",
|
||
"to meet other members of the community."
|
||
)}`}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="px-lg-3 pb-3 pt-lg-5">
|
||
<img alt="github" id="connect-03" />
|
||
<div className="pt-3">
|
||
<h6 className="mb-3">{translate("Code")}</h6>
|
||
<p>
|
||
{`${translate("about.impact.code.ppart1", "View the ")}`}
|
||
<a
|
||
href="https://github.com/XRPLF/xrpl-dev-portal/"
|
||
target="_blank"
|
||
>
|
||
{translate("about.impact.code.ppart2", "Github repositories ")}
|
||
</a>
|
||
{`${translate(
|
||
"about.impact.code.ppart3",
|
||
"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="chat bubbles" id="connect-04" />
|
||
<div className="pt-3">
|
||
<h6 className="mb-3">{translate("Connect")}</h6>
|
||
<p>
|
||
{translate(
|
||
"about.impact.connect.ppart1",
|
||
"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="calendar" id="connect-02" />
|
||
<div className="pt-3">
|
||
<h6 className="mb-3">{translate("Events")}</h6>
|
||
<p>
|
||
{`${translate("about.impact.events.ppart1", "Attend ")}`}
|
||
<Link to="/community/events">
|
||
{translate("about.impact.events.ppart2", "meetups, hackathons, and conferences ")}
|
||
</Link>
|
||
{`${translate(
|
||
"about.impact.events.ppart3",
|
||
"to meet other members of the community."
|
||
)}`}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="px-lg-3 pb-3 pt-5">
|
||
<img alt="chat bubbles" id="connect-04" />
|
||
<div className="pt-3">
|
||
<h6 className="mb-3">{translate("Connect")}</h6>
|
||
<p>
|
||
{translate(
|
||
"about.impact.connect.ppart1",
|
||
"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">
|
||
<Link
|
||
className="btn btn-primary btn-arrow"
|
||
target="_blank"
|
||
to="/resources/contribute-code"
|
||
>
|
||
{translate("Join the Community")}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|