mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-08 19:26:38 +00:00
f10dbc8c29
* updating docs landing page, took far but not complete. Pushing for Gabe take over * Refactor home page sections and introduce new components - Replaced existing content in index.page.tsx with new section components for improved structure and maintainability. - Added new sections: HomeBeginJourneySection, HomeBlockchainStatsSection, HomeComplianceDirectorySection, HomeDevelopersFeatureSection, HomeFutureFinanceCallout, HomeHeroCallout, HomeInstitutionsFeatureSection, HomePartnerLogosSection, HomeStayConnectedSection, and HomeCarousel. - Updated styles for CarouselFeatured and CardStat components to enhance visual consistency and responsiveness. - Introduced SCSS for HomeHero section to manage layout and spacing effectively. * Add Payments Page and Sections - Created a new Payments page with multiple sections including Hero, Why Choose, Advanced Features, Stablecoins, Embedded Payments, Partner Logos, Flexible Integration, Developer Spotlight, and Stay Connected. - Each section is designed to highlight various aspects of the XRP Ledger Payments Infrastructure, featuring components like FeaturedVideoHero and CardsIconGrid. - Added corresponding styles and images to enhance the visual presentation of the new sections. * adding icons, updating docs landing page * updating the claude command, wrapping text with translate wrapper * use case tokenization page built * Enhance CarouselFeatured styles for improved responsiveness - Added flex-direction adjustments for CarouselFeatured component to support column-reverse layout on smaller screens and row layout on medium and larger screens. - Removed redundant vendor prefixes from box-sizing and text-decoration properties in devportal2024-v1.css for cleaner code and improved maintainability. * moving payments page to correct folder, moving payments under pages * adding developers home page * code clean up --------- Co-authored-by: gabriel-ortiz <gabriel.ortiz.github@gmail.com> Co-authored-by: gabriel-ortiz <gortiz@ripple.com>
102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
import { LinkTextCard, LinkTextCardProps } from "shared/patterns/LinkTextCard";
|
|
import {
|
|
PageGrid,
|
|
PageGridRow,
|
|
PageGridCol,
|
|
} from "shared/components/PageGrid/page-grid";
|
|
import { SectionHeader } from "shared/patterns/SectionHeader";
|
|
|
|
export type LinkTextCardData = Omit<LinkTextCardProps, "index" | "className">;
|
|
|
|
export interface LinkTextDirectoryProps {
|
|
/** Section heading (required) */
|
|
heading: string;
|
|
/** Optional description content */
|
|
description?: React.ReactNode;
|
|
/** Array of card data to display */
|
|
cards: LinkTextCardData[];
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* LinkTextDirectory Component
|
|
*
|
|
* A section pattern that displays a numbered list of LinkTextCard components.
|
|
* Features a heading, optional description, and a vertically stacked list of cards
|
|
* with automatic sequential numbering (01, 02, 03...).
|
|
*
|
|
* Layout:
|
|
* - Header section with heading + description
|
|
* - Responsive vertical spacing between cards
|
|
* - Desktop: Right-aligned cards with 40px gaps
|
|
* - Tablet: Left-aligned cards with 32px gaps
|
|
* - Mobile: Left-aligned cards with 24px gaps
|
|
*
|
|
* @example
|
|
* // Basic usage
|
|
* <LinkTextDirectory
|
|
* heading="Explore XRPL Developer Tools"
|
|
* description="XRP Ledger is a compliance-focused blockchain where financial applications come to life"
|
|
* cards={[
|
|
* {
|
|
* heading: "Fast Settlement and Low Fees",
|
|
* description: "Settle transactions in 3-5 seconds for a fraction of a cent",
|
|
* buttons: [
|
|
* { label: "Get Started", href: "/start" },
|
|
* { label: "Learn More", href: "/docs" }
|
|
* ]
|
|
* },
|
|
* {
|
|
* heading: "Secure and Reliable",
|
|
* description: "Built on proven blockchain technology",
|
|
* buttons: [{ label: "Read Docs", href: "/docs" }]
|
|
* }
|
|
* ]}
|
|
* />
|
|
*
|
|
* @example
|
|
* // Without description
|
|
* <LinkTextDirectory
|
|
* heading="Features"
|
|
* cards={cardData}
|
|
* />
|
|
*/
|
|
export const LinkTextDirectory: React.FC<LinkTextDirectoryProps> = ({
|
|
heading,
|
|
description,
|
|
cards,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<PageGrid className={clsx("bds-link-text-directory", className)}>
|
|
<SectionHeader
|
|
heading={heading}
|
|
description={description}
|
|
span={{ base: 12, md: 6, lg: 8 }}
|
|
/>
|
|
|
|
{/* Cards List */}
|
|
<PageGridRow className="bds-link-text-directory__list">
|
|
<PageGridCol span={{ base: 12, md: 8, lg: 8 }} offset={{ lg: 4 }}>
|
|
<ul className="list-none pl-0">
|
|
{cards.map((card, index) => (
|
|
<LinkTextCard
|
|
key={card.heading || index}
|
|
index={index}
|
|
heading={card.heading}
|
|
description={card.description}
|
|
buttons={card.buttons ?? []}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
);
|
|
};
|
|
|
|
export default LinkTextDirectory;
|