AOSSIE-Org / AOSSIE-Org/Resonate-Website

UI/UX: UI Enhancements for Mobile Responsiveness and Navbar

Open
#338 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
43
Forks
154
PR merge metrics
No merged PRs in 30d

Description

### 🎨 The UI/UX Update

The navigation bar, "About" section, and "Features" section require enhancements for better mobile responsiveness and accessibility.

### Current Design Issues

1) The navbar menu toggle lacks an aria-label, reducing accessibility for screen readers.

​2) The "About" section does not stack content correctly on mobile viewports, causing layout issues.

​3) The "Features" section is missing a structural heading, affecting page hierarchy.

### Proposed Solution

- ​Replace the text-based menu toggle in the Navbar with an animated SVG hamburger icon and an aria-label.
​- Implement CSS media queries to ensure the "About" section content stacks into a single responsive column on smaller screens.
- ​Add an h2 title to the "Features" component with responsive font sizing so it scales correctly on narrow viewports.

### Design Considerations

- [x] Accessibility
- [x] Visual consistency
- [ ] User flow/navigation
- [x] Responsive design
- [ ] Dark mode support
- [ ] Other

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.