mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 20:05:50 +00:00
Merge pull request #2443 from XRPLF/impact-fixes
fix video displaying adds logic to autoplay, fixes all links to new urls
This commit is contained in:
Amarantha Kulkarni
@@ -1,4 +1,4 @@
|
||||
import * as React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslate } from "@portal/hooks";
|
||||
import mapDark from "../static/js/impact/mapDark.json";
|
||||
import mapLight from "../static/js/impact/mapLight.json";
|
||||
@@ -7,20 +7,25 @@ import { useThemeFromClassList } from "../@theme/helpers";
|
||||
|
||||
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.",
|
||||
}
|
||||
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 theme = useThemeFromClassList(["dark", "light"]);
|
||||
const [videoVisible, setVideoVisible] = useState(false); // State to control visibility
|
||||
const { translate } = useTranslate();
|
||||
const handleVideoClick = () => {
|
||||
setVideoVisible(true); // Show the iframe
|
||||
};
|
||||
const options = React.useMemo(() => {
|
||||
return {
|
||||
animationData: theme === 'dark' ? mapDark : mapLight,
|
||||
loop: true
|
||||
};
|
||||
},[theme])
|
||||
return {
|
||||
animationData: theme === "dark" ? mapDark : mapLight,
|
||||
loop: true,
|
||||
};
|
||||
}, [theme]);
|
||||
const { View } = useLottie(options);
|
||||
return (
|
||||
<div className="landing page-impact">
|
||||
@@ -70,7 +75,7 @@ export default function Impact() {
|
||||
{`${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>
|
||||
<a href="/about/uses">{translate("commercial use cases")}</a>
|
||||
{` ${translate("like CBDCs, NFTs, and cross-border payments.")}`}
|
||||
</p>
|
||||
</div>
|
||||
@@ -86,24 +91,26 @@ export default function Impact() {
|
||||
<div className="mt-10 card-grid card-grid-2xN">
|
||||
<div className="col">
|
||||
<iframe
|
||||
id="video1"
|
||||
style={{ display: "none" }}
|
||||
style={{ display: videoVisible ? "block" : "none" }} // Use state to control display
|
||||
width={560}
|
||||
height={315}
|
||||
src="https://www.youtube.com/embed/WsmldDNGQ9s"
|
||||
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
|
||||
/>
|
||||
<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>
|
||||
{/* 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">
|
||||
@@ -154,7 +161,7 @@ export default function Impact() {
|
||||
"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">
|
||||
<a href="/about/uses" className="btn btn-primary btn-arrow">
|
||||
{translate("See More")}
|
||||
</a>
|
||||
</div>
|
||||
@@ -178,7 +185,7 @@ export default function Impact() {
|
||||
)}
|
||||
</p>
|
||||
<div className="d-none d-lg-block py-lg-3">
|
||||
<a className="btn btn-primary btn-arrow" href="/contribute">
|
||||
<a className="btn btn-primary btn-arrow" href="/resources/contribute-code">
|
||||
{translate("Join the Community")}
|
||||
</a>
|
||||
</div>
|
||||
@@ -188,15 +195,12 @@ export default function Impact() {
|
||||
{/* 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"
|
||||
/>
|
||||
<img alt="default-alt-text" id="connect-01" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Blog")}</h6>
|
||||
<p>
|
||||
{`${translate("Check out the ")} `}
|
||||
<a href="https://xrpl.org/blog/">
|
||||
<a href="/blog">
|
||||
{translate("XRPL dev blog")}
|
||||
</a>
|
||||
{` ${translate(
|
||||
@@ -207,15 +211,12 @@ export default function Impact() {
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-02"
|
||||
/>
|
||||
<img alt="default-alt-text" id="connect-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Events")}</h6>
|
||||
<p>
|
||||
{`${translate("Attend ")} `}
|
||||
<a href="/events">
|
||||
<a href="/community/events">
|
||||
{translate("meetups, hackathons, and conferences")}
|
||||
</a>
|
||||
{` ${translate(
|
||||
@@ -225,10 +226,7 @@ export default function Impact() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-lg-5">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-03"
|
||||
/>
|
||||
<img alt="default-alt-text" id="connect-03" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Code")}</h6>
|
||||
<p>
|
||||
@@ -247,10 +245,7 @@ export default function Impact() {
|
||||
</div>
|
||||
{/* Hide on large */}
|
||||
<div className="px-lg-3 pb-3 d-lg-none">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-04"
|
||||
/>
|
||||
<img alt="default-alt-text" id="connect-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Connect")}</h6>
|
||||
<p>
|
||||
@@ -266,15 +261,12 @@ export default function Impact() {
|
||||
<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"
|
||||
/>
|
||||
<img alt="default-alt-text" id="connect-02" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Events")}</h6>
|
||||
<p>
|
||||
{`${translate("Attend ")} `}
|
||||
<a href="/events">
|
||||
<a href="/community/events">
|
||||
{translate("meetups, hackathons, and conferences")}
|
||||
</a>
|
||||
{` ${translate(
|
||||
@@ -285,10 +277,7 @@ export default function Impact() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-lg-3 pb-3 pt-5">
|
||||
<img
|
||||
alt="default-alt-text"
|
||||
id="connect-04"
|
||||
/>
|
||||
<img alt="default-alt-text" id="connect-04" />
|
||||
<div className="pt-3">
|
||||
<h6 className="mb-3">{translate("Connect")}</h6>
|
||||
<p>
|
||||
@@ -306,7 +295,7 @@ export default function Impact() {
|
||||
<a
|
||||
className="btn btn-primary btn-arrow"
|
||||
target="_blank"
|
||||
href="/contribute"
|
||||
href="/resources/contribute-code"
|
||||
>
|
||||
{translate("Join the Community")}
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user