[docs] Refine and polish out Templates page (mui#43131)

docs/data/material/getting-started/templates/blog/Blog.js

@@ -45,7 +45,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

docs/data/material/getting-started/templates/blog/Blog.tsx

@@ -53,7 +53,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

docs/data/material/getting-started/templates/landing-page/LandingPage.js → docs/data/material/getting-started/templates/marketing-page/MarketingPage.js

@@ -17,7 +17,7 @@ import Features from './components/Features';
 import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
-import getLPTheme from './getLPTheme';
+import getMPTheme from './getMPTheme';
 
 function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
   return (
@@ -63,10 +63,10 @@ ToggleCustomTheme.propTypes = {
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default function LandingPage() {
+export default function MarketingPage() {
   const [mode, setMode] = React.useState('light');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const LPtheme = createTheme(getLPTheme(mode));
+  const MPTheme = createTheme(getMPTheme(mode));
   const defaultTheme = createTheme({ palette: { mode } });
 
   const toggleColorMode = () => {
@@ -78,7 +78,7 @@ export default function LandingPage() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? LPtheme : defaultTheme}>
+    <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
       <CssBaseline />
       <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
       <Hero />

docs/data/material/getting-started/templates/landing-page/LandingPage.tsx → docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx

@@ -16,7 +16,7 @@ import Features from './components/Features';
 import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
-import getLPTheme from './getLPTheme';
+import getMPTheme from './getMPTheme';
 
 interface ToggleCustomThemeProps {
   showCustomTheme: Boolean;
@@ -63,10 +63,10 @@ function ToggleCustomTheme({
   );
 }
 
-export default function LandingPage() {
+export default function MarketingPage() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const LPtheme = createTheme(getLPTheme(mode));
+  const MPTheme = createTheme(getMPTheme(mode));
   const defaultTheme = createTheme({ palette: { mode } });
 
   const toggleColorMode = () => {
@@ -78,7 +78,7 @@ export default function LandingPage() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? LPtheme : defaultTheme}>
+    <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
       <CssBaseline />
       <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
       <Hero />

docs/data/material/getting-started/templates/landing-page/README.md → docs/data/material/getting-started/templates/marketing-page/README.md

@@ -1,15 +1,15 @@
-# Landing page template
+# Marketing page template
 
 ## Usage
 
 <!-- #default-branch-switch -->
 
 1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
-3. Import and use the `LandingPage` component.
+3. Import and use the `MarketingPage` component.
 
 ## Demo
 
 <!-- #default-branch-switch -->
 
-View the demo at https://next.mui.com/material-ui/getting-started/templates/landing-page/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/marketing-page/.

docs/data/material/getting-started/templates/landing-page/getLPTheme.js → docs/data/material/getting-started/templates/marketing-page/getMPTheme.js

@@ -198,7 +198,7 @@ const getDesignTokens = (mode) => ({
   },
 });
 
-export default function getLPTheme(mode) {
+export default function getMPTheme(mode) {
   return {
     ...getDesignTokens(mode),
     components: {

docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx → docs/data/material/getting-started/templates/marketing-page/getMPTheme.tsx

@@ -217,7 +217,7 @@ const getDesignTokens = (mode: PaletteMode) => ({
   },
 });
 
-export default function getLPTheme(mode: PaletteMode): ThemeOptions {
+export default function getMPTheme(mode: PaletteMode): ThemeOptions {
   return {
     ...getDesignTokens(mode),
     components: {

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

@@ -1,17 +1,17 @@
 ---
 productId: material-ui
-title: 9+ Free React Templates
+title: New Free React Templates
 ---
 
 # React Templates
 
-<p class="description">Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React landing page, and more.</p>
+<p class="description">Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React marketing page, and more.</p>
 
 <!-- #default-branch-switch -->
 
 ## Free templates
 
-Our curated collection of free Material UI templates includes dashboards, landing pages, sign-in and sign-up pages, a blog, a checkout flow, and more.
+Our curated collection of free Material UI templates includes dashboards, marketing pages, sign-in and sign-up pages, a blog, a checkout flow, and more.
 They can be combined with one of the [example projects](/material-ui/getting-started/example-projects/) to form a complete starter.
 
 Sections of each layout are clearly defined either by comments or use of separate files,

docs/pages/material-ui/getting-started/templates/landing-page.js → docs/pages/material-ui/getting-started/templates/marketing-page.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
-import LandingPage from 'docs/data/material/getting-started/templates/landing-page/LandingPage';
+import MarketingPage from 'docs/data/material/getting-started/templates/marketing-page/MarketingPage';
 
 export default function Page() {
   return (
     <AppTheme>
-      <LandingPage />
+      <MarketingPage />
     </AppTheme>
   );
 }