[docs] Add Toolpad Core template link (#44415)

Co-authored-by: Prakhar Gupta <[email protected]>

docs/data/material/getting-started/templates/templates.md

@@ -20,6 +20,10 @@ You can toggle through each of these style options in the top right corner of th
 Sections of each layout are defined either by comments or use of separate files, so you can extract parts of a page (such as a hero unit or a footer) for reuse in other pages.
 These templates can be combined with one of the [example projects](/material-ui/getting-started/example-projects/) to form a complete starter app.
 
+:::info
+If you're looking to build internal tools and dashboards quickly, head to [Toolpad Core examples](http://mui.com/toolpad/core/introduction/examples/#featured-examples) for functional apps with authentication, routing and theming already integrated.
+:::
+
 If you see any room for improvement, please feel free to open an [issue](https://github.com/mui/material-ui/issues/new/choose) or a [pull request](https://github.com/mui/material-ui/pulls) on GitHub.
 
 {{"component": "modules/components/MaterialFreeTemplatesCollection.js"}}
@@ -40,9 +44,13 @@ You can find complete templates and themes like those shown below in the <a href
 
 ## Toolpad Core (beta)
 
-[Toolpad Core](https://mui.com/toolpad/core/introduction/) is a set of components designed for assembling dashboards and internal tools more efficiently.
-It builds on top of Material UI to provide sophisticated UI components with full-stack functionality, such as the [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/) shown below.
-
-This is a great option if you don't want to start building from scratch but don't need a prebuilt template.
+If you're looking to build internal tools and dashboards fast, but don't want to start building from scratch, you can find examples of functional dashboards – with authentication, routing, and theming already integrated – in the [featured examples](http://mui.com/toolpad/core/introduction/examples/#featured-examples) section of the Toolpad Core docs.
 
-{{"demo": "../../components/app-bar/DashboardLayoutBasic.js", "height": 400, "iframe": true, "defaultExpanded": false, "bg": "inline"}}
+<a href="https://mui.com/toolpad/core/introduction/examples/#featured-examples">
+<span class="only-light-mode">
+<img src="/static/images/toolpad-core-template-light.png" alt="The Toolpad Core template comes with authentication, navigation and theming integrated" width="2280" height="1200" style="display: block;" />
+</span>
+<span class="only-dark-mode">
+<img src="/static/images/toolpad-core-template-dark.png" alt="The Toolpad Core template comes with authentication, navigation and theming integrated" width="2280" height="1200" style="display: block;"/>
+</span>
+</a>

docs/public/_redirects

@@ -530,6 +530,8 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
 /:lang/x/* https://material-ui-x.netlify.app/:lang/x/:splat 200
 
 ## Toolpad
+/toolpad/core/templates/nextjs-dashboard/_next/* https://toolpad-core-nextjs-themed.vercel.app/_next/:splat 200
+/toolpad/core/templates/nextjs-dashboard/* https://toolpad-core-nextjs-themed.vercel.app/:splat 200
 /static/toolpad/* https://mui-toolpad-docs.netlify.app/static/toolpad/:splat 200
 /toolpad/_next/* https://mui-toolpad-docs.netlify.app/_next/:splat 200
 /toolpad/* https://mui-toolpad-docs.netlify.app/toolpad/:splat 200

docs/src/modules/components/MaterialFreeTemplatesCollection.js

@@ -20,53 +20,53 @@ import stackBlitz from 'docs/src/modules/sandbox/StackBlitz';
 
 const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`;
 
-function layouts(translatation) {
+function layouts(translation) {
   return [
     {
-      title: translatation('dashboardTitle'),
-      description: translatation('dashboardDescr'),
+      title: translation('dashboardTitle'),
+      description: translation('dashboardDescr'),
       href: '/material-ui/getting-started/templates/dashboard/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/dashboard`,
       hasDarkMode: true,
     },
     {
-      title: translatation('marketingPageTitle'),
-      description: translatation('marketingPageDescr'),
+      title: translation('marketingPageTitle'),
+      description: translation('marketingPageDescr'),
       href: '/material-ui/getting-started/templates/marketing-page/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/marketing-page`,
       hasDarkMode: true,
     },
     {
-      title: translatation('checkoutTitle'),
-      description: translatation('checkoutDescr'),
+      title: translation('checkoutTitle'),
+      description: translation('checkoutDescr'),
       href: '/material-ui/getting-started/templates/checkout/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/checkout`,
       hasDarkMode: true,
     },
     {
-      title: translatation('signInTitle'),
-      description: translatation('signInDescr'),
+      title: translation('signInTitle'),
+      description: translation('signInDescr'),
       href: '/material-ui/getting-started/templates/sign-in/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in`,
       hasDarkMode: true,
     },
     {
-      title: translatation('signInSideTitle'),
-      description: translatation('signInSideDescr'),
+      title: translation('signInSideTitle'),
+      description: translation('signInSideDescr'),
       href: '/material-ui/getting-started/templates/sign-in-side/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in-side`,
       hasDarkMode: true,
     },
     {
-      title: translatation('signUpTitle'),
-      description: translatation('signUpDescr'),
+      title: translation('signUpTitle'),
+      description: translation('signUpDescr'),
       href: '/material-ui/getting-started/templates/sign-up/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-up`,
       hasDarkMode: true,
     },
     {
-      title: translatation('blogTitle'),
-      description: translatation('blogDescr'),
+      title: translation('blogTitle'),
+      description: translation('blogDescr'),
       href: '/material-ui/getting-started/templates/blog/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/blog`,
       hasDarkMode: true,
@@ -75,11 +75,11 @@ function layouts(translatation) {
 }
 
 export default function MaterialFreeTemplatesCollection() {
-  const translatation = useTranslate();
+  const translation = useTranslate();
   const materialTemplates = sourceMaterialTemplates();
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, mb: 4 }}>
-      {layouts(translatation).map((layout, index) => {
+      {layouts(translation).map((layout, index) => {
         const templateId = layout.source.split('/').pop();
         const templateName = pascalCase(templateId);
         const item = materialTemplates.map.get(templateId);