WD-11736 build /pro/devices page

[minkyngkm]

Done

• Build /pro/devices page and its contact form

QA

• Go to /pro/devices
• Compare page against copy doc
• Check CTA button for the form

Issue / Card

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

[webteam-app]

Demo

Jenkins

demos.haus

[anthonydillon]

@lyubomir-popov we are missing a few scaled logo's here if you could help please?

[minkyngkm]

@lyubomir-popov I made a comment in the copy doc for the logos and this is the devices page I built, for your reference 🙏

[minkyngkm]

@leiaru-c the demo for the page is here 🙏

[leiaru-c]

Nice work! I have a couple of suggestions:

1/ Heading: It seems a bit off in terms of typography balance. Would it be possible to use the same layout that the /pro homepage on the header so it looks like this:

2/ "For secure and compliant IoT device deployment" section: I think the current setup feels a bit cluttered. I would suggest to try a layout like this one:

3/ Logo section: As mentioned in standup, some of these logos are too big and would need to be scaled down. Try to aim for something similar to this size (as seen on/pro):

4/ "Develop at speed with the Ubuntu ecosystem" section: These icons are getting phased out, so maybe try this layout:

5/ "Meet your compliance requirements faster" section: Same thing as before, I think removing the shields icon would be better.

6/ "Device management included" section: The layout is not consistent with other similar sections, I would suggest trying something like: This would make it closer to what we have on /pro.

7/"Backed by leading ODMs" section: As is, this section takes a big space in the page and is not very consistent with what we have on /pro. Try to use this layout instead: Replace the "used by pro" in the screenshot with the "Backed by leading ODMs" section title and it should follow the same logic :)

8/"Resources" section: This section is a bit difficult to parse. We can look to what was done on /pro for inspiration. I would suggest to try doing something like this:

so it's similar to this:

In this case, the links for each section should be converted in this link CTA format with the line under the sections to draw the eye on the different options :)

8/Contact us: Finally on this section, I would actually make it part of the previous section like this:

[anthonydillon]

QA is ok but logos need to be fixed