feat(ui): comprehensive UI/UX improvements

[joeVenner]

Summary

Comprehensive UI/UX enhancements to the Awesome Copilot website including dark/light theme support, improved search, smooth animations, and
mobile responsiveness.

Changes Made

New Components

• ThemeToggle.astro – Dark/light mode toggle with system preference detection and localStorage persistence
• BackToTop.astro – Smooth scroll-to-top button with show/hide animation
• Icon.astro – Reusable SVG icon system replacing emoji icons

Enhanced Features

• Theme System – CSS custom properties for consistent theming across light/dark modes
• Search – Improved UX with better visual feedback and interactions
• Hero Section – Modernized design with better typography and visual hierarchy
• Animations – Entrance animations, hover effects, and smooth transitions
• Mobile Experience – Responsive improvements for all screen sizes

Files Changed

Testing

• Theme toggle persists across page navigation
• No FOUC (flash of unstyled content) on load
• Back-to-top button appears after scrolling
• Responsive layout tested on mobile/tablet/desktop
• Search functionality works as expected
• All animations are smooth and performant

Screenshots

Before

After

[aaronpowell]

It looks like you've incorrectly branched from the main branch not staged, and as a result all the materialised plugins are included in this PR.

You can attempt to fix this with a rebase:

git fetch origin staged
git rebase --onto origin/staged origin/main <branch name>
git push --force-with-lease

If that does not resolve it, you can run npm run plugin:clean which will delete the materialised plugins and you can commit that change.

[joeVenner]

It looks like you've incorrectly branched from the main branch not staged, and as a result all the materialised plugins are included in this PR.

You can attempt to fix this with a rebase:

git fetch origin staged
git rebase --onto origin/staged origin/main <branch name>
git push --force-with-lease

If that does not resolve it, you can run npm run plugin:clean which will delete the materialised plugins and you can commit that change.

@aaronpowell Thanks for the feedback ser! I've rebased the branch onto origin/staged and force-pushed. The PR should now only include the intended website changes.

[aaronpowell]

Testing out the changes and a few observations:

• I didn't see the Back to Top feature appear anywhere, is it mobile only?
• Per brand guidance, we aren't putting a logo on the top of the page
• The popup when you click on an agent (and I'll assume skill, instructions, etc.) no longer works
• Where are the SVG's for the icons from? Do we need to attribute source on them? I'm not really convinced on the agent, workflows, and hooks icons (admittedly workflows should probably come from https://github.github.com/gh-aw/...)

[joeVenner]

Thanks for the detailed feedback! I've addressed all the points

[aaronpowell]

I like the look of the icons much more.

When the popup is open the search box and theme selector are overlapping the opaque background, probably to do with the fixed position of the elements. This is less obvious on dark mode though.

I notice there's a new awesome-copilot.png file added, but can we remove that as we have guidance on how we can use logos and I think that might get me in trouble 😅

[joeVenner]

I like the look of the icons much more.

When the popup is open the search box and theme selector are overlapping the opaque background, probably to do with the fixed position of the elements. This is less obvious on dark mode though.

I notice there's a new awesome-copilot.png file added, but can we remove that as we have guidance on how we can use logos and I think that might get me in trouble 😅

Haha no trouble for Aaron please 😅🙏 — really appreciate the quick feedback!

I was actually planning to use awesome-copilot.png later as a banner in the README, but totally makes sense — I’ll remove it 👍

The icons definitely look much better now (great suggestion by you 👌), The light theme feels cleaner overall ✨

I’ll dig into the popup overlap issue and push a fix shortly

[joeVenner]

Summary

Issue: The modal's background overlay was appearing below the search bar in the navbar and theme toggle.

Root Cause: The modal (#file-modal) was nested deep inside .main-pane which has isolation: isolate applied by Starlight's CSS. This creates a new stacking context, so the modal's z-index (1000001) was only evaluated within that context and couldn't stack above the header (z-index: 1000).

Fix: Added JavaScript to move the modal to be a direct child of <body> when the page loads, allowing it to escape the ancestor stacking context and properly cover the entire viewport including the navbar.

// In setupModal():
if (modal && modal.parentElement !== document.body) {
  document.body.appendChild(modal);
}

This resolves the modal overlay appearing below the header elements.