AOSSIE-Org / AOSSIE-Org/Resonate-Website

UI/UX & Performance: Refactor native `<img>` tags to Next.js `<Image>` components

Ouverte
#341 5 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
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.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.