Build page on /solutions/cloud-native-development

[minkyngkm]

Done

• Build page on /solutions/cloud-native-development
• Build a get in touch modal

QA

• Go to https://canonical-com-1577.demos.haus/solutions/cloud-native-development
• Compare page against Figma and copy doc
• Check the get in touch modal works fine

Issue / Card

Fixes #https://warthogs.atlassian.net/browse/WD-19255

[webteam-app]

Demo

Jenkins

demos.haus

[minkyngkm]

Hi @kim-isaac and @eliman11, this PR is ready for UX and design review. Please feel free to take a look at the demo when you are available. Thanks!

[kim-isaac]

Thanks @minkyngkm, I have some comments below:
You can check full comments on Figma.

• As I mentioned in Jira, this part should be hidden for now.

• For this part, could we use 2-4 column instead of 3-3?

-For tablet size

• For all blue highlighted sections(let us... / deply.../run your.../one subscription.../choose your...); could we use 50:50 with image like this telco/open-ran page?

-For mobile

• (seems like)Image container didn’t fully removed here, making additional margin. Could you remove it?
  (from this to next section)
• Also, can we skip 24px bottom margin like ‘Choose your app modernization journey’ section?
  (from this to ‘One subscription. No surprises.’ section)

• For all quote sections, could you remove bottom margin? (example below)

Thanks again and let me know if you have any questions!

[eliman11]

Thanks @minkyngkm, this looks great! Some comments from me:

• Missing phone number field specified on the copydoc https://docs.google.com/document/d/1kVGxq3d61X1mXOpbl8eKWzBieEZ8MkdxqKUUL9McFCs/edit?tab=t.0#heading=h.klua88mpt057
• Remove "Research shows 9 out of 10 companies prefer to pull packages from their OS." section for now as we don't have the CTA ready. Following the discussion on Figma
• "Read more on our blog ›" link returning an error
• Remove extra period at the end of the ESA quote ("We wanted one service provider..")
• Change the European Space Agency link at the bottom of the case study to link to https://canonical.com/case-study/esa instead. Commented on the copydoc
• Without changing the styling, remove h5 tag from the names under the quotes - these should be paragraphs

[minkyngkm]

Thanks @kim-isaac and @eliman11 for reviewing. I've addressed all your comments. Hopefully it looks better now! https://canonical-com-1577.demos.haus/solutions/cloud-native-development

[kim-isaac]

Thanks for addressing things @minkyngkm , It looks great! A few comments left for tablet size:

• Could we have the images also for Tablet?

• Could you make this a 50:50 layout as well?

That's all from visual side, thanks again!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 71.86%. Comparing base (08d9243) to head (e124827).
Report is 44 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1577   +/-   ##
=======================================
  Coverage   71.85%   71.86%           
=======================================
  Files          17       17           
  Lines        1464     1468    +4     
=======================================
+ Hits         1052     1055    +3     
- Misses        412      413    +1     

Flag	Coverage Δ
python	71.86% <ø> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[minkyngkm]

@kim-isaac sorry, all done! 🙏 https://canonical-com-1577.demos.haus/solutions/cloud-native-development

[kim-isaac]

@minkyngkm Thanks for arranging these super quickly! I’ll add +1

[petesfrench]

Is it needed to make the querySelectorAll a second time here?

[petesfrench]

Haven't looked into it, but would it be possible to add a check to the initial 'aria-controls' listener for forms to see if it has an associated form (with document.getElementById(targetControls)) before calling toggleModal, so it doesn't affect other elements with aria-controls?