[FOSSOVERFLOW-25] style: Redesign the 'My Achievements' Page` in student dashboard

NOTE: THIS ISSUE IS FOR FOSSOVERFLOW MENTEE

Description

This task is to implement a redesign of the "My Achievements" page within the student dashboard. The goal is to refresh the current view with a more modern and visually appealing layout, drawing inspiration from the attached design.

Crucial Constraint: This is a visual overhaul. All existing features, especially the filtering and sorting logic, must be fully preserved and integrated into the new design. No functionality should be lost.

Scope: This is a frontend-only task.

Design Inspiration

The new design should be inspired by the layout and style of the mockup below. It does not need to be a pixel-perfect copy, but it should follow the general aesthetic (e.g., card-based layout, typography, and color scheme).

Key Redesign Requirements

• Modern Layout: Replace the current layout with a cleaner design inspired by the mockup, likely using cards each achievement.
• Integrate Existing Filters: The new design must seamlessly incorporate all existing filtering and sorting controls. While the appearance of the filters can be updated, their functionality (e.g., filtering by category, verification status, date) must remain identical.
• Clear Achievement Display: Each achievement entry in the new design should clearly and elegantly display all its essential information:
  • Title and Description
  • Date Achieved
  • A prominent "Verified" or "Pending" status badge.
  • A clear, clickable link to view the certificate if one is attached.
• Preserve All Actions: Any existing actions available to the student (such as editing or deleting a pending achievement) must be present and fully functional in the new UI.

Technical Implementation

• Backend: No backend changes are expected. The frontend should continue to use the existing API for fetching and filtering the student's achievements.
• Frontend:
  • This task involves refactoring the MyAchievementsPage component
  • The focus is on updating the JSX structure and CSS/styling to match the new design aesthetic.
  • All existing state management, data fetching, and filtering logic must be preserved and correctly connected to the new UI elements.
  • There should be a button for add achievement (top right) which is present in current style as well

Acceptance Criteria (Task Checklist)

• The "My Achievements" page is successfully redesigned with a new look inspired by the provided image.
• All previous filtering and sorting functionalities are present and fully working in the new design.
• Each achievement clearly displays its verification status and provides a link to its certificate (if available).
• The new design is responsive and works well on both desktop and mobile devices.
• No existing functionality has been broken during the redesign.

Start by locating the MyAchievementsPage component and read its existing state management, data fetching, filtering, sorting, and student actions. Use the attached mockup as visual guidance while preserving those behaviors, then verify the redesigned page displays achievement details, status, certificate links, the add button, and responsive layouts without breaking existing functionality.