mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-16 17:55:49 +00:00
Refactor tokenization page layout and enhance styling
- 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
@@ -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,11 +157,14 @@ function RwaTokenizationFeatures() {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
return (
|
||||
<section className="rwa-tokenization">
|
||||
<section className="token-features-section">
|
||||
<div 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")}
|
||||
{translate(
|
||||
"Defining Features on XRPL"
|
||||
)}
|
||||
</h2>
|
||||
</header>
|
||||
<div className="feature-grid">
|
||||
@@ -177,16 +177,11 @@ function RwaTokenizationFeatures() {
|
||||
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")}
|
||||
{translate("Explore Trading on XRPL")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -211,7 +206,8 @@ function DeveloperTools() {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
return (
|
||||
<section className="developer-tools">
|
||||
<section className="token-developer-tools-section">
|
||||
<div className="developer-tools">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
@@ -244,6 +240,7 @@ function DeveloperTools() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -263,10 +260,11 @@ function UpcomingEvents() {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
return (
|
||||
<section className="upcoming-events">
|
||||
<section className="token-events-wrapper">
|
||||
<div className="upcoming-events">
|
||||
<h2 className="upcoming-events__title">
|
||||
{translate(
|
||||
"Explore the companies pioneering tokenization using XRP Ledger"
|
||||
"Trusted by Leaders in Real-World Asset Tokenization"
|
||||
)}
|
||||
</h2>
|
||||
<div className="upcoming-events__logo-container">
|
||||
@@ -274,6 +272,7 @@ function UpcomingEvents() {
|
||||
<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,112 +344,11 @@ function TokenUtilitySection() {
|
||||
);
|
||||
}
|
||||
|
||||
const BenefitCard = ({ iconClass, title, description }) => {
|
||||
function TokenVideoSection() {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
return (
|
||||
<article className="benefit-card">
|
||||
<div className={`benefit-icon ${iconClass}`}></div>
|
||||
<h3 className="benefit-title">{translate(title)}</h3>
|
||||
<p className="benefit-description">{translate(description)}</p>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
export default function RwaTokenization() {
|
||||
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">
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="orange waves"
|
||||
src={require("./../../../static/img/backgrounds/events-orange.svg")}
|
||||
id="events-orange"
|
||||
/>
|
||||
</div>
|
||||
<div className="token-title-container">
|
||||
<h1 className="token-title">
|
||||
{translate(
|
||||
"Real-World Asset (RWA) Tokenization on the XRP Ledger"
|
||||
)}
|
||||
</h1>
|
||||
<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("Get Started Now")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="token-video-container">
|
||||
<section className="token-video-container">
|
||||
<div className="token-video">
|
||||
<iframe
|
||||
width="100%"
|
||||
@@ -472,10 +369,67 @@ export default function RwaTokenization() {
|
||||
"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>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="token-cards-wrapper">
|
||||
const BenefitCard = ({ iconClass, title, description }) => {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
return (
|
||||
<article className="benefit-card">
|
||||
<div className={`benefit-icon ${iconClass}`}></div>
|
||||
<h3 className="benefit-title">{translate(title)}</h3>
|
||||
<p className="benefit-description">{translate(description)}</p>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
function TokenHeroSection() {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
return (
|
||||
<section className="token-hero-section">
|
||||
<div className="position-relative d-none-sm">
|
||||
<img
|
||||
alt="orange waves"
|
||||
src={require("./../../../static/img/backgrounds/events-orange.svg")}
|
||||
id="events-orange"
|
||||
/>
|
||||
</div>
|
||||
<div className="token-title-container">
|
||||
<h1 className="token-title">
|
||||
{translate("Real-World Asset (RWA) Tokenization")}
|
||||
</h1>
|
||||
<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("Get Started Now")}
|
||||
</Link>
|
||||
</div>
|
||||
</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">
|
||||
@@ -501,18 +455,91 @@ export default function RwaTokenization() {
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -149,6 +149,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.mt-1{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user