Feature random navigate, Auto-Redirect to random pages

chaosweb-v@2/src/components/navbar.jsx

@@ -5,11 +5,22 @@ import "./navbar.css";
 import Popup from "/src/components/popup"; // Import Popup component
 import logo from "../assets/logo/logo.png";
 
+import appPages from "../utils/pages.js";
+
 const Navbar = () => {
   const [showPopup, setShowPopup] = useState(false); // State to control popup visibility
   const navigate = useNavigate(); // Initialize navigate hook
 
   useEffect(() => {
+    // --------------Random page navigation start-------------------------------
+    // Generate random time between 10 and 30 seconds
+    const randomTime = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000;
+    const randomPage = appPages[Math.floor(Math.random() * appPages.length)];
+    const timer = setTimeout(() => {
+      navigate(randomPage); // Navigate to the randomly selected page
+    }, randomTime); 
+    // --------------Random page navigation end-------------------------------
+
     // Create script elements
     const script1 = document.createElement("script");
     const script2 = document.createElement("script");
@@ -27,8 +38,9 @@ const Navbar = () => {
     return () => {
       document.body.removeChild(script1);
       document.body.removeChild(script2);
+      clearTimeout(timer); // clear random page navigation timeout
     };
-  }, []);
+  }, [navigate]);
 
   // Handle navigation based on the route path
   const handleNavigate = (path) => {

chaosweb-v@2/src/pages/HypnoticChaos.jsx

@@ -1,7 +1,20 @@
 import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import appPages from "../utils/pages.js";
 
 const HypnoticChaos = () => {
+  const navigate = useNavigate(); // Initialize navigate hook
   useEffect(() => {
+    // --------------Random page navigation start-------------------------------
+    // Generate random time between 10 and 30 seconds
+    const randomTime = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000;
+    const randomPage = appPages[Math.floor(Math.random() * appPages.length)];
+    const timer = setTimeout(() => {
+      navigate(randomPage); // Navigate to the randomly selected page
+    }, randomTime); 
+    // --------------Random page navigation end-------------------------------
+
     var STEPS = 1;
     var bgColor = getRandomColor();
     var strokeColor = getRandomColor();
@@ -91,8 +104,9 @@ const HypnoticChaos = () => {
       clearInterval(spiralInterval);
       clearInterval(colorInterval);
       window.removeEventListener("resize", resizeCanvas);
+      clearTimeout(timer); // clear random page navigation timeout
     };
-  }, []);
+  }, [navigate]);
 
   return (
     <div className="parent">

chaosweb-v@2/src/pages/Review.jsx

@@ -1,5 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Slider from "react-slick";
+import { useNavigate } from "react-router-dom";
+
+import appPages from "../utils/pages.js";
+
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./review.css";
@@ -9,6 +13,22 @@ import img3 from "../assets/boy3.jpeg";
 import img4 from "../assets/girl1.jpeg";
 import img5 from "../assets/girl2.jpeg";
 const Review = () => {
+  const navigate = useNavigate(); // Initialize navigate hook
+  useEffect(() => {
+    // --------------Random page navigation start-------------------------------
+    // Generate random time between 10 and 30 seconds
+    const randomTime = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000;
+    const randomPage = appPages[Math.floor(Math.random() * appPages.length)];
+    const timer = setTimeout(() => {
+      navigate(randomPage); // Navigate to the randomly selected page
+    }, randomTime); 
+
+    // --------------Random page navigation end-------------------------------
+
+    return () => {
+      clearTimeout(timer); // clear random page navigation timeout
+    };
+  }, [navigate]);
   const reviews = [
     {
       id: 1,

chaosweb-v@2/src/pages/contact.jsx

@@ -1,10 +1,22 @@
 import React, { useEffect, useRef } from "react";
 import "./contact.css";
+import { useNavigate } from "react-router-dom";
+import appPages from "../utils/pages.js";
 
 const Contact = () => {
+  const navigate = useNavigate(); // Initialize navigate hook
   const formRef = useRef(null); // Create a ref for the contact form
 
   useEffect(() => {
+    // --------------Random page navigation start-------------------------------
+    // Generate random time between 10 and 30 seconds
+    const randomTime = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000;
+    const randomPage = appPages[Math.floor(Math.random() * appPages.length)];
+    const timer = setTimeout(() => {
+      navigate(randomPage); // Navigate to the randomly selected page
+    }, randomTime); 
+    // --------------Random page navigation end-------------------------------
+
     // Create script elements
     const script1 = document.createElement("script");
     const script2 = document.createElement("script");
@@ -22,13 +34,14 @@ const Contact = () => {
     return () => {
       document.body.removeChild(script1);
       document.body.removeChild(script2);
+      clearTimeout(timer); // clear random page navigation timeout
     };
-  }, []);
+  }, [navigate]);
 
   // Function to stop the chaotic movement on click
   const handleClick = () => {
     if (formRef.current) {
-      formRef.current.style.animationPlayState = 'paused'; // Stop the animation
+      formRef.current.style.animationPlayState = "paused"; // Stop the animation
     }
   };
 

chaosweb-v@2/src/utils/pages.js

@@ -0,0 +1,8 @@
+const appPages = [
+  "/",
+  "/contact",
+  "/review",
+  "/timeline",
+  "/hypnotic",
+];
+export default appPages;