chore: refresh /security/fips

[edisile]

Done

Refresh /security/fips

• Figma
• copydoc

QA

• visit https://ubuntu-com-15667.demos.haus/security/fips
  • Be sure to test on mobile, tablet and desktop screen sizes
  • check that the YT embed at the top work correctly
  • check that the tabs in the "Security compliance in action" and "Resources" work correctly

to QA locally

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: http://0.0.0.0:8001/security/fips
  • Be sure to test on mobile, tablet and desktop screen sizes
  • check that the YT embed at the top work correctly
  • check that the tabs in the "Security compliance in action" and "Resources" work correctly

Issue / Card

Fixes WD-27255

Help

QA steps - Commit guidelines

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

❌ Patch coverage is 28.57143% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 49.70%. Comparing base (27e6401) to head (a774708).
⚠️ Report is 11 commits behind head on main.

Files with missing lines	Patch %	Lines
webapp/app.py	28.57%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15667      +/-   ##
==========================================
+ Coverage   48.20%   49.70%   +1.50%     
==========================================
  Files          37       37              
  Lines        5595     5804     +209     
==========================================
+ Hits         2697     2885     +188     
- Misses       2898     2919      +21     

Files with missing lines	Coverage Δ
webapp/app.py	88.43% <28.57%> (+1.05%)	⬆️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mattea-turic]

Thank you @edisile for this page!

Comments:

Hero:

• There's a typo here – pls remove "FIPS for" at the start of the line (but add a <br> after "compliance" to keep "with Ubuntu Pro" on the second line)

The benefits of FIPS for Ubuntu

• Pls use the 50/50 variant of the tiered list, so its layout is consistent with the other sections on tablet

FIPS compliance everywhere

• For the linked logo section, pls use the images from the assets server, i.e.

(btw @eliman11, I actually like the smaller ones here vs. the Figma lol, but PMs usually aren't so happy when they're so small, so dyt we should maintain what we've got now, or use assets from Figma? Ik it's a visual q, but thought I could use with some input from UX too :p

• @eliman11 On tablet and mobile, I think we should hide the images as they're just way too big. Wdyt? We would have to adjust the copy, though, so it's obvious where it would lead to.
• Otherwise, if we do keep the images, there is something off with the padding as there seems to be no spacing between the image container and the link text. This is how it should look.

Resources

• Also use the images I linked in the assets server here, as they're sharper than the ones you've currently used
• Same issue with no spacing between container and text for the whitepapers. If you wrap the link text in a paragraph, it should solve the issue, as it has top and bottom padding.

Thanks!

[eliman11]

Thanks @edisile, and thanks for trying to align the title heights in the resources section 😅 Just a couple of minor changes from me -

• Could you capitalize FIPS in page title - I edited this on the metadata table on the copydoc
• Tab heading should be "Lucid Software" instead of "Lucid"

(btw @eliman11, I actually like the smaller ones here vs. the Figma lol, but PMs usually aren't so happy when they're so small, so dyt we should maintain what we've got now, or use assets from Figma? Ik it's a visual q, but thought I could use with some input from UX too :p

@mattea-turic idk why I prefer the bigger logos :') But it's a visual decision so will leave it up to you, I don't have a strong preference either way. I would vote to keep them on mobile though to limit the customization needed

[edisile]

@mattea-turic @eliman11 thank you for the quick review! I addressed your comments, please let me know if there's any other issue

[eliman11]

One super minor change - could you capitalize "Software" like the stakeholder did on the copydoc? I'll +1 anyway though

[mattea-turic]

@edisile

Looks great, thank you!

Just one more thing – the linked logo block looks a little funky on mobile and tablet still (small images). I think(?) AWS is okay, but the other two are too small

Will +1, though, as all else is good :-)