From 2be291ca130033e40087255d98dc28940bab5d6e Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Mon, 13 Apr 2026 10:52:28 +0200
Subject: [PATCH] =?UTF-8?q?add:=20implementar=20footer=20con=20informaci?=
 =?UTF-8?q?=C3=B3n=20del=20proyecto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/Footer.jsx     | 41 +++++++++++++++++++
 frontend/src/components/layout/MainLayout.jsx | 13 +++---
 2 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/layout/Footer.jsx

diff --git a/frontend/src/components/layout/Footer.jsx b/frontend/src/components/layout/Footer.jsx
new file mode 100644
index 0000000..05091c4
--- /dev/null
+++ b/frontend/src/components/layout/Footer.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+export default function Footer() {
+  return (
+    <footer className="bg-white border-t border-slate-200 mt-auto shrink-0">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="py-6 flex flex-col md:flex-row justify-between items-center gap-4">
+          
+          {/* Información del Proyecto */}
+          <div className="flex flex-col items-center md:items-start">
+            <span className="text-sm font-black text-slate-800 tracking-tight">
+              Deck of Cards
+            </span>
+            <span className="text-xs text-slate-500 mt-1 font-medium">
+              Herramienta Científica de Modelado Difuso
+            </span>
+          </div>
+
+          {/* Enlaces y Redes */}
+          <div className="flex items-center gap-6">
+            <a 
+              href="https://github.com/alexislopez-dev/deck-of-cards"
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-slate-400 hover:text-slate-800 transition-colors flex items-center gap-2"
+              aria-label="Ver código fuente en GitHub"
+            >
+              <span className="text-xs font-bold uppercase tracking-wider hidden sm:block">
+                Ver Código
+              </span>
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+              </svg>
+            </a>
+          </div>
+          
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/MainLayout.jsx b/frontend/src/components/layout/MainLayout.jsx
index 9ff0053..60dc8f8 100644
--- a/frontend/src/components/layout/MainLayout.jsx
+++ b/frontend/src/components/layout/MainLayout.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext'; 
+import Footer from './Footer';
 
 export default function MainLayout({ children }) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -23,9 +24,10 @@ export default function MainLayout({ children }) {
   };
 
   return (
-    <div className="min-h-screen bg-slate-50 font-sans">
+    // IMPORTANTE: flex y flex-col son la clave para que el footer se quede abajo
+    <div className="min-h-screen flex flex-col bg-slate-50 font-sans">      
       {/* HEADER */}
-      <header className="bg-white shadow-sm border-b border-slate-200 sticky top-0 z-50">
+      <header className="bg-white shadow-sm border-b border-slate-200 sticky top-0 z-50 shrink-0">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
           
           {/* Logo / Título */}
@@ -35,8 +37,6 @@ export default function MainLayout({ children }) {
               alt="Deck of Cards Logo" 
               className="w-10 h-10 shadow-sm rounded-xl object-contain" 
             />
-
-            {/* Texto del título */}
             <span className="text-2xl font-black bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600 hidden sm:block">
               Deck of Cards
             </span>
@@ -129,9 +129,12 @@ export default function MainLayout({ children }) {
       </header>
 
       {/* CONTENIDO PRINCIPAL */}
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <main className="flex-1 flex flex-col max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {children}
       </main>
+      
+      {/* FOOTER */}
+      <Footer />
     </div>
   );
 }
\ No newline at end of file