[website] Adjust site to add Toolpad on the homepage

[bharatkashyap]

• I have followed (at least) the PR section of the contributing guide.

Preview: https://deploy-preview-38604--material-ui.netlify.app/

This PR was originally created to add Toolpad to the website's homepage, but we've ended up using it as an opportunity to do some other stray fixes that would benefit the main goal. However, to separate things and have better traceability, we chose to remove the Toolpad content from this one and put it on a dedicated follow-up PR while maintaining this PR as just a "preparatory" sort of phase.

[mui-bot]

Netlify deploy preview

https://deploy-preview-38604--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against e7654a1

[oliviertassinari]

Quick feedback:

1. The design doesn't work on my screen 14" sceeen, I need to scroll down to click on Toolpad

but then it's truncated.

2. I don't feel the section gives clarity to visitors about what Toolpad is about. I think showing the low-code editor in action could be one way to make it clear.

[danilo-leal]

Nice one! I had quickly experimented with adding Toolpad before when y'all opened the issue and anticipated Olivier's point 1 there. Looking at it again, this might be the opportunity to remove the Design kits + Templates from there (as something on the same level as Core & X) and add them as sections within the Material UI page (and later on, similar ones for Joy UI). That way, we gain way more space for the products that sit at the same level, and therefore, Toolpad!

I can make this one in parallel ⎯ @oliviertassinari; we discussed doing this in the past, but I just want to reiterate and see we're still on the same page.

About point 2, yeah,I think that at least a video would be great. A static image doesn't communicate much...

[oliviertassinari]

1. his might be the opportunity to remove the Design kits + Templates from there (as something on the same level as Core & X) and add them as sections within the Material UI page (and later on, similar ones for Joy UI).

It makes sense.

Base UI could likely benefit from templates as well. We don't have any, but we might in the future.

2. https://retool.com/ like could maybe work better

Screen.Recording.2023-08-23.at.12.58.25.mov

[prakhargupta1]

Bringing this PR back into the discussion:

1. With Templates and design kit now inside the Material UI page, can we accommodate Toolpad here? Also, will it be just Core, X and Toolpad? With the recent introduction of new products on core side, is there something additional that we want to showcase here?

2. With the introduction of Toolpad core, we should not show a drag and drop UI, instead a finished admin panel and the use of data providers in code. I'll check this part.

[danilo-leal]

With Templates and design kit now inside the Material UI page, can we accommodate Toolpad here? Also, will it be just Core, X and Toolapd? With the recent introduction of new products on core side, is there something additional that we want to showcase here

I want to remove "MUI Core" at some point and replace it with everything inside this conceptual umbrella: Material UI, Base UI, Pigment CSS, and possibly Joy UI (to be defined after we scope out v7). We'll probably need to redesign this section a bit to pull that off. However, I'm visualizing a more holistic website redesign this year to go alongside the brand stuff we're carrying out with the consultancy. That's why I'm not necessarily pushing to do that immediately.

In any case, for now, if we want to add Toolpad there, I'd potentially drop Templates and Design kits and replace them with a Store item, which encapsulates both of them (at least for now). That'd keep us with a four-item section, which fits well with the current design. Hope this perspective helps!

[prakhargupta1]

potentially drop Templates and Design kits and replace them with a Store item, which encapsulates both of them (at least for now).

Great! This will help. Thanks.
We'll work on the Toolpad core landing page changes, screenshot, and code snippet in the coming weeks. We can close it then, for now, the perspective helps 🤝

[bharatkashyap]

@danilo-leal We're looking to get this done inside the Toolpad team, and I noted your suggestion of a common entry for the Design Kits and Templates. Does it still make sense to do this? I'm asking because we wouldn't be able to link to https://mui.com/templates/ from this section anymore (we would instead link to the Store) and would need to create a new combined design asset

[danilo-leal]

Does it still make sense to do this?

I think so, yes! Is there any concern regarding swapping out the Design Kits/Templates item for a Store item? How does this impact Toolpad specifically?

[bharatkashyap]

I'm asking because we wouldn't be able to link to https://mui.com/templates/ from this section anymore (we would instead link to the Store) and would need to create a new combined design asset

How does this impact Toolpad specifically?

The question in my mind is essentially, what do we put in these red boxes for the combined store item and who comes up with them:

[danilo-leal]

Ah, gotcha. No need to worry about it; I'll take on the design. I'll add commits soon to the PR if that's the case.

[danilo-leal]

Each tab would present a different image and code snippet, and the images instead would have this magnifying glass thingy built-in (it wouldn't be something that appears based on an interaction). We could have something highlighting the code, yeah, but I was thinking the entire code snippet we showcase there should be relevant to the highlighted part of the app's UI. Does this make sense?

[Janpot]

Does this make sense?

Yes, we're aligned. It's exactly what I'd want, just with the right design-sauce over it 🙂.

[danilo-leal]

Okay—just pushed the structure/design for the tabs approach! Let me know (feel free to send it over via Slack) the images we want to use in each tab panel (if possible, it'd be great to have one for light and dark mode, as opposed to just a light one), and in what part of it I should add the magnifying thingy on. Also, feel free to change the code snippets and tab names! 👍 Getting finally closer to wrapping this PR up!

[Janpot]

Thank you @danilo-leal. Quickly trying it out. My first impressions on the UX are:

• In essence the screenshot + code is the tab content. The tab header sits right in the middle. That feels a bit unintuitive to me. It took me quite some time to understand what this UI wanted me to do. Would it make sense to rather put the tabs at the top?

  

  Or even the code at the top

  

• I think we should add a small explainer for each of the tabs, Just a one-liner, can even just go as a comment in the code. That would work very well with the second screenshot from above as that would really make you read the UI from top to bottom.

[danilo-leal]

Quick update here for context: chatted with Bharat in private, and given I pushed a lot of general website changes on this PR—even though most of them were the product of adding Toolpad to the homepage—we still felt like it was better to separate things into two PRs, for better traceability in the future. So, in summary:

• changed this PR's title and description so it reflects the fact that this one is about adding "preparatory" changes
• will open a new one for adding all the Toolpad-specific content we were riffing on here