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>
65 lines
2.4 KiB
SCSS
65 lines
2.4 KiB
SCSS
// BDS LogoSquareGrid Component Styles
|
|
// Brand Design System - Logo grid pattern with optional header section
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-logo-square-grid - Base component
|
|
// .bds-logo-square-grid--gray - Gray variant (maps to TileLogo 'neutral')
|
|
// .bds-logo-square-grid--green - Green variant (maps to TileLogo 'green')
|
|
// .bds-logo-square-grid__section-header - SectionHeader with optional top margin
|
|
//
|
|
// Note: Individual logo tiles are rendered using the TileLogo component
|
|
// Note: Button layout is handled by the ButtonGroup component
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
// Note: Color variants are now handled by the TileLogo component
|
|
// LogoSquareGrid 'gray' maps to TileLogo 'neutral'
|
|
// LogoSquareGrid 'green' maps to TileLogo 'green'
|
|
|
|
// =============================================================================
|
|
// Base Component Styles
|
|
// =============================================================================
|
|
|
|
.bds-logo-square-grid {
|
|
@extend .d-flex;
|
|
@extend .flex-column;
|
|
@extend .w-100;
|
|
padding-bottom: $bds-space-2xl;
|
|
margin-bottom: $bds-space-2xl;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-bottom: $bds-space-3xl;
|
|
margin-bottom: $bds-space-3xl;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-bottom: $bds-space-4xl;
|
|
margin-bottom: $bds-space-4xl;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section (uses SectionHeader component)
|
|
// =============================================================================
|
|
// LogoSquareGrid needs additional top margin for the header row
|
|
.bds-logo-square-grid__section-header {
|
|
margin-top: $bds-space-2xl;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
margin-top: $bds-space-3xl;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
margin-top: $bds-space-4xl;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Logo Grid Row
|
|
// =============================================================================
|
|
// Note: Grid layout is now handled by PageGridRow/PageGridCol
|
|
// Each tile uses PageGridCol with span={{ base: 2, lg: 3 }}
|
|
// This gives us 2 columns on mobile (2/4) and 4 columns on desktop (3/12)
|
|
// Tile rendering and styling is handled by the TileLogo component
|