Docs: Improve website homepage (#9)

* Docs: Change homepage tagline * Website: Design tweaks * Cleanup ZStack * Website: Change Bento layout to a list with more details * Other Small improvements
facebook · Nov 29, 2023 · 4a4c701 · 4a4c701
1 parent 181252d
commit 4a4c701
Show file tree

Hide file tree

Showing 12 changed files with 280 additions and 298 deletions.
diff --git a/apps/docs/components/CodeBlock.js b/apps/docs/components/CodeBlock.js
diff --git a/apps/docs/components/FeatureCard.js b/apps/docs/components/FeatureCard.js
@@ -9,17 +9,7 @@
 
 import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
-import Link from '@docusaurus/Link';
-
-let count = 0;
-
-function useId() {
-  const [id, setId] = React.useState(null);
-  React.useEffect(() => {
-    setId(`id-${++count}`);
-  }, []);
-  return id;
-}
+import useId from './hooks/useId';
 
 export default function FeatureCard({
   to,
@@ -31,7 +21,7 @@ export default function FeatureCard({
 }) {
   const titleId = useId();
   return (
-    <Link
+    <div
       {...stylex.props(styles.card, style)}
       aria-labelledby={titleId}
       to={to}>
@@ -47,7 +37,7 @@ export default function FeatureCard({
           <p {...stylex.props(styles.body)}>{children}</p>
         </div>
       </div>
-    </Link>
+    </div>
   );
 }
 
@@ -57,16 +47,16 @@ const styles = stylex.create({
   card: {
     alignItems: 'center',
     backgroundColor: 'var(--bg1)',
-    borderColor: 'hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)',
+    borderColor: 'hsla(var(--cyan-h), var(--cyan-s), var(--cyan-l), 0.25)',
     borderRadius: 32,
     borderStyle: 'solid',
     borderWidth: 1,
-    boxShadow: {
-      default:
-        '0 2px 4px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)',
-      ':hover':
-        '0 2px 8px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.5)',
-    },
+    // boxShadow: {
+    //   default:
+    //     '0 2px 4px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)',
+    //   ':hover':
+    //     '0 2px 8px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.5)',
+    // },
     boxSizing: 'border-box',
     color: {
       default: 'inherit',
@@ -83,7 +73,7 @@ const styles = stylex.create({
       '@container (max-width: 940px)': 'span 1',
     },
     height: '100%',
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     position: 'relative',
     transitionProperty: 'box-shadow',
     transitionDuration: '0.2s',
@@ -96,24 +86,17 @@ const styles = stylex.create({
       [LARGE]: 'row',
     },
     width: '100%',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     justifyContent: {
       default: 'center',
       [LARGE]: 'flex-start',
     },
-    textAlign: {
-      default: 'center',
-      [LARGE]: 'left',
-    },
-    padding: {
-      default: 16,
-      [LARGE]: 32,
-    },
+    paddingBlock: 16,
+    paddingInline: 32,
     columnGap: 32,
   },
   emoji: {
     fontSize: '8rem',
-    alignSelf: 'center',
     marginBlock: '-0.16em',
   },
   title: {
@@ -131,6 +114,6 @@ const styles = stylex.create({
     marginTop: '1em',
     fontSize: '1rem',
     lineHeight: 1.4,
-    opacity: 0.5,
+    color: 'var(--fg2)',
   },
 });
diff --git a/apps/docs/components/FeaturePile.js b/apps/docs/components/FeaturePile.js
@@ -17,45 +17,70 @@ export default function FeaturePile() {
       <div {...stylex.props(styles.grid)}>
         <FeatureCard
           emoji="🧗‍♂️"
-          subtitle="Atomic CSS for small bundles"
-          title="Scalable"
-          to="/docs/learn/#scalable">
-          Scale new heights without being weighed down by the size of CSS
-          bundles.
+          subtitle="Scale new heights without bundle sizes weighing you down"
+          title="Scalable">
+          <ul {...stylex.props(styles.ul)}>
+            <li>Minimize CSS output with atomic CSS</li>
+            <li>
+              The CSS size plateaus even as the number of components grows
+            </li>
+            <li>
+              Styles remain readable and maintainable within growing codebases
+            </li>
+          </ul>
         </FeatureCard>
         <FeatureCard
           emoji="🔮"
           style={styles.double}
-          subtitle="“The last style applied always wins”"
-          title="Predictable"
-          to="/docs/learn/#predictable">
-          You shouldn't need a crystal ball to know what styles are applied on
-          an element.
+          subtitle="You shouldn't need a crystal ball to know how an element is styled"
+          title="Predictable">
+          <ul {...stylex.props(styles.ul)}>
+            <li>
+              All styles are applied as class names applied directly on elements
+            </li>
+            <li>No specificity issues</li>
+            <li>“The last style applied always wins!”</li>
+          </ul>
         </FeatureCard>
         <FeatureCard
           emoji="🧩"
-          subtitle="Styles are data too"
-          title="Composable"
-          to="/docs/learn/#flexible--composable">
-          Styles can be passed around as props, and merged deterministically. It
-          all fits together.
+          subtitle="Merging styles shouldn't feel like a puzzle"
+          title="Composable">
+          <ul {...stylex.props(styles.ul)}>
+            <li>Apply styles conditionally</li>
+            <li>
+              Merge and compose arbitrary styles across component and file
+              boundaries
+            </li>
+            <li>
+              Use local constants and expressions to keep your styles DRY
+              <ul {...stylex.props(styles.ul)}>
+                <li>Or repeat yourself without worrying about performance</li>
+              </ul>
+            </li>
+          </ul>
         </FeatureCard>
         <FeatureCard
           emoji="🏎️"
           style={styles.smallOnLarge}
-          subtitle="Ship a single static CSS file"
-          title="Fast"
-          to="/docs/learn/#static--fast">
-          The StyleX compiler bundles styles into a static CSS file. No runtime
-          style injection.
+          subtitle="Dynamic at the speed of static, because it is static"
+          title="Fast">
+          <ul {...stylex.props(styles.ul)}>
+            <li>No runtime style injection</li>
+            <li>All styles are bundled in a static CSS file at compile-time</li>
+            <li>Optimized runtime for merging class names</li>
+          </ul>
         </FeatureCard>
         <FeatureCard
           emoji="🥽"
           style={styles.small}
-          subtitle="Strongly types for all styles"
-          title="Type-Safe"
-          to="/docs/learn/#type-safe">
-          Safety first! Static types catch common styling mistakes in code.
+          subtitle="More safety than just your eyes"
+          title="Type-Safe">
+          <ul {...stylex.props(styles.ul)}>
+            <li>Type-safe APIs</li>
+            <li>Type-safe styles</li>
+            <li>Type-safe themes</li>
+          </ul>
         </FeatureCard>
       </div>
     </div>
@@ -97,4 +122,13 @@ const styles = stylex.create({
     },
     gridColumn: null,
   },
+  ul: {
+    marginTop: '0.5rem',
+    padding: 0,
+    paddingInline: '1.2rem',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    textAlign: 'left',
+  },
 });