[docs] Fix SEO regression (#40306)

oliviertassinari · web-flow · commit 312d5ab96d87 · 2023-12-25T14:09:45.000+01:00
diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md
@@ -4,7 +4,7 @@ title: Overview
 
 # Base UI - Overview
 
-<p class="description">Base UI is a library of headless ("unstyled") React UI components and low-level hooks.</p>
+<p class="description">Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.</p>
 
 ## Introduction
 
diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md
@@ -4,7 +4,7 @@ title: Overview
 
 # Joy UI - Overview
 
-<p class="description">Joy UI is a library of beautifully designed React UI components built to spark joy in the development process.</p>
+<p class="description">Joy UI is an open-source React component library that implements MUI's own in-house design principles. It's comprehensive and can be used in production out of the box.</p>
 
 ## Introduction
 
diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md
@@ -4,7 +4,7 @@ title: Overview
 
 # Material UI - Overview
 
-<p class="description">Material UI is a library of React UI components that implements Google's Material Design.</p>
+<p class="description">Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.</p>
 
 ## Introduction
 
diff --git a/docs/data/system/getting-started/overview/overview.md b/docs/data/system/getting-started/overview/overview.md
@@ -4,7 +4,7 @@ title: Overview
 
 # MUI System - Overview
 
-<p class="description">MUI System is a collection of CSS utilities for rapidly laying out custom designs with MUI component libraries.</p>
+<p class="description">MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.</p>
 
 ## Introduction
 
diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx
@@ -17,8 +17,7 @@ export default function Core() {
     <BrandingCssVarsProvider>
       <Head
         title="Base UI: Unstyled React components and low-level hooks."
-        description={`Base UI is a library of headless ("unstyled") React UI components and low-level hooks.
-        You can style them with any CSS solutions like PostCSS or Tailwind CSS.`}
+        description={`Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.`}
         card="/static/social-previews/baseui-preview.jpg"
       >
         {/* eslint-disable-next-line @next/next/no-page-custom-font */}
diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
@@ -14,7 +14,7 @@ export default function Core() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI Core: Ready-to-use foundational React components, free forever."
+        title="MUI Core: Ready-to-use React components, free forever"
         description="Get a growing list of React components, ready-to-use, free forever and with accessibility always in mind."
         card="/static/social-previews/core-preview.jpg"
       />
diff --git a/docs/pages/material-ui.tsx b/docs/pages/material-ui.tsx
@@ -18,7 +18,7 @@ export default function Core() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="Material UI: A meticulous React implementation of Google's Material Design."
+        title="Material UI: React components that implement Material Design"
         description="Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box."
         card="/static/social-previews/materialui-preview.jpg"
       />
diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx
@@ -17,7 +17,7 @@ export default function X() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI X: Advanced and powerful components for complex use cases."
+        title="MUI X: Advanced React components for complex use cases"
         description="Build complex and data-rich applications using a growing list of advanced React
         components, like the Data Grid, Date and Time Pickers, Charts, and more!"
         card="/static/social-previews/muix-preview.jpg"
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -67,7 +67,7 @@ const PRODUCTS = [
   },
   {
     name: 'Templates',
-    description: 'Fully built Material UI templates for your application.',
+    description: 'Fully built, out-of-the-box, templates for your application.',
     href: ROUTES.productTemplates,
   },
   {
@@ -86,12 +86,12 @@ const PRODUCTS = [
 const DOCS = [
   {
     name: 'Material UI',
-    description: `A meticulous React implementation of Google's Material Design.`,
+    description: "Component library that implements Google's Material Design.",
     href: ROUTES.materialDocs,
   },
   {
     name: 'Joy UI',
-    description: 'React components for building your design system.',
+    description: "Component library that implements MUI's own in-house design principles.",
     href: ROUTES.joyDocs,
   },
   {
@@ -106,7 +106,7 @@ const DOCS = [
   },
   {
     name: 'MUI X',
-    description: 'Advanced and powerful components for complex use cases.',
+    description: 'Advanced components for complex use cases.',
     href: ROUTES.xIntro,
   },
   {
diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx
@@ -16,20 +16,21 @@ const content = [
     // icon:
     title: 'Joy UI',
     description:
-      "An easy to customize open-source React component library that implements MUI's own in-house design principles by default.",
+      "An open-source React component library that implements MUI's own in-house design principles.",
     link: '/joy-ui/getting-started/',
   },
   {
     // icon:
     title: 'Base UI',
     description:
-      "A library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.",
+      "A library of unstyled React components and low-level hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.",
     link: '/base-ui/',
   },
   {
     // icon:
     title: 'MUI System',
-    description: 'A set of CSS utilities to help you build custom designs more efficiently.',
+    description:
+      'A set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.',
     link: '/system/getting-started/',
   },
 ];
diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md
@@ -5,7 +5,7 @@
 
 <h1 align="center">Base UI</h1>
 
-Base UI is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.
+Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
 
 ## Installation
 
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
@@ -3,7 +3,7 @@
   "version": "5.0.0-beta.28",
   "private": false,
   "author": "MUI Team",
-  "description": "A library of headless ('unstyled') React UI components and low-level hooks.",
+  "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
   "main": "./src/index.js",
   "keywords": [
     "react",
diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md
@@ -5,7 +5,7 @@
 
 <h1 align="center">Joy UI</h1>
 
-Joy UI is a library of beautifully designed React UI components built to spark joy.
+Joy UI is an open-source React component library that implements MUI's own in-house design principles. It's comprehensive and can be used in production out of the box.
 
 ## Installation
 
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
@@ -3,7 +3,7 @@
   "version": "5.0.0-beta.19",
   "private": false,
   "author": "MUI Team",
-  "description": "A library of beautifully designed React UI components.",
+  "description": "Joy UI is an open-source React component library that implements MUI's own in-house design principles. It's comprehensive and can be used in production out of the box.",
   "main": "./src/index.ts",
   "keywords": [
     "react",
diff --git a/packages/mui-material/README.md b/packages/mui-material/README.md
@@ -5,7 +5,7 @@
 
 <h1 align="center">Material UI</h1>
 
-Material UI is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
+Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/design/introduction/). It's comprehensive and can be used in production out of the box.
 
 ## Installation
 
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
@@ -3,7 +3,7 @@
   "version": "5.15.1",
   "private": false,
   "author": "MUI Team",
-  "description": "React components that implement Google's Material Design.",
+  "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
   "main": "./src/index.ts",
   "keywords": [
     "react",
diff --git a/packages/mui-system/README.md b/packages/mui-system/README.md
@@ -1,6 +1,6 @@
 # MUI System
 
-MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.
+MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.
 
 ## Installation
 
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
@@ -3,7 +3,7 @@
   "version": "5.15.1",
   "private": false,
   "author": "MUI Team",
-  "description": "CSS utilities for rapidly laying out custom designs.",
+  "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
   "main": "./src/index.js",
   "keywords": [
     "react",

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ const PRODUCTS = [`
`67`	`67`	`},`
`68`	`68`	`{`
`69`	`69`	`name: 'Templates',`
`70`		`- description: 'Fully built Material UI templates for your application.',`
	`70`	`+ description: 'Fully built, out-of-the-box, templates for your application.',`
`71`	`71`	`href: ROUTES.productTemplates,`
`72`	`72`	`},`
`73`	`73`	`{`
`@@ -86,12 +86,12 @@ const PRODUCTS = [`
`86`	`86`	`const DOCS = [`
`87`	`87`	`{`
`88`	`88`	`name: 'Material UI',`
`89`		- description: `A meticulous React implementation of Google's Material Design.`,
	`89`	`+ description: "Component library that implements Google's Material Design.",`
`90`	`90`	`href: ROUTES.materialDocs,`
`91`	`91`	`},`
`92`	`92`	`{`
`93`	`93`	`name: 'Joy UI',`
`94`		`- description: 'React components for building your design system.',`
	`94`	`+ description: "Component library that implements MUI's own in-house design principles.",`
`95`	`95`	`href: ROUTES.joyDocs,`
`96`	`96`	`},`
`97`	`97`	`{`
`@@ -106,7 +106,7 @@ const DOCS = [`
`106`	`106`	`},`
`107`	`107`	`{`
`108`	`108`	`name: 'MUI X',`
`109`		`- description: 'Advanced and powerful components for complex use cases.',`
	`109`	`+ description: 'Advanced components for complex use cases.',`
`110`	`110`	`href: ROUTES.xIntro,`
`111`	`111`	`},`
`112`	`112`	`{`