diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js index 6b424a03cf334e..3353c895fe0ca0 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.js +++ b/docs/data/material/getting-started/templates/blog/Blog.js @@ -45,7 +45,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { Custom theme - Material Design 2 + + Material Design 2 + ); diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx index 9a594bc5da48c9..f873309e44ff40 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.tsx +++ b/docs/data/material/getting-started/templates/blog/Blog.tsx @@ -53,7 +53,9 @@ function ToggleCustomTheme({ Custom theme - Material Design 2 + + Material Design 2 + ); diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js similarity index 93% rename from docs/data/material/getting-started/templates/landing-page/LandingPage.js rename to docs/data/material/getting-started/templates/marketing-page/MarketingPage.js index 7452a774a757fc..b7642a0debc67f 100644 --- a/docs/data/material/getting-started/templates/landing-page/LandingPage.js +++ b/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 ( - + diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx similarity index 93% rename from docs/data/material/getting-started/templates/landing-page/LandingPage.tsx rename to docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx index 22518445b61a31..cb2ab2d1fd6fc5 100644 --- a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx +++ b/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('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 ( - + diff --git a/docs/data/material/getting-started/templates/landing-page/README.md b/docs/data/material/getting-started/templates/marketing-page/README.md similarity index 79% rename from docs/data/material/getting-started/templates/landing-page/README.md rename to docs/data/material/getting-started/templates/marketing-page/README.md index 618f90ce5939ef..d8000c3c170ef6 100644 --- a/docs/data/material/getting-started/templates/landing-page/README.md +++ b/docs/data/material/getting-started/templates/marketing-page/README.md @@ -1,4 +1,4 @@ -# Landing page template +# Marketing page template ## Usage @@ -6,10 +6,10 @@ 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 -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/. diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js rename to docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/FAQ.js b/docs/data/material/getting-started/templates/marketing-page/components/FAQ.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/FAQ.js rename to docs/data/material/getting-started/templates/marketing-page/components/FAQ.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/FAQ.tsx b/docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/FAQ.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.js b/docs/data/material/getting-started/templates/marketing-page/components/Features.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Features.js rename to docs/data/material/getting-started/templates/marketing-page/components/Features.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Features.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/Features.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/Footer.js b/docs/data/material/getting-started/templates/marketing-page/components/Footer.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Footer.js rename to docs/data/material/getting-started/templates/marketing-page/components/Footer.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Footer.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Footer.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/Footer.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/marketing-page/components/Hero.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Hero.js rename to docs/data/material/getting-started/templates/marketing-page/components/Hero.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Hero.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/Highlights.js b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Highlights.js rename to docs/data/material/getting-started/templates/marketing-page/components/Highlights.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/Highlights.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Highlights.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/LogoCollection.js b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/LogoCollection.js rename to docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/LogoCollection.tsx b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/LogoCollection.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Pricing.js rename to docs/data/material/getting-started/templates/marketing-page/components/Pricing.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.js b/docs/data/material/getting-started/templates/marketing-page/components/SitemarkIcon.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.js rename to docs/data/material/getting-started/templates/marketing-page/components/SitemarkIcon.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.tsx b/docs/data/material/getting-started/templates/marketing-page/components/SitemarkIcon.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/SitemarkIcon.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Testimonials.js rename to docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js rename to docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx similarity index 100% rename from docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx rename to docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js b/docs/data/material/getting-started/templates/marketing-page/getMPTheme.js similarity index 99% rename from docs/data/material/getting-started/templates/landing-page/getLPTheme.js rename to docs/data/material/getting-started/templates/marketing-page/getMPTheme.js index 069d596eaef30f..fd9f7dc44cbea9 100644 --- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js +++ b/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: { diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/marketing-page/getMPTheme.tsx similarity index 99% rename from docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx rename to docs/data/material/getting-started/templates/marketing-page/getMPTheme.tsx index 0354fc9a749004..33f05318c88803 100644 --- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx +++ b/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: { diff --git a/docs/data/material/getting-started/templates/sticky-footer/README.md b/docs/data/material/getting-started/templates/sticky-footer/README.md deleted file mode 100644 index 773a5d0039f2d3..00000000000000 --- a/docs/data/material/getting-started/templates/sticky-footer/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# Sticky footer template - -## Usage - - - -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, @emotion/styled, @emotion/react. -3. Import and use the `StickyFooter` component. - -## Demo - - - -View the demo at https://next.mui.com/material-ui/getting-started/templates/sticky-footer/. diff --git a/docs/data/material/getting-started/templates/sticky-footer/StickyFooter.js b/docs/data/material/getting-started/templates/sticky-footer/StickyFooter.js deleted file mode 100644 index 95f745f78ce14e..00000000000000 --- a/docs/data/material/getting-started/templates/sticky-footer/StickyFooter.js +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; -import Link from '@mui/material/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} - -// TODO remove, this demo shouldn't need to reset the theme. -const defaultTheme = createTheme(); - -export default function StickyFooter() { - return ( - - - - - - Sticky footer - - - {'Pin a footer to the bottom of the viewport.'} - {'The footer will move as the main element of the page grows.'} - - Sticky footer placeholder. - - ({ - py: 3, - px: 2, - mt: 'auto', - backgroundColor: theme.palette.grey[200], - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[800], - }), - })} - > - - - My sticky footer can be found here. - - - - - - - ); -} diff --git a/docs/data/material/getting-started/templates/sticky-footer/StickyFooter.tsx b/docs/data/material/getting-started/templates/sticky-footer/StickyFooter.tsx deleted file mode 100644 index 95f745f78ce14e..00000000000000 --- a/docs/data/material/getting-started/templates/sticky-footer/StickyFooter.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; -import Link from '@mui/material/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} - -// TODO remove, this demo shouldn't need to reset the theme. -const defaultTheme = createTheme(); - -export default function StickyFooter() { - return ( - - - - - - Sticky footer - - - {'Pin a footer to the bottom of the viewport.'} - {'The footer will move as the main element of the page grows.'} - - Sticky footer placeholder. - - ({ - py: 3, - px: 2, - mt: 'auto', - backgroundColor: theme.palette.grey[200], - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[800], - }), - })} - > - - - My sticky footer can be found here. - - - - - - - ); -} diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md index 9e46486f534c8d..e9b5fdf912ee99 100644 --- a/docs/data/material/getting-started/templates/templates.md +++ b/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 -

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.

+

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.

## 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, diff --git a/docs/pages/material-ui/getting-started/templates/landing-page.js b/docs/pages/material-ui/getting-started/templates/marketing-page.js similarity index 58% rename from docs/pages/material-ui/getting-started/templates/landing-page.js rename to docs/pages/material-ui/getting-started/templates/marketing-page.js index 7f5fead33fe6c8..177ec35e9d9f88 100644 --- a/docs/pages/material-ui/getting-started/templates/landing-page.js +++ b/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 ( - + ); } diff --git a/docs/pages/material-ui/getting-started/templates/pricing.js b/docs/pages/material-ui/getting-started/templates/pricing.js deleted file mode 100644 index 04190482011b5e..00000000000000 --- a/docs/pages/material-ui/getting-started/templates/pricing.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import AppTheme from 'docs/src/modules/components/AppTheme'; -import Pricing from 'docs/data/material/getting-started/templates/pricing/Pricing'; - -export default function Page() { - return ( - - - - ); -} diff --git a/docs/pages/material-ui/getting-started/templates/sticky-footer.js b/docs/pages/material-ui/getting-started/templates/sticky-footer.js deleted file mode 100644 index db77803fa207a5..00000000000000 --- a/docs/pages/material-ui/getting-started/templates/sticky-footer.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import AppTheme from 'docs/src/modules/components/AppTheme'; -import StickyFooter from 'docs/data/material/getting-started/templates/sticky-footer/StickyFooter'; - -export default function Page() { - return ( - - - - ); -} diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg index b3127b76314cea..2ef4cdd429c3d3 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default-dark.jpg new file mode 100644 index 00000000000000..fc42564b74d55f Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default.jpg new file mode 100644 index 00000000000000..2f6765027b9c11 Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg index 8e460574f0092f..8602c69d5463b6 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg index 757db10a465c72..2b2380b1f94ace 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg index d8445bd102a2bd..2b85f45aeb613d 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg index 597b691069894c..0191119f5054c2 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg index e32c4c76e23eef..623b252da4fc8b 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg index 8cc207d452df51..683712b7317051 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg index fd243e5f1a98c1..597768414978bf 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg index d9fb0a97e2668a..a4512fa3bc13d8 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg index 611776393c21d1..a909b761a206f3 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg new file mode 100644 index 00000000000000..8c8bad019e3878 Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default-dark.jpg new file mode 100644 index 00000000000000..1572006c64210a Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default.jpg new file mode 100644 index 00000000000000..4420e2f0a77c4f Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg new file mode 100644 index 00000000000000..c7de8e48de8df1 Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg index c2ceb592c99ca4..a6d2506368b66e 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg index 95840967f062aa..b39a9bea96c145 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg index 16e9c9f91ef68c..32e52308f4b763 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg index 242a29717ca13a..46c24502ce84b6 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg index 166ccb0a1e9963..8cad4eaceabf39 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg index 194e3d89f7df15..0600910613ffda 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg index 4055193cdc18f9..f2919a2cb4c747 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg index a3bb91bae4ef10..1d86d5a5ebd1e9 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg index ac792ce8a08ebb..23d1c50d996ae7 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg index e00870ecf8969a..157c97b792edb1 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg index 52fd7cf327784c..2d309028199121 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg index dc2394f521ff12..8eed7dc49c676a 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg deleted file mode 100644 index 7cc6aa8c5e6a78..00000000000000 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg and /dev/null differ diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js index a8e09df4015baa..f66c5806e2d415 100644 --- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js +++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js @@ -4,10 +4,12 @@ import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import CardMedia from '@mui/material/CardMedia'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; +import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; import Visibility from '@mui/icons-material/Visibility'; import CodeRoundedIcon from '@mui/icons-material/CodeRounded'; +import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded'; import { useTranslate } from '@mui/docs/i18n'; const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`; @@ -22,10 +24,10 @@ function layouts(translatation) { hasDarkMode: true, }, { - title: translatation('landingPageTitle'), - description: translatation('landingPageDescr'), - href: '/material-ui/getting-started/templates/landing-page/', - source: `${sourcePrefix}/docs/data/material/getting-started/templates/landing-page`, + title: translatation('marketingPageTitle'), + description: translatation('marketingPageDescr'), + href: '/material-ui/getting-started/templates/marketing-page/', + source: `${sourcePrefix}/docs/data/material/getting-started/templates/marketing-page`, hasDarkMode: true, }, { @@ -61,12 +63,7 @@ function layouts(translatation) { description: translatation('blogDescr'), href: '/material-ui/getting-started/templates/blog/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/blog`, - }, - { - title: translatation('stickyFooterTitle'), - description: translatation('stickyFooterDescr'), - href: '/material-ui/getting-started/templates/sticky-footer/', - source: `${sourcePrefix}/docs/data/material/getting-started/templates/sticky-footer`, + hasDarkMode: true, }, ]; } @@ -77,7 +74,7 @@ export default function Templates() { return ( {layouts(translatation).map((layout) => ( - + - ({ - aspectRatio: '16 / 9', - objectPosition: 'top', - borderBottom: '1px solid', - borderColor: 'divider', - ...theme.applyStyles('dark', { - content: 'var(--src)', - }), - })} - style={{ - '--src': layout.hasDarkMode - ? `url(/static/screenshots${layout.href.replace(/\/$/, '')}-dark.jpg)` - : `url(/static/screenshots${layout.href.replace(/\/$/, '')}.jpg)`, + .MuiCardMedia-root': { + filter: 'blur(4px)', + }, + '&:hover > .MuiButtonBase-root': { + opacity: 1, + }, }} - /> - - + > + ({ + aspectRatio: '16 / 9', + objectPosition: 'top', + transition: 'filter 0.3s', + ...theme.applyStyles('dark', { + content: 'var(--src)', + }), + })} + style={{ + '--src': layout.hasDarkMode + ? `url(/static/screenshots${layout.href.replace(/\/$/, '')}-dark.jpg)` + : `url(/static/screenshots${layout.href.replace(/\/$/, '')}.jpg)`, + }} + /> + + + + {layout.title} - + {layout.description} Themed components—Extend variants." } }, - "landingPageDescr": "A responsive landing page layout with common sections found in marketing pages.", - "landingPageTitle": "Landing page", + "marketingPageDescr": "A responsive marketing page layout with common sections found in marketing pages.", + "marketingPageTitle": "Marketing page", "searchButton": "Search…", "algoliaSearch": "What are you looking for?", "appFrame": { diff --git a/test/regressions/index.js b/test/regressions/index.js index 932c9dda6b3635..c919e6c39513be 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -82,7 +82,7 @@ const blacklist = [ 'docs-getting-started-templates-sign-in-side/getSignInSideTheme.png', // Theme file 'docs-getting-started-templates-sign-up/getSignUpTheme.png', // Theme file 'docs-getting-started-templates-checkout/getCheckoutTheme.png', // Theme file - 'docs-getting-started-templates-landing-page/getLPTheme.png', // Theme file + 'docs-getting-started-templates-marketing-page/getMPTheme.png', // Theme file 'docs-joy-getting-started-templates/TemplateCollection.png', // No public components 'docs-joy-core-features-automatic-adjustment/ListThemes.png', // No public components 'docs-joy-tools/PaletteThemeViewer.png', // No need for theme tokens @@ -193,7 +193,7 @@ const blacklist = [ 'docs-discover-more-languages', // No public components 'docs-discover-more-showcase', // No public components 'docs-discover-more-team', // No public components - 'docs-getting-started-templates-landing-page/LandingPage.png', // Flaky image loading + 'docs-getting-started-templates-marketing-page/MarketingPage.png', // Flaky image loading 'docs-getting-started-templates-blog', // Flaky random images 'docs-getting-started-templates-checkout/AddressForm.png', // Already tested in docs-getting-started-templates-checkout/Checkout 'docs-getting-started-templates-checkout/PaymentForm.png', // Already tested in docs-getting-started-templates-checkout/Checkout