[website] Update product descriptions and social preview images (#32181)

mui · Dec 15, 2023 · e7b9793 · oliviertassinari · Dec 24, 2023 · e7b9793
1 parent 48adec0
commit e7b9793
Show file tree

Hide file tree

Showing 25 changed files with 21 additions and 14 deletions.
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
@@ -18,6 +18,7 @@ export default function About() {
         title="About us - MUI"
         description="MUI is a 100% remote globally distributed team, supported by a community of thousands
         of developers all across the world."
+        card="/static/social-previews/about-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader />

diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx
@@ -16,10 +16,10 @@ export default function Core() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="Base UI: Ship accessible & sleek components"
+        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.`}
-        card="/static/blog/introducing-base-ui/card.png"
+        card="/static/social-previews/baseui-preview.jpg"
       >
         {/* eslint-disable-next-line @next/next/no-page-custom-font */}
         <link

diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
@@ -259,6 +259,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       <Head
         title="Blog - MUI"
         description="Follow the MUI blog to learn about new product features, latest advancements in UI development, and business initiatives."
+        card="/static/social-previews/blog-preview.jpg"
         disableAlternateLocale
       />
       <AppHeader />

diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
@@ -573,6 +573,7 @@ export default function Careers() {
       <Head
         title="Careers - MUI"
         description="Interested in joining MUI? Learn about the roles we're hiring for."
+        card="/static/social-previews/careers-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader />

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 components, free forever"
+        title="MUI Core: Ready-to-use foundational 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/index.tsx b/docs/pages/index.tsx
@@ -20,8 +20,11 @@ export default function Home() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI: The React component library you always wanted"
-        description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
+        title="MUI: Move faster with intuitive React UI tools"
+        description="MUI offers a comprehensive suite of free UI tools to help you ship new features faster.
+        Start with Material UI, our fully-loaded component library, or bring your own design
+        system to our production-ready components."
+        card="/static/social-previews/home-preview.jpg"
       >
         <script
           type="application/ld+json"

diff --git a/docs/pages/material-ui.tsx b/docs/pages/material-ui.tsx
@@ -18,9 +18,9 @@ export default function Core() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="Material UI: React components based on Material Design"
+        title="Material UI: A meticulous React implementation of 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."
-        card="/static/social-previews/core-preview.jpg"
+        card="/static/social-previews/materialui-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/material-ui" />

diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
@@ -21,6 +21,7 @@ export default function Pricing() {
       <Head
         title="Pricing - MUI"
         description="The community edition lets you get going right away. Switch to a commercial plan for more components & technical support."
+        card="/static/social-previews/pricing-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader />

diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx
@@ -17,10 +17,10 @@ export default function X() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI X: Performant advanced components"
+        title="MUI X: Advanced and powerful 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/x-preview.jpg"
+        card="/static/social-previews/muix-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/mui-x" />

diff --git a/docs/public/static/social-previews/about-preview.jpg b/docs/public/static/social-previews/about-preview.jpg
diff --git a/docs/public/static/social-previews/baseui-preview.jpg b/docs/public/static/social-previews/baseui-preview.jpg
diff --git a/docs/public/static/social-previews/blog-preview.jpg b/docs/public/static/social-previews/blog-preview.jpg
diff --git a/docs/public/static/social-previews/careers-preview.jpg b/docs/public/static/social-previews/careers-preview.jpg
diff --git a/docs/public/static/social-previews/core-preview.jpg b/docs/public/static/social-previews/core-preview.jpg
diff --git a/docs/public/static/social-previews/default-preview.jpg b/docs/public/static/social-previews/default-preview.jpg
diff --git a/docs/public/static/social-previews/designkits-preview.jpg b/docs/public/static/social-previews/designkits-preview.jpg
diff --git a/docs/public/static/social-previews/home-preview.jpg b/docs/public/static/social-previews/home-preview.jpg
diff --git a/docs/public/static/social-previews/materialui-preview.jpg b/docs/public/static/social-previews/materialui-preview.jpg
diff --git a/docs/public/static/social-previews/muix-preview.jpg b/docs/public/static/social-previews/muix-preview.jpg
diff --git a/docs/public/static/social-previews/pricing-preview.jpg b/docs/public/static/social-previews/pricing-preview.jpg
diff --git a/docs/public/static/social-previews/templates-preview.jpg b/docs/public/static/social-previews/templates-preview.jpg
diff --git a/docs/public/static/social-previews/toolpad-preview.jpg b/docs/public/static/social-previews/toolpad-preview.jpg
diff --git a/docs/public/static/social-previews/x-preview.jpg b/docs/public/static/social-previews/x-preview.jpg
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -62,12 +62,12 @@ const PRODUCTS = [
   },
   {
     name: 'MUI X',
-    description: 'Advanced and powerful components for complex use-cases.',
+    description: 'Advanced and powerful components for complex use cases.',
     href: ROUTES.productAdvanced,
   },
   {
     name: 'Templates',
-    description: 'Fully built, out-of-the-box, templates for your application.',
+    description: 'Fully built Material UI templates for your application.',
     href: ROUTES.productTemplates,
   },
   {
@@ -86,7 +86,7 @@ const PRODUCTS = [
 const DOCS = [
   {
     name: 'Material UI',
-    description: "React components that implement Google's Material Design.",
+    description: `A meticulous React implementation of Google's Material Design.`,
     href: ROUTES.materialDocs,
   },
   {

diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -253,8 +253,8 @@ export default function MaterialHero() {
             components
           </Typography>
           <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 500 }}>
-            Material UI is beautiful by design and features a suite of customization options that
-            make it easy to implement your own custom design system.
+            Material UI is an open-source React component library that implements Google&apos;s
+            Material Design. It&apos;s comprehensive and can be used in production out of the box.
           </Typography>
           <GetStartedButtons
             primaryUrl={ROUTES.materialDocs}