From d8d74da9fb7895f774b6cdaad0bb280cdc42ea4f Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:09:46 -0500
Subject: [PATCH] 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.
---
 nx-dev/ui-home/src/lib/hero.tsx | 148 +-------------------------------
 1 file changed, 2 insertions(+), 146 deletions(-)

diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
index 9bdf63f1d6578..8c9faf1e52492 100644
--- a/nx-dev/ui-home/src/lib/hero.tsx
+++ b/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>
-  );
-}