general design and writing updates

danilo-leal · Mar 26, 2024 · 5a88031 · 5a88031
1 parent a1e9ba8
commit 5a88031
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/docs/pages/connect.tsx b/docs/pages/connect.tsx
@@ -22,7 +22,7 @@ const Image = styled('img')(({ theme }) => ({
   height: 'auto',
   borderRadius: 0,
   border: 'none',
-  filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.primary[200], 0.5)})`,
+  filter: `drop-shadow(-2px 4px 12px ${alpha(theme.palette.primary[200], 0.3)})`,
   overflow: 'clip',
   backgroundClip: 'padding-box',
   [theme.breakpoints.up('sm')]: {
@@ -32,7 +32,7 @@ const Image = styled('img')(({ theme }) => ({
   },
   ...theme.applyDarkStyles({
     borderColor: theme.palette.primaryDark[600],
-    filter: `drop-shadow(-2px 6px 24px ${alpha(theme.palette.primary[900], 0.8)})`,
+    filter: `drop-shadow(-2px 4px 12px ${alpha(theme.palette.primary[900], 0.8)})`,
   }),
 }));
 
@@ -68,8 +68,10 @@ export default function Connect() {
               description="Connect is a Figma plugin that exports a full-fledged Material UI theme to get your design customization up as fast as possible."
             />
             <GetStartedButtons
-              primaryLabel="Get it at the Figma Community"
+              primaryLabel="Use Connect now"
               primaryUrl="/connect/"
+              secondaryLabel="View docs"
+              secondaryUrl="/connect/" // I'll swap it later to /material-ui/design-resources/connect/ once that's merged
             />
           </Box>
         </Section>

diff --git a/docs/src/components/productConnect/ConnectFeatures.tsx b/docs/src/components/productConnect/ConnectFeatures.tsx
@@ -55,21 +55,21 @@ export default function ConnectFeatures() {
               <Item
                 icon={<ImagesearchRollerRoundedIcon color="success" />}
                 title="Customize your design tokens"
-                description="Visually tweak your colors, typography styles, shadows, spacing values, and border-radius through Figma's variables panel. Then, generate the theme with these changes!"
+                description="Change your colors, typography styles, shadows, spacing values, and border-radius through Figma's variables panel. Then, quickly generate a theme with these changes."
               />
             </Highlighter>
             <Highlighter disableBorder {...getSelectedProps(1)} onClick={() => setIndex(1)}>
               <Item
                 icon={<FormatShapesRoundedIcon color="primary" />}
                 title="Redesign your components"
-                description="Want to make your primary button fully rounded and with lowercase text? Use Connect to customize component styles."
+                description="Want to make your primary button fully rounded and with lowercase text? Use Connect to output code for custom component styles."
               />
             </Highlighter>
             <Highlighter disableBorder {...getSelectedProps(2)} onClick={() => setIndex(2)}>
               <Item
                 icon={<SvgStorybook />}
                 title="Preview your changes on Storybook"
-                description="All of the changes you run through the Connect plugin can also be visualized on a baked-in Storybook preview instance."
+                description="All of the changes you run through the Connect plugin can also be visualized on a built-in Storybook preview instance."
               />
             </Highlighter>
           </Group>
@@ -125,7 +125,7 @@ export default function ConnectFeatures() {
                               top: { xs: 100, sm: 60 },
                               transform: {
                                 xs: 'scale(1.8) translate(-20%)',
-                                sm: 'scale(1.1) translate(-25%)',
+                                sm: 'scale(1.1) translate(-15%)',
                               },
                               filter: {
                                 xs: 'auto',
@@ -299,7 +299,7 @@ export default function ConnectFeatures() {
                               top: { xs: 100, sm: 60 },
                               transform: {
                                 xs: 'scale(1.8) translate(-20%)',
-                                sm: 'scale(1.1) translate(-30%)',
+                                sm: 'scale(1.1) translate(-25%)',
                               },
                               filter: {
                                 xs: 'auto',