feat(homepage): UI optimization v2 — scroll reveal, ecosystem tooltips & section differentiation#208
Merged
gaoxueyu merged 37 commits intoIvorySQL:mainfrom Mar 12, 2026
Conversation
This reverts commit 5d944b7.
…s, section differentiation - Add scroll-triggered reveal animations via IntersectionObserver (slide-up + scale variants with 100ms stagger, spring-physics easing); fix CSS Modules scoping via :global() wrappers - Differentiate 5 homepage sections with distinct visual identities (dot-grid, lavender, warm cream, deep navy, gold cream) to reduce visual monotony - Add TOOL_META lookup (~55 tools) with descriptions and homepage URLs; render hover tooltip cards on ecosystem tags with "Visit homepage →" links - Fix unclosed CSS block in .infoCard causing webpack SyntaxError - Update hero slogan/intro copy, add heroTrust trust signals below CTA - Tune hero badge, action button depth (Ring+Shadow), elephant float animation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
👷 Deploy request for ivorysql pending review.Visit the deploys page to approve it
|
…ooter - Replace hard border dividers with rounded-top card stacking (48px radius, -48px margin-top, z-index 2–9) for smooth section-to-section flow - Restyle CTA banner to light cool-gray (#f0f4fc) to differentiate from the warm-cream Certificates section above; update button colors accordingly - Reorder sections: Certificates before CTA so the banner closes the page - Fix "Try Online" secondary button contrast (was invisible on light bg) - Override Docusaurus dark footer with IvorySQL deep-navy brand palette - Add "Browse full ecosystem & tools" link → docs.ivorysql.org/…/5.0 - Link "Migration Guide" / "查看迁移指南" → docs.ivorysql.org/…/4.5 and switch from <Link> to <a target="_blank"> for external navigation - Responsive: 32px radius at 996px, 20px at 640px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Display Highgo, Data Bene, Ongres, State Grid Corporation, Zhongtai Securities, and Goldwind as a muted trust strip inside the hero banner. Companies with logo assets (Data Bene, Ongres) render white-filtered images; others render as styled text. Bilingual: Chinese names shown in zh locale. Separated by dot dividers, hover reveals slightly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add Highgo, Zhongtai Securities, Goldwind logo images - Add hasBg flag for State Grid (white-bg PNG): use invert+screen-blend instead of brightness+invert to avoid solid white rectangle - Increase logo height 22px → 28px for better legibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Original canvas was 3000×1887; actual logo content was 2308×526 centered in the middle. Cropped with Pillow getbbox() to remove padding, so 32px height now renders the full logo mark clearly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Convert 1-bit palette PNG to RGBA, mask out near-white pixels (R/G/B > 220) as transparent, then crop to content bbox (2308×526). Now uses standard brightness(0)+invert(1) filter like other logos. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Remove translateY(-6px) and scale() from infoCard/scenariosGrid hover - Hover now uses box-shadow + filter brightness only — no position change - Remove transform from infoCard transition to prevent any layout shift - Reduce State Grid logo height from 64px to 40px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
8 unique color themes (blue, teal, violet, amber, emerald, rose, indigo, cyan) applied via nth-child selectors. Each card has its own top-strip gradient, border tint, and subtle background wash. Watermark numbers also use the card's accent hue. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Dot-grid background texture (28px, rgba blue 13%) - Right side: concentric orbital rings with glowing node dots and connector lines suggesting a network/database topology - Left side: circuit board fragment with PCB traces, L-bends, rectangular pads and node dots - Both decorations are aria-hidden, pointer-events:none Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…erflow:hidden Remove overflow:hidden from .ecoCatCard so absolutely-positioned tooltips (e.g. Pgpool-II) are no longer clipped. Add z-index:10 on hover to ensure tooltips stack above sibling cards. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…idden Extend ::before to top:-1px left:-1px right:-1px so its border-radius aligns with the card's outer border edge, preventing the strip from sticking out at the rounded corners without needing overflow:hidden. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ed icon badges Replace asymmetric bento grid with uniform 4-column layout: - Icon + title in same horizontal row (flex) to reduce card height - 38×38px gradient icon badge per card (white SVG on colored bg) - Top accent strip matches icon color per card (8 unique themes) - Remove bento span-2 overrides to equalize card heights - New dedicated .advCard/.advHead/.advIcon/.advTitle/.advDesc classes so scenariosGrid .infoCard is unaffected Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace rigid card grid with a clean two-column feature list: - Items separated by subtle horizontal dividers (no card boxes) - Vertical center line divides left/right columns - 48px gradient icon badge with matching colored glow shadow - Hover: icon floats up (-3px) + glow deepens per accent color - 8 unique accent themes carried on icon badge only (not card bg) - Mobile: collapses to single column, divider hidden Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add logoZh field to TRUSTED_CUSTOMERS; render the pgconf.dev Highgo logo on Chinese pages, keeping the existing logo for EN. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Separate base gradient from star/nebula decoration into ::after GPU layer (transform: translateZ(0)) to eliminate scroll repaint - Add 4 multi-layer nebula clouds: blue-cyan (top-right), purple (left), pink wisp (center), teal aurora (bottom) - Add diagonal galaxy dust band across mid-section - Fix mobile trust bar logo alignment: column layout + justify-center - Shooting star streak via ::before Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- overflow:hidden on default state clips accent bar corners cleanly - overflow:visible on :hover lets tooltip escape the card boundary - z-index:10 on hover ensures card stays above siblings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace featuredTools+count approach with full tools arrays: - All tools from ecosystemGroups distributed across 6 categories - Rename field from featuredTools to tools - Remove "X tools total" footer (no longer needed) - Connectivity(7), HA&Backup(11), DevTools(18), Monitoring(8), DataIntegration(12), AI&Geo(9) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… author display - BlogListPage: add two-column layout with right-side sticky tag sidebar, category pill tabs, client-side pagination (9 posts/page), and results bar - BlogPostItem: add author avatars (image or colored initials), clickable tag pills linking to /blog/tags/[tag], category badges, and card hover effects - BlogPostItem/Footer: make tags clickable Links on post detail pages - releases-page: full redesign with IvorySQL brand style (navy hero banner, version cards with gradient icons, styled package card, contact info bar) - custom.css: replace old blog styles with comprehensive new design system matching IvorySQL brand palette (#2f74ff, deep navy); mobile-responsive tag sidebar collapses to pill row on screens ≤900px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…trations - Add 17 unique SVG cover images in static/img/blog/covers/ — each hand-crafted to match the post's topic (terminal diagrams, architecture flows, code comparisons, conference scenes, feature grids) - Update all 17 blog post frontmatter image: fields to reference new SVG paths - Fix homepage scroll performance: remove backdrop-filter blur on 4 elements, animate opacity instead of box-shadow in keyframes, add will-change: transform on compositor-promoted layers, remove mix-blend-mode: screen Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Redesign 6 SVG covers with distinct color themes: ivorysql-arrived: warm gold/cream (light bg) ha-replication: orange-red warm dark pg-webinar: deep crimson/red pgconf-sv-2022: light blue/white (conference feel) pgcon-2022: deep indigo/violet external-storage: teal/emerald - Change blog card image container bg from dark navy to #f1f5f9 (light) so object-fit:contain displays cleanly against a neutral background Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
border-top/bottomdividers with rounded-top card stacking (48px radius, -48px margin overlap, z-index 2–9) for smooth section flowTest plan
prefers-reduced-motiondisabled/enabled🤖 Generated with Claude Code