Feature/home page by lynwilhelm · Pull Request #832 · AllenInstitute/biofile-finder

lynwilhelm · 2026-06-15T21:18:38Z

Redesigned home page

Replaces the previous placeholder home page with a structured marketing landing page.

What's in this PR

Hero with tagline and CTA linking to the live example dataset, new image
Intro band with the publication link and quick-start CTAs
Why BioFile Finder — 4 value-prop cards with graphics
How does BioFile Finder work — 2 explanatory cards + flow diagram
What would you like to do next — 3 action cards routing to use cases, user guide, and datasets
Engage with us — links to forum, GitHub, and email

Architecture

Content (copy, links, card data) lives entirely in content.ts so future copy edits are a one-file change with no markup risk. InfoCard and Section are shared primitives that all grids and bands compose from.

Non-obvious decisions

SVG graphics — react-svg-loader compiles SVGs to React components, not URL strings. InfoCard detects the type at render time and renders either <img> or the component. custom.d.ts was updated to reflect this accurately.
Scroll reset — fixed a pre-existing bug where the app's scroll container (an inner div) wasn't resetting on navigation since React Router only resets window.scrollY.
Static content — no loading, empty, or error states; this page has no data dependencies.

Tradeoffs

Back-button navigation always scrolls to top rather than restoring position. Acceptable for now; native scroll restoration would require more investment.

Testing

718 tests passing, 0 failing across core and web suites
Desktop suite has a pre-existing getPath error unrelated to this PR
Verified at mobile (375px), tablet (750px, 999px), and desktop (1200px+) widths
Checked all CTAs route correctly
Add screenshots before merging

Known follow-ups

In-app tutorial trigger on entry from nav bar (separate issue)

🤖 Generated with Claude Code

Replace the carousel-based splash page with the new marketing layout: hero, intro band, "Why"/"How it works" card grids, publication and diagram placeholders, get-started, what's-next, and engage sections. - Reusable Section, InfoCard, and PlaceholderImage components keep the three card grids and section landmarks DRY. - Shared LaunchAppMenu ("Start with your data" / "Explore example dataset") used by both the Header nav and the get-started section. - All copy and links live in a typed content module. - Optional menuIconName added to core BaseButton/SecondaryButton so a design-system button can show a dropdown chevron (backward compatible). - Removes the now-unused Features carousel and FeatureOptions assets. User-guide links currently point at /learn as placeholders (tagged with TODO(user-guide)); the publication link is a placeholder pending its URL. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- Buttons: add reusable iconPosition (leading/trailing icon) and ariaLabel (accessible name without a tooltip) props; menu chevron now matches the other button icons' weight. - Hero: trailing arrow on the CTA; navigate via onClick and shrink-wrap the tooltip host so the tooltip anchors to the button (not the full band). - Tooltips: only the hero CTA shows one; removed from the other buttons and the mobile menu icon (which now uses ariaLabel). - Mobile menu: "Launch app" is a single first-level item with the two options as a submenu (like Help); options shared via LAUNCH_APP_MENU_ITEMS. - Intro: logo + text always flow on one row (no stacking/centering). - Links: inline and "Engage with us" links are aqua, brightening to bright-aqua + underline on hover. - Removed styles that duplicated global font/color defaults. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- Both "Launch app" options and the hero "Try BioFile Finder now" button now open in a new tab (target=_blank / window.open with noopener,noreferrer). - Home page card headings (h3) set to 20px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- Intro logo scales to clamp(80px, 6vw, 96px) for a balanced size. - Replace site-logo.png with a 400x400 version so it stays crisp at the larger intro size (and sharpens the header + share-meta usages). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- Point "Read guidance", "Visit the user guide to learn more", and "Visit user guide" to /user-guide - Point "Explore use cases" to the use-cases guide page - Set the publication link to the Nature Methods article URL - Remove obsolete placeholder scaffolding and TODOs Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Wire home page links to the user guide (/user-guide, setup-overview, use-cases) and the Nature Methods publication - Move the app screenshot to the bottom of the "Why BioFile Finder" section - Fold the publication callout into the intro: add an inline "user guide" link and a single "Read publication" button; remove the standalone PublicationCallout section and component - Rewrite the "How do I get started?" lead to match the user guide's metadata-file language - Consolidate the inline-link color treatment into a single shared rule - Remove obsolete placeholder scaffolding and TODOs Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

BrianWhitneyAI · 2026-07-08T22:02:22Z

should this be closed?

- Add graphics for all four WHY cards (clock, people-share, group-filter, thumbnails) - Add How BFF Works diagram to the How It Works section - Fix SVG rendering: react-svg-loader exports components, not URL strings - Cap all card images to max-height 105px - Constrain wide graphic to container width - Remove placeholder image from Why section - Update custom.d.ts to correctly type SVG default exports Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Restore light aqua (--bright-aqua) color to accent spans - Remove font-weight difference on accent spans - Apply full aqua color treatment to How it works cards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Add bandClassName prop to Section for styling the outer band element - Add .band-footer-clearance to fill the gap above the fixed cookie footer - Opt home page out of Layout footer-clearance (handled by the section itself) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Remove accent color from card headings (looked like links) - Keep What's Next cards single-column up to 1000px (no orphaned card) - Update people-share graphic and shorten thumbnails card copy Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

React Router's built-in scroll restoration only resets window.scrollY. The app's scroll container is an inner div, so scrollTop must be reset manually on navigation to prevent pages from loading mid-scroll. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Swap hero background to home_banner.png, positioned center top - Add CSS gradient overlay fading left, right, and bottom edges into page background - Update hero min-height to 400px - Change Launch App header button to primary styling - Update PrimaryButton to support menuIconName prop - Update people-share and thumbnails graphics Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

… on GetStarted - Move all section data (WHY_CARDS, HOW_CARDS, HOW_SUBTITLE, HOW_GRAPHIC, NEXT_CARDS, ActionCard, ENGAGE_LINKS) and asset imports back into a single content.ts so copy edits have one place to live - Section components are now rendering-only, each importing their data from content.ts - GetStarted: swap SecondaryButton → PrimaryButton on 'Read detailed guidance' - Remove stale home_thumbnails_graphic.png (superseded by SVG version) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

SeanDuHare

This section looks a bit funky on mobile

SeanDuHare · 2026-08-12T20:44:00Z

 import styles from "./BaseButton.module.css";

 interface Props {
+    // Accessible name when no tooltip is wanted. `title` also sets the


This comment can be removed (common dev info / verbose)

SeanDuHare · 2026-08-12T20:45:23Z

        directionalHint: props.menuDirection,
    });

+    const iconAfter = props.iconPosition === "after";


(nit) boolean language

Suggested change

const iconAfter = props.iconPosition === "after";

const isIconAfter = props.iconPosition === "after";

SeanDuHare · 2026-08-12T20:46:49Z

    invertColor?: boolean;
    text?: string;
-    title: string;
+    // Shows a tooltip and sets the accessible name. Use `ariaLabel` instead to


IMO this comment should move to BaseButton since the prop definitions seem to be gathering in there (or just removed)

SeanDuHare · 2026-08-12T20:51:33Z

+    // Submenu for the mobile menu's "Launch app" item, styled like the Help submenu.
+    const launchMenu = useButtonMenu({
+        items: LAUNCH_APP_MENU_ITEMS,
+        directionalHint: DirectionalHint.bottomAutoEdge,


Bottom left edge might be better since its in the top right corner of the app always but this is probably fine

SeanDuHare · 2026-08-12T20:55:03Z

+                <h1 className={styles.heroTitle}>{APPLICATION_NAME}</h1>
+                <p className={styles.heroTagline}>Find, explore, and share data—faster.</p>
+                {/*
+                    Navigate via onClick (rather than wrapping in an <a>) so the


This is kind of a strange workaround but idk that it really matters in practice so I guess its fine 🤷‍♂️

SeanDuHare · 2026-08-12T21:03:52Z

+}
+
+/* Emphasized lead-in phrase; weight and color match the heading. */
+.accent {


empty class

SeanDuHare · 2026-08-12T21:04:31Z

+export interface ActionCard {
+    title: string;
+    body: string;
+    cta: { text: string; href: string; external?: boolean };


external seems to be unused (or at least I'm having trouble finding where it is used)

SeanDuHare · 2026-08-12T21:05:17Z

There are SVG components elsewhere in the app - make sure you poke around to see if they still work after changing the import style

SeanDuHare · 2026-08-12T21:06:03Z

+// Deep link into the deployed app pre-loaded with a public example dataset
+// (Drug Perturbation Dataset). Shared by the home page hero and the
+// "Launch app" dropdown so there is a single source of truth.
+export const EXAMPLE_DATASET_URL =


I think this can move to the content file you have

SeanDuHare · 2026-08-12T21:06:53Z

+                ref={scrollRef}
                className={classNames(isApp ? styles.fillScreen : styles.scrollable, {
-                    [styles.footerClearance]: !isApp && !isUserGuide,
+                    [styles.footerClearance]: !isApp && !isUserGuide && !isHome,


Is the clearance only present for the dataset page now?

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

BrianWhitneyAI · 2026-08-14T20:06:21Z

    className?: string;
    disabled?: boolean;
    iconName?: string;
+    // Which side of the text the icon sits on. Defaults to "before" (the icon


also overly verbose. This is what dan was talking about in todays ai lunch and learn

BrianWhitneyAI · 2026-08-14T20:06:24Z

    id?: string;
    isSelected?: boolean;
    menuDirection?: DirectionalHint;
+    // Optional Fluent icon name for the trailing menu chevron. When omitted the


also overly verbose. This is what dan was talking about in todays ai lunch and learn

BrianWhitneyAI · 2026-08-14T20:06:41Z

-                menuIconProps={{ className: styles.hidden }}
+                menuIconProps={
+                    props.menuIconName
+                        ? // Match the weight/styling of the button's leading/trailing icons.


not a useful comment

BrianWhitneyAI · 2026-08-14T20:07:43Z

        items: helpMenuOptions,
        directionalHint: DirectionalHint.bottomAutoEdge,
    });
+    // Submenu for the mobile menu's "Launch app" item, styled like the Help submenu.


usually for comments try to to say " done like X" unless you reference the class/code directly

BrianWhitneyAI · 2026-08-14T20:13:45Z

+                    inline-block wrapper shrinks the (block) tooltip host to the
+                    button's width so the tooltip anchors to the button instead
+                    of centering on the full-width hero band. `title` drives the
+                    tooltip.


verbosity, 'what does this need to tell a dev"

BrianWhitneyAI · 2026-08-14T20:14:19Z

+ * Full-bleed hero banner with the page's single H1, tagline, and primary
+ * call-to-action that launches the app pre-loaded with an example dataset.
+ */
+export default function Hero() {


What is Hero? (besides a banner)

BrianWhitneyAI · 2026-08-14T20:31:05Z

+// Deep link into the deployed app pre-loaded with a public example dataset
+// (Drug Perturbation Dataset). Shared by the home page hero and the
+// "Launch app" dropdown so there is a single source of truth.
+export const EXAMPLE_DATASET_URL =


Would this ever have use on stg or local host? maybe we dont hardcode PROD

BrianWhitneyAI · 2026-08-14T20:37:17Z

+    {
+        key: "your-data",
+        text: "Start with your data",
+        href: "/app",


"Start with your data" now points at internal route /app with target: "_blank" instead of the previous
in-SPA — costs an extra click and forces a full reload for a route the SPA owns. JSDoc at line
13 is also stale

BrianWhitneyAI · 2026-08-14T20:37:51Z

@@ -0,0 +1,30 @@
+import classNames from "classnames";


aswallace

The new page looks great! A couple minor comments, otherwise seconding Sean & Brian's comments.

aswallace · 2026-08-18T23:43:46Z

+    /** Emphasized lead-in phrase, rendered in the accent color. */
+    accent: string;
+    /** Remainder of the heading, rendered inline after the accent phrase. */
+    heading: string;


This currently is not true (unless there are plans to add styling to the accent class in the future), so this separation may not be necessary

aswallace · 2026-08-18T23:49:08Z

+        accent: "Dynamically organize",
+        heading: "and curate datasets",
+        body:
+            "Filter, group, and restructure collections using hierarchical views—without modifying underlying metadata or breaking existing reference.",


very minor thing that is totally fine if intentional but did catch my attention in scanning for AI flags-
Both this and the "reduce time" one use the exact same LLM-style sentence pattern: "X, y, and z a thing--without doing this other thing."

lynwilhelm and others added 12 commits June 11, 2026 15:12

Shorten "What's next" card title to use BFF

fb4910f

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Merge branch 'main' into feature/home-page

56e033c

Merge branch 'main' into feature/home-page

3fe013a

Merge branch 'main' into feature/home-page

bbd533c

Size intro logo to the height of the adjacent copy

36f5db9

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Reword hero CTA to "Open live example"

96703f5

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

lynwilhelm and others added 9 commits August 4, 2026 15:35

Merge branch 'main' into feature/home-page

916a50f

Update home page card accent color and How it works styling

fbf7dc3

- Restore light aqua (--bright-aqua) color to accent spans - Remove font-weight difference on accent spans - Apply full aqua color treatment to How it works cards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Scope How it works aqua color to headings only

76330e5

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

lynwilhelm marked this pull request as ready for review August 12, 2026 17:06

lynwilhelm requested review from BrianWhitneyAI, SeanDuHare and aswallace as code owners August 12, 2026 17:06

SeanDuHare reviewed Aug 12, 2026

View reviewed changes

Update home_thumbnails_graphic.svg

fbf46da

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

BrianWhitneyAI reviewed Aug 14, 2026

View reviewed changes

aswallace reviewed Aug 19, 2026

View reviewed changes

	const iconAfter = props.iconPosition === "after";
	const isIconAfter = props.iconPosition === "after";

Uh oh!

Conversation

lynwilhelm commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Redesigned home page

What's in this PR

Architecture

Non-obvious decisions

Tradeoffs

Testing

Known follow-ups

Uh oh!

BrianWhitneyAI commented Jul 8, 2026

Uh oh!

SeanDuHare left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aswallace left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lynwilhelm commented Jun 15, 2026 •

edited

Loading