Refactor ClanCard Component to Match Newest Figma Design #661

✨ Enhancement Description

The goal of this issue is to update the internal visual layout, icons, and imagery of the ClanCard component (specifically the ClanCard theme within ModularCard) to match the latest Figma designs.

Note: This issue focusing strictly on the content inside the card itself. The page's responsive grid layout and card counts per row are already implemented and should not be modified.

🌟 Benefits of the Enhancement

• User Experience: Provides players with a much cleaner, more professional, and visually engaging clan card details.
• Project Impact: Modernizes the UI components, ensures design consistency inside the cards across the application, and cleans up the card's layout logic while keeping the underlying features intact.

🛠️ Proposed Implementation

• Technical Details:

  • Update the internal layout structure of the ClanCard theme within the ModularCard framework.
  • Swap out old placeholder iconography and update the primary badge elements inside the card (like the country flag, lock status, and active member counters).
  • Replace the old heart/placeholder imagery with the new stone figure illustration.
  • Ensure the internal content of the card scales responsively and fits nicely within the existing grid structure on all screen sizes (desktop, tablet, and mobile).
  • ⚠️ Note: Sorting, filtering, and search logic are handled in a separate issue maintain the current functional logic and existing grid behavior, only update the card's inner UI and layout.

• Implementation Plan:

  • Update the clanLabel, status icons, and tags inside the card to match the exact placement in the Figma design.
  • Replace the current graphic asset with the new stone figure illustration.
  • Ensure the internal elements of the card (text alignment, icon spacing) adapt gracefully when the card container size changes on smaller screens.
  • Verify that existing functionalities (clicking, navigating, or joining a clan) still work as expected.
  • Ensure all text labels and tooltips are wired correctly with i18n.

📎 Additional Information

• ❓ Questions & Feedback: If you have any questions regarding the visual style, layout, or expected behaviors, please contact the UI/UX Design Team Lead as your primary point of contact.

🔗Figma Designs

📷 Preview: