[website] homepage rebranding (#27488)

docs/pages/_document.js

@@ -75,7 +75,7 @@ export default class MyDocument extends Document {
           <link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           <link
-            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;700&display=swap"
             rel="stylesheet"
           />
           <link href="/static/fonts/Plusjakartasans.css" rel="stylesheet" />

docs/pages/branding/home.tsx

@@ -1,31 +1,33 @@
 import * as React from 'react';
-import { ThemeProvider } from '@material-ui/core/styles';
+import ThemeProvider from 'docs/src/modules/ThemeContext';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
 import AppHeader from 'docs/src/layouts/AppHeader';
-import Container from '@material-ui/core/Container';
 import Hero from 'docs/src/components/home/Hero';
-import brandingTheme from 'docs/src/modules/brandingTheme';
-import References from 'docs/src/components/home/References';
+import ReferencesCore from 'docs/src/components/home/ReferencesCore';
+import ProductSuite from 'docs/src/components/home/ProductSuite';
+import ValueProposition from 'docs/src/components/home/ValueProposition';
+import DesignSystemComponents from 'docs/src/components/home/DesignSystemComponents';
+import Testimonials from 'docs/src/components/home/Testimonials';
+import Sponsors from 'docs/src/components/home/Sponsors';
+import HeroEnd from 'docs/src/components/home/HeroEnd';
+import AppFooter from 'docs/src/layouts/AppFooter';
 
 export default function Home() {
   return (
-    <ThemeProvider theme={brandingTheme}>
+    <ThemeProvider>
       <CssBaseline />
       <AppHeader />
       <Hero />
-      <Container sx={{ py: 8 }}>
-        <References />
-        <Typography
-          variant="body2"
-          color="grey.800"
-          textAlign="center"
-          sx={{ mt: 4, mx: 'auto', maxWidth: 360 }}
-        >
-          From startups to Fortune 500s, the world&apos;s best teams leverage MUI to build their
-          UIs.
-        </Typography>
-      </Container>
+      <ReferencesCore />
+      <ProductSuite />
+      <ValueProposition />
+      <DesignSystemComponents />
+      <Testimonials />
+      <Sponsors />
+      <HeroEnd />
+      <Divider />
+      <AppFooter />
     </ThemeProvider>
   );
 }