added new images and new component call BackgroundRotator

app/(private)/layout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import Logout from "../Components/auth/Logout/Logout";
+import BackgroundRotator from "../Components/layout/BackgroundRotator.tsx/BackgroundRotator";
 export default async function PrivateLayout({
   children,
 }: {
@@ -9,7 +10,7 @@ export default async function PrivateLayout({
     <div className="mainContainer">
       <div className="container">
         <Logout />
-        <div className="img"></div>
+        <BackgroundRotator/>
         {children}
       </div>
     </div>

app/Components/layout/BackgroundRotator.tsx/Background.css

@@ -0,0 +1,68 @@
+.backgroundContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 725px;
+    height: 615px;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.bgImage {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    transition: opacity 2s ease-in-out;
+    opacity: 1;
+    z-index: 1;
+}
+
+.bgImage.fade {
+    z-index: 0;
+    opacity: 0;
+}
+
+.bgImage.fade.active {
+    opacity: 1;
+    z-index: 1;
+}
+
+.bgImage::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+}
+
+@media (max-width: 800px) {
+
+    .backgroundContainer {
+        background-image: url("/rock.jpg");
+        background-size: cover;
+        background-position: center;
+        width: 600px;
+        height: 650px;
+        right: 50%;
+        transform: translateX(50%);
+    }
+
+    .bgImage {
+        display: none;
+        visibility: hidden;
+    }
+
+    .backgroundContainer::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+    }
+
+    .backgroundContainer::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
+    }
+}

app/Components/layout/BackgroundRotator.tsx/BackgroundRotator.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import "./Background.css";
+
+const images = [
+  "/rock2.jpg",
+  "/CEDETEC.jpg",
+  "/FES-ACATLAN.jpg",
+  "/DSC.jpeg",
+];
+
+export default function BackgroundRotator() {
+  const [current, setCurrent] = useState(0);
+  const [next, setNext] = useState(1);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+
+      setTimeout(() => {
+        setCurrent(next);
+        setNext((next + 1) % images.length);
+        setIsTransitioning(false);
+      }, 2000);
+    }, 20000);
+
+    return () => clearInterval(interval);
+  }, [next]);
+
+  return (
+    <div className="backgroundContainer">
+      <div
+        className="bgImage"
+        style={{ backgroundImage: `url(${images[current]})` }}
+      />
+
+      <div
+        className={`bgImage fade ${isTransitioning ? "active" : ""}`}
+        style={{ backgroundImage: `url(${images[next]})` }}
+      />
+    </div>
+  );
+}

app/globals.css

@@ -105,28 +105,6 @@ footer p {
   gap: 1rem;
 }
 
-.img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 725px;
-  height: 615px;
-  background-image: url("/rock2.jpg");
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-  z-index: -1;
-  opacity: 1;
-}
-
-.img::after {
-  display: flex;
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
-}
-
 input,
 select {
   flex: 1;
@@ -631,35 +609,6 @@ table td:last-child {
     border-radius: 0;
   }
 
-  .img {
-    background-image: url("/rock.jpg");
-    right: 50%;
-    transform: translateX(50%);
-    width: 600px;
-    opacity: 1;
-    height: 650px;
-  }
-
-  .img::before,
-  .img::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    z-index: 1;
-  }
-
-  .img::before {
-    left: 0;
-    background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
-  }
-
-  .img::after {
-    right: 0;
-    background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
-  }
-
   .containerSection {
     align-items: start;
     scrollbar-width: none;

app/page.tsx

@@ -1,4 +1,5 @@
 import Login from "./Components/auth/Login/Login";
+import BackgroundRotator from "./Components/layout/BackgroundRotator.tsx/BackgroundRotator";
 import { LoginRedirect } from "./Routes/LoginRedirect";
 
 export default function Home() {
@@ -6,7 +7,7 @@ export default function Home() {
     <div className="loginContainer">
       <LoginRedirect>
         <div className="container">
-          <div className="img"></div>
+          <BackgroundRotator/>
           <Login />
         </div>
       </LoginRedirect>