Repository: material-ui
Issue: [material-ui][docs] Refine the free templates page
Labels: umbrella,package: material-ui,design

### Summary

After wrapping up the first round of design refresh that this https://github.com/mui/material-ui/issues/37555 issue is going for, we'll do a global revision so that every template feels like part of a single app. So, this issue gathers small adjustment opportunities that have surfaced through working on all templates so far.

### Tasks

- [x] 1. Remove links and interdependencies on different templates https://github.com/mui/material-ui/pull/41941
- [x] 2. Also make the thumbnails follow the docs appearance mode, like those in [the Joy UI page](https://mui.com/joy-ui/getting-started/templates/) https://github.com/mui/material-ui/pull/41947
- [x] 3. Turn heavy customized components into a `styled` component. https://github.com/mui/material-ui/pull/41845
- [x] 4. Ensure accessible labels for the inputs https://github.com/mui/material-ui/pull/41696
- [x] 5. Standardize the focus style across all interactive elements https://github.com/mui/material-ui/pull/41696
- [x] 6. Review and refine the colors and tokens of the custom theme https://github.com/mui/material-ui/pull/41696
- [x] 7. Turn the logos into SVG https://github.com/mui/material-ui/pull/41696
- [x] 8. Make the templates respect the user's system appearance mode (light or dark) by default https://github.com/mui/material-ui/pull/43220
- [x] 9. Persist the light/dark mode between loads https://github.com/mui/material-ui/pull/43220
- [x] 10. Add a theme selector on the Templates page, so visitors can pick how to see the live preview. https://github.com/mui/material-ui/pull/43396
  For example https://ui.shadcn.com/blocks
  <img width="199" alt="SCR-20240601-sctl" src="https://github.com/mui/material-ui/assets/3165635/956cdd19-b0f4-4cd6-a434-16a015c7ae34">
- [x] 11. Group templates with custom themes and the ones without one yet https://github.com/mui/material-ui/pull/43220
- [x] 12. Rename the “landing page” template given it looks more like a home page https://github.com/mui/material-ui/pull/43131
- [x] 13. Refine `paper` component and its usage (remove `background-image` and use `background-color`) https://github.com/mui/material-ui/pull/43220
- [x] 14. Allow to click on the image to open it. Uploading Screen Recording 2024-06-10 at 18.14.18.mov… https://github.com/mui/material-ui/pull/43131

https://github.com/mui/material-ui/assets/3165635/31b0d917-535d-49fc-aea1-1ece6331fcc8

- [x] 15. Have all the custom theme demos share the exact same theme JavaScript structure https://github.com/mui/material-ui/pull/43220
- [x] Fix #42610
- [x] 22. Fix the theme toggle that overlaps the content on the page, e.g. https://deploy-preview-42605--material-ui.netlify.app/material-ui/getting-started/templates/sign-in/.
- [x] 17. Have a CRUD dashboard with a side navigation: https://deploy-preview-42001--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/ feels much more useful to @oliviertassinari than https://deploy-preview-42101--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/. I think we should still have it as the first one. See the Google Analytics events, and then swap the order/retire it once it gets dethroned 🥇 by another one in use metrics.

More generally, @oliviertassinari thinks that having this type of layout https://blocks.tremor.so/templates would be amazing, I would want to use this 👌✨:

<img width="692" alt="SCR-20240601-shhh" src="https://github.com/mui/material-ui/assets/3165635/977c76b7-5178-4f99-827d-f19ce2853739">

- [ ] 18. Run https://pagespeed.web.dev/ on all the templates. Make sure there are no true positive warnings are reported.
- [ ] 19. Run w3c validator with all the templates, have no true positive warnings https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-41845--material-ui.netlify.app%2Fmaterial-ui%2Fgetting-started%2Ftemplates%2Fsign-in%2F reported.
- [ ] 16. Merge all the sources of the templates into a single file. Make it much easier to copy and paste into your project (might demand a bit more research but likely to be much better)
- [ ] 20. Have https://chromewebstore.google.com/detail/lhdoppojpmngadmnindnejefpokejbdd report no errors
- [ ] 21. Have no console warning or errors

<img width="444" alt="SCR-20240610-tvam" src="https://github.com/mui/material-ui/assets/3165635/f203bb21-4290-4fd2-9fc1-d7e3d4c72d9f">

- [ ] 23. Support export to StackBlitz/CodeSandbox like https://mui.com/joy-ui/getting-started/templates/ do

<img width="482" alt="SCR-20240703-rndg" src="https://github.com/mui/material-ui/assets/3165635/73c04250-ba4a-4bc3-82ea-ac7177f4fefc">

More context on why it could be valuable: https://github.com/mui/material-ui/issues/14604. It becomes something they can then just click on export, and have it working as a starting point.

But to look at the GA event first on Joy UI to see the use. It's only a guess, maybe nobody uses it.

- [ ] 24. Add tokens for the 25 shadow levels so it won't spread strings into arrays, and result in many 1-character strings in the target array (reported on #43369, decision made on https://github.com/mui/material-ui/pull/43369#issuecomment-2315613131)
- [ ] 25. Refactor the theme to use the new `colorSchemes` API (based on https://github.com/mui/material-ui/issues/41469#issuecomment-2318989742)
- [ ] 26. Share the TemplateFrame files through all templates 

- [ ] Fix #42609

### Search keywords

template