-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
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?
- I have read the Contributing Guidelines
Are you willing to work on this issue?
Yes I am willing to submit a PR!
Metadata
Metadata
Assignees
Labels
Type
Projects
Status