AOSSIE-Org / AOSSIE-Org/Resonate-Website
UI/UX & Performance: Refactor native `<img>` tags to Next.js `<Image>` components
- Langage dominant
- TypeScript
- Étoiles
- 43
- Forks
- 154
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
### 🎨 The UI/UX Update
The website currently uses standard HTML `` tags for displaying static assets (like `roomscreen.png` and `aossie_logo.png` in the [Features] and [About] components).
From a UX perspective, this approach lacks modern image loading optimizations like "blur-up" placeholders or proper structural bounding boxes, which can lead to jarring rendering or Layout Shifts as the images load. Additionally, it misses out on Next.js's built-in performance optimizations (like automatic WebP compression and lazy loading), which negatively impacts the site's Core Web Vitals and overall perceived speed.
### Current Design Issues
The website currently uses standard HTML `` tags for displaying static assets (like `roomscreen.png` and `aossie_logo.png` in the [Features]) and [About] components).
From a UX perspective, this approach lacks modern image loading optimizations like "blur-up" placeholders or proper structural bounding boxes, which can lead to jarring rendering or Layout Shifts as the images load. Additionally, it misses out on Next.js's built-in performance optimizations (like automatic WebP compression and lazy loading), which negatively impacts the site's Core Web Vitals and overall perceived speed.
### Proposed Solution
Refactor the standard HTML `` tags across the `app/components/` directory to use the Next.js `
` component (`next/image`).
1. **Implementation:** Replace `` tags in `Features.jsx`, `About.jsx`, etc., with the highly optimized `
` component.
2. **Perceived Loading UX:** Utilize the Next.js `placeholder="blur"` property for static image imports to provide a smooth, professional blur-up effect preventing layout shifts while the high-res image loads.
3. **Accessibility:** Update the `alt` text to be more descriptive (e.g., in `Features.jsx`, change `alt={"Feature " + id}` to `alt={feature.title}`).
4. **UI Polish (Optional):** Add subtle modern CSS enhancements to the images, such as a slight `border-radius` to soften the corners or a very light `box-shadow` to give the static screenshots more depth against the background.
### Design Considerations
- [x] Accessibility
- [x] Visual consistency
- [ ] User flow/navigation
- [x] Responsive design
- [ ] Dark mode support
- [ ] Other
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.