[FEATURE] UI enhancement: Redirect user to detailed course/roadmap when click in the card and change the color of View course button

[charlottenguyen05]

🚀 Feature Description

UI/UX enhancement:

1. Redirect the user to the corresponding detailed course/roadmap page when user click in the course/roadmap card, without needing to correctly click on the view course/roadmap button. This will improve the user experience, as normally user will click on the card to see more, but now we are forcing them to click correctly into that view button to see.
2. The View Course button is of color gray and look much less clickable than the button Enroll/Unenroll. This is not a good UX implementation as this will not incentived new learner to click on the view button course. I would recommend to change the color of this button to the same green color in View Roadmap button.
   (This image I took when I finished implement the star rating feature, just image here there is no star rating yet)

💡 Problem Statement

No

📋 Proposed Solution

Change only file client/src/components/courses/CourseDetailPage.tsx

🔄 Alternatives Considered

Nothing

📸 Mockups/Examples

If applicable, add mockups, wireframes, or examples from other applications.

🎯 Acceptance Criteria

• Criteria 1: Responsive design

Can you please assign to me to work on this easy issue. Thank you.

📎 Additional Context

Add any other context or screenshots about the feature request here.

🏷️ Component

Which part of the application does this affect?

• Frontend (React)
• Backend (Express)
• Python Backend (FastAPI)
• Database
• Documentation
• Other

---

SWOC 2026 Participants: This could be a great contribution opportunity! Add the swoc2026 label if you'd like to work on this.

[akshajtiwari]

Hi Maintainers,
I would like to take up this issue as a part of SWOC 2026 @charlottenguyen05

[tarinagarwal]

@charlottenguyen05 you can proceed!