Update About page to match newest Figma design

[Rutjake]

✨ Enhancement Description

The goal of this issue is to update the About page to match the latest Figma designs.

---

🌟 Benefits of the Enhancement

• User Experience: The website will look more professional, visually cohesive, and consistent to use.
• Project Impact: Modernizes the UI components, ensures code maintainability by componentizing the timeline, and preserves full internationalization support.

---

🛠️ Proposed Implementation

• Technical Details:

  • Add statistic highlight cards/boxes for metrics (such as the number of participants, locations, nationalities, and years active).
  • Implement collapsible/expandable text content blocks (accordion style) for each year on the timeline.
  • Add a sorting functionality to reorder the timeline entries (e.g., from newest to oldest and vice versa).
  • Add the designer's name/credits section to the page (details to be confirmed with team veterans).
  • Ensure full responsiveness so that the entire layout, cards, and timeline function flawlessly on all screen sizes (desktop, tablet, and mobile).
  • Ensure that i18n (internationalization) remains intact and is not broken during the refactoring process.

• Implementation Plan:

  • Create the statistics cards for localization and other project metrics at the top of the page.
  • Implement a sorting dropdown/mechanism for the timeline entries and years.
  • Refactor the content so that each year is contained within its own independent block.
  • Make the year blocks expandable and collapsible (accordion functionality).
  • Even though the Figma prototype might lack animations, the blocks should open and close with a smooth transition.
  • Add the designer's name credit section (⚠️ Note: Ask team veterans for the exact text and details regarding this).
  • Apply responsive design to ensure the page is fully optimized and beautiful on all devices (mobile, tablet, desktop).
  • Verify that all text content is properly hooked up to i18n and everything works seamlessly.

---

📎 Additional Information

🔗Figma Designs
🔗Prototype

📷 Preview: