Build new Secure Open source page

[carkod]

QA

• Go to https://canonical-com-1251.demos.haus/solutions/secure-open-source compare with copy doc content
• Run through the following QA steps
• [List additional steps to QA the new features or prove the bug has been resolved]

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-10810

Screenshots (design review)

[webteam-app]

Demo

Jenkins

demos.haus

[juanruitina]

Some minor comments first:

• [x] Please remove the chevron from the "Get Ubuntu Pro" button
• [x] The Oracle logo is missing the alt text. Can you double check there's no other images without alt text?
• [x] I'd suggest to hide the diagram under "One subscription..." for small screens, it isn't be readable.
• [x] For some reason the Kubernetes and OpenStack logos look bigger on smaller viewports, can you fix?
• [x] Please tweak the headings under the last section, they shouldn't be all caps but h5 styled.

@lyubomir-popov I just noticed the diagram under "Patching automation included" has the old Canonical logo, should we do something about it?

And for both of you @carkod and @lyubomir-popov: the quotes' authors don't behave well on smaller viewports (see below), with weird stacking and alignments. I see that we are using float: right. I think something like display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 1rem; for the container would be more modern and robust: it avoids all the quirks of the floats. Maybe something to consider and potentially upstream to Vanilla?

[carkod]

Some minor comments first:

• [x] Please remove the chevron from the "Get Ubuntu Pro" button
• [x] The Oracle logo is missing the alt text. Can you double check there's no other images without alt text?
• [x] I'd suggest to hide the diagram under "One subscription..." for small screens, it isn't be readable.
• [x] For some reason the Kubernetes and OpenStack logos look bigger on smaller viewports, can you fix?
• [x] Please tweak the headings under the last section, they shouldn't be all caps but h5 styled.

@lyubomir-popov I just noticed the diagram under "Patching automation included" has the old Canonical logo, should we do something about it?

And for both of you @carkod and @lyubomir-popov: the quotes' authors don't behave well on smaller viewports (see below), with weird stacking and alignments. I see that we are using float: right. I think something like display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 1rem; for the container would be more modern and robust: it avoids all the quirks of the floats. Maybe something to consider and potentially upstream to Vanilla?

All comments addressed.

[codecov[bot]]

Codecov Report

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

Project coverage is 71.51%. Comparing base (376c630) to head (990df9f). Report is 40 commits behind head on main.

:exclamation: Current head 990df9f differs from pull request most recent head d1c8ace

Please upload reports for the commit d1c8ace to get more accurate results.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #1251 +/- ## ========================================== + Coverage 66.14% 71.51% +5.36% ========================================== Files 10 12 +2 Lines 898 1039 +141 ========================================== + Hits 594 743 +149 + Misses 304 296 -8 ``` | [Flag](https://app.codecov.io/gh/canonical/canonical.com/pull/1251/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/canonical.com/pull/1251/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical) | `71.51% <ø> (+5.36%)` | :arrow_up: | 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.

[juanruitina]

And for both of you @carkod and @lyubomir-popov: the quotes' authors don't behave well on smaller viewports (see below), with weird stacking and alignments. I see that we are using float: right. I think something like display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 1rem; for the container would be more modern and robust: it avoids all the quirks of the floats. Maybe something to consider and potentially upstream to Vanilla?

@carkod I was wrong about this. I see in the design that the name should be a col-3 and the jobtitle a col-6. That makes things easier, we don't need any flex nor float, just the usual grid. In any case, both need to be aligned horizontally, they aren't at the moment.

[lyubomir-popov]

@lyubomir-popov I just noticed the diagram under "Patching automation included" has the old Canonical logo, should we do something about it?

I've sent @carkod an updated diagram.

[lyubomir-popov]

• p-section inside p-section doubles the amount of padding-bottom - can we have just one please:
• the diagram is low res - can we please use the svg version here. Apologies for the wrong asset
• can you pleasse add is-muted u-hide--small to the <hr>'s inside testimonials - this will address @juanruitina's comment (thanks Juan).

[juanruitina]

The second diagram seems to be lacking some padding and the "Virtualisation and orchestration" box there is not transparent. But this is a visual matter, UX wise this is OK now. +1

[carkod]

I also added a new countries template, so that we can slowly decomission the old one, without breaking the other forms.