[draft][material-ui][docs] Revamp templates page

[zanivan]

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

Closes #41469

⚠️ Work in progress ⚠️
This is an initial draft and further improvements are expected based on feedback and visual explorations.

Summary

This PR is a draft to explore various design alternatives for the templates page. The goal is to address as many points mentioned in issue #41469 as possible, ensuring a seamless and user-friendly experience.

Objectives:

Enhance the overall user experience on the templates page, providing a greater flexibility and functionality when interacting with templates and custom themes.

Key Features:

1. Download Custom Theme: Users can now download custom themes directly from the templates page.
2. Template Preview: Users can view a preview of a template before selecting or downloading it.
3. Select Template Theme: Users have the option to choose a theme for their template before opening it.
4. Preview Selected Theme: A preview of the selected theme is provided, giving users a clear idea of how the template will look with the chosen theme.
5. Navigate Template Folder: Allow users to easily navigate through the template folder, making it simpler to find and select the desired template.
6. Guides: Provide how-to-guides for using the templates and the themes.

Implementation Details:

Design improvements have been made to enhance the visual appeal and usability of the templates page. The full fledge prototype is available on Figma (feel free to leave comments)

Preview

👉 https://deploy-preview-42710--material-ui.netlify.app/material-ui/getting-started/templates/

Next Steps:

• Review the design and functionality changes.
• Gather feedback about the templates' files organization.
• Gather feedback about the features, and how to build them.
• Create the how-to-guides for using the templates and themes.

[siriwatknp]

@zanivan By clicking "Download theme", do you expect to download the whole project files or just a theme file?

[zanivan]

@zanivan By clicking "Download theme", do you expect to download the whole project files or just a theme file?

Hey @siriwatknp, I think we still have to discuss this part. I'd love some feedback on the best approach for the template folder and theme structure. We discussed on this thread in the past, that the best approach would be to have a theme file per template folder—however, this is making things hard to maintain to keep consistent.

On the other hand, when we have too many components and more complex cases, like the dashboard template, we separated the theme in more files.

Summing things up, I would like to understand first what would be the best way to organize the theme file and the templates' folder, before defining this flow, and then compose a how-to-guide to teach users how to use this theme.

---

What I think we can focus in the meantime:

1. Building the navigation bar for the template preview;
2. Insert the templates on TOC

3. Grouping templates under the same category: