Hyperlinked Platform Icons in Global Footers on Gitcoin Passport Application

User Story:

As a user of the Gitcoin Passport application, I want the platform icons in the footer to be hyperlinked to relevant sections within the Gitcoin Passport documentation, So that I can easily access detailed information about the platforms and technologies supporting the Gitcoin Passport.

Acceptance Criteria

GIVEN a user is on any page within the passport.gitcoin.co application, including the splash/landing page, WHEN they interact with the OP or Linea icons in the footer, THEN they should be able to click on these icons, which will direct them to https://docs.passport.gitcoin.co/building-with-passport/smart-contracts/contract-reference#decoder-contract-addresses in a new browser tab.

AND

WHEN they interact with the Ceramic icon in the footer, THEN they should be able to click on this icon, which will direct them to https://docs.passport.gitcoin.co/building-with-passport/composedb in a new browser tab.

AND

WHEN they interact with the zkSync icon in the footer, THEN they should be able to click on this icon, which will direct them to https://docs.passport.gitcoin.co/building-with-passport/smart-contracts/contract-reference#decoder-contract-addresses in a new browser tab.

AND

WHEN they interact with the Arbitrum icon in the footer, THEN they should be able to click on this icon, which will direct them to https://docs.passport.gitcoin.co/building-with-passport/smart-contracts/contract-reference#decoder-contract-addresses in a new browser tab.

AND

WHEN future platform icons are added, THEN these should also be hyperlinked to appropriate documentation or web pages in a new browser tab.

Product & Design Links:

"Available on" Footer Design Example: https://www.figma.com/file/FOOlLEFaBt87atw6CPkA5P/Passport-App?type=design&node-id=7116%3A2713&mode=design&t=T4ACrXS1HAUdnxLc-1

Tech Details:

Update the footer hyperlinks for OP, Linea, and Ceramic to their new respective URLs.
Add the zkSync and Arbitrum icons to the footer, ensuring they are hyperlinked to their respective documentation URLs.
Ensure these hyperlinks open in new tabs and are compliant with web accessibility standards.
Test for functionality and responsiveness across various devices and browsers.
Prepare for future scalability by developing a method to automate the inclusion of new platform icons as they become supported.

Open Questions:

Notes/Assumptions:

The future inclusion of additional platforms should also adhere to the hyperlinking guidelines established here.
Ensure that all new icons are visually consistent with the current design ethos and align with the overall user experience of the Gitcoin Passport application.

passportxyz / passport