Redesign suggested tools with card-based layout

[MarkOnFire]

Summary

Transforms the suggested tools section from a simple bulleted list into a modern card-based grid layout with grouped tools, descriptions, tags, and improved visual hierarchy. The home page now displays external tools as styled cards with icons and metadata, while maintaining backward compatibility with flat link lists for sub-pages.

Key Changes

• Card-based layout for home page: Suggested tools now render as a grid of cards with icons, descriptions, tags, and multiple links per card
• Enhanced markdown format: suggested-tools.md now uses ### sub-headings to define tool groups, with descriptions and tags on separate lines
• New CSS styling: Added comprehensive styles for .tool-card--external, .external-badge, .tool-card-links, and staggered entrance animations
• Updated build script: build-suggested-tools.js now parses grouped tools with metadata (icon, description, tags) and renders appropriate HTML based on page type
• Backward compatible: Sub-pages (formatter, og-image) continue to use simple inline link lists

Implementation Details

• Markdown parsing: Enhanced to recognize ### headings as card groups, extract emoji icons, parse description text, and collect tags from Tags: lines
• Dual rendering modes: Home page uses renderCardSection() for grouped cards; sub-pages use renderInline() for flat links
• Accessibility: Proper ARIA labels on badges, semantic HTML structure, and pointer-events handling on decorative elements
• Animation: Staggered fade-in animations for suggested cards (respects prefers-reduced-motion)
• Visual design: Dashed borders for external cards, primary-colored badges and links, responsive grid layout

https://claude.ai/code/session_01T4swWaEr8bWaCtBNhkBCLs