Skip to content

[FEATURE] Enhance Ambassador Card Social Media Buttons On Community Page #5097

@yashdarekar17

Description

@yashdarekar17

Why do we need this improvement?

Improving the social media links on the Ambassador page from plain text to brand-specific icons is essential for enhancing visual consistency and professional aesthetics. Replacing text with logos like GitHub, X, and LinkedIn creates a more modern, cohesive design that aligns with other sections of the website, such as the Board Member cards. Furthermore, using icons improves the user experience by providing recognizable, clickable targets that save horizontal space and ensure a clean, uncluttered layout regardless of screen size.

How will this change help?

This change will significantly improve the visual consistency and professional aesthetic of the community page. By using recognizable logos, we provide an intuitive and modern interface for users to connect with Ambassadors. Additionally, it optimizes the layout for mobile devices by saving horizontal space and adds interactive branded hover states (Black for GitHub/X and Blue for LinkedIn), making the site feel more polished and premium.

Screenshots

current design :-

16-44-41.mp4

enhancement :-

16-45-28.mp4

How could it be implemented/designed?

The implementation involves refactoring the asyncapiAmbassadors mapping in Index.js to replace legacy text links with the project's existing iconography. You will import and utilize the IconTwitter, IconGithub, and IconLinkedIn components, applying Tailwind flexbox for precise alignment and specific hover states: hover:text-black for GitHub and Twitter, and hover:text-[#0077b5] for LinkedIn. To ensure visual consistency with your previous work on professional projects like KraftX and Mentoverse, the icons will maintain a uniform h-5 w-5 size. Crucially, the current card height and flex logic will be preserved to ensure the social section remains pinned to the bottom of each ambassador box.

🚧 Breaking changes

No

👀 Have you checked for similar open issues?

  • I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

Are you willing to work on this issue?

Yes I am willing to submit a PR!

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementtriagedIssue has been reviewed and discussed

    Type

    No type

    Projects

    Status

    In progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions