WD-15274 - company/about new page

[lizzochek]

Done

Add new /company/about page

QA

• demo link
• copy doc
• figma
• View the site on demo
• Run through the following QA steps
• Check that the page is done correctly according to figma and copy doc

Issue / Card

WD-15274

[webteam-app]

Demo

Jenkins

demos.haus

[mattea-turic]

• <br> after "innovators" in the second section header

• <br> after "amazing" in the third section header

• should be deep padding top and bottom for that section too

• there shouldn't be shallow padding here, just before the link:

  

• <br> after "collaboration" in the paragraph text of the "Canonical values" section

• a 50/50 text section isn't used for the "Product portfolio" section, so maybe add the paragraph as a section below like in the figma:

  

• In "Your trusted partners..." section, the text to the right should have "Our collaborative..." as a separate paragraph

• The first two quotes should also have more spacing as in the figma, where the quote person's title uses "default margin" i.e. an extra 24px

• In the figma, there's no bottom padding for this section:

  

• There also should be 8px spacing between the map and caption text

• In the figma, for the last section, there are no lines above the links, but I think that's not intentional so keep as is, but I'll just cc @lyubomir-popov to double-check

[mattea-turic]

Looks really nice :)

I'll +1 as these are v minor things and are just small changes that I must've missed before:

• shallow padding after text, before the video in the "Helping innovators build..." section
• the link, "Build the future of tech with Canonical. Join our team" should be a cta section with deep padding top and bottom

[eliman11]

Thanks for this! Everything on the page looks good to me, but it's missing from the meganav. Could you please add 'About our company' under Company --> Explore Canonical as per this document: https://docs.google.com/document/d/1Y0dxbuar0UAPSCfILtP7fsEX-83yDh7Ha637FA9Wbik/edit?tab=t.0. Thanks!

[juanruitina]

Reviewing this by @eliman11's request.

One question, why does this live under /company/about, instead of just /company? The copy doc specified URL should be just /company and is correctly saved in that folder; this makes more sense to me. On top of that, there would be nothing in /company, which would not be great. I'd also suggest to drop the breadcrumbs, they are not useful right now given there's no other pages right now under company, @mattea-turic would you agree?

Some other minor feedback:

• [x] Set the four values (Adroit, reliable...) as H3 headings (leave styles unchanged)
• [x] The map isn't centred in my screen, only shows US and Europe offices. I think it should look closer to this:

• [x] Remove "Where to find us" caption in the map, please remove and add a title attribute instead reading "Canonical offices in Google Maps"

[codecov[bot]]

Codecov Report

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

Project coverage is 69.73%. Comparing base (efbbec3) to head (d0dae39). Report is 5 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #1407 +/- ## ======================================= Coverage 69.73% 69.73% ======================================= Files 15 15 Lines 1229 1229 ======================================= Hits 857 857 Misses 372 372 ``` | [Flag](https://app.codecov.io/gh/canonical/canonical.com/pull/1407/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/1407/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical) | `69.73% <ø> (ø)` | | 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.