nce web dashboard with new hooks and layout improvements (#320)

* nce web dashboard with new hooks and layout improvements

* fix(Hyperspeed): improve resume and tick methods to handle disposed and paused states correctly

* style: unify nav-height variable across Pricing and LandingPage stylesheets

Author: Ingole712521

apps/web-dashboard/src/App.jsx

@@ -1,5 +1,6 @@
 import { Routes, Route } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
+import ScrollToTop from './components/Layout/ScrollToTop';
 import Login from './pages/Login';
 import Signup from './pages/Signup';
 import MainLayout from './components/Layout/MainLayout';
@@ -51,6 +52,8 @@ function AppContent() {
         }}
       />
 
+      <ScrollToTop />
+
       <Routes>
         <Route path="/" element={<LandingPage />} />
         <Route path="/pricing" element={<Pricing />} />

apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.jsx

@@ -361,7 +361,7 @@ const Hyperspeed = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
           alpha: true
         });
         this.renderer.setSize(initW, initH, false);
-        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
         this.composer = new EffectComposer(this.renderer);
         container.append(this.renderer.domElement);
 
@@ -382,6 +382,7 @@ const Hyperspeed = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
         this.clock = new THREE.Clock();
         this.assets = {};
         this.disposed = false;
+        this.paused = false;
 
         this.road = new Road(this, options);
         this.leftCarLights = new CarLights(
@@ -584,8 +585,20 @@ const Hyperspeed = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
         this.composer.render(delta);
       }
 
+      pause() {
+        this.paused = true;
+      }
+
+      resume() {
+        if (this.disposed || !this.paused) return;
+        this.paused = false;
+        this.clock.getDelta();
+        requestAnimationFrame(this.tick);
+      }
+
       dispose() {
         this.disposed = true;
+        this.paused = true;
 
         if (this.scene) {
           this.scene.traverse(object => {
@@ -639,7 +652,7 @@ const Hyperspeed = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
       }
 
       tick() {
-        if (this.disposed) return;
+        if (this.disposed || this.paused) return;
 
         if (!this.hasValidSize) {
           const w = this.container.offsetWidth;
@@ -1183,6 +1196,39 @@ const Hyperspeed = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
     };
   }, [effectOptions]);
 
+  useEffect(() => {
+    const el = hyperspeed.current;
+    if (!el) return;
+
+    const syncPauseState = (shouldPause) => {
+      if (!appRef.current) return;
+      if (shouldPause) appRef.current.pause();
+      else appRef.current.resume();
+    };
+
+    const observer = new IntersectionObserver(
+      ([entry]) => syncPauseState(!entry.isIntersecting),
+      { rootMargin: '80px', threshold: 0 }
+    );
+    observer.observe(el);
+
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        syncPauseState(true);
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const inView = rect.bottom > 0 && rect.top < window.innerHeight;
+      syncPauseState(!inView);
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+
+    return () => {
+      observer.disconnect();
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+    };
+  }, []);
+
   return <div id="lights" ref={hyperspeed}></div>;
 };
 

apps/web-dashboard/src/components/Layout/ScrollToTop.jsx

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export default function ScrollToTop() {
+    const { pathname, hash } = useLocation();
+
+    useEffect(() => {
+        if (hash) return;
+        window.scrollTo(0, 0);
+    }, [pathname, hash]);
+
+    return null;
+}

apps/web-dashboard/src/hooks/useInView.js

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react';
+
+const DEFAULT_ROOT_MARGIN = '200px 0px';
+const DEFAULT_THRESHOLD = 0;
+
+export function useInView({
+    rootMargin = DEFAULT_ROOT_MARGIN,
+    threshold = DEFAULT_THRESHOLD,
+} = {}) {
+    const ref = useRef(null);
+    const [inView, setInView] = useState(false);
+
+    useEffect(() => {
+        const node = ref.current;
+        if (!node) return;
+
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setInView(true);
+                observer.disconnect();
+            }
+        }, { rootMargin, threshold });
+
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [rootMargin, threshold]);
+
+    return [ref, inView];
+}

apps/web-dashboard/src/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+        if (typeof window === 'undefined') return false;
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    });
+
+    useEffect(() => {
+        const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const onChange = (event) => setPrefersReducedMotion(event.matches);
+        media.addEventListener('change', onChange);
+        return () => media.removeEventListener('change', onChange);
+    }, []);
+
+    return prefersReducedMotion;
+}