[website] Update CTA for Customers page on the website and fix styling (DX-150)

docs/pages/customers.tsx

@@ -6,13 +6,13 @@ import AppHeader from 'docs/src/layouts/AppHeader';
 import Head from 'docs/src/modules/components/Head';
 import Box from '@mui/material/Box';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import HeroEnd from 'docs/src/components/home/HeroEnd';
 import Divider from '@mui/material/Divider';
 import CustomersSpotlight from 'docs/src/components/customers/CustomersSpotlight';
 import CustomersLogoSlider from 'docs/src/components/customers/CustomersLogoSlider';
 import { getCaseStudies } from 'docs/lib/sourcing';
 import { InferGetStaticPropsType } from 'next';
 import CustomersTestimonials from 'docs/src/components/customers/CustomersTestimonials';
+import CustomersHeroEnd from 'docs/src/components/customers/CustomersHeroEnd';
 
 export const getStaticProps = () => {
   const customers = getCaseStudies();
@@ -46,7 +46,7 @@ export default function Customers(props: InferGetStaticPropsType<typeof getStati
         </Box>
         <CustomersTestimonials />
         <Divider />
-        <HeroEnd />
+        <CustomersHeroEnd />
         <Divider />
       </main>
       <AppFooter />

docs/src/components/customers/CustomerQuotes.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
 import Avatar from '@mui/material/Avatar';
 
 const QUOTES = [
@@ -120,19 +119,18 @@ function Data({
         flexDirection: 'column',
         justifyContent: 'end',
         color: 'text.primary',
-        border: '1px solid',
-        borderColor: 'divider',
+        backgroundColor: 'background.paper',
         background:
           isFirstColumn || isLastColumn
             ? `radial-gradient(#ebf5ff 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat,
               linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 5%, #FFF 20%)`
-            : 'background.paper',
+            : undefined,
         ...theme.applyDarkStyles({
           background:
             isFirstColumn || isLastColumn
               ? `radial-gradient(#131C23 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat,
                 linear-gradient(180deg, #131C23 5%, #15181A 20%)`
-              : 'background.paper',
+              : undefined,
         }),
         gap: 2,
       })}
@@ -189,7 +187,7 @@ export default function CustomerQuotes() {
     <Box
       sx={{
         display: 'grid',
-        gap: 0,
+        gap: '1px',
         gridTemplateColumns: {
           xs: '1fr',
           sm: '1fr 1fr',
@@ -218,13 +216,15 @@ export default function CustomerQuotes() {
         },
         borderRadius: '10px',
         overflow: 'hidden',
-        backgroundColor: 'background.default',
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: 'divider',
       }}
     >
       {QUOTES.map((item) => (
-        <Grid gridArea={item.profile.gridArea} key={item.profile.name} size={{ xs: 12, sm: 6 }}>
+        <Box key={item.profile.name} sx={{ gridArea: item.profile.gridArea }}>
           <Data {...item} />
-        </Grid>
+        </Box>
       ))}
     </Box>
   );

docs/src/components/customers/CustomersCTA.tsx

@@ -0,0 +1,25 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import GradientText from 'docs/src/components/typography/GradientText';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+
+export default function CustomersCTA() {
+  return (
+    <Box
+      sx={{ display: 'flex', flexDirection: 'column', alignItems: { xs: 'auto', sm: 'center' } }}
+    >
+      <SectionHeadline
+        alwaysCenter
+        overline="Explore our advanced components"
+        title={
+          <Typography variant="h2">
+            Get started <GradientText>today</GradientText>
+          </Typography>
+        }
+        description="Our advanced components are available with free and commercial licenses. Try them out and see how they can help you improve your UI-building experience."
+      />
+      <GetStartedButtons primaryLabel="Explore MUI X" primaryUrl="/x/" />
+    </Box>
+  );
+}

docs/src/components/customers/CustomersHeroEnd.tsx

@@ -0,0 +1,45 @@
+import dynamic from 'next/dynamic';
+import { useInView } from 'react-intersection-observer';
+import Box from '@mui/material/Box';
+import { alpha } from '@mui/material/styles';
+import Section from 'docs/src/layouts/Section';
+
+function Placeholder() {
+  return (
+    <Box
+      sx={{
+        height: {
+          xs: 202,
+          sm: 180,
+          md: 193,
+        },
+      }}
+    />
+  );
+}
+const CustomersCTA = dynamic(() => import('./CustomersCTA'), { loading: Placeholder });
+
+export default function CustomersHeroEnd() {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0,
+    rootMargin: '500px',
+  });
+  return (
+    <Box
+      ref={ref}
+      sx={(theme) => ({
+        background: `linear-gradient(180deg, #FFF 50%, ${(theme.vars || theme).palette.primary[50]} 100%)`,
+        ...theme.applyDarkStyles({
+          background: `linear-gradient(180deg, ${
+            (theme.vars || theme).palette.primaryDark[900]
+          } 50%, ${alpha(theme.palette.primary[900], 0.2)} 100%)`,
+        }),
+      })}
+    >
+      <Section bg="transparent" cozy>
+        {inView ? <CustomersCTA /> : <Placeholder />}
+      </Section>
+    </Box>
+  );
+}

docs/src/components/customers/CustomersSpotlight.tsx

@@ -51,13 +51,12 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) {
             sx={(t) => ({
               py: variant === 'primary' ? 3 : 2,
               px: variant === 'primary' ? 4 : 2,
-              minHeight: variant === 'primary' ? '230px' : '150px',
+              minHeight: variant === 'primary' ? '220px' : '150px',
               display: 'flex',
               alignItems: 'start',
               flexDirection: 'column',
               position: 'relative',
               backgroundImage: (t.vars || t).palette.gradients.linearSubtle,
-              boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)',
               textDecoration: 'none',
               color: 'inherit',
               cursor: 'pointer',
@@ -71,7 +70,7 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) {
             {post.image && (
               <Box
                 component="img"
-                alt="Company Logo"
+                alt="Company logo"
                 src={post.image}
                 sx={(theme) => ({
                   position: variant === 'primary' ? 'absolute' : 'relative',
@@ -98,7 +97,6 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) {
                   display: 'flex',
                   flexDirection: 'column',
                   alignItems: 'flex-start',
-                  textAlign: 'left',
                   mt: 10,
                   gap: 2,
                 }}
@@ -135,7 +133,6 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) {
             )}
             {variant === 'secondary' && (
               <Button
-                endIcon={<ArrowForwardIcon />}
                 size="small"
                 sx={{
                   ml: -1,