[website] Improve homepage rebranding

docs/next.config.js

@@ -64,9 +64,13 @@ module.exports = {
       config.externals = [
         (ctx, callback) => {
           const { request } = ctx;
-          const hasDependencyOnRepoPackages = ['notistack', '@material-ui/data-grid'].includes(
-            request,
-          );
+          const hasDependencyOnRepoPackages = [
+            'notistack',
+            '@material-ui/data-grid',
+            '@material-ui/x-grid',
+            '@material-ui/x-grid-data-generator',
+            '@material-ui/x-license',
+          ].includes(request);
 
           if (hasDependencyOnRepoPackages) {
             return callback(null);
@@ -106,7 +110,8 @@ module.exports = {
           // transpile 3rd party packages with dependencies in this repository
           {
             test: /\.(js|mjs|jsx)$/,
-            include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)data-grid)/,
+            include:
+              /node_modules(\/|\\)(notistack|@material-ui(\/|\\)data-grid|@material-ui(\/|\\)x-grid|@material-ui(\/|\\)x-license|@material-ui(\/|\\)x-grid-data-generator)/,
             use: {
               loader: 'babel-loader',
               options: {

docs/package.json

@@ -32,6 +32,8 @@
     "@fortawesome/react-fontawesome": "^0.1.15",
     "@material-ui/core": "5.0.0-beta.4",
     "@material-ui/data-grid": "^4.0.0-alpha.37",
+    "@material-ui/x-grid": "^4.0.0-alpha.37",
+    "@material-ui/x-grid-data-generator": "^4.0.0-alpha.37",
     "@material-ui/docs": "5.0.0-beta.4",
     "@material-ui/icons": "5.0.0-beta.4",
     "@material-ui/lab": "5.0.0-alpha.43",

docs/pages/_app.js

@@ -1,3 +1,11 @@
+/* eslint-disable import/first */
+import { LicenseInfo } from '@material-ui/x-grid';
+
+// Remove the license warning from demonstration purposes
+LicenseInfo.setLicenseKey(
+  '0f94d8b65161817ca5d7f7af8ac2f042T1JERVI6TVVJLVN0b3J5Ym9vayxFWFBJUlk9MTY1NDg1ODc1MzU1MCxLRVlWRVJTSU9OPTE=',
+);
+
 import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import * as React from 'react';

docs/pages/branding/about.tsx

@@ -26,6 +26,9 @@ import GradientText from 'docs/src/components/typography/GradientText';
 import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
 import ROUTES from 'docs/src/route';
 import IconImage from 'docs/src/components/icon/IconImage';
+import SvgChat from 'docs/src/icons/SvgChat';
+import SvgPerson from 'docs/src/icons/SvgPerson';
+import SvgCard from 'docs/src/icons/SvgCard';
 
 let darkTheme = createTheme(getDesignTokens('dark'));
 
@@ -173,6 +176,28 @@ const Person = (props: Profile & { sx?: PaperProps['sx'] }) => {
   );
 };
 
+const Widget = ({
+  children,
+  title,
+  icon,
+}: {
+  children: React.ReactNode;
+  title: string;
+  icon: React.ReactElement;
+}) => {
+  return (
+    <Paper variant="outlined" sx={{ height: '100%', p: 2 }}>
+      <Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
+        <Box sx={{ display: 'inline-block', lineHeight: 0, verticalAlign: 'bottom', mr: 1 }}>
+          {icon}
+        </Box>
+        {title}
+      </Typography>
+      {children}
+    </Paper>
+  );
+};
+
 const teamMembers: Array<Profile> = [
   {
     src: '/static/branding/about/olivier.jpg',
@@ -414,7 +439,6 @@ function AboutContent() {
   const mode = globalTheme.palette.mode;
   return (
     <React.Fragment>
-      <AppHeader />
       <Container>
         <Box
           sx={{
@@ -596,11 +620,7 @@ function AboutContent() {
         </Typography>
         <Grid container spacing={2}>
           <Grid item xs={12} sm={6} md={4}>
-            <Paper variant="outlined" sx={{ p: 2, height: '100%' }}>
-              <Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
-                <IconImage name="give-feedback" sx={{ mr: 1 }} />
-                Give feedback
-              </Typography>
+            <Widget icon={<SvgChat />} title="Give feedback">
               <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                 Tell us what and where we can improve or share your happy moments with us! You can
                 also up or downvote any page on our documentation. <br />
@@ -615,14 +635,10 @@ function AboutContent() {
                 Leave your feedback{' '}
                 <KeyboardArrowRightRounded fontSize="small" sx={{ mt: '1px' }} />
               </Link>
-            </Paper>
+            </Widget>
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <Paper variant="outlined" sx={{ p: 2, height: '100%' }}>
-              <Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
-                <IconImage name="join-community" sx={{ mr: 1 }} />
-                Join the community
-              </Typography>
+            <Widget icon={<SvgPerson />} title="Join the community">
               <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                 Become a member of a huge community of developers supporting MUI. You can:
               </Typography>
@@ -668,14 +684,10 @@ function AboutContent() {
               <Link href="https://github.com/mui-org/material-ui" variant="body2">
                 See the repository <KeyboardArrowRightRounded fontSize="small" sx={{ mt: '1px' }} />
               </Link>
-            </Paper>
+            </Widget>
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <Paper variant="outlined" sx={{ height: '100%', p: 2 }}>
-              <Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
-                <IconImage name="support-us" sx={{ mr: 1 }} />
-                Suport us financially
-              </Typography>
+            <Widget icon={<SvgCard />} title="Suport us financially">
               <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                 If you use Material-UI in a commercial project and would like to support its
                 continued development by becoming a Sponsor, or in a side or hobby project and would
@@ -689,13 +701,12 @@ function AboutContent() {
                 See Open Collective{' '}
                 <KeyboardArrowRightRounded fontSize="small" sx={{ mt: '1px' }} />
               </Link>
-            </Paper>
+            </Widget>
           </Grid>
         </Grid>
       </Container>
       <HeroEnd />
       <Divider />
-      <AppFooter />
     </React.Fragment>
   );
 }
@@ -708,7 +719,11 @@ export default function About() {
         description="MUI (formerly Material-UI) started back in 2014 to unify React and Material Design. Today, MUI has grown to become one of the world's most popular React libraries – used by a vibrant community of more than 2M developers in over 180 countries."
       />
       <CssBaseline />
-      <AboutContent />
+      <AppHeader />
+      <main>
+        <AboutContent />
+      </main>
+      <AppFooter />
     </ThemeProvider>
   );
 }

docs/pages/branding/home.tsx

@@ -18,20 +18,22 @@ export default function Home() {
   return (
     <ThemeProvider>
       <Head
-        title="Home page - Material-UI"
+        title="MUI: A popular React UI framework"
         description="The ultimate solution for your UI. MUI provides a robust, customizible and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster."
       />
       <CssBaseline />
       <AppHeader />
-      <Hero />
-      <ReferencesCore />
-      <ProductSuite />
-      <ValueProposition />
-      <DesignSystemComponents />
-      <Testimonials mode="dark" />
-      <Sponsors />
-      <HeroEnd />
-      <Divider />
+      <main>
+        <Hero />
+        <ReferencesCore />
+        <ProductSuite />
+        <ValueProposition />
+        <DesignSystemComponents />
+        <Testimonials mode="dark" />
+        <Sponsors />
+        <HeroEnd />
+        <Divider />
+      </main>
       <AppFooter />
     </ThemeProvider>
   );

docs/pages/branding/pricing.tsx

@@ -24,18 +24,20 @@ export default function Pricing() {
       />
       <CssBaseline />
       <AppHeader />
-      <HeroPricing />
-      <PricingList /> {/* Mobile, Tablet */}
-      <Container sx={{ display: { xs: 'none', md: 'block' } }}>
-        <PricingTable /> {/* Desktop */}
-      </Container>
-      <EarlyBird />
-      <Testimonials />
-      <WhatToExpect />
-      <Divider sx={{ mx: 'auto', maxWidth: 1200 }} />
-      <FAQ />
-      <HeroEnd />
-      <Divider />
+      <main>
+        <HeroPricing />
+        <PricingList /> {/* Mobile, Tablet */}
+        <Container sx={{ display: { xs: 'none', md: 'block' } }}>
+          <PricingTable /> {/* Desktop */}
+        </Container>
+        <EarlyBird />
+        <Testimonials />
+        <WhatToExpect />
+        <Divider sx={{ mx: 'auto', maxWidth: 1200 }} />
+        <FAQ />
+        <HeroEnd />
+        <Divider />
+      </main>
       <AppFooter />
     </ThemeProvider>
   );