Rebrand /aws/workspaces page

[britneywwc]

Done

• Refresh /aws/workspaces based on Figma design
• Reformat using djlint

QA

• Go to https://ubuntu-com-14162.demos.haus/aws/workspaces
• Check that page design matches Figma

Issue / Card

Fixes WD-12849

Screenshots

[If relevant, please include a screenshot.]

Help

QA steps - Commit guidelines

[webteam-app]

Demo

Jenkins

demos.haus

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 69.64%. Comparing base (ddbb920) to head (f4c8fdd). Report is 180 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #14162 +/- ## ========================================== + Coverage 69.55% 69.64% +0.08% ========================================== Files 109 109 Lines 3127 3126 -1 Branches 1090 1090 ========================================== + Hits 2175 2177 +2 + Misses 926 924 -2 + Partials 26 25 -1 ``` [see 1 file with indirect coverage changes](https://app.codecov.io/gh/canonical/ubuntu.com/pull/14162/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical)

[akbarkz]

Please increase the space between adjacent blocks here:

[mattea-turic]

@britneywwc it matched the figma file but I just wanted to make a few changes since the hero looks a bit odd. I added the comments directly in the file

[britneywwc]

@akbarkz could you please clarify which spaces to increase for the blocks? I am following the design on Figma and the spacing matches.

[britneywwc]

@mattea-turic thanks for the review, I've updated the changes accordingly, could you please have another look?

[akbarkz]

@akbarkz could you please clarify which spaces to increase for the blocks? I am following the design on Figma and the spacing matches.

For example, between "Ubuntu Desktop 22.04 LTS" and "Remote onboarding for developers" blocks. On big screens it looks fine, but on medium and small you can't see if they are different blocks, cause they are too close to each other:

[britneywwc]

@mattea-turic Could you also have a look at @akbarkz's feedback of the divided list on small & medium screen views?

[mattea-turic]

@britneywwc it looks a lot better on mobile/smaller screens now – thanks!