feat: Build /20-04 page

[petesfrench]

Done

• Build /20-04 page based off of copydoc and figma design
• Added some features to _latest_news_strip.html
• Bumped vanilla to 4.18.4

QA

• Check out demo link
• Check the design matches the figma design
• Check the content matches the copydoc
• Check there is correct application of vanilla, specifically focusing on macro usage
• Check on different screen sizes
• Check the pages where _latest_news_strip.html is implemented and ensure there is no difference

Issue / Card

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

[webteam-app]

Demo

Jenkins

demos.haus

[mattea-turic]

Thanks @petesfrench ! :) A few comments from me:

For the hero section section:

• Could you add a <br> after "support" pls?

For the "Expanded Security Maintenance (ESM) for 20.04 LTS" section:

• Could you replace the current full-width image under ESM with this one? PM got back to me and is happy with the proposed change.

For the "What do you get with Ubuntu Pro for 20.04 LTS?" section:

• The CTA to the blog post can be removed (spoke to Sophie about this and it was a mistake in the file)
• Could you also add a HR above the first list item in the "Application packages" subsection?

For the "What customers say about ESM" section:

• There looks to be excess padding between the two testimonials – could you wrap the first testimonial in just a shallow pls?
• And for smaller screens, could you remove the shallow as I think this might help a little with hierarchy.
• I'd also say (again, for smaller screens) remove the hr above the person's name & role, though iirc Madhur mentioned that this is something that isn't easily fixed as it's embedded within the comp

For the blog section:

• Could you apply deep padding there, since it's the last section of the page?
• For tablets, can the items span full width as they're right-aligned atm with empty columns

And a quick question about tables on smaller screens:

Is there something we can do in place of truncation? No worries if not, just wanted to check with you

[mattea-turic]

Looks great, ty @petesfrench ! I'll +1, but just wanted to ask if you could add the line break after "support" in the h2 of the hero?

[britneywwc]

I can't find this link on the copy doc, is it missing?

[petesfrench]

@mattea-turic Where is this supposed to link to? I just guessed with this link

[mattea-turic]

@petesfrench Took from UX wireframe, I see now it wasn't in the copydoc, so I think you're good to just delete it. I'll just double-check with Sophie

[britneywwc]

Looks great thanks, +1 with some minor suggestions

[Sophie-32]

Will the capital H2 read the same as lowercase h2? Asking because this is the only tag thats capitalized.

[Sophie-32]

missing alt= for the images

[Sophie-32]

I pointed it out to PM, but they have two copydocs and right now the one linked here is not the correct one. This is the correct one and is the one linked in the JIra issue - https://docs.google.com/document/d/1lzxAL9Wt24m5-p5qG9y190rOg3FY5zVdKLYLlBoBcLU/edit?tab=t.0

[petesfrench]

Will the capital H2 read the same as lowercase h2? Asking because this is the only tag thats capitalized.

This is not capitalized for me in code or in the demo. I think it might be your browser

[petesfrench]

missing alt= for the images

All the images have alt="", is this not the correct practice to follow?