feat: Add Consulta_API page and routing, implement API request functionality

- Introduced a new page for API consultation (`Consulta_API`) with a form to send requests.
- Added routing for the new page and a 404 error page.
- Created a `MetodoSelect` component for selecting HTTP methods.
- Implemented a `MiBoton` component for a customizable button.
- Updated the `HomePage` layout to include a sidebar (`DoubleNavbar`) and main content area.
- Enhanced the `Welcome` component with a new greeting and description.
- Added a holographic shader background to the 404 error page.
- Updated dependencies in `yarn.lock` for new components and features.
- Styled the sidebar and main content for better user experience.

frontend/src/components/DoubleNavbar.module.css

@@ -0,0 +1,114 @@
+.navbar {
+  height: 100vh; /* ← Ocupa todo el alto de la ventana */
+  display: flex;
+  flex-direction: column;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  width: 300px;
+  border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
+  top: 0; /* ← Ancla arriba */
+}
+  
+
+
+  
+  .collapsed {
+    width: 70px; /* Ancho reducido cuando colapsa */
+  }
+
+  .wrapper {
+    display: flex;
+    flex: 1;
+  }
+  
+  .collapseButton {
+    margin-top: auto; /* Hace que el botón se empuje hacia abajo */
+    margin-bottom: 16px; /* ← Agrega separación del borde inferior */
+
+  }
+
+  .aside {
+    flex: 0 0 60px;
+    background-color: var(--mantine-color-body);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
+  }
+  
+  .main {
+    flex: 1;
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+  
+  .mainLink {
+    width: 44px;
+    height: 44px;
+    border-radius: var(--mantine-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  
+    &:hover {
+      background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+    }
+  
+    &[data-active] {
+      &,
+      &:hover {
+        background-color: var(--mantine-color-blue-light);
+        color: var(--mantine-color-blue-light-color);
+      }
+    }
+  }
+  
+  .title {
+    font-family:
+      Greycliff CF,
+      var(--mantine-font-family);
+    margin-bottom: var(--mantine-spacing-xl);
+    background-color: var(--mantine-color-body);
+    padding: var(--mantine-spacing-md);
+    padding-top: 18px;
+    height: 60px;
+    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
+  }
+  
+  .logo {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: 60px;
+    padding-top: var(--mantine-spacing-md);
+    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
+    margin-bottom: var(--mantine-spacing-xl);
+  }
+  
+  .link {
+    display: block;
+    text-decoration: none;
+    border-top-right-radius: var(--mantine-radius-md);
+    border-bottom-right-radius: var(--mantine-radius-md);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    padding: 0 var(--mantine-spacing-md);
+    font-size: var(--mantine-font-size-sm);
+    margin-right: var(--mantine-spacing-md);
+    font-weight: 500;
+    height: 44px;
+    line-height: 44px;
+  
+    &:hover {
+      background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+      color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
+    }
+  
+    &[data-active] {
+      &,
+      &:hover {
+        border-left-color: var(--mantine-color-blue-filled);
+        background-color: var(--mantine-color-blue-filled);
+        color: var(--mantine-color-white);
+      }
+    }
+  }