Modernize docs page with professional documentation styling

[Copilot]

The example page needed a more professional appearance suitable for software documentation without adding build complexity.

Changes

HTML Structure (docs/index.html)

• Hero section with gradient title and CTAs
• Feature grid showcasing 6 key capabilities with icons
• Side-by-side demo cards (marked up vs auto-detected call signs)
• Step-by-step getting started guide
• Configuration options table
• Enhanced footer with additional links

Styling (docs/docs.css)

• Modern card-based layout with hover animations
• Responsive grid system (mobile-first, breakpoint at 768px)
• CSS custom properties for theming and dark mode support
• Gradient text with high-contrast fallback for accessibility
• Professional button styles and table formatting

Screenshots

Desktop

Mobile (375px)

Before

Technical Notes

• No build process changes - simple CSS file inclusion
• Existing GitHub Actions workflow copies source files unchanged
• All call sign functionality maintained (flags, phonetics, auto-detection)

Original prompt

Make the example page (in docs/) look a bit sassier and more like a page for software documentation. But don't overcomplicate the build process by doing so.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.