[material-ui][docs] Adjust the Templates card design (mui#41450)

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

@@ -5,13 +5,13 @@ title: 9+ 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 admin panel, 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 landing page, and more.</p>
 
 <!-- #default-branch-switch -->
 
 ## Free templates
 
-Our curated collection of free Material UI templates includes dashboards, sign-in and sign-up pages, a blog, a checkout flow, and more.
+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.
 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/src/modules/components/MaterialFreeTemplatesCollection.js

@@ -1,14 +1,11 @@
 /* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
-import NextLink from 'next/link';
-import { alpha } from '@mui/material/styles';
 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 Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
 import Visibility from '@mui/icons-material/Visibility';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 import { useTranslate } from '@mui/docs/i18n';
@@ -80,105 +77,70 @@ export default function Templates() {
  const t = useTranslate();
 
  return (
- <Grid container spacing={2} sx={{ pt: 2, pb: 4 }}>
+ <Grid container spacing={2} sx={{ py: 2 }}>
  {layouts(t).map((layout) => (
- <Grid item xs={12} sm={4} key={layout.title}>
+ <Grid item xs={12} sm={6} key={layout.title}>
  <Card
  variant="outlined"
  sx={{
  height: '100%',
- background: 'background.paper',
- borderColor: 'divider',
  display: 'flex',
  flexDirection: 'column',
+ borderColor: 'divider',
  }}
  >
- <Box
+ <CardMedia
+ component="img"
+ image={layout.src}
+ title={layout.title}
  sx={{
- overflow: 'auto',
- position: 'relative',
+ aspectRatio: '16 / 9',
+ objectPosition: 'top',
  borderBottom: '1px solid',
  borderColor: 'divider',
  }}
- >
- <CardMedia
- component="a"
- href={layout.href}
- image={layout.src}
- title={layout.title}
- rel=""
- target="_blank"
- sx={(theme) => ({
- height: 0,
- pt: '65%',
- '&:focus-visible': {
- borderRadius: 1,
- outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
- outlineOffset: '-8px',
- },
- })}
- />
- <NextLink href={layout.href} passHref legacyBehavior>
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
- <Link
- tabIndex={-1}
- aria-hidden
- data-ga-event-category="material-ui-template"
- data-ga-event-label={layout.title}
- data-ga-event-action="preview-img"
- sx={(theme) => ({
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'column',
- gap: 1,
- transition: '0.15s',
- position: 'absolute',
- width: '100%',
- height: '100%',
- top: 0,
- left: 0,
- bgcolor: alpha(theme.palette.primary[50], 0.5),
- backdropFilter: 'blur(4px)',
- opacity: 0,
- '&:hover, &:focus-visible': {
- opacity: 1,
- },
- ...theme.applyDarkStyles({
- bgcolor: alpha(theme.palette.common.black, 0.8),
- }),
- })}
- >
- <Visibility />
- <Typography
- fontWeight="bold"
- color="text.primary"
- sx={{ textDecorationLine: 'underline' }}
- >
- View live preview
- </Typography>
- </Link>
- </NextLink>
- </Box>
- <Box sx={{ p: 2, flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
- <Typography component="h3" variant="subtitle1" fontWeight="bold" gutterBottom>
+ />
+ <Box sx={{ p: 2, pt: 1.5 }}>
+ <Typography component="h3" variant="body1" fontWeight="semiBold">
  {layout.title}
  </Typography>
  <Typography variant="body2" color="text.secondary" mb={2}>
  {layout.description}
  </Typography>
- <Button
- component="a"
- href={layout.source}
- size="small"
- fullWidth
- variant="outlined"
- color="secondary"
- startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
- sx={{ mt: 'auto' }}
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: { xs: 'column', sm: 'row' },
+ gap: 1,
+ mt: 'auto',
+ }}
  >
- {t('sourceCode')}
- </Button>
+ <Button
+ component="a"
+ href={layout.source}
+ size="small"
+ fullWidth
+ variant="outlined"
+ color="secondary"
+ startIcon={<Visibility sx={{ mr: 0.5 }} />}
+ data-ga-event-category="material-ui-template"
+ data-ga-event-label={layout.title}
+ data-ga-event-action="preview-img"
+ >
+ Live preview
+ </Button>
+ <Button
+ component="a"
+ href={layout.source}
+ size="small"
+ fullWidth
+ variant="outlined"
+ color="secondary"
+ startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
+ >
+ Source code
+ </Button>
+ </Box>
  </Box>
  </Card>
  </Grid>

packages/mui-docs/src/translations/translations.json

@@ -62,7 +62,7 @@
  "joy-variant": "To learn how to add your own variants, check out <a href='/joy-ui/customization/themed-components/#extend-variants'>Themed components—Extend variants</a>."
  }
  },
- "landingPageDescr": "A responsive landing page layout with many common sections.",
+ "landingPageDescr": "A responsive landing page layout with common sections found in marketing pages.",
  "landingPageTitle": "Landing page",
  "searchButton": "Search…",
  "algoliaSearch": "What are you looking for?",
@@ -75,13 +75,13 @@
  "toggleSettings": "Toggle settings drawer"
  },
  "backToTop": "Scroll back to top",
- "blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx.",
+ "blogDescr": "A polished blog page layout. Markdown support is courtesy of markdown-to-jsx.",
  "blogTitle": "Blog",
  "bundleSize": "Bundle size",
  "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
  "cancel": "Cancel",
  "cdn": "or use a CDN.",
- "checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.",
+ "checkoutDescr": "A step-by-step checkout flow with an adaptable (or optional) number of steps.",
  "checkoutTitle": "Checkout",
  "clickToCopy": "Click to copy",
  "close": "Close",
@@ -176,7 +176,7 @@
  "showSource": "Show code",
  "showTSSource": "Show TypeScript source",
  "signInDescr": "A simple sign-in page using text fields, buttons, checkboxes, links, and more.",
- "signInSideDescr": "A simple sign-in page with a two-column layout using text fields, buttons, and more.",
+ "signInSideDescr": "A sign-in page with a two-column layout using text fields, buttons, and more.",
  "signInSideTitle": "Sign-in side",
  "signInTitle": "Sign-in",
  "signUpDescr": "A simple sign-up page using text fields, buttons, checkboxes, links, and more.",