adjust each page's Head component

danilo-leal · Dec 13, 2023 · 8b3f41e · 8b3f41e
1 parent 3d9fb44
commit 8b3f41e
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 11 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.png"
       />
       <AppHeaderBanner />
       <AppHeader />

diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx
@@ -19,7 +19,7 @@ export default function Core() {
         title="Base UI: Ship accessible & sleek components"
         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.png"
       >
         {/* 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.png"
         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.png"
       />
       <AppHeaderBanner />
       <AppHeader />

diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
@@ -14,9 +14,9 @@ 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"
+        card="/static/social-previews/core-preview.png"
       />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/material-ui" />

diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx
@@ -19,7 +19,7 @@ export default function DesignKits() {
       <Head
         title="Material UI in your favorite design tool"
         description="Pick your favorite design tool to enjoy and use Material UI components. Boost consistency and facilitate communication when working with developers."
-        card="/static/social-previews/designkits-preview.jpg"
+        card="/static/social-previews/designkits-preview.png"
       />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/mui-design-kits" />

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.png"
       >
         <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: Ready to use Material Design components"
         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.png"
       />
       <AppHeaderBanner />
       <AppHeader />

diff --git a/docs/pages/templates.tsx b/docs/pages/templates.tsx
@@ -18,7 +18,7 @@ export default function Templates() {
       <Head
         title="Fully built Material UI templates - MUI"
         description="A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today."
-        card="/static/social-previews/templates-preview.jpg"
+        card="/static/social-previews/templates-preview.png"
       />
       <AppHeaderBanner />
       <AppHeader />

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}