AOSSIE-Org / AOSSIE-Org/Resonate-Website

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

Aperta
#341 5 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
43
Fork
154
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### 🎨 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

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.