feat: hero card, KPI metric row, and page layout structure

[jschloman]

Summary

Implement the top-of-page layout seen in the mockup (assets/dashboard_mockup.png): a full-width hero card with the year's headline stat, a 4-column KPI metric row, and a consistent card grid structure for the rest of the page.

Depends on: #23 (theme foundation)

Hero card

Full-width card with a subtle dark-to-indigo gradient background (linear-gradient(135deg, #1e1b4b, #0c1120)), indigo border, and two zones:

• Left: largest single stat (e.g. total scrobbles) in 48px bold white, with a sub-label beneath
• Right: 4 secondary stats (check-ins, films, books, workouts) in 24px, each in its accent color

Rendered via st.markdown with unsafe_allow_html=True using a CSS class .hero-card.

KPI metric row

4-column st.columns row using st.metric() for each source type loaded. Style with style_metric_cards() from streamlit-extras:

from streamlit_extras.metric_cards import style_metric_cards

style_metric_cards(
    background_color="#141c2f",
    border_color="#2d3a52",
    border_left_color="#6366f1",
    border_radius_px=12,
    box_shadow=True,
)

Show delta values (month-over-month change) where computable.

Card grid structure

Wrap every chart section in a reusable card_container() context that injects the card CSS class (background: #141c2f, border-radius: 12px, border: 1px solid #2d3a52, padding: 1.25rem). Keep chart titles inside the card as st.markdown("### Title").

Page header

Replace the current page title with a two-line header:

Overview                           ← 22px bold
Your complete personal data · 2024 ← 12px, TEXT_DIM color

Acceptance criteria

• Hero card renders with gradient background and correct stat layout
• KPI row shows 4 styled metric cards with delta indicators
• Card wrapper CSS applies consistently across all chart sections
• Page degrades gracefully when only one data source is loaded (hide unavailable stats)
• ruff check ., mypy, and pytest all pass