[docs] Add "Overview" page to Base docs

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

@@ -0,0 +1,30 @@
+# MUI Base - Overview
+
+<p class="description">MUI Base is a library of blank ("unstyled") React UI components and low-level hooks.</p>
+
+## Introduction
+
+MUI Base is a library of unstyled React UI components.
+It features the same robust engineering as Material UI, but without implementing Material Design.
+
+It includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components.
+
+With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engines or settings.
+
+## Advantages of MUI Base
+
+- **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch.
+
+- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution.
+  This means you have complete control over your app's CSS.
+
+- **Accessibility:** MUI Base components are built with accessibility in mind.
+  We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation.
+
+### MUI Base vs. Material UI
+
+MUI Base features many of the same components as Material UI, but _without the Material Design implementation_.
+
+You could think of MUI Base as the "skeletal" version of Material UI—foundational components with no default theme or built-in style engine.
+
+This makes Base a great choice if you need complete control over how your app's CSS is implemented.

docs/data/base/pages.ts

@@ -4,7 +4,10 @@ const pages = [
   {
     pathname: '/base/getting-started',
     icon: 'DescriptionIcon',
-    children: [{ pathname: '/base/getting-started/installation' }],
+    children: [
+      { pathname: '/base/getting-started/overview', title: 'Overview' },
+      { pathname: '/base/getting-started/installation', title: 'Installation' },
+    ],
   },
   {
     pathname: '/base/react-',

docs/pages/base/getting-started/overview.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/base/getting-started/overview/overview.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}

docs/src/components/pricing/FAQ.tsx

@@ -73,10 +73,8 @@ const faqData = [
       <React.Fragment>
         After you purchase a license, you'll receive a license key by email Once you have the
         license key, you need to follow the{' '}
-        <Link href="/x/advanced-components/#license-key-installation">
-          instructions
-        </Link>{' '}
-        necessary to set it up.
+        <Link href="/x/advanced-components/#license-key-installation">instructions</Link> necessary
+        to set it up.
       </React.Fragment>
     ),
   },

docs/translations/translations.json

@@ -181,6 +181,7 @@
     "/system/styles/basics": "Basics",
     "/system/styles/advanced": "Advanced",
     "/base/getting-started": "Getting started",
+    "/base/getting-started/overview": "Overview",
     "/base/getting-started/installation": "Installation",
     "/base/react-": "Components",
     "inputs": "Inputs",