[website] Revamp the testimonial section in the homepage

docs/src/components/home/DesignSystemComponents.tsx

@@ -33,11 +33,11 @@ function DesignSystemComponents() {
     rootMargin: '500px',
   });
   return (
-    <Section ref={ref}>
+    <Section ref={ref} cozy>
       <SectionHeadline
         overline="Production-ready components"
         title={
-          <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 } }}>
+          <Typography variant="h2">
             Beautiful and powerful,
             <br /> <GradientText>right out of the box</GradientText>
           </Typography>

docs/src/components/home/MaterialDesignComponents.tsx

@@ -190,24 +190,20 @@ function Demo({
 const StyledChip = styled(Chip)(({ theme }) => [
   {
     fontWeight: 700,
-    transition: 'none',
     '&.MuiChip-outlined': {
-      border: 'none',
       color: (theme.vars || theme).palette.text.secondary,
     },
-    '&.MuiChip-clickable:active': {
-      boxShadow: 'none',
-    },
     '&.MuiChip-filled': {
-      border: '1px solid',
       borderColor: (theme.vars || theme).palette.primary[300],
-      backgroundColor: (theme.vars || theme).palette.primary[500],
-      color: '#fff',
+      backgroundColor: alpha(theme.palette.primary[100], 0.5),
+      color: (theme.vars || theme).palette.primary[600],
     },
   },
   theme.applyDarkStyles({
     '&.MuiChip-filled': {
-      backgroundColor: (theme.vars || theme).palette.primary[700],
+      borderColor: (theme.vars || theme).palette.primary[500],
+      backgroundColor: (theme.vars || theme).palette.primary[800],
+      color: (theme.vars || theme).palette.primary[100],
     },
   }),
 ]);
@@ -532,26 +528,26 @@ export default function MaterialDesignComponents() {
     <div>
       <Box
         sx={{
-          mt: { xs: 2, md: 4 },
+          mt: { xs: 2, md: 2 },
           mb: 2,
           display: 'flex',
-          justifyContent: { sm: 'flex-start', md: 'flex-end' },
+          justifyContent: 'start',
         }}
       >
         <StyledChip
-          color="primary"
-          label="Material Design"
           size="small"
-          variant={!customized ? 'filled' : 'outlined'}
-          onClick={() => setCustomized(false)}
-        />
-        <StyledChip
-          color="primary"
           label="Custom theme"
-          size="small"
           variant={customized ? 'filled' : 'outlined'}
+          color={customized ? 'primary' : 'secondary'}
           onClick={() => setCustomized(true)}
-          sx={{ ml: 1 }}
+          sx={{ mr: 1 }}
+        />
+        <StyledChip
+          size="small"
+          label="Material Design"
+          variant={!customized ? 'filled' : 'outlined'}
+          color={!customized ? 'primary' : 'secondary'}
+          onClick={() => setCustomized(false)}
         />
       </Box>
       <Grid>

docs/src/components/home/MuiStatistics.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 
 const data = [
@@ -12,37 +12,48 @@ const data = [
 
 export default function MuiStatistics() {
   return (
-    <Grid item xs={12} md={6} container spacing={4}>
+    <Box
+      data-mui-color-scheme="dark"
+      sx={(theme) => ({
+        pt: { xs: 1, sm: 2.5 },
+        pb: { xs: 2, sm: 3 },
+        pl: { xs: 2, sm: 0 },
+        pr: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        gap: { xs: 0, sm: 1 },
+        width: '100%',
+        flexWrap: 'wrap',
+        background: `linear-gradient(180deg, ${alpha(
+          theme.palette.primary[900],
+          0.1,
+        )} 2%, transparent 80%)`,
+      })}
+    >
       {data.map((item) => (
-        <Grid key={item.title} item xs={6}>
-          <Box
+        <Box key={item.title} sx={{ width: { xs: '50%', sm: 200 }, p: { xs: 1, sm: 0 } }}>
+          <Typography
+            variant="h4"
+            fontWeight="semiBold"
             sx={(theme) => ({
-              height: '100%',
-              pl: 2,
-              borderLeft: '1px solid',
-              borderColor: 'primary.100',
+              textAlign: { xs: 'left', sm: 'center' },
+              color: 'primary.main',
               ...theme.applyDarkStyles({
-                borderColor: 'primaryDark.600',
+                color: 'primary.200',
               }),
             })}
           >
-            <Typography
-              component="div"
-              variant="h4"
-              fontWeight="bold"
-              sx={(theme) => ({
-                color: 'primary.main',
-                ...theme.applyDarkStyles({
-                  color: 'primary.200',
-                }),
-              })}
-            >
-              {item.title}
-            </Typography>
-            <Typography color="text.secondary">{item.metadata}</Typography>
-          </Box>
-        </Grid>
+            {item.title}
+          </Typography>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ textAlign: { xs: 'left', sm: 'center' } }}
+          >
+            {item.metadata}
+          </Typography>
+        </Box>
       ))}
-    </Grid>
+    </Box>
   );
 }

docs/src/components/home/Testimonials.tsx

@@ -1,40 +1,38 @@
 import * as React from 'react';
 import dynamic from 'next/dynamic';
-import { useInView } from 'react-intersection-observer';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
 import { alpha } from '@mui/material/styles';
-import MuiStatistics from 'docs/src/components/home/MuiStatistics';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
 
 const UserFeedbacks = dynamic(() => import('./UserFeedbacks'));
 
 export default function Testimonials() {
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-    threshold: 0,
-    rootMargin: '500px',
-  });
   return (
     <Box
       data-mui-color-scheme="dark"
-      ref={ref}
       sx={(theme) => ({
-        background: `linear-gradient(180deg, ${
-          (theme.vars || theme).palette.primaryDark[800]
-        } 2%, ${alpha(theme.palette.primaryDark[700], 0.4)} 80%),
-        ${(theme.vars || theme).palette.primaryDark[900]}
+        background: `linear-gradient(180deg, ${alpha(
+          theme.palette.primaryDark[800],
+          0.8,
+        )}2%, ${alpha(theme.palette.primaryDark[900], 0.5)} 80%),
+        ${(theme.vars || theme).palette.common.black}
         `,
       })}
     >
-      <Container sx={{ py: { xs: 8, md: 12 } }}>
-        <Grid container spacing={3} alignItems="center">
-          <Grid item xs={12} md={6} sx={{ zIndex: 1, minHeight: { xs: 400, sm: 307, lg: 355 } }}>
-            {inView && <UserFeedbacks />}
-          </Grid>
-          <MuiStatistics />
-        </Grid>
-      </Container>
+      <Section bg="transparent" cozy>
+        <SectionHeadline
+          overline="Join the community"
+          title={
+            <Typography variant="h2" component="h1">
+              Supported by thousands of <GradientText>developers and designers</GradientText>
+            </Typography>
+          }
+        />
+        <UserFeedbacks />
+      </Section>
     </Box>
   );
 }