AOSSIE-Org / AOSSIE-Org/EduAid

Improve UI Interactivity on Landing Page with Responsive Animations

Aperta
#138 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
171
Fork
425
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### **Description**
The current UI on the landing page, where features like "Doc/Audio Input," "In-depth Questions Gen," and "Dynamic Google Form Integration" are displayed, lacks interactivity. This makes the page appear static and less engaging to users. Adding an interactive hover-based expansion for larger screens will improve user experience and make the UI more dynamic and visually appealing.

---

### **Problem Statement**
1. The UI elements on the landing page do not provide interactive feedback to users, reducing engagement.
2. The lack of animations and responsiveness makes the features less noticeable and impactful.
3. There is no differentiation in behavior between mobile and desktop users, leading to usability inconsistencies.

![image](https://github.com/user-attachments/assets/d1d068ad-e14c-40ec-af5e-829f4c43d007)

---

### **Proposed Solution**
1. **Hover-based Animation for Large Screens**:
- Add a hover effect that expands the feature tiles when hovered over, making the content visually engaging.

2. **Responsive Behavior**:
- Disable the hover animation on smaller screens (e.g., phones/tablets) to ensure compatibility and usability across devices.

---

### **Benefits of the Change**
1. Enhances user engagement by making the landing page more interactive.
2. Differentiates behavior based on device type, ensuring optimal user experience on both mobile and desktop platforms.
3. Improves visual appeal, aligning the UI with modern web design practices.

---

### **Expected Outcome**
1. Users on larger screens will experience smooth hover animations that expand feature tiles.
2. Mobile and tablet users will have a static layout optimized for touch interactions.
3. The landing page will feel more dynamic and polished, improving overall usability and satisfaction.

https://github.com/user-attachments/assets/4e94ef15-1874-49ed-81cb-b15b3ea29652

---

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.