[material-ui][docs] Fix landing page template's h1 size (#41543)

mui · Mar 18, 2024 · e164e6b · e164e6b
1 parent 78a74c5
commit e164e6b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js
@@ -33,31 +33,36 @@ export default function Hero() {
       >
         <Stack spacing={2} useFlexGap sx={{ width: { xs: '100%', sm: '70%' } }}>
           <Typography
-            component="h1"
             variant="h1"
             sx={{
               display: 'flex',
               flexDirection: { xs: 'column', md: 'row' },
               alignSelf: 'center',
               textAlign: 'center',
+              fontSize: 'clamp(3.5rem, 10vw, 4rem)',
             }}
           >
             Our latest&nbsp;
             <Typography
               component="span"
               variant="h1"
               sx={{
+                fontSize: 'clamp(3rem, 10vw, 4rem)',
                 color: (theme) =>
                   theme.palette.mode === 'light' ? 'primary.main' : 'primary.light',
               }}
             >
               products
             </Typography>
           </Typography>
-          <Typography variant="body1" textAlign="center" color="text.secondary">
+          <Typography
+            textAlign="center"
+            color="text.secondary"
+            sx={{ alignSelf: 'center', width: { sm: '100%', md: '80%' } }}
+          >
             Explore our cutting-edge dashboard, delivering high-quality solutions
-            tailored to your needs. <br />
-            Elevate your experience with top-tier features and services.
+            tailored to your needs. Elevate your experience with top-tier features
+            and services.
           </Typography>
           <Stack
             direction={{ xs: 'column', sm: 'row' }}

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
@@ -33,31 +33,36 @@ export default function Hero() {
       >
         <Stack spacing={2} useFlexGap sx={{ width: { xs: '100%', sm: '70%' } }}>
           <Typography
-            component="h1"
             variant="h1"
             sx={{
               display: 'flex',
               flexDirection: { xs: 'column', md: 'row' },
               alignSelf: 'center',
               textAlign: 'center',
+              fontSize: 'clamp(3.5rem, 10vw, 4rem)',
             }}
           >
             Our latest&nbsp;
             <Typography
               component="span"
               variant="h1"
               sx={{
+                fontSize: 'clamp(3rem, 10vw, 4rem)',
                 color: (theme) =>
                   theme.palette.mode === 'light' ? 'primary.main' : 'primary.light',
               }}
             >
               products
             </Typography>
           </Typography>
-          <Typography variant="body1" textAlign="center" color="text.secondary">
+          <Typography
+            textAlign="center"
+            color="text.secondary"
+            sx={{ alignSelf: 'center', width: { sm: '100%', md: '80%' } }}
+          >
             Explore our cutting-edge dashboard, delivering high-quality solutions
-            tailored to your needs. <br />
-            Elevate your experience with top-tier features and services.
+            tailored to your needs. Elevate your experience with top-tier features
+            and services.
           </Typography>
           <Stack
             direction={{ xs: 'column', sm: 'row' }}