docs(nx-dev): simplify Hero component by removing ShaderGradient (#29241

)

This commit removes the ShaderGradientElement and its associated
functionality from the Hero component, reducing complexity and
dependencies. The return type of the Hero component is also updated for
consistency. These changes lead to a more streamlined codebase with
potentially fewer runtime considerations and increase client
compatibility.

(cherry picked from commit d8d74da)

nx-dev/ui-home/src/lib/hero.tsx

@@ -1,26 +1,11 @@
 'use client';
 import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
-import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
-import { BlurFade, usePrefersReducedMotion } from '@nx/nx-dev/ui-animations';
-import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
-import { useState } from 'react';
-import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
 import { RustIcon, TypeScriptIcon } from '@nx/nx-dev/ui-icons';
+import { ReactElement } from 'react';
 
-export function Hero(): JSX.Element {
+export function Hero(): ReactElement {
   return (
     <div className="mx-auto h-screen w-full max-w-7xl px-6 lg:px-8">
-      <div className="hidden lg:block">
-        <ShaderGradientElement />
-      </div>
-      <div className="absolute left-0 right-0 -z-10 mx-auto flex h-full max-h-screen w-full flex-row justify-between border-b border-dashed border-slate-200/30 px-6 lg:h-full lg:max-w-7xl lg:px-0 dark:border-slate-800/40">
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-      </div>
       <div className="z-20 mx-auto grid h-screen max-w-6xl grid-cols-1 place-items-center text-center">
         <div className="container">
           <SectionHeading as="h1" variant="display" data-cy="primary-heading">
@@ -91,132 +76,3 @@ export function Hero(): JSX.Element {
     </div>
   );
 }
-
-function ShaderGradientElement() {
-  const [theme] = useTheme();
-  const [displayTheme, setDisplayTheme] = useState<Theme>('system');
-  const prefersReducedMotion = usePrefersReducedMotion();
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia: any = window.matchMedia('(prefers-color-scheme: dark)');
-
-    function handleChange(): void {
-      if (theme === 'system') {
-        setDisplayTheme(matchMedia.matches ? 'dark' : 'light');
-      } else {
-        setDisplayTheme(theme === 'dark' ? 'dark' : 'light');
-      }
-    }
-
-    handleChange();
-
-    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange);
-    } else {
-      matchMedia.addEventListener('change', handleChange);
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange);
-      } else {
-        matchMedia.removeEventListener('change', handleChange);
-      }
-    };
-  }, [theme]);
-
-  if (prefersReducedMotion) {
-    return;
-  }
-
-  if (displayTheme === 'dark')
-    return (
-      <BlurFade
-        delay={1}
-        duration={1.8}
-        className="absolute left-0 -z-10 w-full"
-      >
-        <div className="h-screen w-full overflow-hidden">
-          <ShaderGradientCanvas
-            pointerEvents="none"
-            eventPrefix="client"
-            fov={45}
-            pixelDensity={1}
-            className="pointer-events-none"
-          >
-            <ShaderGradient
-              brightness={4}
-              cDistance={5}
-              color1="#251B36"
-              color2="#020617"
-              color3="#1F1C3A"
-              frameRate={10}
-              grain="off"
-              lightType="3d"
-              positionX={0}
-              positionY={1.8}
-              positionZ={0}
-              range="enabled"
-              rangeEnd={40}
-              rangeStart={0}
-              reflection={0.1}
-              rotationX={0}
-              rotationY={0}
-              rotationZ={-90}
-              shader="defaults"
-              type="waterPlane"
-              uDensity={1}
-              uFrequency={5.5}
-              uSpeed={0.1}
-              uStrength={3}
-              uTime={0.2}
-            />
-          </ShaderGradientCanvas>
-          <div className="absolute inset-x-0 bottom-0 h-96 bg-gradient-to-b from-transparent to-white dark:to-slate-950" />
-        </div>
-      </BlurFade>
-    );
-  return (
-    <BlurFade delay={1} duration={1.8} className="absolute left-0 -z-10 w-full">
-      <div className="h-screen w-full overflow-hidden">
-        <ShaderGradientCanvas
-          pointerEvents="none"
-          eventPrefix="client"
-          fov={45}
-          pixelDensity={1}
-          className="pointer-events-none"
-        >
-          <ShaderGradient
-            brightness={4}
-            cDistance={5}
-            color1="#F4F2FE"
-            color2="#F7F7FF"
-            color3="#FFFFFF"
-            frameRate={10}
-            grain="off"
-            lightType="3d"
-            positionX={0}
-            positionY={1.8}
-            positionZ={0}
-            range="enabled"
-            rangeEnd={40}
-            rangeStart={0}
-            reflection={0.1}
-            rotationX={0}
-            rotationY={0}
-            rotationZ={-90}
-            shader="defaults"
-            type="waterPlane"
-            uDensity={1}
-            uFrequency={5.5}
-            uSpeed={0.1}
-            uStrength={3}
-            uTime={0.2}
-          />
-        </ShaderGradientCanvas>
-        <div className="absolute inset-x-0 bottom-0 h-96 bg-gradient-to-b from-transparent to-white dark:to-slate-950" />
-      </div>
-    </BlurFade>
-  );
-}