ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-04 03:45:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor tokenization page layout and enhance styling

Browse Source 
- Updated the structure of the tokenization page to improve readability and organization.
- Introduced new sections for video content and benefits, enhancing user engagement.
- Adjusted CSS styles for better responsiveness and alignment with design standards.
- Added a new margin utility class in _helpers.scss for consistent spacing.
- Improved the developer resources section to handle single card layouts more effectively.
This commit is contained in:
akcodez
2025-09-02 12:56:35 -07:00
parent 0269b7cef1
commit c8aa8f1d50
5 changed files with 387 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
docs/use-cases/tokenization/real-world-assets.page.tsx
View File

@@ -112,7 +112,6 @@ const features = [
title: "Cross-chain Interoperability",
link: "https://docs.xrplevm.org/docs/axelar/intro-to-axelar/",
},
];
const featuresToken = [
{
@@ -147,9 +146,7 @@ function FeatureCard({ title, description }) {
return (
<article className="feature-card">
<header className="feature-header">
<h2 className="feature-title">
{translate(title)}
</h2>
<h2 className="feature-title">{translate(title)}</h2>
</header>
<p className="feature-description">{translate(description)}</p>
</article>
@@ -160,31 +157,29 @@ function RwaTokenizationFeatures() {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
return (
<section className="rwa-tokenization">
<div className="container max-w-1150">
<header className="rwa-header">
<h2 className="rwa-title">
{translate("Key Features for Asset Tokenization and DeFi Development")}
</h2>
</header>
<div className="feature-grid">
{featuresToken.map((feature, index) => (
<FeatureCard key={index} {...feature} />
))}
</div>
<div className="cta-container">
<Link
to="/docs/concepts/tokens/decentralized-exchange/autobridging"
className="btn btn-primary small-100 auto-bridge"
>
{translate("Learn About Auto-bridging")}
</Link>
<Link
to="/docs/concepts/tokens/fungible-tokens/paths"
className="btn btn-link"
>
{translate("Explore Pathfinding")}
</Link>
<section className="token-features-section">
<div className="rwa-tokenization">
<div className="container max-w-1150">
<header className="rwa-header">
<h2 className="rwa-title">
{translate(
"Defining Features on XRPL"
)}
</h2>
</header>
<div className="feature-grid">
{featuresToken.map((feature, index) => (
<FeatureCard key={index} {...feature} />
))}
</div>
<div className="cta-container">
<Link
to="/docs/concepts/tokens/decentralized-exchange/autobridging"
className="btn btn-primary small-100 auto-bridge"
>
{translate("Explore Trading on XRPL")}
</Link>
</div>
</div>
</div>
</section>
@@ -197,11 +192,11 @@ export function FeatureItem({ title, link }) {
return (
<li className="feature-item">
<Link to={link} target="_blank">
<div className="feature-item__content">
<span className="feature-item__title">{translate(title)}</span>
<span className="right-arrow-item"> </span>
</div>
<div className="feature-item__divider"></div>
<div className="feature-item__content">
<span className="feature-item__title">{translate(title)}</span>
<span className="right-arrow-item"> </span>
</div>
<div className="feature-item__divider"></div>
</Link>
</li>
);
@@ -211,36 +206,38 @@ function DeveloperTools() {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
return (
<section className="developer-tools">
<div className="container">
<div className="row">
<div className="col-lg-6">
<header className="developer-tools__header">
<h2 className="developer-tools__title">
{translate("Developer Tools & APIs")}
</h2>
<p className="developer-tools__description">
{translate(
"Streamline development and build powerful RWA tokenization solutions with XRP Ledger's comprehensive developer toolset:"
)}
</p>
</header>
<ul className="developer-tools__list">
{features.map((feature, index) => (
<FeatureItem
key={index}
link={feature.link}
title={feature.title}
/>
))}
</ul>
</div>
<div className="col-lg-6 m-h-300">
<div
className="developer-tools__image"
role="img"
aria-label="Developer tools illustration"
></div>
<section className="token-developer-tools-section">
<div className="developer-tools">
<div className="container">
<div className="row">
<div className="col-lg-6">
<header className="developer-tools__header">
<h2 className="developer-tools__title">
{translate("Developer Tools & APIs")}
</h2>
<p className="developer-tools__description">
{translate(
"Streamline development and build powerful RWA tokenization solutions with XRP Ledger's comprehensive developer toolset:"
)}
</p>
</header>
<ul className="developer-tools__list">
{features.map((feature, index) => (
<FeatureItem
key={index}
link={feature.link}
title={feature.title}
/>
))}
</ul>
</div>
<div className="col-lg-6 m-h-300">
<div
className="developer-tools__image"
role="img"
aria-label="Developer tools illustration"
></div>
</div>
</div>
</div>
</div>
@@ -263,16 +260,18 @@ function UpcomingEvents() {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
return (
<section className="upcoming-events">
<h2 className="upcoming-events__title">
{translate(
"Explore the companies pioneering tokenization using XRP Ledger"
)}
</h2>
<div className="upcoming-events__logo-container">
{companies.map((company, index) => (
<CompanyLogo key={index} {...company} />
))}
<section className="token-events-wrapper">
<div className="upcoming-events">
<h2 className="upcoming-events__title">
{translate(
"Trusted by Leaders in Real-World Asset Tokenization"
)}
</h2>
<div className="upcoming-events__logo-container">
{companies.map((company, index) => (
<CompanyLogo key={index} {...company} />
))}
</div>
</div>
</section>
);
@@ -291,10 +290,9 @@ const marketIntegrationData = [
<Link to="/docs/concepts/tokens/decentralized-exchange/automated-market-makers">
Automated Market Makers (AMM)
</Link>{" "}
and onchain 24/7 order books, providing a developer-friendly
environment to create{" "}
<Link to="/docs/use-cases/defi">DeFi solutions</Link> for traditional
finance applications.
and onchain 24/7 order books, providing a developer-friendly environment
to create <Link to="/docs/use-cases/defi">DeFi solutions</Link> for
traditional finance applications.
</>
),
},
@@ -346,6 +344,45 @@ function TokenUtilitySection() {
);
}
function TokenVideoSection() {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
return (
<section className="token-video-container">
<div className="token-video">
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/ZZ2KZTEJECg"
title="Generate and Send MPTs"
frameBorder="0"
></iframe>
</div>
<div className="token-video-text-container">
<p>
{translate(
"Issue, manage, and trade real-world assets without needing to build smart contracts."
)}
</p>
<p>
{translate(
"XRP Ledger's built-in functionality and compliance-enabling features allow asset tokenization without additional layers of complexity."
)}
</p>
<div className="d-lg-block small-100 __button-container">
<Link
className="btn btn-primary"
target="_blank"
to="#"
>
{translate("Download White Paper")}
</Link>
</div>
</div>
</section>
);
}
const BenefitCard = ({ iconClass, title, description }) => {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
@@ -358,76 +395,11 @@ const BenefitCard = ({ iconClass, title, description }) => {
);
};
export default function RwaTokenization() {
function TokenHeroSection() {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
const developerResourcesCards = [
{
title: "Developer Resources",
description: (
<>
{translate("use-cases.rwa.dev-resources.p1", "Easily integrate with ")}
<Link
target="_blank"
to="/docs/tutorials/public-servers"
>
{translate("use-cases.rwa.dev-resources.p2", "existing infrastructure ")}
</Link>
{translate(
"use-cases.rwa.dev-resources.p3",
"and access resources to support your development journey. Fund your project with XRPL Grants or speak to our dev advocates today."
)}
</>
),
links: [
{
text: "Apply for XRPL Grants",
url: "https://xrplgrants.org/"
},
{
text: "Talk to a Dev Advocate",
url: "https://twitter.com/RippleDevRel"
}
]
},
{
title: "Learn & Stay Updated",
description: "Stay ahead of the curve with the latest developments in RWA tokenization on the XRP Ledger by joining the developer Discord and signing up for the XRPL Community Newsletter.",
links: [
{
text: "Join the Developer Discord",
url: "https://discord.gg/sfX3ERAMjH"
},
{
text: "Sign up for the Newsletter",
url: "https://xrplresources.org/subscribe"
}
]
}
];
useEffect(() => {
const script = document.createElement('script');
script.id = 'video-schema'
script.type = 'application/ld+json';
script.innerHTML = JSON.stringify({
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "Generate and Send MPTs",
"description": "Use the Account Configurator to create an Issuing account. Use the MPT Generator to create a Multi-purpose Token. Send the MPT from the Issuing account to any account that authorizes receipt of the MPT.",
"thumbnailUrl": "https://i.ytimg.com/vi_webp/ZZ2KZTEJECg/sddefault.webp",
"uploadDate": "2025-04-11",
"embedUrl": "https://www.youtube.com/embed/ZZ2KZTEJECg"
});
document.head.appendChild(script);
// Remove the script from the head when the component unmounts
return () => {
document.head.removeChild(script);
};
}, []);
return (
<div className="page-rwa-tokenization">
<section className="token-hero-section">
<div className="position-relative d-none-sm">
<img
alt="orange waves"
@@ -437,9 +409,7 @@ export default function RwaTokenization() {
</div>
<div className="token-title-container">
<h1 className="token-title">
{translate(
"Real-World Asset (RWA) Tokenization on the XRP Ledger"
)}
{translate("Real-World Asset (RWA) Tokenization")}
</h1>
<div className="d-lg-block small-100 ">
<Link
@@ -451,68 +421,125 @@ export default function RwaTokenization() {
</Link>
</div>
</div>
<div className="token-video-container">
<div className="token-video">
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/ZZ2KZTEJECg"
title="Generate and Send MPTs"
frameBorder="0"
></iframe>
</div>
<div className="token-video-text-container">
<p>
{translate(
"Issue, manage, and trade real-world assets without needing to build smart contracts."
)}
</p>
<p>
{translate(
"XRP Ledger's built-in functionality and compliance-enabling features allow asset tokenization without additional layers of complexity."
)}
</p>
</div>
</div>
<div className="token-cards-wrapper">
<div className="token-cards-container">
<div>
<h2 className="cards-title-token">
{translate(
"Why Financial Developers Choose XRPL as an RWA Tokenization Platform"
)}
</h2>
</div>
<div className="benefits-section">
<div className="benefits-container">
{benefitsData.map((benefit, index) => (
<BenefitCard key={index} {...benefit} />
))}
</div>
</div>
<div className="d-lg-block small-100">
<Link
className="btn btn-primary btn-arrow-out"
target="_blank"
to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
>
{translate("Start Building Now")}
</Link>
</div>
</div>
</div>
<div className="token-events-wrapper">
<UpcomingEvents />
</div>
<TokenUtilitySection />
<div className="token-developer-tools-section">
<DeveloperTools />
</div>
<div className="token-features-section">
<RwaTokenizationFeatures />
</div>
<DeveloperResourcesSection cards={developerResourcesCards} />
</div>
</section>
);
}
function TokenBenefitsSection() {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
return (
<section className="token-cards-wrapper">
<div className="token-cards-container">
<div>
<h2 className="cards-title-token">
{translate(
"Why Financial Developers Choose XRPL as an RWA Tokenization Platform"
)}
</h2>
</div>
<div className="benefits-section">
<div className="benefits-container">
{benefitsData.map((benefit, index) => (
<BenefitCard key={index} {...benefit} />
))}
</div>
</div>
<div className="d-lg-block small-100">
<Link
className="btn btn-primary btn-arrow-out"
target="_blank"
to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
>
{translate("Start Building Now")}
</Link>
</div>
</div>
</section>
);
}
export default function RwaTokenization() {
const developerResourcesCards = [
// {
// title: "Developer Resources",
// description: (
// <>
// {translate(
// "use-cases.rwa.dev-resources.p1",
// "Easily integrate with "
// )}
// <Link target="_blank" to="/docs/tutorials/public-servers">
// {translate(
// "use-cases.rwa.dev-resources.p2",
// "existing infrastructure "
// )}
// </Link>
// {translate(
// "use-cases.rwa.dev-resources.p3",
// "and access resources to support your development journey. Fund your project with XRPL Grants or speak to our dev advocates today."
// )}
// </>
// ),
// links: [
// {
// text: "Apply for XRPL Grants",
// url: "https://xrplgrants.org/",
// },
// {
// text: "Talk to a Dev Advocate",
// url: "https://twitter.com/RippleDevRel",
// },
// ],
// },
{
title: "Learn & Stay Updated",
description:
"Stay ahead of the curve with the latest developments in RWA tokenization on the XRP Ledger by joining the developer Discord and signing up for the XRPL Community Newsletter.",
links: [
{
text: "Join the Developer Discord",
url: "https://discord.gg/sfX3ERAMjH",
},
{
text: "Sign up for the Newsletter",
url: "https://xrplresources.org/subscribe",
},
],
},
];
useEffect(() => {
const script = document.createElement("script");
script.id = "video-schema";
script.type = "application/ld+json";
script.innerHTML = JSON.stringify({
"@context": "https://schema.org",
"@type": "VideoObject",
name: "Generate and Send MPTs",
description:
"Use the Account Configurator to create an Issuing account. Use the MPT Generator to create a Multi-purpose Token. Send the MPT from the Issuing account to any account that authorizes receipt of the MPT.",
thumbnailUrl: "https://i.ytimg.com/vi_webp/ZZ2KZTEJECg/sddefault.webp",
uploadDate: "2025-04-11",
embedUrl: "https://www.youtube.com/embed/ZZ2KZTEJECg",
});
document.head.appendChild(script);
// Remove the script from the head when the component unmounts
return () => {
document.head.removeChild(script);
};
}, []);
return (
<main className="page-rwa-tokenization">
<TokenHeroSection />
<TokenBenefitsSection />
<TokenVideoSection />
<UpcomingEvents />
<TokenUtilitySection />
<DeveloperTools />
<RwaTokenizationFeatures />
<DeveloperResourcesSection cards={developerResourcesCards} />
</main>
);
}

7
shared/components/developer-resources-section.tsx
View File

@@ -24,14 +24,15 @@ export const DeveloperResourcesSection: React.FC<DeveloperResourcesSectionProps>
}) => {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
const isSingleCard = cards.length === 1;
return (
<div className={`developer-resources-section page-community ${className}`}>
<div className={` container developer-resources-section page-community ${className} ${isSingleCard ? 'single-card' : ''}`}>
<section className="bottom-cards-section bug-bounty section-padding">
{cards.map((card, index) => (
<div key={index} className="com-card">
<div key={index} className={`com-card ${isSingleCard ? 'single-card' : ''}`}>
<img
className={`${index === 0 ? 'top-right-img' : 'bottom-right-img'} bug-bounty-card-bg${index === 0 ? '' : '-2'} ${card.backgroundClass || ''}`}
className={`${isSingleCard ? 'bottom-right-img' : (index === 0 ? 'top-right-img' : 'bottom-right-img')} ${isSingleCard ? 'bug-bounty-card-bg-2' : `bug-bounty-card-bg${index === 0 ? '' : '-2'}`} ${card.backgroundClass || ''}`}
alt={`${card.title} Background`}
/>
<div className="card-content custom-gap">

2
static/css/devportal2024-v1.css
View File

File diff suppressed because one or more lines are too long

3
styles/_helpers.scss
View File

@@ -149,6 +149,9 @@
}
}
}
.mt-1{
margin-top: 1rem;
}
.mt-12 {
margin-top: 3rem;
}

173
styles/_pages.scss
View File

@@ -1521,44 +1521,80 @@ html.light {
}
.token-video-container {
flex-wrap: wrap;
padding: 104px 64px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* Center the video and text */
gap: 48px;
max-width: 1200px;
margin: 0 auto;
.__button-container{
margin-top: 16px;
}
.token-video {
width: 50%;
/* Adjust width to keep it balanced with the text */
max-width: 602px;
height: 372px;
@include media-breakpoint-down(md) {
width: 100%;
}
}
.token-video-text-container {
@include media-breakpoint-down(md) {
width: 100%;
}
max-width: 520px;
width: 50%;
/* Adjust width to keep it balanced with the video */
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
text-align: left;
/* Ensure text is aligned correctly */
gap: 24px;
color: #E0E0E1;
font-family: "Work Sans";
font-size: 24px;
line-height: 32px;
p {
color: var(--black-black-10-gray-200, #E0E0E1);
font-family: "Work Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 32px;
margin: 0;
}
}
@media (max-width: 1145px) {
flex-direction: column;
gap: 40px;
padding: 80px 40px;
max-width: 800px;
.token-video {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 16/9;
}
.token-video-text-container {
width: 100%;
max-width: 100%;
align-items: flex-start;
text-align: left;
p {
font-size: 22px;
line-height: 30px;
}
}
}
@media (max-width: 767px) {
padding: 60px 20px;
gap: 32px;
max-width: 100%;
.token-video-text-container {
p {
font-size: 18px;
line-height: 26px;
}
}
}
}
@@ -1583,6 +1619,7 @@ html.light {
font-style: normal;
font-weight: 700;
line-height: 38px;
max-width: 780px;
/* 118.75% */
}
@@ -1606,19 +1643,46 @@ html.light {
.benefits-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
width: 100%;
max-width: 1136px;
}
@media (max-width: 991px) {
@media (max-width: 1399px) {
.benefits-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1145px) {
.section-title {
font-size: 28px;
line-height: 34px;
}
.benefits-container {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.benefit-card {
padding: 24px;
min-height: 280px;
}
}
@media (max-width: 767px) {
.benefits-container {
grid-template-columns: 1fr;
gap: 24px;
}
.benefit-card {
padding: 20px;
min-height: 240px;
}
}
.benefit-card {
@@ -1627,9 +1691,8 @@ html.light {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 40px;
height: 310px;
width: 352px;
padding: 32px;
min-height: 332px;
}
.benefit-icon {
@@ -1686,7 +1749,7 @@ html.light {
}
.upcoming-events__title {
max-width: 620px;
max-width: 630px;
align-self: stretch;
color: #fff;
font: 700 32px/38px Work Sans, -apple-system, Roboto, Helvetica, sans-serif;
@@ -2023,10 +2086,6 @@ html.light {
padding: 100px 40px;
}
.card-description {
min-height: 96px;
}
// Developer Resources Section - Clean, responsive styles with high specificity
.developer-resources-section {
.bottom-cards-section.bug-bounty.section-padding {
@@ -2071,6 +2130,20 @@ html.light {
flex: none !important;
}
// Single card layout styles
&.single-card {
max-height: 288px !important;
@media (max-width: 768px) {
max-height: 328px !important;
}
@media (min-width: 768px) {
flex: 1 1 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
}
.card-content {
display: flex;
flex-direction: column;
@@ -2079,7 +2152,7 @@ html.light {
.card-description {
flex-grow: 1;
margin-bottom: 24px;
max-width: 560px;
@media (max-width: 767px) {
margin-bottom: 20px;
}
@@ -2104,6 +2177,42 @@ html.light {
}
}
}
// Single card layout - remove gap and control spacing precisely
&.single-card .bottom-cards-section.bug-bounty.section-padding {
gap: 0 !important;
}
// Single card layout - background image full height and spacing
.com-card.single-card {
.bottom-right-img.bug-bounty-card-bg-2 {
height: 714px !important;
width: auto !important;
object-fit: cover !important;
object-position: right bottom !important;
}
.card-content {
gap: 0 !important;
.card-title {
margin-bottom: 24px !important;
margin-top: 0 !important;
}
.card-description {
margin-bottom: 24px !important;
margin-top: 0 !important;
flex-grow: 0 !important;
padding: 0 !important;
}
.card-links {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
}
}
.token-utility-section {