feat: update installation instructions, add separate pages

[melaniebmn]

Summary | Résumé

This update enhances the usability of our installation documentation by:

• Streamlining the process of finding the appropriate instructions.
• Creating separate pages for each environment, enabling direct linking for easier navigation.

🚨 Missing content 🚨

Alt text descriptions

We are missing the alt text descriptions for the following new images:

• banner-angular
• banner-figma
• banner-html
• banner-nodejs
• banner-react
• banner-vue

The new images can be found here.

Figma instructions

The Figma instructions are currently linked to our Figma library. However, we do not provide guidance on how to load the library into existing Figma projects. Should we update the Figma page to include these instructions? If we don't want to take on that content work right now, we can keep linking directly to the Figma library and tackle that piece later on.

🚨 Missing translations 🚨

Alt text descriptions (depending on the EN content)

We are missing the alt text descriptions for the following new images:

• banner-angular
• banner-figma
• banner-html
• banner-nodejs
• banner-react
• banner-vue

The new images can be found here.

Figma instructions

The following text needs to be translated into French:

• Install GC Design System for Figma
• Lost and looking for our Figma design library? We got you.

HTML instructions

The following text needs to be translated into French:

• Install GC Design System for plain HTML
• Use these instructions to install GCDS components if you're using HTML / no framework.

React instructions

The following text needs to be translated into French:

• Install GC Design System for React
• Use these instructions to install GCDS components if you're using React.

React SSR instructions

The following text needs to be translated into French:

• Install GC Design System for React with SSR
• Use these instructions to install GCDS components if you're using React with SSR (e.g. NextJS).
• Use these instructions to install GCDS components if you're using React with SSR.

NodeJS instructions

The following text needs to be translated into French:

• Install GC Design System for NodeJS
• Use these instructions to install GCDS components if you're using npm but are not using a specific framework.

Angular instructions

The following text needs to be translated into French:

• Install GC Design System for Angular
• Use these instructions to install GCDS components if you're using Angular.

Vue instructions

The following text needs to be translated into French:

• Install GC Design System for Vue
• Use these instructions to install GCDS components if you're using Vue.

To do

• Add missing alt text 🚫
• Add missing Figma instructions? ❓ (TBD)
• Add missing translations 🚫
• Add correct font instructions to all environments
• Add correct Font Awesome instructions to all environments (hold off because we are adding our own?) ❓ (TBD)
• Add base font instructions

To do policy check

Policy advice is documented here.

• Check to see if each company provides guidance about the use of their logo by 3rd parties.
• If the logo is CC licenced, that's best. If there is no guidance, you can still use it. If they say anywhere NOT to use the logo, don't include it.
• Wherever possible, use a high-quality official version of the logo provided by the company.

⚠️ Code freeze: Do not merge before January 6

[aws-amplify-ca-central-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-450.d35vdwuoev573o.amplifyapp.com

[aws-amplify-ca-central-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-450.djtlis5vpn8jd.amplifyapp.com