AOSSIE-Org / AOSSIE-Org/Resonate-Website

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

Đang mở
#341 5 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
43
Fork
154
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.