[Frontend] Implement Course Listing Page UI

### Is your feature request related to a problem? Please describe.

Following the semester and branch selection, users currently lack a dedicated page to view and select the courses associated with their academic profile. Without this page, users cannot easily discover or access the study materials for their specific subjects, hindering their primary use case on the platform.

### Describe the solution you'd like

I would like to implement a "Course Listing Page" that serves as an intermediate step after the semester/branch selection. This page should visually represent the courses relevant to the user's chosen academic context, as shown in the [provided design ](https://www.figma.com/design/3NruGfT09LfcDhi3QDxZSt/Exam-Bud?node-id=368-2893&t=g9Sdnq5i8ADiYnba-4).

The page should display a dynamic header indicating the selected semester and branch, along with a back button. The main content area will feature interactive cards for each course, displaying its code and title. Clicking "View materials" on a course card should seamlessly navigate the user to the dedicated course material page for that specific subject. The page must be fully responsive and adhere to the design's specified styling.

### Describe alternatives you've considered

_No response_

### Developer Help


Start by reviewing the existing semester and branch selection flow and the navigation to course materials, then compare the course listing requirements with the linked Figma design. Done means a responsive page shows the selected semester and branch, course cards with codes and titles, a back button, and working “View materials” navigation for each course.

Written by the indexing model from the issue text.