From f6357be94b0e42a71e0e1ad27256f97e9277a4f4 Mon Sep 17 00:00:00 2001
From: GuillePrograma94 <guilleprograma94@gmail.com>
Date: Thu, 7 Nov 2024 19:26:27 +0000
Subject: [PATCH] Guarda cambios antes de actualizar con main

---
 src/app/page.tsx                              |  6 +-
 .../personas-animales-desaparecidos/page.js   | 61 +++++++++++++++++++
 src/components/layout/Sidebar.js              | 13 +---
 3 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 src/app/personas-animales-desaparecidos/page.js

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 47801201..2a01896c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -159,10 +159,10 @@ export default function Home() {
       priority: 'high',
     },
     {
-      title: 'Personas Desaparecidas',
-      description: 'Reportar o buscar personas',
+      title: 'Desaparecidos y Extraviados',
+      description: 'Reportar o buscar Personas, animales y vehículos',
       icon: Users,
-      path: 'https://desaparecidosdana.pythonanywhere.com/',
+      path: '/personas-animales-desaparecidos',
       color: 'purple',
       priority: 'high',
     },
diff --git a/src/app/personas-animales-desaparecidos/page.js b/src/app/personas-animales-desaparecidos/page.js
new file mode 100644
index 00000000..9bcb8242
--- /dev/null
+++ b/src/app/personas-animales-desaparecidos/page.js
@@ -0,0 +1,61 @@
+// personas-animales-desaparecidos/page.js
+
+import { Users, PawPrint, Car, UserSearch } from 'lucide-react';
+
+export default function PersonasAnimalesDesaparecidos() {
+  return (
+    <div className="mx-auto p-4 max-w-4xl">
+      {/* Encabezado con fondo de color e icono */}
+      <div className="flex items-center justify-between bg-purple-100 p-6 rounded-t-lg shadow">
+        <h1 className="text-2xl font-bold text-purple-800 flex items-center gap-2">
+          <UserSearch className="h-8 w-8 text-purple-500" />
+          Personas, Animales y Vehículos Desaparecidos
+        </h1>
+      </div>
+
+      {/* Tarjeta grande para información */}
+      <div className="bg-white p-8 rounded-b-lg shadow mb-8">
+        <p className="text-gray-700 text-lg">
+          En esta página puedes acceder a diferentes herramientas externas para encontrar personas, animales y vehículos desaparecidos. 
+          Selecciona la opción que necesitas para más información y para reportar un caso o buscar ayuda.
+        </p>
+      </div>
+
+      {/* Tres columnas de botones */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Botón para Personas Desaparecidas */}
+        <a
+          href="https://desaparecidosdana.pythonanywhere.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-blue-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <Users className="h-10 w-10 text-blue-500 mb-2" />
+          <h2 className="text-lg font-bold text-blue-600 text-center">Personas Desaparecidas</h2>
+        </a>
+
+        {/* Botón para Animales Desaparecidos */}
+        <a
+          href="https://gorogoro.es/dana"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-green-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <PawPrint className="h-10 w-10 text-green-500 mb-2" />
+          <h2 className="text-lg font-bold text-green-600 text-center">Animales Desaparecidos</h2>
+        </a>
+
+        {/* Botón para Vehículos Extraviados */}
+        <a
+          href="https://tucochedana.es/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-purple-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <Car className="h-10 w-10 text-purple-500 mb-2" />
+          <h2 className="text-lg font-bold text-purple-600 text-center">Vehículos Extraviados</h2>
+        </a>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 34887bfb..4c2e06e0 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -82,10 +82,9 @@ const menuItems = [
   {
     icon: UserSearch,
     title: 'Desaparecidos',
-    description: 'Reportar personas',
-    path: 'https://desaparecidosdana.pythonanywhere.com/',
+    description: 'Personas, animales ...',
+    path: '/personas-animales-desaparecidos',
     color: 'text-purple-600',
-    isHref: true,
   },
   {
     icon: Package,
@@ -133,14 +132,6 @@ const menuItems = [
     color: 'text-amber-600',
     isHref: true,
   },
-  {
-    icon: Car,
-    title: 'Encontrar tu Coche',
-    description: 'Sistema de registro y consulta de vehículos perdidos',
-    path: 'https://tucochedana.es/index.php/',
-    color: 'text-blue-600',
-    isHref: true,
-  },
 ];
 
 export default function Sidebar({ isOpen, toggle }) {