[material-ui][docs] Add a "start now" section on the Overview page (#…

…41137)
mui · Feb 20, 2024 · 0f8d965 · 0f8d965
1 parent 6d232b4
commit 0f8d965
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 5 deletions.
diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md
@@ -10,12 +10,10 @@ title: Overview
 
 Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/).
 
-It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.
-
-Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components.
+It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box, and features a suite of customization options that make it easy to implement your own custom design system on top of our components.
 
 :::info
-Material UI v5 supports Material Design v2.
+Material UI v5 supports Material Design 2.
 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.
 :::
@@ -33,10 +31,16 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293
   It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul.
   You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)).
 
-## Material UI vs. Base UI
+### Material UI vs. Base UI
 
 Material UI and [Base UI](/base-ui/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions.
 
 Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/docs/introduction) (or [styled-components](https://styled-components.com/)).
 
 Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use Base UI components and hooks for its foundational structure.
+
+## Start now
+
+Get started with Material UI today through some of these useful resources:
+
+{{"component": "modules/components/MaterialStartingLinksCollection.js"}}
diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import Grid from '@mui/material/Unstable_Grid2';
+import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded';
+import WebRoundedIcon from '@mui/icons-material/WebRounded';
+import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
+import PlayCircleFilledWhiteRoundedIcon from '@mui/icons-material/PlayCircleFilledWhiteRounded';
+import DesignServicesRoundedIcon from '@mui/icons-material/DesignServicesRounded';
+import InfoCard from 'docs/src/components/action/InfoCard';
+
+const content = [
+  {
+    title: 'Installation',
+    description: 'Add Material UI to your project with a few commands.',
+    link: '/material-ui/getting-started/installation/',
+    icon: <InstallDesktopRoundedIcon color="primary" />,
+  },
+  {
+    title: 'Usage',
+    description: 'Learn the basics about Material UI components.',
+    link: '/material-ui/getting-started/usage/',
+    icon: <DrawRoundedIcon color="primary" />,
+  },
+  {
+    title: 'Example projects',
+    description: 'A collection of boilerplates to jumpstart your next project.',
+    link: '/material-ui/getting-started/example-projects/',
+    icon: <PlayCircleFilledWhiteRoundedIcon color="primary" />,
+  },
+  {
+    title: 'Customizing components',
+    description: 'Learn about the available customization methods.',
+    link: '/material-ui/customization/how-to-customize/',
+    icon: <DesignServicesRoundedIcon color="primary" />,
+  },
+  {
+    title: 'Templates',
+    description: 'Get started with a selection of free templates.',
+    link: '/material-ui/getting-started/templates/',
+    icon: <WebRoundedIcon color="primary" />,
+  },
+  {
+    title: 'Design resources',
+    description: 'The Material UI components in your favorite design tool.',
+    link: 'https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x',
+    icon: (
+      <img
+        src={`/static/branding/design-kits/figma-logo.svg`}
+        alt="Figma logo"
+        loading="lazy"
+        width="24"
+        height="24"
+      />
+    ),
+  },
+];
+
+export default function MaterialStartingLinksCollection() {
+  return (
+    <Grid container spacing={2}>
+      {content.map(({ icon, title, description, link }) => (
+        <Grid key={title} xs={12} sm={6} md={4}>
+          <InfoCard
+            classNameTitle="algolia-lvl3"
+            classNameDescription="algolia-content"
+            link={link}
+            title={title}
+            icon={icon}
+            description={description}
+          />
+        </Grid>
+      ))}
+    </Grid>
+  );
+}