Skip to content

feat: mock banner layout, clickable cards, and browser feedback improvements#4

Merged
yepzdk merged 3 commits intomainfrom
feature/fix-mock-banner-layout-and-readme
Mar 9, 2026
Merged

feat: mock banner layout, clickable cards, and browser feedback improvements#4
yepzdk merged 3 commits intomainfrom
feature/fix-mock-banner-layout-and-readme

Conversation

@yepzdk
Copy link
Copy Markdown
Contributor

@yepzdk yepzdk commented Mar 9, 2026

Summary

  • Mock banner & README: Fixed mock banner to sit above the header, added disclaimer to README
  • Clickable cards: Made step cards and teaser cards fully clickable (entire card is a link)
  • Browser feedback improvements:
    • Replaced onboarding step numbers with lucide icons (Globe, Database, LayoutDashboard, Lightbulb) with teal styling on all cards
    • Updated onboarding subtitle text
    • Made "3 comments" in dataset header a smooth-scroll link to the discussion section
    • Replaced map placeholder with real OpenStreetMap iframe embed (Brabrand, Aarhus)
    • Made "6 datasets referenced" in story hero a link to the dataset page
    • Added 5 navigable story chapters with mock content and dynamic prev/next navigation
    • Fixed StoryProgress sticky offset to account for mockup banner height

Test plan

  • Homepage: verify all 4 step cards show teal icon circles and are fully clickable
  • Homepage: verify teaser cards are fully clickable
  • Dataset page: verify OpenStreetMap loads in the spatial coverage section
  • Dataset page: click "3 comments" in header and confirm smooth scroll to discussion
  • Storytelling page: click through all 5 chapter tabs and verify content switches
  • Storytelling page: use prev/next navigation buttons to move between chapters
  • Storytelling page: click "6 datasets referenced" and verify it navigates to dataset page
  • Check mobile viewport (767px) for responsive behavior on all pages
  • Verify mock banner displays correctly above header

yepzdk and others added 3 commits March 9, 2026 12:57
Position the mockup banner as a fixed bar above the header so it
doesn't scroll and doesn't conflict with the header layout. Offset
header, sidebar, and main content by the banner height. Add a mockup
disclaimer note at the top of README.

Co-authored-by: Claude <noreply@anthropic.com>
Wrap step cards and teaser cards in router-link/anchor elements so the
entire card area is actionable, not just the small text link inside.

Co-authored-by: Claude <noreply@anthropic.com>
- Replace onboarding step numbers with lucide icons and teal styling
- Update onboarding subtitle text
- Make "3 comments" a smooth-scroll link to the discussion section
- Replace map placeholder with OpenStreetMap iframe embed
- Make "6 datasets referenced" a link to the dataset page
- Add navigable story chapters with 5 tabs of mock content
- Make story prev/next navigation dynamic
- Fix StoryProgress sticky offset for mockup banner

Co-authored-by: Claude <noreply@anthropic.com>
@yepzdk yepzdk changed the title feat: fix mock banner layout and add README disclaimer feat: mock banner layout, clickable cards, and browser feedback improvements Mar 9, 2026
@yepzdk yepzdk merged commit 02cbc8f into main Mar 9, 2026
@yepzdk yepzdk deleted the feature/fix-mock-banner-layout-and-readme branch March 9, 2026 15:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant