Redesign homepage below-hero sections#149
Conversation
- Remove use case/product section titles, replace with h2+subtitle style (like MCP section)
- Remove thumbnail images from use case cards; add yellow/black bottom-right arrow
- Add full-width horizontal dividers above/below use case section and below product section
- Add hover states to all HeroCards (dark: #272727 bg / #535353 border; light: #f0f0f0)
- Redesign product section: ClickHouse Cloud (col-span-2 with rich content) + 3 stacked cards, then 3-col row
- Add bottom-right arrows to product cards (ClickStack, Managed Postgres, chDB)
- Fix FullWidthDivider to use getElementById('sidebar') for correct boundary detection
- Consistent spacing: 24px between section subtitle and card grids; mb-0 title/subtitle gap
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 5 potential issues.
Reviewed by Cursor Bugbot for commit 54ff8d6. Configure here.
| fontWeight: '400', | ||
| color: isDark ? '#a1a1aa' : '#6b7280', | ||
| minHeight: '3rem' | ||
| }}>{description}</span> |
There was a problem hiding this comment.
Locale cards show broken images
Medium Severity
Locale HeroCard still renders thumbnail <img> elements whenever icon is absent, even if filename is omitted. Cards such as Observability pass no filename, so browsers request invalid paths like /images/undefined. English index.mdx guards with filename ?, but locale copies were not updated.
Additional Locations (2)
Reviewed by Cursor Bugbot for commit 54ff8d6. Configure here.
| <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50"> | ||
| {selected === 'goal' && 'Explore by goal'} | ||
| {selected === 'usecase' && 'Explore by use case'} | ||
|
|
There was a problem hiding this comment.
Switcher tab missing use case title
Low Severity
When CONTENT_MODE is switcher and the Use case tab is selected, the header h2 renders no text because the selected === 'usecase' label was removed while the tab option remains. Goal and Product titles still render.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 54ff8d6. Configure here.
| { label: "How to build dashboards, alerts, and event-driven features on top", href: "/get-started/use-cases/data-warehousing" }, | ||
| { label: "Tips to keep costs low while performance stays high", href: "/operations/best-practices" }, | ||
| ]} | ||
| /> |
There was a problem hiding this comment.
Cloud card href never used
Medium Severity
The ClickHouse Cloud product card passes href but also links, so HeroCard returns a non-link div and ignores href. Unlike neighboring product cards, the main card surface is not clickable—only the bullet links navigate.
Reviewed by Cursor Bugbot for commit 54ff8d6. Configure here.
| color: 'inherit', | ||
| position: 'relative', | ||
| overflow: 'hidden', | ||
| transition: 'background-color 0.12s ease, border-color 0.12s ease' |
There was a problem hiding this comment.
Locale cards skip hover styles
Medium Severity
New _site/styles.css hover rules target .ch-hero-card, but locale HeroCard instances use inline cardStyle without that class. Locale homepages will not get the intended light/dark hover backgrounds and borders described in the PR.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 54ff8d6. Configure here.
| } | ||
|
|
||
| return <a style={cardStyle} href={href}>{content}</a>; | ||
| return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>; |
There was a problem hiding this comment.
Locale links block new tab
Medium Severity
Locale HeroCard link cards now call preventDefault and assign window.location.href on click. Modifier clicks (Ctrl/Cmd) and middle-click no longer open the href in a new tab, unlike standard anchor behavior.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 54ff8d6. Configure here.
3 participants
Summary
h2+ subtitle format (consistent with MCP section style)getElementById('sidebar'))#272727bg /#535353border; light#f0f0f0Test plan
🤖 Generated with Claude Code
Note
Low Risk
Presentation-only changes to Mintlify homepage MDX and CSS; main review risk is layout/resize edge cases for FullWidthDivider and duplicated chDB entries on the English product row.
Overview
Redesigns the docs homepage content below the hero by extending shared
HeroCard/ContentSwitcherpieces and adding global styles for cards, section dividers, and corner arrows.HeroCardgains optional custombody,showArrow/arrowBottom,extraStyle, image-less cards, and link cards that usepreventDefault+window.location.hreffor navigation.FullWidthDivideris new: a resize-aware<hr>that stretches from the sidebar’s right edge to the viewport so section rules read full-width.Use case block: stacked-mode section headers become h2 + subtitle;
FullWidthDividerwraps the section on the English page; several cards drop hero thumbnails and use bottom-right arrows instead (Observability on locales too).English
index.mdxonly: Explore by product moves from a uniform grid to a two-row layout—wide ClickHouse Cloud card with long copy and five in-card links beside three stacked product cards, then a second row of three cards—and the MCP block spacing/border is aligned with the new section pattern._site/styles.css:.ch-hero-cardhover/dark surfaces,.ch-usecase-divider, and.ch-usecase-arrowtheme colors.Locale home MDX files (es, ja, ko, pt-br, ru, zh) get the shared component/divider/use-case tweaks; their product grids stay the simpler four-column layout with arrows added, not the full English product redesign.
Reviewed by Cursor Bugbot for commit 54ff8d6. Bugbot is set up for automated code reviews on this repo. Configure here.