Refactor docs and gallery pages to use unified site layout system

[remigit55]

Summary

Refactored the docs hub and component gallery pages to adopt a consistent site-wide layout pattern using shared CSS classes (site-hero, site-section, site-container, site-resource-grid), improving design consistency and maintainability across the application.

Key Changes

• Docs Hub Page (/docs):

  • Replaced custom CARD_STYLE inline styles with semantic CSS classes
  • Extracted card routing configuration into CARD_HREF constant for better maintainability
  • Refactored DocCard component logic into the main page using a map-based approach
  • Adopted unified hero section layout with eyebrow, title, and lead text
  • Migrated card grid to site-resource-grid class for consistent styling

• Component Gallery Page (/components):

  • Replaced sticky header with unified site-hero section
  • Moved category navigation bar to sticky position below hero (top: 60px)
  • Wrapped navigation in site-container for consistent max-width and padding
  • Replaced custom Container component with site-section and site-container classes
  • Aligned layout structure with docs hub and other site pages

• Navigation (SiteNav.tsx):

  • Removed /components link from main navigation
  • Added explanatory comment: gallery remains accessible via "Open app", Resources, and MCP

• Internationalization:

  • Added eyebrow field to both gallery and docsHub dictionaries (en.ts and fr.ts)
  • Eyebrow values: "Components" (en) / "Composants" (fr) for gallery, "Documentation" for docs hub

Implementation Details

• Card routing is now centralized in CARD_HREF with explicit external boolean flags
• Card body text generation uses a helper function that applies formatting (e.g., component count) only where needed
• Both pages now use semantic HTML (<section>, <ul>, <li>) for better accessibility
• External links are properly marked with visual indicator (↗) and appropriate target/rel attributes
• Layout maintains responsive grid behavior while using unified CSS classes

https://claude.ai/code/session_01R2zjjDD1srqhoMnFx8LWx9