Create Claim 169 Website

[Saksham-UXD]

We need to design and develop a website dedicated to Claim 169. The site should consolidate all existing information, documents, and updates related to the claim so that everything is accessible from one location instead of being scattered across different sources.

Scope of work:

• Gather and organize all existing Claim 169 information and documentation
• Define the site structure and navigation (which pages/sections are needed)
• Design the layout and visual style
• Build and populate the pages with the collected content
• Test the site for accuracy, broken links, and responsiveness across devices
• Publish/deploy the site to its hosting environment

Acceptance criteria:

• All Claim 169 information is present and accurate on the site
• Content is organized logically with clear navigation
• The site displays correctly on desktop and mobile

[Saksham-UXD]

Figma Design Link: https://www.figma.com/design/IEZiXl8k4RuQpPC4IGzy3T/Claim-169-Web-Portal?node-id=0-1&t=2SyFrv4h39bKAxYX-1

[Saksham-UXD]

Feedback given by Resham:

Overall the spacing is a lot throughout the page, and each tile or component is very big. For e.g. the "How to Contribute" or the blue component in between the page. Spacing between each main section is also quite a lot. Can also look at reducing the tile sizes through out the page. Spacing in detailed view pages is also a lot > e.g. https://claim169.netlify.app/how-it-works
The color coding that was requested around the top of each card (as per original approved design) is also not reflecting yet.
Header:
The header still looks very cluttered and is not well-spaced. There's no visual gap between the logo on the left, the main navigation option in the central portion of the header, and the secondary options as icons/buttons on the right. Pls fix this.
Each main header option listed on top should navigate to the same landing page under its respective section. Missing for Resources. Not navigating correctly for FAQs to the same landing page. Pls fix for all.
Options missing in the header - Refer original bolt.new design: Contributors icon, and GitHub button on the top right. Pls add.
Contact Us icon on the header is not hyperlinked to the Contact Us section below. Pls fix.

Footer:
Remove Claim 169 Specification v1.2.1 from the bottom right - Doesn't add value. Pls take a call if you think we should retain it.
Looks very huge and expanded. We can remove the Contributors list from the footer, and align the options listed with the header. Keep it horizontal with less vertical spacing and scroll.

Add hyperlinks as below: (as this will be the reference for dev)
Specification > All Versions > View Details > Navigate to respective page of each version number here:
Latest: https://docs.mosip.io/1.2.0/readme/standards-and-specifications/mosip-standards/169-qr-code-specification
1.2.0: https://docs.mosip.io/1.2.0/readme/standards-and-specifications/mosip-standards/169-qr-code-specifications-1.2.0
1.1.0: https://docs.mosip.io/1.2.0/readme/standards-and-specifications/mosip-standards/169-qr-code-specification-1
1.0.0: https://docs.mosip.io/1.2.0/readme/standards-and-specifications/mosip-standards/169-qr-code-specifications-1.0.0

Latest Spec across the site: https://docs.mosip.io/1.2.0/readme/standards-and-specifications/mosip-standards/169-qr-code-specification
GitHub across the site: https://github.com/Claim169
How to Contribute:
Read the Spec: https://docs.mosip.io/1.2.0/readme/standards-and-specifications/mosip-standards/169-qr-code-specification
Raise an issue on GitHub: https://github.com/Claim169/id-claim-169/issues
View Working Group Notes: https://mosip.atlassian.net/wiki/external/OWExMjBhYzQ3Mjk1NGZlOWExMWEzODA2YzVjYjExNmQ

Resources:
Podcast > Episode 169: Interoperable QR Codes for Cross-Border Identity: https://www.linkedin.com/events/episode169-interoperableqrcodes7435789414271762432/

CC @reshamchugani2