[website] Fix Footer layout shift (#40786)

mui · Jan 26, 2024 · 5112cb1 · 5112cb1
1 parent da75998
commit 5112cb1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/docs/src/components/home/DesignSystemComponents.tsx b/docs/src/components/home/DesignSystemComponents.tsx
@@ -11,7 +11,7 @@ function Placeholder() {
   return (
     <Box
       sx={(theme) => ({
-        height: { xs: 1484, sm: 825, md: 605 },
+        height: { xs: 1484, sm: 825, md: 601 },
         borderRadius: 1,
         bgcolor: 'grey.100',
         ...theme.applyDarkStyles({
@@ -26,7 +26,7 @@ const MaterialDesignComponents = dynamic(() => import('./MaterialDesignComponent
   loading: Placeholder,
 });
 
-function DesignSystemComponents() {
+export default function DesignSystemComponents() {
   const { ref, inView } = useInView({
     triggerOnce: true,
     threshold: 0,
@@ -47,5 +47,3 @@ function DesignSystemComponents() {
     </Section>
   );
 }
-
-export default DesignSystemComponents;
diff --git a/docs/src/components/home/HeroEnd.tsx b/docs/src/components/home/HeroEnd.tsx
@@ -6,7 +6,7 @@ import { alpha } from '@mui/material/styles';
 import Section from 'docs/src/layouts/Section';
 
 function Placeholder() {
-  return <Box sx={{ height: { xs: 587, sm: 303, md: 289 } }} />;
+  return <Box sx={{ height: { xs: 616 - 48 * 2, sm: 438 - 80 * 2, md: 461 - 96 * 2 } }} />;
 }
 const StartToday = dynamic(() => import('./StartToday'), { loading: Placeholder });
 

diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx
@@ -39,7 +39,7 @@ const AdvancedShowcase = dynamic(() => import('./AdvancedShowcase'), {
 const StoreTemplatesBanner = dynamic(() => import('./StoreTemplatesBanner'));
 const DesignKits = dynamic(() => import('./DesignKits'));
 
-function ProductSuite() {
+export default function ProductSuite() {
   const [productIndex, setProductIndex] = React.useState(0);
   const { ref, inView } = useInView({
     triggerOnce: true,
@@ -72,7 +72,7 @@ function ProductSuite() {
           md={6}
           sx={productIndex === 0 ? { minHeight: { xs: 777, sm: 757, md: 'unset' } } : {}}
         >
-          {inView && (
+          {inView ? (
             <React.Fragment>
               <PrefetchStoreTemplateImages />
               <PrefetchDesignKitImages />
@@ -81,11 +81,11 @@ function ProductSuite() {
               {productIndex === 2 && <StoreTemplatesBanner />}
               {productIndex === 3 && <DesignKits />}
             </React.Fragment>
+          ) : (
+            <Box sx={{ height: { xs: 0, md: 803 } }} />
           )}
         </Grid>
       </Grid>
     </Section>
   );
 }
-
-export default ProductSuite;
diff --git a/docs/src/components/home/StartToday.tsx b/docs/src/components/home/StartToday.tsx
@@ -17,7 +17,9 @@ export default function StartToday() {
           overline="Start now"
           title={
             <Typography variant="h2" sx={{ maxWidth: 460, mb: 1 }}>
-              Ship your next project <GradientText>faster</GradientText>
+              Ship your next project
+              <br />
+              <GradientText>faster</GradientText>
             </Typography>
           }
           description="Find out why MUI's tools are trusted by thousands of open-source developers and teams around the world."