Wd 9788 juju feature pages

[abbiesims]

Continues on from https://github.com/canonical/juju.is/pull/524

Done

Adds content for Juju middle pages and includes @chillkang 's existing changes.

QA

• Compare the demo with this design
  • Demo from PR #525 includes content for Integrations and Charmhub & Community tabs
• Compare the demo with the following copy docs:
  • Why juju?
  • Juju architecture
  • Charm architecture
  • Integrations
  • Charmhub & Community

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-9773 Fixes https://warthogs.atlassian.net/browse/WD-9788 Fixes https://warthogs.atlassian.net/browse/WD-9778 Fixes https://warthogs.atlassian.net/browse/WD-9783 Fixes https://warthogs.atlassian.net/browse/WD-9768.

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

A bit unrelated to this PR, on smaller screen sizes navigation items start wrapping:

It seems you need to adjust the $breakpoint-navigation-threshold value for it not to happen (nav should switch to mobile view before items wrap).

Related to this PR you can notice that on smaller screen sizes tabs are no longer aligned with top nav:

It's because they don't use grid, but hardcoded padding value. This may be ok as MVP, but for it to fully work across screen sizes there would need to be some bigger changes to the tabs (to respect the grid layout).

[lukasSerelis]

Landing page section still missing button to get to the middle pages (outside scope?) DEMO Figma

Image on juju architecture stretched DEMO Figma

2nd image on juju architecture is too bright (link to darker version https://drive.google.com/file/d/1NlMx3z2c9YVWLz1fsH7p52FQvAT_pSvR/view?usp=drive_link) DEMO Figma

Text on charm architecture takes too many columns DEMO Figma

[chillkang]

A bit unrelated to this PR, on smaller screen sizes navigation items start wrapping:

It seems you need to adjust the $breakpoint-navigation-threshold value for it not to happen (nav should switch to mobile view before items wrap).

Related to this PR you can notice that on smaller screen sizes tabs are no longer aligned with top nav:

It's because they don't use grid, but hardcoded padding value. This may be ok as MVP, but for it to fully work across screen sizes there would need to be some bigger changes to the tabs (to respect the grid layout).

@bartaz I'll try to address the $breakpoint-navigation-threshold value issue in another PR! For the tabs, this is a temporary workaround and I was thinking opening a new PR to make a new variant, e.g., p-tabs--25-75, that you talked about the other day.

[lukasSerelis]

Updated this image to scale keep better quality and have a consistent background https://drive.google.com/file/d/1PuLtgqRGrOjpVUPkYjW1q4jhAZ3ySDJ0/view?usp=drive_link

[jnsgruk]

Big improvement overall, I spotted some weird padding on the charms architecture page in one of the tables:

[chillkang]

@bartaz @jnsgruk @lukasSerelis Could you have a look at the changes? Thanks in advance!

[lukasSerelis]

LGTM :+1:

[bartaz]

Can't find it in code (maybe not affected by this PR?) but this section at the bottom seems like it could use p-section--deep for more spacing.

[codecov[bot]]

Codecov Report

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

Project coverage is 58.51%. Comparing base (44a69e0) to head (043a8fb). Report is 12 commits behind head on main.

:exclamation: Current head 043a8fb differs from pull request most recent head 5ab2c68. Consider uploading reports for the commit 5ab2c68 to get more accurate results

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #525 +/- ## ======================================= Coverage 58.51% 58.51% ======================================= Files 6 6 Lines 188 188 ======================================= Hits 110 110 Misses 78 78 ``` | [Flag](https://app.codecov.io/gh/canonical/juju.is/pull/525/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical) | Coverage Δ | | |---|---|---| | [python](https://app.codecov.io/gh/canonical/juju.is/pull/525/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical) | `58.51% <ø> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[lukasSerelis]

@massigori changed why juju image, waiting for :+1: so @chillkang could change it https://drive.google.com/file/d/1gKIsJ1RXK2d283FEtwWXBpI2jRlBDliY/view?usp=drive_link