Add link to UI features on homepage (#1594)

* Don't restart rocket anymation * Add color gradient to rocket * Fix rocket transition CSS * Add link to UI features on homepage * Update Features.tsx * Update Features.module.css
react-cosmos · Jan 15, 2024 · 10c9ae9 · 10c9ae9
1 parent c86a8ee
commit 10c9ae9
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/docs/components/Features.module.css b/docs/components/Features.module.css
@@ -21,6 +21,7 @@
     font-weight: 400;
     font-weight: 500;
     color: hsl(204 12% 45%);
+    white-space: nowrap;
 
     :global(.dark) & {
       background-color: #000;

diff --git a/docs/components/Features.tsx b/docs/components/Features.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'nextra-theme-docs';
 import { ReactNode } from 'react';
 import styles from './Features.module.css';
 import BoxSvg from './svg/icons/box.svg';
@@ -19,7 +20,12 @@ export function Features() {
         />
         <Feature
           title="User Interface"
-          description="Beautiful interface for browsing fixtures and manipulating component inputs."
+          description={
+            <>
+              Playground for browsing fixtures and manipulating components.{' '}
+              <Link href="/docs/user-interface">Learn more →</Link>
+            </>
+          }
           icon={<MonitorSvg />}
         />
         <Feature
@@ -49,7 +55,7 @@ export function Features() {
 
 type FeatureProps = {
   title: string;
-  description: string;
+  description: ReactNode;
   icon: ReactNode;
 };
 function Feature({ title, description, icon }: FeatureProps) {

diff --git a/docs/components/Rocket.module.css b/docs/components/Rocket.module.css
@@ -23,13 +23,11 @@
   position: relative;
   width: 50%;
   height: 50%;
-  fill: currentColor;
   animation: hover 0.5s infinite ease;
-  transition:
-    left,
-    0.4s ease-out,
-    bottom 0.4s ease-out;
+  transition-property: left, top;
+  transition-duration: 0.4s;
   transition-delay: 0.4s;
+  transition-timing-function: ease-out;
 
   @keyframes hover {
     0% {
@@ -49,3 +47,19 @@
     }
   }
 }
+
+.iconStop1 {
+  stop-color: hsl(204 12% 45%);
+
+  :global(.dark) & {
+    stop-color: hsl(204, 8%, 100%);
+  }
+}
+
+.iconStop2 {
+  stop-color: hsl(204 12% 0%);
+
+  :global(.dark) & {
+    stop-color: hsl(204, 8%, 45%);
+  }
+}
diff --git a/docs/components/Rocket.tsx b/docs/components/Rocket.tsx
@@ -14,7 +14,14 @@ export function Rocket() {
           top: `${27 + offset}%`,
         }}
       >
-        <path d="M8.566 17.842c-.945 2.462-3.678 4.012-6.563 4.161.139-2.772 1.684-5.608 4.209-6.563l.51.521c-1.534 1.523-2.061 2.765-2.144 3.461.704-.085 2.006-.608 3.483-2.096l.505.516zm-1.136-11.342c-1.778-.01-4.062.911-5.766 2.614-.65.649-1.222 1.408-1.664 2.258 1.538-1.163 3.228-1.485 5.147-.408.566-1.494 1.32-3.014 2.283-4.464zm5.204 17.5c.852-.44 1.61-1.013 2.261-1.664 1.708-1.706 2.622-4.001 2.604-5.782-1.575 1.03-3.125 1.772-4.466 2.296 1.077 1.92.764 3.614-.399 5.15zm11.312-23.956c-.428-.03-.848-.044-1.261-.044-9.338 0-14.465 7.426-16.101 13.009l4.428 4.428c5.78-1.855 12.988-6.777 12.988-15.993v-.059c-.002-.437-.019-.884-.054-1.341zm-5.946 7.956c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z" />
+        <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop className={styles.iconStop1} offset="0%" />
+          <stop className={styles.iconStop2} offset="100%" />
+        </linearGradient>
+        <path
+          fill="url(#iconGradient)"
+          d="M8.566 17.842c-.945 2.462-3.678 4.012-6.563 4.161.139-2.772 1.684-5.608 4.209-6.563l.51.521c-1.534 1.523-2.061 2.765-2.144 3.461.704-.085 2.006-.608 3.483-2.096l.505.516zm-1.136-11.342c-1.778-.01-4.062.911-5.766 2.614-.65.649-1.222 1.408-1.664 2.258 1.538-1.163 3.228-1.485 5.147-.408.566-1.494 1.32-3.014 2.283-4.464zm5.204 17.5c.852-.44 1.61-1.013 2.261-1.664 1.708-1.706 2.622-4.001 2.604-5.782-1.575 1.03-3.125 1.772-4.466 2.296 1.077 1.92.764 3.614-.399 5.15zm11.312-23.956c-.428-.03-.848-.044-1.261-.044-9.338 0-14.465 7.426-16.101 13.009l4.428 4.428c5.78-1.855 12.988-6.777 12.988-15.993v-.059c-.002-.437-.019-.884-.054-1.341zm-5.946 7.956c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"
+        />
       </svg>
     </div>
   );

diff --git a/docs/utils/useViewportEnter.ts b/docs/utils/useViewportEnter.ts
@@ -5,14 +5,11 @@ export function useViewportEnter() {
   const [entered, setEntered] = React.useState(false);
 
   React.useEffect(() => {
-    if (el === null) return () => {};
+    if (el === null || entered) return;
 
     function updateEntered() {
-      const newEntered = hasEnteredViewport(el.offsetTop, el.offsetHeight);
-      if (newEntered && !entered) {
+      if (hasEnteredViewport(el.offsetTop, el.offsetHeight)) {
         setEntered(true);
-      } else if (entered && !newEntered && scrolledToTop()) {
-        setEntered(false);
       }
     }
 
@@ -32,7 +29,3 @@ export function useViewportEnter() {
 function hasEnteredViewport(elTop: number, elHeight: number) {
   return window.scrollY > elTop - window.innerHeight + elHeight;
 }
-
-function scrolledToTop() {
-  return window.scrollY === 0;
-}