Repository navigation
feat(frontend): institutions home, search, branded cards, fluid motion - #4
Merged
Merged
Conversation
- Add a top-level CLAUDE.md that orients on the monorepo split, captures the frontend-half conventions (no dedicated CLAUDE.md on that side), and points at backend/CLAUDE.md as the source of truth for Python work. - Annotate frontend/.env.example with the live Railway URL so contributors can dev against the deployed backend without a local API. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the marketing Home with a working surface: search bar centered at top, institution cards in the middle, intro band underneath. Each card describes the publishing institution (sector, mandate, dataset count) with a banner + circular avatar treatment ported into the existing token system — no shadcn or framer-motion drag. - / → institutions grid (was hero + featured datasets) - /institutions/:slug → datasets for a single publisher (new) - /datasets → redirects to / (Browse.tsx removed) - /about → absorbs the old Home hero + dev strip - Header nav now Home · API · About; breadcrumbs follow suit - slugify() in lib/utils for publisher → URL-slug round-tripping Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Surface the publishing institution everywhere a dataset appears, and smooth the page transitions across the site. Institution branding - New InstitutionBadge component (logo or initials, name, Verified indicator) used on the dataset hero and inside every DatasetCard. - Logo-aware avatars on InstitutionCard (home grid) and the /institutions/:slug header use a white circle so transparent publisher logos render cleanly against dark mode. - INSTITUTIONS registry extracted to src/lib/institutions.ts so any view that needs publisher metadata pulls from one place. - CBG logo committed at frontend/public/logos/central-bank-of-the-gambia.png (sourced from frontend/docs/logos/cbg.png) and wired in. Dataset detail - Default tab is now Preview (audience-first) with Overview second for developers; route order swapped accordingly so /datasets/:slug lands on Preview. - Tab content fades + slides in on each switch via tailwindcss-animate. Layout & motion - Header nav is now centered between the brand and the theme toggle. - Home / Institution grids cascade in with a 50–60ms stagger using the existing animate-fade-up keyframe. - Dataset and dataset-detail heroes fade up on mount. - Dataset card hover gets a slightly heavier lift and shadow to match the institution card. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop the warm-paper canvas (#FAF8F4) for pure white (#FFFFFF) and neutralise the banding tone (--surface-2 #F2EFE8 → #F5F5F5) so the home, dataset, and footer surfaces still differentiate against the new white background. Dark mode tokens untouched. Co-Authored-By: Claude Opus 4.7 (1M context) <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
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
/now opens with a centered search bar, then a grid of institution cards (banner + circular logo or initials, sector eyebrow, mandate description, dataset count), with the explanatory band moved underneath./institutions/:slugpage lists every dataset for a single publisher, with the institution's logo and dataset count in the header.InstitutionBadge(logo on white tile, publisher name, green ✓ Verified) sits above the dataset detail title and on every dataset card. TheINSTITUTIONSregistry lives atsrc/lib/institutions.tsso future views can reuse it.animate-fade-upcascade on grids, fade-up on detail heroes), heavier hover lift on dataset cards, and the CBG logo committed atfrontend/public/logos/central-bank-of-the-gambia.png(mirrored fromfrontend/docs/logos/cbg.png).CLAUDE.mdorienting future Claude Code sessions on the monorepo split and frontend conventions;frontend/.env.exampleannotates the Railway backend URL for local + production env wiring.Browse.tsx;/datasetsredirects to/.Test plan
npm run typecheck,npm run lint,npm run buildclean (verified locally before push)./loads, search filters across datasets, clearing search restores institution grid; cascade animation visible on first paint./institutions/central-bank-of-the-gambiashows logo header + dataset list./datasets/exchange-ratesopens on Preview tab; institution chip shows CBG logo + Verified; switching tabs fades in./aboutshows the relocated hero + dev strip + existing audience/how-it-works/sources/contact sections.Home · API · About) is centered; theme toggle stays right; brand stays left.🤖 Generated with Claude Code