Nickakhmetov/CAT-1509 CAT-1508 New Hero Section + Navigation Pillbar by NickAkhmetov · Pull Request #3944 · hubmapconsortium/portal-ui

NickAkhmetov · 2026-03-02T19:43:04Z

Summary

This PR implements the homepage hero section and the navigation pill bar.

The hero cards are implemented with support for eventually adding videos on hover.

Design Documentation/Original Tickets

https://hms-dbmi.atlassian.net/browse/CAT-1508
https://hms-dbmi.atlassian.net/browse/CAT-1509

Testing

Added unit tests for all new components.

Screenshots/Video

Desktop
https://github.com/user-attachments/assets/2e2539f1-4e83-465f-865d-6cae4be9b792

Mobile

Checklist

Code follows the project's coding standards
- Lint checks pass locally
- New CHANGELOG-your-feature-name-here.md is present in the root directory, describing the change(s) in full sentences.
Unit tests covering the new feature have been added
All existing tests pass
Any relevant documentation in JIRA/Confluence has been updated to reflect the new feature
Any new functionalities have appropriate analytics functionalities added

Additional Notes

Please specify any additional information or context relevant to this PR.

…m navigation

…mBar, HeroCard, and HeroV3

…tov/cat-1509-hero-section

Copilot

Pull request overview

Implements the new homepage hero section design (background + feature cards) and adds a sticky “navigation pill bar” to jump between homepage sections, updating the homepage grid layout accordingly.

Changes:

Replaces the previous tabbed hero/carousel with a new hero layout (left intro + right-side cards) and cycling background imagery.
Adds a sticky bottom navigation pill bar (desktop buttons + mobile “Jump to section…” select) wired to section anchors and analytics events.
Updates the homepage lower grid areas/sections (adds “Analysis and Visualizations” + “Testimonials”, adjusts publications/testimonials IDs).

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
context/app/static/js/theme/theme.tsx	Adjusts global button border radius styling.
context/app/static/js/shared-styles/Timeline/Timeline.stories.tsx	Removes the Timeline Storybook story (related to removed hero timeline content).
context/app/static/js/pages/Home/style.tsx	Updates homepage grid template areas and removes unused upper-grid helpers.
context/app/static/js/pages/Home/Home.tsx	Integrates new Hero + sections/anchors that the pill bar scrolls to.
context/app/static/js/components/home/Hero/styles.ts	Introduces new hero/pill bar styling (including sticky behavior styles).
context/app/static/js/components/home/Hero/index.ts	Simplifies Hero export to default-only.
context/app/static/js/components/home/Hero/const.ts	Adds new config for hero cards + bottom bar items + timing constants.
context/app/static/js/components/home/Hero/HeroCard.tsx	New hero card component (link + optional thumbnail/video + analytics).
context/app/static/js/components/home/Hero/HeroBottomBar.tsx	New sticky navigation pill bar (desktop + mobile variants).
context/app/static/js/components/home/Hero/HeroBackground.tsx	New cycling background implementation for hero.
context/app/static/js/components/home/Hero/Hero.tsx	New hero composition (background + columns + bottom bar).
context/app/static/js/components/home/Hero/*.spec.tsx	Adds unit tests for new hero components.
context/app/static/js/components/home/EntityCounts/style.ts	Adjusts container padding for updated homepage layout.
context/app/static/js/components/Routes/Route/style.ts	Removes container top margin (layout alignment with new hero).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-03T14:44:45Z

+      maxWidth="lg"
+      sx={(theme) => ({
+        position: 'sticky',
+        top: 112,


Mobile sticky offset uses the same hard-coded top: 112 as the desktop pill bar, but headerHeight is already imported and equals 104. Consider deriving top from headerHeight (and any additional intended spacing) so the sticky position stays correct if the header/banner heights change.

Suggested change

top: 112,

top: headerHeight + 8,

Copilot · 2026-03-03T14:44:46Z

+  // Auto-cycle — paused while any card is hovered
+  useEffect(() => {
+    if (prefersReducedMotion) return undefined;
+
+    const interval = setInterval(() => {


The comment says the background auto-cycle is “paused while any card is hovered”, but the effect currently always runs (unless prefersReducedMotion), and HeroRightColumn is rendered without passing hover handlers. Either implement the hover-pause behavior (e.g., via a shared hovered state) or update/remove this comment to match the current behavior.

Copilot · 2026-03-03T14:44:46Z

+              sizes="100vw"
+              src={`${CDN_URL}/v3/${imageName}-100.png`}
+              alt=""
+              loading="eager"


All hero background images are rendered up-front with loading="eager", which can force downloading multiple large images immediately even though only one is visible. Consider making only the initially visible image eager (or using fetchpriority="high" for the first) and lazy-loading the rest to reduce initial page weight.

Suggested change

loading="eager"

loading={index === 0 ? 'eager' : 'lazy'}

fetchPriority={index === 0 ? 'high' : 'auto'}

Copilot · 2026-03-03T14:44:46Z

+    margin: 0,
+
+    [`& ${BottomBarLink}`]: {
+      padding: theme.spacing(3, 2),
+    },


PillBarOuter references BottomBarLink in the nested selectors, but BottomBarLink is declared later in this module. Because BottomBarLink is a const, this will hit the temporal dead zone and can throw at module evaluation time. Move the BottomBarLink export above PillBarOuter, or replace the component selector with a stable class/attribute selector.

Copilot · 2026-03-03T14:44:46Z

-      duration: theme.transitions.duration.shorter,
-    }),
-    borderBottom: `1px solid ${theme.palette.grey[200]}`,
+    py: 1,


py is an sx shorthand, not a valid CSS property in an Emotion/MUI styled() style object. These py entries will be ignored, so the pill bar padding likely isn't being applied. Use paddingTop/paddingBottom (or padding: theme.spacing(...)) instead.

Suggested change

py: 1,

paddingTop: theme.spacing(1),

paddingBottom: theme.spacing(1),

Copilot · 2026-03-03T14:44:47Z

+      maxWidth: 700,
+      boxShadow: theme.shadows[3],
+      borderRadius: theme.spacing(0.5),
+      py: 0,
+      // Add margin to bar to compensate for reduced padding on the links


Same issue as above: py: 0 is not a valid CSS property in a styled() object and will be ignored. Use explicit padding properties so the stuck-state height calculations match the actual rendered styles.

Copilot · 2026-03-03T14:44:47Z

+
+export const PillBarOuter = styled('div')(({ theme }) => ({
+  position: 'sticky',
+  top: 112, // headerHeight (appBarHeight 64 + bannerHeight 40)


top: 112 is documented as “headerHeight (appBarHeight 64 + bannerHeight 40)”, but headerHeight is 104 (64+40). Either update the comment or (preferably) compute this value from headerHeight (+ any intentional extra offset) to avoid drift if header sizing changes.

Suggested change

top: 112, // headerHeight (appBarHeight 64 + bannerHeight 40)

top: 112, // headerHeight (appBarHeight 64 + bannerHeight 40 = 104) + 8px extra offset

NickAkhmetov added 6 commits February 27, 2026 16:00

initial implementation Hero section with background, cards, and botto…

ec092d6

…m navigation

Add background and thumbnail images, support for card hover actions

06c9533

Add unit tests for Hero section components: HeroBackground, HeroBotto…

40d87c0

…mBar, HeroCard, and HeroV3

Remove old hero, rename where renames are needed

7c06910

Merge branch 'nickakhmetov/cat-1504-download-datasets' into nickakhme…

9115630

…tov/cat-1509-hero-section

Merge branch 'nickakhmetov/cat-1504-download-datasets' into nickakhme…

629fa1f

…tov/cat-1509-hero-section

NickAkhmetov requested a review from Copilot March 3, 2026 14:39

NickAkhmetov added the feature: Homepage 2026 label Mar 3, 2026

Copilot started reviewing on behalf of NickAkhmetov March 3, 2026 14:39 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nickakhmetov/CAT-1509 CAT-1508 New Hero Section + Navigation Pillbar#3944

Nickakhmetov/CAT-1509 CAT-1508 New Hero Section + Navigation Pillbar#3944
NickAkhmetov wants to merge 6 commits intonickakhmetov/cat-1504-download-datasetsfrom
nickakhmetov/cat-1509-hero-section

NickAkhmetov commented Mar 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	loading="eager"
	loading={index === 0 ? 'eager' : 'lazy'}
	fetchPriority={index === 0 ? 'high' : 'auto'}

	py: 1,
	paddingTop: theme.spacing(1),
	paddingBottom: theme.spacing(1),

	top: 112, // headerHeight (appBarHeight 64 + bannerHeight 40)
	top: 112, // headerHeight (appBarHeight 64 + bannerHeight 40 = 104) + 8px extra offset

Conversation

NickAkhmetov commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Design Documentation/Original Tickets

Testing

Screenshots/Video

Checklist

Additional Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NickAkhmetov commented Mar 2, 2026 •

edited

Loading