[website] Toolpad landing page design upgrade

[danilo-leal]

This PR is aimed at doing some design upgrades to the page to mostly support the Beta launch. Additionally, I think we can also use it to close the following issues:

• Closes #904
• Closes #2335

https://deploy-preview-2266--mui-toolpad-docs.netlify.app/toolpad/

To be fixed:

• [x] The code in the hero section is currently hidden, that needs to be shown
• [x] In the "Use cases" section, handle the scenario when all accordions are closed
• [x] Add the GitHub star counter

[danilo-leal]

I'm working on the "use cases" section and thought about doing something different, given it was previously a grid of cards with tiny images. Thought about having an accordion on one side and an image on the other. The first accordion would be open by default and then, as you open the one in the middle, the first closes, and the image changes to match the content. Not sure how to pull this off engineering-wise, so would love to get some guidance here 😬

From an interaction standpoint, it's super similar to what we have on several pages ⎯ the "ProductSwitcher" component. But thought we could experiment with a different interaction/vision spin here given each section has somewhat of a long description.

[Janpot]

thanks for looking into this!

Not sure how to pull this off engineering-wise, so would love to get some guidance here

For the accordion, I believe this demo does what you describe: https://mui.com/material-ui/react-accordion/#controlled-accordion.

For the image we can select a url based on that same expanded variable like:

const USE_CASE_IMAGES = new Map([
  [ 'panel1', '/use/case/1.png' ],
  [ 'panel2', '/use/case/2.png' ],
  [ 'panel3', '/use/case/3.png' ]
])

// ...

  // in the component
  <img src={USE_CASE_IMAGES.get(expanded)} />

[prakhargupta1]

One drawback of this design is that all 3 sections (hero, features and usecases) are going to have a redundant pattern; some text on the left and some media on the right.

[bharatkashyap]

Looks great @danilo-leal! Quick suggestions (I can send a commit if you think this makes sense)

• Play the typing animation words sequentially instead of randomising the order (since that could cause repetition)

• Autoplay the hero demo video?

[danilo-leal]

@bharatkashyap yeah, love these! Feel free to push it!

[bharatkashyap]

@bharatkashyap yeah, love these! Feel free to push it!

Added

Play the typing animation words sequentially instead of randomising the order (since that could cause repetition

but skipped autoplaying the hero video since its moved back down to a section below the immediate landing, where I feel it's more okay to let users click if they want to play it.

[Janpot]

Thought about having an accordion on one side and an image on the other.

Wondering how we'd deal with this on mobile. I saw the mui.com homepage transitions to a carousel for similar UI.

[danilo-leal]

These last few changes simplified a bit the Use cases section by ditching the accordion approach and going for a simpler 2-column grid layout (which then becomes one column on mobile)! I think now, overall, there are these pending tasks:

• Clean up the video play/pause button: thought of adding custom buttons there that are a bit more attractive than the native HTML controls. It's a bit of a trade-off, too, because we hide the video bar + the video length, which is arguably a bad thing. My train of thought there was to have the play button disappear once it clicked and the pause button appear ⎯ or maybe upon hover, so it doesn't change its positioning?
• Add the GitHub stars: definitely need help wiring this thing up 😬
• Cleaning up styles and unused files!

[prakhargupta1]

The new use case design looks good. In the grooming call, for the hero section, we discussed that it would be a good idea to have the code and UI snippet on the right (like we were exploring here). The reason is that the ideal video viewing experience should be in a big frame as there are so many elements in Toolpad UI, so let's better keep it big by default.

In the meeting notes, we also explored how GitHub star button could be added. With some customization, let's see how it looks. CC: @bharatkashyap To implement it further.

[bharatkashyap]

(These screenshots are now outdated since we've merged the new docs theme, but they convey the functional point regardless)

Added a few commits (feel free to revert if we don't want to go in this direction) which do the following:

1. Added the code snippet back to the landing page. I was struggling with placing the image and the code together in a way that neither one would obscure the other. In the end, I decided to try this approach: (This seemed to allow both to have undivided attention and represent the idea of "turn your" API into UI well: I updated the image to match the functions in the code snippet to really drive home the point)

   (The screenshot has queries on the left for better readability of the queries. I have a PR to bring queries on the left almost ready anyway, so I think it should be fine to put this image up)

2. The same experience follows on mobile devices, but medium sized viewports see a slightly different view with a more traditional side-by-side hero image:

Mobile	Tablet

4. Also adds a traditional GitHub stars count+button with a link to the repo:

5. Also edited the play/pause buttons to remain in the same place (but the pause only shows on hover), and added some margin/padding to the video as well:

[prakhargupta1]

I think the choices are great overall! The toggle seems like a good trade-off 👍 Some observations:

1. Users would be more likely to click on the count of stars which will take them to the stargazers view. Is it possible to use this variant that uses the word 'Star' next to the GitHub icon?
2. The video is cropped in full-screen view. I think many users would want to see it in full screen. Can we fix it?

Showing queries to the left in the screenshot, will create some confusion as it will not reciprocate in the examples. Will it be ready by the next release?

[bharatkashyap]

1. Users would be more likely to click on the count of stars which will take them to the stargazers view. Is it possible to use this variant that uses the word 'Star' next to the GitHub icon?

Added a "Star" call to action next to the button:

2. The video is cropped in full-screen view. I think many users would want to see it in full screen. Can we fix it?

Added full screen (and mute) buttons to the video:

[danilo-leal]

Quick question for y'all: should we make the copy on this section focused on only collecting emails? The "import in your codebase" and "using a simple command..." sounds a bit off, especially given... we're not displaying the said simple command 😅 We could just have the "sign up..." as the main heading.

[bharatkashyap]

Quick question for y'all: should we make the copy on this section focused on only collecting emails? The "import in your codebase" and "using a simple command..." sounds a bit off, especially given... we're not displaying the said simple command 😅 We could just have the "sign up..." as the main heading.

I agree about the mismatch between sign up and bringing Toolpad to your own codebase messaging, but this looks a little bit off as well:

[danilo-leal]

Iterated with something like this but I'm also a bit confused/wondering because: on the Hero section, there's a button with an installation command, right? Then, this very last section talks about "ahead of the official release"/"early access". If I can already install it, what more would I get with the release? Like, why do I need to sign up if the installation command is right over there?

Another possibility would be having the hero section buttons again here ("Get started" & install).

[prakhargupta1]

Changed it to:

Also, the black background seems to be an error. It is not there in the production version: https://mui.com/toolpad/

• [x] I'll further fix the hero image, width of both side panels need to be reduced in Figma.

[danilo-leal]

About the darker dark mode, it's not an error! We recently published a design facelift on the Core repo ⎯ Toolpad should be updated once it gets aligned with what is on the Core!

[prakhargupta1]

About the darker dark mode, it's not an error! We recently published a design facelift on the Core repo ⎯ Toolpad should be updated once it gets aligned with what is on the Core!

Sorry, I meant that in the light mode, it should come like: which is not the case in the preview.

[Janpot]

Nice!

Few remarks from my side:

• noticed this section doesn't have a light mode:

  

• The switcher is very nice, but I don't find it very discoverable. Would it make sense to:

  • Make the screenshot clickable as well to toggle the switch
  • Animate it automatically (when not being hovered)

• Would it make sense to make the whole GitHub button clickable?

No real hard blockers though

[prakhargupta1]

I have 2 concerns related to the video:

1. Currently (even in production), the width gets trimmed on the screens where the height exceeds 16:9 ratio. Like my Mac is 16:10 and to fit the height, the video is zoomed in and the sides overflow. Can we fix it?
2. What should be the ideal size of the video? Currently, it is 16MB, do we have room to increase it to support better quality of the video?

[danilo-leal]

The last section not having a light mode is intentional! Not only is consistent with other pages throughout the website, but it also gives some visual break on the white background when in light mode (though it is not as good as the inverse because there would then be a section that out of nowhere hurts the eye 😬).

Love the idea of having the switch turn automatically! I wonder if using a switch would be the best way if we move that way ⎯ maybe tabs where you can see a progress line that signals it is going to swap to the next? Anyhow, added labels to it so it is a bit more predictable.

@prakhargupta1 what do you mean about the first point regarding the video? 🤔 I wasn't able to figure out/reproduce the video behaving that way...

[prakhargupta1]

@prakhargupta1 what do you mean about the first point regarding the video? 🤔 I wasn't able to figure out/reproduce the video behaving that way...

When I play video from https://mui.com/toolpad in fullscreen on my Mac. It shows as below (notice the left side)

[mbrookes]

Looking good, but should I see "Turn your into UIs" for a couple of seconds while the images load? Perhaps it should start with "Turn your APIs into UIs", and animate from there?

There's also a layout shift when the Toolpad logo loads.

[danilo-leal]

Hopefully, the logo layout shift is better now! Also made the typing animation slightly faster so the time to see "API", and therefore have the sentence make sense, is shorter ⎯ but if we want to have API just render by default and then run the animation, might need some engineering support there to tweak the function! (cc @bharatkashyap 😬)

[bharatkashyap]

but if we want to have API just render by default and then run the animation, might need some engineering support there to tweak the function! (cc @bharatkashyap 😬)

Added that!

[bharatkashyap]

Experimenting with auto-switch (paused on hover):

https://github.com/mui/mui-toolpad/assets/19550456/5366f428-18bf-4831-8464-140c37970525

[mbrookes]

If it's not too late to edit the video, could we find some music that doesn't jump part way through (around the 54 second mark)? Also, it might be nice to use the same font for the text overlays as the website.

I'd prefer to have the controls enabled by default, so that you can see the progress bar and know how much of the video is left to play.

Autoplay would be good if it only starts when fully scrolled into view, and stops when scrolled partially out of view, as well has having the pause/play button.

[bharatkashyap]

If it's not too late to edit the video, could we find some music that doesn't jump part way through (around the 54 second mark)? Also, it might be nice to use the same font for the text overlays as the website.

Agree with this, the music and the font definitely seems a bit out of place.

Also added examples to demonstrate all three types, and synced the text animation with that of the hero image/code:

(Increased the delay a bit since I thought that helped actually focus on each of them for a bit, but open to correcting this)

https://github.com/mui/mui-toolpad/assets/19550456/0b9e8f03-baa8-43a2-99f2-bc6823408061

[prakhargupta1]

If it's not too late to edit the video, could we find some music that doesn't jump part way through (around the 54 second mark)? Also, it might be nice to use the same font for the text overlays as the website.

Yeah, that's where the music fell short, and I had to reuse part of it. This one was free to use in the public domain. I am looking for better tracks that can be used for commercial use. Found: https://www.storyblocks.com/audio/stock/unstoppable-inspiration-347570992.html (but the licensing process 'For business' seems time-consuming as they'll send the quote)

[bharatkashyap]

I imagine something like this is the benchmark: https://twitter.com/shadcn/status/1673690479349895169 (He mentions Screenflow with Video Action, I’m sure exploration can reveal other free tools which can achieve something similar.)

Yeah, that's where the music fell short, and I had to reuse part of it. This one was free to use in the public domain. I am looking for better tracks that can be used for commercial use. Found: https://www.storyblocks.com/audio/stock/unstoppable-inspiration-347570992.html (but the licensing process 'For business' seems time-consuming as they'll send the quote)

No Copyright Sounds might be helpful here: https://ncs.io/music-search?q=&genre=&mood=5&version=instrumental

[prakhargupta1]

No copy right sounds might be helpful here: https://ncs.io/music-search?q=&genre=&mood=5&version=instrumental

Thanks for sharing this. For now, I have used https://pixabay.com/music/corporate-motivational-day-112790/ (with a license certificate, it is free to use) Kept it mellow as the video content requires focus.

[danilo-leal]

One thing I found to be a bit confusing on this current iteration of the hero animation is that even though the Code <> UI flip animation stops when I hover them, the code files keep switching... So, if I hovered to see the code in a bit more detail, and scroll it down, it suddenly scrolls me back up because the file/code all changed. I wonder if we should maybe put some tabs in the code block, which clearly shows we're displaying multiple files?!

https://github.com/mui/mui-toolpad/assets/67129314/414d909c-7534-43d6-9367-db3125667049

[bharatkashyap]

One thing I found to be a bit confusing on this current iteration of the hero animation is that even though the Code <> UI flip animation stops when I hover them, the code files keep switching... So, if I hovered to see the code in a bit more detail, and scroll it down, it suddenly scrolls me back up because the file/code all changed. I wonder if we should maybe put some tabs in the code block, which clearly shows we're displaying multiple files?!

Screen.Recording.2023-07-21.at.07.48.05.mov

Agreed on the tabs, also this behaviour is unintended - I'll look into why it changes file if focused. Regardless, we should have the tabs anyway. I'll add them

[bharatkashyap]

I've added the tabs as well, here's a quick peak:

Also have fixed the file changing when hovering over it, that should be better.

Pending sanity checks by everyone on the deploy preview, this should be okay to merge.

[apedroferreira]

Pending sanity checks by everyone on the deploy preview, this should be okay to merge.

I can't switch tabs at all by clicking them, is that intentional? Other than that LGTM.

[bharatkashyap]

Pending sanity checks by everyone on the deploy preview, this should be okay to merge.

I can't switch tabs at all by clicking them, is that intentional?

Other than that LGTM.

Intentional! It works in the medium sized screen mode, when the animation is paused and code/images are placed side by side

[danilo-leal]

@bharatkashyap running the risk of complicating things a bit even more 😬 but I think it would be nice to be able to click on the tabs and then have the images be changed, in the background, according to the tab. It seems like it would be a natural thing to hover over the code, try to click the tab, see that it doesn't work, and get a bit "huh?" 😅

What do you think, would that be possible?

[bharatkashyap]

@bharatkashyap running the risk of complicating things a bit even more 😬 but I think it would be nice to be able to click on the tabs and then have the images be changed, in the background, according to the tab.

Added! (The issue was that the bundled logic of the Tabs component doesn't expect the elements to be flipped 180° when calculating where to position the tabs indicator. Had to wrest control of the indicator position and override.)

https://github.com/mui/mui-toolpad/assets/19550456/479ccd17-390e-43c6-be53-ef781903de8b

[bharatkashyap]

On the video, @prakhargupta1 do you think it's possible to make it align more with the rest of the landing page? I feel that there is a divergence in two areas:

1. The emphasis on "use your own code" isn't nearly the same. The hero section of the landing page focuses on this entirely, whereas this is the last feature that is covered in the video. If I came on to this landing page, I would be interested to see the complete story after looking at the hero demo, only to feel a bit lost 20 seconds into the video.

2. (Smaller) It'd be great if the video could use the same fonts and colours as the rest of the page.

Given that we usually only get one shot to make a user watch our video, I think it matters to do it well the first time.

[prakhargupta1]

I have used Helvetica Neue as it was there in the font family of the hero copy. I think the video is fine as it sequentially takes a user from adding an API, to adding a custom component, to adding a code query and then finishing the app. It should give a brief overview in 2 mins.