Showcase page refresh

[Simek]

Why

We plan to expose the link to this page in the top navbar, so I thought that a small design and data refresh before that exposure will be nice.

How

This PR refreshes the Showcase page design, content now spans to the same with as other custom pages, header and footer content has been moved to the separate sections.

The apps list also has been updated:

• partners apps are grouped at the top of the showcase: boxes includes partner logo - take from the official brand resources - and optional description/testimonial which need to be filled - I have no content for those places, so I have used Lorem Ipsum and one example there,
• the rest of the entries are shuffled on each render.

Additionally I have updated few of the existing entries, outdated icons (using app assets from on of the stores page) and I have removed few entries, as established when reassessing the current Showcase content.

Tests

The changes have been tested by running docs website locally. Mobile layout has been tested on the real device.

Preview

Deploy: https://deploy-preview-3235--react-native.netlify.app/showcase

Full page screenshots

[netlify[bot]]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	c01928ca68b841a2c0015f192f241ef004f236d5
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/62e7e11301d7b90008bdf746
😎 Deploy Preview	https://deploy-preview-3235--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify[bot]]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	7a64c9102cad8de5e3b2d08bfe7fc3c8ca35a016
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/630662349aa5180009b1ba0c
😎 Deploy Preview	https://deploy-preview-3235--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[lunaleaps]

Some UI points:

• Can we scale down the app icon sizes (on the showcase page), they are quite large in relation to the company logo. Perhaps they could be similar size to the home page apps?

• Can we remove the drop shadows on the company boxes? I don't see us putting drop shadows on any other content that has borders. I think adding drop shadows on the app icons is a great addition

Something like:

[Simek]

Can we scale down the app icon sizes (on the showcase page), they are quite large in relation to the company logo.

The icons size did not change from the currently deployed showcase, I can try to reduce the sizing a bit, but I think that similar size to the pinned apps on home page will be too small.

Can we remove the drop shadows on the company boxes?

I was iterating on this design, and initially, the company boxes have no shadows but then then I have added one for icons and went with same style for boxes, but I agree that it's not a pattern or style that we use anywhere else on the website. I have also experimented with no borders and altered background section like on the home page, but it doesn't look good. Going to remove the shadow, please let me know if this looks fine after that change.

[lunaleaps]

Thanks @Simek! -- sorry for the delay, I also tried it out and added a screenshot to my comment above. Generally, I'm looking for the page to take less vertical space

[Simek]

@lunaleaps Can you check the preview deploy, when the updated version with the latest commit will be deployed, and let me know if the changes improved the appearance and address the concerns you have? I have reduce the icons size from 100px to 80px and tweaked spacing a bit.

Also, as stated before, to reduce the vertical space taken even more we can "stick" the "Learn more" button to the bottom border of the app tile. Would you like to see change like this in?

Preview

[lunaleaps]

Great thank you @Simek! I do like the sticky "learn more" -- and I guess if there was no "learn more" link, the height would be fixed so things stay flushed?

Some other nits (in order of importance)

• Fix dark mode, we probably want the background to be the same color as the header?
• Can we +1 to number of showcase-icons in each breakpoint? Like for example, I think we should fit 3 in here
• Changes to the header to take up less vertical space
  • Can we change the black header paddingTop, paddingBottom: 20 -- or something similar to other pages -- I notice they all have around 20px at top (example)
  • Update the text to not have a <br />
  • Update the "React Native" text to be white
  • There looks like an undefined CSS class
• There's a certain width where there is no margin on the company section border screenshot

If you agree, I can also take a stab at these updates -- or we can do them in a follow-up.

[Simek]

Thank you for the review and suggestions @lunaleaps! 👍

I do like the sticky "learn more" -- and I guess if there was no "learn more" link, the height would be fixed so things stay flushed?

Height of the row is determined by the highest element and rest is stretched to match it. I will change the "Lear More" button styling in next commit.

Fix dark mode, we probably want the background to be the same color as the header?

I think this is the expected results, since we use theme variables. You can see that even on Home page the header and darker section on the home page have the different colors.

Can we +1 to number of showcase-icons in each breakpoint? Like for example, I think we should fit 3 in here

Hmm, I'm afraid that then entries will be too cramped/narrow. Below you can see the minim width for displaying 3 tiles now, if we switch to 4 in there we can end up with 3 lines titles, which will lead to extended vertical space taken.

Can we change the black header paddingTop, paddingBottom: 20 -- or something similar to other pages -- I notice they all have around 20px at top (example)

The hero header uses the generic styles Section component styles, like all section on the homepage. We can alter that padding, but it will require adding custom CSS overwrites, not a fan of this approach, but can do that if you insist.

Update the text to not have a <br />

The idea here was to add some kind of illustration on the right side, but until we do not have an asset which we can use there, it will be fine to remove <br/>.

Update the "React Native" text to be white

This styling was inspired based on home page again, can alter that, but I personally prefer the highlight color.

There looks like an undefined CSS class

Nice catch, this will be fixed soon. 🙂

There's a certain width where there is no margin on the company section border screenshot

Again nice catch, this was not intended, will fix it in the next commit.

[lunaleaps]

Thanks @Simek for the detailed responses!

Re: dark mode - Sounds good. Re: showcase icons per breakpoint - okay let's keep it as is then. Re: hero header - Can we remove it as a header and have it flat on the background? Similar to our docs? Re: React Native color - Similar to previous point, if we keep it as a hero header I can see what you mean but I think the information/content there now is very low value, I'm not sure we need to highlight it since our company/app logos are already the highlight.

Other than that, these changes look good to me! I think these UI changes are the last thing before we can land this?

[kelset]

Other than that, these changes look good to me! I think these UI changes are the last thing before we can land this?

I think so :) let's gooooo 🥳