[docs] Improve "Example projects" page design

docs/data/material/getting-started/example-projects/ExampleCollection.js

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import Stack from '@mui/material/Stack';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+
+const examples = [
+  {
+    name: 'Next.js',
+    label: 'View JS example',
+    tsLabel: 'View TS example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-next',
+    tsLink:
+      'https://github.com/mui/material-ui/tree/master/examples/material-next-ts',
+    src: '/static/images/examples/next.svg',
+  },
+  {
+    name: 'Create React App',
+    label: 'View JS example',
+    tsLabel: 'View TS example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra',
+    tsLink:
+      'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts',
+    src: '/static/images/examples/cra.svg',
+  },
+  {
+    name: 'Remix',
+    label: 'View example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-remix-ts',
+    src: '/static/images/examples/remix.svg',
+  },
+  {
+    name: 'Tailwind CSS',
+    label: 'View example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts',
+    src: '/static/images/examples/tailwindcss.svg',
+  },
+  {
+    name: 'Vite.js',
+    label: 'View JS example',
+    tsLabel: 'View TS example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-vite',
+    src: '/static/images/examples/vite.svg',
+  },
+  {
+    name: 'styled-components',
+    label: 'View JS example',
+    tsLabel: 'View TS example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components',
+    tsLink:
+      'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts',
+    src: '/static/images/examples/styled.png',
+  },
+  {
+    name: 'Gatsby',
+    label: 'View example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-gatsby',
+    src: '/static/images/examples/gatsby.svg',
+  },
+  {
+    name: 'Preact',
+    label: 'View example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-preact',
+    src: '/static/images/examples/preact.svg',
+  },
+  {
+    name: 'CDN',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-via-cdn',
+    label: 'View example',
+  },
+  {
+    name: 'Express.js (server-rendered)',
+    label: 'View example',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-express-ssr',
+    src: '/static/images/examples/express.png',
+  },
+];
+
+export default function ExampleCollection() {
+  return (
+    <Grid container spacing={2}>
+      {examples.map((example) => (
+        <Grid key={example.name} item xs={12} sm={6}>
+          <Card
+            sx={[
+              (theme) => ({
+                p: 2,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+                bgcolor: theme.palette.mode === 'dark' ? 'transparent' : '#fff',
+                backgroundImage: 'none',
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: theme.palette.mode === 'dark' ? '#132F4C' : 'grey.200',
+                boxShadow: 'none',
+
+                '&:hover': {
+                  borderColor:
+                    theme.palette.mode === 'dark' ? '#173A5E' : 'grey.300',
+                  boxShadow:
+                    theme.palette.mode === 'dark'
+                      ? '0px 2px 8px rgba(0, 13, 26, 1)'
+                      : '0px 2px 8px rgba(170, 180, 190, 0.2)',
+                },
+              }),
+            ]}
+          >
+            <Avatar
+              imgProps={{
+                width: '40',
+                height: '40',
+                loading: 'lazy',
+              }}
+              src={example.src}
+              alt={example.name}
+            />
+            <span>
+              <Typography
+                variant="body"
+                fontWeight={600}
+                sx={{ fontFamily: 'IBM Plex Sans' }}
+              >
+                {example.name}
+              </Typography>
+              <Stack
+                direction={{ xs: 'column', sm: 'row' }}
+                alignItems={{ xs: 'start', sm: 'center' }}
+              >
+                <Link
+                  href={example.link}
+                  variant="body2"
+                  sx={{
+                    fontFamily: 'IBM Plex Sans',
+                    fontWeight: 500,
+                    display: 'flex',
+                    alignItems: 'center',
+                    mt: 0.5,
+                  }}
+                >
+                  {example.label}
+                  <ChevronRightRoundedIcon fontSize="small" />
+                </Link>
+                {example.tsLink ? (
+                  <Stack
+                    direction="row"
+                    spacing={{ xs: 0, sm: 1 }}
+                    alignItems="center"
+                  >
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        fontFamily: 'IBM Plex Sans',
+                        display: { xs: 'none', sm: 'block' },
+                        opacity: 0.2,
+                      }}
+                    >
+                      /
+                    </Typography>
+                    <Link
+                      href={example.tsLink}
+                      variant="body2"
+                      sx={{
+                        fontFamily: 'IBM Plex Sans',
+                        fontWeight: 500,
+                        display: 'flex',
+                        alignItems: 'center',
+                      }}
+                    >
+                      {example.tsLabel}
+                      <ChevronRightRoundedIcon fontSize="small" />
+                    </Link>
+                  </Stack>
+                ) : null}
+              </Stack>
+            </span>
+          </Card>
+        </Grid>
+      ))}
+    </Grid>
+  );
+}

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

@@ -8,17 +8,7 @@ You can find some example projects in the [GitHub repository](https://github.com
 
 <!-- #default-branch-switch -->
 
-- [Next.js](https://github.com/mui/material-ui/tree/master/examples/material-next) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-next-ts))
-- [Create React App](https://github.com/mui/material-ui/tree/master/examples/material-cra) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts))
-- [Remix](https://github.com/mui/material-ui/tree/master/examples/material-remix-ts)
-- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/material-gatsby)
-- [Preact](https://github.com/mui/material-ui/tree/master/examples/material-preact)
-- [CDN](https://github.com/mui/material-ui/tree/master/examples/material-via-cdn)
-- [Express.js (server-rendered)](https://github.com/mui/material-ui/tree/master/examples/material-express-ssr)
-- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts)
-- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-vite-ts))
-- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts))
-- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
+{{"demo": "ExampleCollection.js", "hideToolbar": true, "bg": "inline"}}
 
 Create React App is an awesome project for learning React.
 Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs.