Feature/UI ux improvements#1068
Closed
joeVenner wants to merge 3 commits into
Closed
Conversation
Replace all emoji icons with a consistent SVG icon system to improve: - Visual consistency across platforms - Design token control and theming - Professional appearance Changes: - Add new Icon.astro component with 16 custom SVG icons - Update index.astro to use SVG icons in resource cards - Update index.ts to render SVG icons in search results - Update utils.ts to return icon names instead of emojis - Update global.css with proper SVG icon styling - Remove emoji from Footer component Icons added: robot, document, lightning, hook, workflow, plug, wrench, book, plus action icons: close, copy, download, share, external, plus, search, chevron-down Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Phase 2 & 3 UI/UX improvements: Hero Section Enhancements: - Add gradient text effect for title (purple to orange gradient) - Add animated floating particles in hero background - Increase hero padding for better visual impact Card Category Colors: - Add category-specific accent colors (AI, docs, power, automation, etc.) - Each category has unique glow effect on hover - Category colors: purple (AI), orange (docs), red (power), etc. Entrance Animations: - Add staggered fade-in animation for cards (50ms delay each) - Cards animate in with translateY + opacity - Add slide-down animation for search results Mobile Responsiveness: - Responsive grid: 4 cols → 2 cols → 1 col - Adjust font sizes for mobile screens - Add safe-area-inset support for notched devices - Ensure touch targets ≥44px Accessibility: - Add prefers-reduced-motion support - Disable animations for users who prefer reduced motion - Smooth scroll with fallback Additional Improvements: - Add arrow indicator on card hover - Add loading animation for count numbers - Enhanced scrollbar styling - Print styles for better printing Co-Authored-By: Claude <noreply@anthropic.com>
Theme Toggle: - Create ThemeToggle.astro component with sun/moon icons - Add theme initialization in Head.astro to prevent flash - Store theme preference in localStorage - Keyboard shortcut: Cmd/Ctrl + Shift + L - Smooth icon transition animation Back to Top Button: - Create BackToTop.astro component - Appears after scrolling 400px - Smooth scroll to top on click - Fixed position bottom-right - Respects reduced motion preference Enhanced Search: - Recent searches functionality with localStorage - Show recent searches on focus when empty - Remove individual items or clear all - Enhanced empty state with icon and hint - Cmd/Ctrl + K keyboard shortcut to focus search - Add search to recent when getting results CSS Enhancements: - Theme toggle container styles - Recent searches section styling - Search empty state with icon - Search loading spinner - Keyboard shortcut hint styles - Print styles for new components Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
Enhanced Features
Files Changed
Testing
Screenshots