[material-ui][docs] Add stray fixes around a few pages

docs/data/material/discover-more/related-projects/related-projects.md

@@ -25,7 +25,7 @@ Feel free to submit a pull request!
 
 ### Layout
 
-- [@mui-treasury/layout](https://mui-treasury.com/layout/): Components to handle the overall layout of a page. Check out examples such as [a reactjs.org clone](https://mui-treasury.com/layout/clones/reactjs/).
+- [@mui-treasury/layout](https://mui-treasury.com/?path=/docs/layout-introduction--docs): Components to handle the overall layout of a page. Check out examples such as [a reactjs.org clone](https://mui-treasury.com/?path=/story/layout-app-reactlegacy--react-legacy).
 
 ### Image
 

docs/data/material/getting-started/example-projects/example-projects.md

@@ -4,7 +4,7 @@
 
 ## Official examples
 
-The following starter projects are all available in the [`/examples`](https://github.com/mui/material-ui/tree/master/examples) folder of the Material UI repository.
+The following starter projects are all available in the [`/examples`](https://github.com/mui/material-ui/tree/master/examples) folder of the Material UI GitHub repository.
 These examples feature Material UI paired with other popular React libraries and frameworks, so you can skip the initial setup steps and jump straight into building.
 
 Not sure which to pick?

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

@@ -16,7 +16,7 @@ Material UI is beautiful by design and features a suite of customization option
 
 :::info
 Material UI v5 supports Material Design v2.
-Adoption of v3 is tentatively planned for Material UI v6—see [the release schedule](https://mui.com/versions/#release-schedule).
+Adoption of Material Design 3 is tentatively planned for Material UI v6—see [the announcement blog post](/blog/2023-material-ui-v6-and-beyond/) for more details.
 You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates.
 :::
 

docs/src/modules/components/MaterialShowcase.js

@@ -8,6 +8,7 @@ import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import GitHubIcon from '@mui/icons-material/GitHub';
+import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
 import { alpha } from '@mui/material/styles';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
@@ -479,22 +480,23 @@ export default function Showcase() {
 
   return (
     <React.Fragment>
-      <ToggleButtonGroup
-        size="small"
-        color="primary"
-        value={sortFunctionName}
-        onChange={handleChangeSort}
-        exclusive
-        sx={{ mb: 3, display: 'flex', alignItems: 'center' }}
-      >
-        <Typography variant="body2" color="text.secondary" fontWeight={600} sx={{ mr: 1 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
+        <Typography variant="body2" color="text.secondary" fontWeight="semiBold">
           {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
           {'Sort by:'}
         </Typography>
-        <ToggleButton value="similarWebVisits">{t('traffic')}</ToggleButton>
-        <ToggleButton value="dateAdded">{t('newest')}</ToggleButton>
-        <ToggleButton value="stars">{t('stars')}</ToggleButton>
-      </ToggleButtonGroup>
+        <ToggleButtonGroup
+          size="small"
+          color="primary"
+          value={sortFunctionName}
+          onChange={handleChangeSort}
+          exclusive
+        >
+          <ToggleButton value="similarWebVisits">{t('traffic')}</ToggleButton>
+          <ToggleButton value="dateAdded">{t('newest')}</ToggleButton>
+          <ToggleButton value="stars">{t('stars')}</ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
       <Grid container spacing={3}>
         {stableSort(
           appList.filter((item) => item[sortFunctionName] !== undefined),
@@ -511,10 +513,10 @@ export default function Showcase() {
                   p: 2,
                   gap: 2,
                   borderRadius: 1,
-                  backgroundColor: `${alpha(theme.palette.grey[50], 0.4)}`,
+                  backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`,
                   borderColor: 'divider',
                   ...theme.applyDarkStyles({
-                    backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.3)}`,
+                    backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`,
                     borderColor: 'divider',
                   }),
                 })}
@@ -529,23 +531,22 @@ export default function Showcase() {
                     title={app.title}
                     sx={(theme) => ({
                       height: 'auto',
-                      borderRadius: 0.5,
+                      borderRadius: '6px',
                       bgcolor: 'currentColor',
                       border: '1px solid',
-                      borderColor: 'grey.100',
+                      borderColor: 'divider',
                       color: 'grey.100',
                       ...theme.applyDarkStyles({
-                        borderColor: 'grey.700',
                         color: 'primaryDark.900',
                       }),
                     })}
                   />
                 </a>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                   <Typography
                     component="h2"
-                    variant="h6"
-                    fontWeight={600}
+                    variant="body1"
+                    fontWeight="semiBold"
                     sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
                   >
                     <span>{app.title}</span>
@@ -559,10 +560,17 @@ export default function Showcase() {
                       </IconButton>
                     ) : null}
                   </Typography>
-                  <Typography variant="body2" color="text.secondary">
+                  <Typography variant="body2" color="text.secondary" flexGrow={1}>
                     {app.description}
                   </Typography>
-                  <Typography variant="caption" display="block" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    fontWeight="semiBold"
+                    color="text.secondary"
+                    mt={1}
+                    sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
+                  >
+                    <CalendarMonthRoundedIcon sx={{ fontSize: 17, opacity: 0.8 }} />
                     {app.dateAdded}
                   </Typography>
                 </Box>

docs/src/modules/components/MaterialUIExampleCollection.js

@@ -127,7 +127,7 @@ export default function MaterialUIExampleCollection() {
                 : { children: example.src })}
             />
             <div>
-              <Typography fontWeight="semiBold" className="algolia-lvl3">
+              <Typography fontWeight="medium" className="algolia-lvl3">
                 {example.name}
               </Typography>
               <Box
@@ -138,7 +138,7 @@ export default function MaterialUIExampleCollection() {
                   display: 'flex',
                   flexWrap: 'wrap',
                   alignItems: 'center',
-                  mt: 0.2,
+                  mt: 0.5,
                   gap: 0.2,
                 }}
               >