Currently, users can only navigate to an instructor's profile by explicitly clicking the "View profile" button on the InstructorCard. To improve the UX and increase the clickable area (especially beneficial for touch devices), the entire card should be clickable and route the user to the respective instructor's profile.
Proposed Solution 💡
Enhance the InstructorCard component so the entire surface acts as a navigation link.
Implementation Strategy:
Instead of wrapping the entire card structure in an HTML <a> tag (which can cause accessibility and nesting issues if the card contains other buttons), I propose using the pseudo-element overlay pattern:
- Add
relative to the parent card container.
- Place the Next.js
<Link> around the title or the "View profile" text.
- Add
after:absolute after:inset-0 to the link so it stretches over the entire card.
- Apply a slight hover effect (e.g., subtle scale or shadow increase) to the card for visual feedback.
Files Affected 📂
components/InstructorCard.tsx
Checklist ✅
If this is available to work on please assign this to me under N'Soc-26 @Mehren7
Currently, users can only navigate to an instructor's profile by explicitly clicking the "View profile" button on the
InstructorCard. To improve the UX and increase the clickable area (especially beneficial for touch devices), the entire card should be clickable and route the user to the respective instructor's profile.Proposed Solution 💡
Enhance the
InstructorCardcomponent so the entire surface acts as a navigation link.Implementation Strategy:
Instead of wrapping the entire card structure in an HTML
<a>tag (which can cause accessibility and nesting issues if the card contains other buttons), I propose using the pseudo-element overlay pattern:relativeto the parent card container.<Link>around the title or the "View profile" text.after:absolute after:inset-0to the link so it stretches over the entire card.Files Affected 📂
components/InstructorCard.tsxChecklist ✅
If this is available to work on please assign this to me under
N'Soc-26@Mehren7