[website] Landing page design tweaks

docs/pages/toolpad/index.js

@@ -2,13 +2,15 @@ import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import Head from 'docs/src/modules/components/Head';
 import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 import ToolpadHero from '../../src/components/landing/Hero';
 import DemoVideo from '../../src/components/landing/DemoVideo';
 import SignUpToast from '../../src/components/landing/SignUpToast';
+import UseCases from '../../src/components/landing/UseCases';
 import CardGrid from '../../src/components/landing/CardGrid';
 import Banner from '../../src/components/landing/Banner';
 import Pricing from '../../src/components/landing/PricingTable';
@@ -51,9 +53,9 @@ export default function Home() {
           description={description}
           href={href}
           label={label}
-          docs={false}
         />
-        <CardGrid content={useCases} darker />
+        <Divider sx={{ maxWidth: '1200px', m: 'auto' }} />
+        <UseCases content={useCases} />
         <Pricing
           Headline={Headline}
           plans={plans}

docs/src/components/landing/Banner.js

@@ -1,98 +1,74 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import Link from 'docs/src/modules/components/Link';
+import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 
-export default function Banner(props) {
-  const { title, description, href, label, category, action, docs } = props;
+function Banner(props) {
+  const { title, description, href, label, category, action } = props;
   return (
-    <Box>
-      <Container
+    <Container
+      sx={{
+        mx: 0,
+        minWidth: '100%',
+        py: { xs: 4, sm: 8 },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Typography
+        textAlign="center"
+        variant="h4"
         sx={{
-          pt: 0,
-          pb: { xs: 2, sm: 8, md: docs ? 1 : 16 },
-          px: docs ? { xs: 0, sm: 0, md: 0 } : 'default',
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'center',
+          mt: 4,
+          mx: 'auto',
         }}
       >
-        <Stack
-          sx={{
-            borderRadius: 1,
-            px: 2,
-            py: docs ? 2.5 : 2,
-            bgcolor: (theme) =>
-              theme.palette.mode === 'dark'
-                ? alpha(theme.palette.primaryDark[900], 0.5)
-                : 'primary.50',
-            border: '1px solid',
-            borderColor: (theme) =>
-              theme.palette.mode === 'dark' ? 'primaryDark.500' : 'primary.100',
-            display: 'flex',
-            flexDirection: {
-              xs: 'column',
-              sm: 'row',
-            },
-            width: '100%',
-            justifyContent: 'space-between',
-            alignItems: { xs: 'flex-start', sm: 'center' },
-          }}
-        >
-          <div>
-            <Typography fontWeight="bold" sx={{ mb: 0.5 }}>
-              {title}
-            </Typography>
-            <Typography
-              variant={docs ? 'body1' : 'body2'}
-              color="text.secondary"
-              sx={{ maxWidth: 700 }}
-            >
-              {description}
-            </Typography>
-          </div>
-          <Button
-            component={Link}
-            noLinkStyle
-            data-ga-event-category={category}
-            data-ga-event-label={label}
-            data-ga-event-action={action}
-            target="_blank"
-            rel="noopener"
-            href={href}
-            variant="contained"
-            fullWidth
-            endIcon={<KeyboardArrowRightRounded />}
-            sx={{
-              py: 1,
-              px: {
-                md: 2,
-              },
-              ml: { xs: 0, sm: 2 },
-              mt: { xs: 3, sm: 0 },
-              width: { xs: '100%', sm: '50%', md: 'auto' },
-            }}
-          >
-            {label}
-          </Button>
-        </Stack>
-      </Container>
-    </Box>
+        {title}
+      </Typography>
+      <Typography
+        color="text.secondary"
+        textAlign="center"
+        sx={{
+          mt: 1,
+          mb: 4,
+          mx: 'auto',
+          maxWidth: '500px',
+        }}
+      >
+        {description}
+      </Typography>
+      <Button
+        component={Link}
+        noLinkStyle
+        data-ga-event-category={category}
+        data-ga-event-label={label}
+        data-ga-event-action={action}
+        target="_blank"
+        rel="noopener"
+        href={href}
+        variant="contained"
+        fullWidth
+        size="large"
+        endIcon={<KeyboardArrowRightRounded />}
+        sx={{ width: { xs: '100%', sm: 'auto' } }}
+      >
+        {label}
+      </Button>
+    </Container>
   );
 }
 
 Banner.propTypes = {
   action: PropTypes.string.isRequired,
   category: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  docs: PropTypes.bool,
   href: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   title: PropTypes.string,
 };
+
+export default Banner;

docs/src/components/landing/CardGrid.js

@@ -4,16 +4,16 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import IconImage from 'docs/src/components/icon/IconImage';
+import { alpha } from '@mui/material/styles';
 
 const cardRootStyle = (imageUrl) => ({
   px: imageUrl ? 0 : 2,
-  pb: 3,
-  pt: imageUrl ? 0 : 3,
+  pt: imageUrl ? 0 : 2,
+  pb: 2,
   height: '100%',
-  maxWidth: 360,
 });
 
 const cardMediaStyle = (imageUrl) => ({
@@ -31,9 +31,7 @@ const cardMediaStyle = (imageUrl) => ({
 });
 
 const cardContentRootStyle = (imageUrl) => ({
-  px: imageUrl ? 2 : 0,
-  pt: imageUrl ? 2 : 0,
-  pb: 0,
+  p: imageUrl ? 2 : 0,
 });
 
 export default function CardGrid(props) {
@@ -43,33 +41,46 @@ export default function CardGrid(props) {
       sx={
         darker
           ? {
-              bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
+              background: (theme) =>
+                theme.palette.mode === 'dark'
+                  ? `radial-gradient(200% 150% at 50% 20%, transparent 30%, ${theme.palette.primaryDark[300]} 100%, ${theme.palette.primaryDark[100]} 0)`
+                  : `linear-gradient(180deg, ${theme.palette.grey[50]} 0%, ${alpha(
+                      theme.palette.grey[100],
+                      0.4,
+                    )} 100%)`,
             }
           : null
       }
     >
-      <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+      <Container sx={{ py: { xs: 4, sm: 8 } }}>
         <SectionHeadline overline={content.overline} title={content.Headline} />
-        <Grid container spacing={2}>
+        <Grid container spacing={{ xs: 2, sm: 2, md: 3 }} columns={{ xs: 1, sm: 2 }}>
           {content.cards.map(({ icon, title, wip, imageUrl, description }) => (
-            <Grid key={title} item xs={12} sm={6} md={4}>
+            <Grid key={title} xs={2} sm={1}>
               <Paper variant="outlined" sx={cardRootStyle(imageUrl)}>
                 {imageUrl ? <Box sx={cardMediaStyle(imageUrl)} /> : null}
                 <Box sx={cardContentRootStyle(imageUrl)}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                    {icon ?? null}
-                    <Typography
-                      fontWeight="bold"
-                      component="h3"
-                      color="text.primary"
-                      variant="body2"
-                      sx={{ ml: imageUrl ? 0 : 1 }}
-                    >
-                      {title}
-                    </Typography>
-                    {wip ? (
-                      <IconImage name="time" title="Work in progress" sx={{ ml: 'auto', mr: 2 }} />
-                    ) : null}
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      mb: 1,
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                      {icon ?? null}
+                      <Typography
+                        fontWeight="bold"
+                        component="h3"
+                        color="text.primary"
+                        variant="body2"
+                        sx={{ ml: imageUrl ? 0 : 1 }}
+                      >
+                        {title}
+                      </Typography>
+                    </Box>
+                    {wip ? <IconImage name="time" title="Work in progress" /> : null}
                   </Box>
                   <Typography variant="body2" color="text.secondary">
                     {description}

docs/src/components/landing/DemoVideo.js

@@ -1,55 +1,68 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import { styled } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 
 const Video = styled('video')(({ theme }) => ({
-  borderStyle: 'solid',
-  borderColor:
-    theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : theme.palette.grey[100],
-  borderRadius: theme.shape.borderRadius,
   overflow: 'hidden',
   objectFit: 'cover',
   width: '100%',
   height: '100%',
+  borderRadius: '5px',
+  border: '1px solid',
+  borderColor:
+    theme.palette.mode === 'dark'
+      ? `${theme.palette.primaryDark[700]}`
+      : `${theme.palette.primary[100]}`,
 }));
 
 const VIDEO_BREAKPOINT_GAP = 100;
 
 const VideoContainer = styled(Box)(({ theme }) => ({
-  borderStyle: 'solid',
   maxWidth: 1100,
-  height: { xs: 200, sm: 390, md: 445, lg: 615 },
+  height: '100%',
   width: {
     xs: 360,
     sm: theme.breakpoints.values.sm - VIDEO_BREAKPOINT_GAP,
     md: theme.breakpoints.values.md + VIDEO_BREAKPOINT_GAP,
     lg: theme.breakpoints.values.lg + VIDEO_BREAKPOINT_GAP,
   },
-  borderColor:
-    theme.palette.mode === 'dark' ? theme.palette.primaryDark[400] : theme.palette.grey[300],
   borderRadius: theme.shape.borderRadius,
-  borderWidth: '1px',
+  padding: 16,
+  background:
+    theme.palette.mode === 'dark'
+      ? `linear-gradient(230deg, ${theme.palette.primaryDark[600]} 0%, ${alpha(
+          theme.palette.primaryDark[700],
+          0.4,
+        )} 150%)`
+      : `linear-gradient(230deg, ${theme.palette.primary[50]} 0%, ${alpha(
+          theme.palette.primary[100],
+          0.4,
+        )} 150%)`,
+  border: '1px solid',
+  borderColor:
+    theme.palette.mode === 'dark'
+      ? `${alpha(theme.palette.primaryDark[300], 0.5)}`
+      : `${alpha(theme.palette.primary[200], 0.5)}`,
+  boxShadow:
+    theme.palette.mode === 'dark'
+      ? `4px 0 60px ${alpha(theme.palette.primary[300], 0.5)}`
+      : `4px 0 60px ${alpha(theme.palette.primary[100], 0.8)}`,
 }));
 
 export default function DemoVideo() {
   return (
     <Box
-      sx={(theme) => ({
+      sx={{
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'center',
-        mt: { xs: theme.spacing(2.5), sm: theme.spacing(7.5) },
-        py: { xs: 4, sm: 6 },
-        bgcolor: theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50',
-      })}
+        py: { xs: 4, sm: 8 },
+      }}
     >
       <Container>
         <VideoContainer>
           <Video
-            sx={{
-              borderWidth: { xs: '10px', sm: '20px' },
-            }}
             muted
             autoPlay
             playsInline