Build /pro/why-pro page

[petesfrench]

Done

• Build /why-pro page base on copydoc and design
• Added some custom styling for the p-divider class to removed a divider from a specific block, issue create here

QA

• Check out https://ubuntu-com-13182.demos.haus/pro/why-pro compare against copydoc and design

Issue / Card

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

[webteam-app]

Demo starting at https://ubuntu-com-13182.demos.haus/pro/why-pro

[codecov]

Codecov Report

Merging #13182 (4d61623) into main (6860575) will decrease coverage by 0.71%.
Report is 23 commits behind head on main.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main   #13182      +/-   ##
==========================================
- Coverage   74.45%   73.74%   -0.71%     
==========================================
  Files         106      106              
  Lines        2881     3051     +170     
  Branches      942     1013      +71     
==========================================
+ Hits         2145     2250     +105     
- Misses        712      776      +64     
- Partials       24       25       +1     

see 4 files with indirect coverage changes

[juanruitina]

Nice work Pete. Some minor tweaks:

• Please make the subtitle "All the open source you need..." a p element (styling is correct).
• There's something on mobile making the search bar at the top dark gray, can you check what's going on?

• Also on mobile, the very last link at the end wraps, should stay in full (as in inline-block) at all screen sizes.

Feel free to change the label to UX+1 once you address this.

[petesfrench]

@juanruitina I have addressed the text wrapping issue, this has come about from a recent vanilla change and we should keep an eye out for it elsewhere.

The colour difference in the search also comes from vanilla and is applied when the is-paper class is used and isn't restricted to this page. We should address this with vanilla if we want it changed. The vanilla snippet in question

[petesfrench]

@carkod Can this be removed?

[carkod]

I wouldn't remove it, we may need it soon in early 2024 again

[carkod]

And why do you need to change this page? The ticket was for /pro/why-pro?

[carkod]

@lyubomir-popov can you review? Thank you.

[juanruitina]

The colour difference in the search also comes from vanilla and is applied when the is-paper class is used and isn't restricted to this page. We should address this with vanilla if we want it changed. The vanilla snippet in question

Could we apply is-paper to the wrapper div only? It should do the trick for a bit, and I think this won't be a problem anymore when we go live with the meganav.

[lyubomir-popov]

Looks good, a few small fixes:

• Hero - can we have shallow padding at the top, deep at the bottom - as it is done here:
  

Can we have this section like so:

(line above headings, not muted, h4 changed to a paragraph, and h4s in the list of 8 items changed to an h5 - with no classes on the h5, just default styling)

u-no-margin--bottom on the small caps heading here:

[petesfrench]

@lyubomir-popov Can you take another look please

[lyubomir-popov]

Looks good, thanks @petesfrench

[carkod]

I think spaces probably don't have any problems rendering. Just the ›

[petesfrench]

if you don't add a   it is possible that the › can fall onto the next line on certain screen sizes

[carkod]

LGTM. I asked Pdms (Lech/Gloria) to take a look, since this is a new pro page, if they don't reply by end of the day you can merge this. Thanks

[carkod]

Good to go! We've got 3 Pdms +1!