New Scroll

app/css/scroller.css

@@ -0,0 +1,26 @@
+/* Estilos personalizados para el scroller */
+/* Estilo para el riel del scroller */
+::-webkit-scrollbar {
+    width: 20px; /* Ancho del scroller */
+  }
+
+  /* Estilo para el riel del scroller en el eje vertical */
+  ::-webkit-scrollbar-track {
+    background-image: linear-gradient(to bottom, #ff7e5f 15%, #ff7f5f 16%, #31405f 30%, #31405f 83%, #000000 89%,  #000000 97%);
+
+  }
+
+  /* Estilo para el botón (manija) del scroller */
+  ::-webkit-scrollbar-thumb {
+    box-shadow: 0 0 20px rgb(0, 0, 0);
+    border: 1px solid black;
+    background-color: #ffffff1f; 
+    border-radius: 20px;
+  }
+
+  /* Estilo para el botón del scroller cuando se mueve */
+  ::-webkit-scrollbar-thumb:hover {
+    cursor:all-scroll;
+    background-color: #ffffff; /* Color del botón al pasar el ratón */
+  }
+

app/page.jsx

@@ -7,7 +7,8 @@ import Head from 'next/head';
 
 import Navbar from './components/navbar';
 import styles from "./css/main.css";
-import style from "./css/mainrespons.css";
+import stylerespons from "./css/mainrespons.css";
+import stylescroll from "./css/scroller.css";
 import miImagen from './images/1mb.jpeg';