From f899af5f04faa337a80f9cfcd5762a7a05e1e797 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 29 Apr 2024 18:17:33 -0300
Subject: [PATCH] fine-tune changes

---
 .../productDesignKit/DesignKitFAQ.tsx         | 15 ++++-
 .../productDesignKit/DesignKitHero.tsx        |  2 +-
 .../productMaterial/MaterialDesignKits.tsx    | 57 ++++++-------------
 3 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
index 0d2e175f0945ab..25ab7e0e454d5f 100644
--- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx
+++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -30,18 +30,27 @@ const faqData = [
       <React.Fragment>
         The number of licenses purchased must correspond to the maximum number of editors working
         concurrently in a 24 hour period. An editor is somebody contributing changes to the designed
-        screens that use the Design kits. No licenses are required for viewing the designs.
+        screens that use the Design Kits. No licenses are required for viewing the designs.
       </React.Fragment>
     ),
   },
   {
-    summary: 'The Design kit got an update. How do I get it?',
+    summary: 'The Design Kit got an update. How do I get it?',
     detail: (
       <React.Fragment>
         We&apos;ll send you an email when a new release is available. You can access the item on the{' '}
         <InternalLink href="https://mui.com/store/account/downloads/">download</InternalLink> page
         of your store account and find a detailed description of the changes under
-        the&quot;Changelog&quot; tab on this page..
+        the&quot;Changelog&quot; tab on this page.
+      </React.Fragment>
+    ),
+  },
+  {
+    summary: 'Is the Material UI Sync plugin paid?',
+    detail: (
+      <React.Fragment>
+        No. We&apos;re still in alpha mode and rolling out more features progressively, as per your
+        feedback. We might introduce paid tiers in the future, though.
       </React.Fragment>
     ),
   },
diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx
index 3621b536659bd0..2026dc0ac6477b 100644
--- a/docs/src/components/productDesignKit/DesignKitHero.tsx
+++ b/docs/src/components/productDesignKit/DesignKitHero.tsx
@@ -33,7 +33,7 @@ export default function TemplateHero() {
             })}
           >
             <IconImage width={28} height={28} loading="eager" name="product-designkits" /> Design
-            kits
+            Kits
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
             Material UI
diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx
index 5f44952c3cc191..9b1f16418b297e 100644
--- a/docs/src/components/productMaterial/MaterialDesignKits.tsx
+++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx
@@ -55,7 +55,7 @@ export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps
               <Item
                 icon={<DrawRoundedIcon color="primary" />}
                 title="Design Kit"
-                description="Get many of the Material UI components with states, variations, colors, typography, and icons on your preferred design tool. Frequently updated to stay up-to-date with the latest release."
+                description="Get many of the Material UI components with states, variations, colors, typography, and icons on your preferred design tool."
               />
             </Highlighter>
             <Highlighter disableBorder selected={!customized} onClick={() => setCustomized(false)}>
@@ -252,17 +252,7 @@ export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps
               </Fade>
             </Frame.Demo>
             {customized ? (
-              <Frame.Info
-                data-mui-color-scheme="dark"
-                sx={{
-                  display: 'flex',
-                  alignItems: { xs: 'start', sm: 'center' },
-                  flexDirection: { xs: 'column', sm: 'row' },
-                  justifyContent: 'space-between',
-                  minWidth: 0,
-                  gap: { xs: 3, sm: 0 },
-                }}
-              >
+              <Frame.Info data-mui-color-scheme="dark">
                 <Box
                   sx={{
                     display: 'flex',
@@ -273,7 +263,7 @@ export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps
                   <Typography variant="body2" fontWeight="semiBold">
                     Available in:
                   </Typography>
-                  <Box sx={{ display: 'flex', gap: 1, '& >img': { width: 26, height: 26 } }}>
+                  <Box sx={{ display: 'flex', gap: 1, '& >img': { width: 22, height: 22 } }}>
                     <img src="/static/branding/design-kits/figma-logo.svg" alt="" loading="lazy" />
                     <img src="/static/branding/design-kits/sketch-logo.svg" alt="" loading="lazy" />
                     <img
@@ -283,14 +273,20 @@ export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps
                     />
                   </Box>
                 </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: { xs: 'column-reverse', sm: 'row' },
-                    gap: 1.5,
-                    width: { xs: '100%', sm: 'fit-content' },
-                  }}
-                >
+                <Typography variant="body2" color="text.secondary" mb={2}>
+                  We frequently update them to stay up-to-date with the latest release.
+                </Typography>
+                <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 1.5 }}>
+                  <Button
+                    component={Link}
+                    variant="contained"
+                    size="small"
+                    noLinkStyle
+                    href="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta2#design"
+                    endIcon={<ChevronRightRoundedIcon />}
+                  >
+                    Buy it now
+                  </Button>
                   <Button
                     component={Link}
                     variant="outlined"
@@ -305,28 +301,9 @@ export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps
                         style={{ width: 16, height: 16 }}
                       />
                     }
-                    sx={{
-                      height: 'fit-content',
-                      width: { xs: '100%', sm: 'fit-content' },
-                    }}
                   >
                     Figma Preview
                   </Button>
-                  <Button
-                    component={Link}
-                    variant="contained"
-                    size="small"
-                    href="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta2#design"
-                    endIcon={<ChevronRightRoundedIcon />}
-                    sx={{
-                      ml: { xs: 0, sm: 'auto' },
-                      height: 'fit-content',
-                      width: { xs: '100%', sm: 'fit-content' },
-                      color: '#FFF !important',
-                    }}
-                  >
-                    Buy it now
-                  </Button>
                 </Box>
               </Frame.Info>
             ) : (