modernize footer

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link"
-import { Heart, Shield, FileText, Mail, Phone, MapPin, Stethoscope } from "lucide-react"
+import { Stethoscope } from "lucide-react"
 import { FOOTER_CONFIG } from "@/utils/config/footer"
-import { COLOR_PALETTE, COMPONENT_COLORS } from "@/utils/palette"
+import { COLOR_PALETTE } from "@/utils/palette"
 
 interface FooterProps {
   variant?: 'landing' | 'system'
@@ -11,175 +11,41 @@ interface FooterProps {
 export default function Footer({ variant = 'system', className = '' }: FooterProps) {
   const isLanding = variant === 'landing'
   
-  const baseClasses = isLanding 
-    ? `py-16` 
-    : `border-t`
-  
-  const containerPadding = isLanding ? "py-16" : "py-8"
-  
   return (
     <footer 
-      className={`${baseClasses} ${className}`} 
-      id={isLanding ? "contacto" : undefined}
-      style={{
-        background: isLanding ? COLOR_PALETTE.gray[900] : COMPONENT_COLORS.gradients.footer,
-        color: 'white',
-        borderTopColor: isLanding ? 'transparent' : COLOR_PALETTE.gray[700]
-      }}
+      className={`border-t bg-background ${isLanding ? 'py-8' : 'py-4'} ${className}`}
+      style={{ borderTopColor: COLOR_PALETTE.gray[200] }}
     >
-      <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${containerPadding}`}>
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-          {/* Logo y descripción */}
-          <div className="col-span-1 md:col-span-2">
-            <div className="flex items-center mb-4">
-              {isLanding ? (
-                <div 
-                  className="p-2 rounded-lg mr-2"
-                  style={{ backgroundColor: COLOR_PALETTE.primary[600] }}
-                >
-                  <Stethoscope className="h-6 w-6" style={{ color: 'white' }} />
-                </div>
-              ) : (
-                <div 
-                  className="w-12 h-12 rounded-xl flex items-center justify-center mr-4 shadow-lg"
-                  style={{ background: COMPONENT_COLORS.gradients.primary }}
-                >
-                  <Heart className="w-6 h-6" style={{ color: 'white' }} />
-                </div>
-              )}
-              <div>
-                <h3 className="text-2xl font-bold">{FOOTER_CONFIG.company.name}</h3>
-                <p 
-                  className="text-sm"
-                  style={{ color: isLanding ? COLOR_PALETTE.gray[400] : COLOR_PALETTE.primary[200] }}
-                >
-                  {FOOTER_CONFIG.company.tagline}
-                </p>
-              </div>
-            </div>
-            <p 
-              className={`mb-4 max-w-md leading-relaxed ${isLanding ? 'mb-6' : ''}`}
-              style={{ color: isLanding ? COLOR_PALETTE.gray[400] : COLOR_PALETTE.gray[300] }}
-            >
-              {FOOTER_CONFIG.company.description}
-            </p>
-            <div className="flex space-x-3">
-              {FOOTER_CONFIG.legalLinks.map((link) => (
-                <Link 
-                  key={link.href}
-                  href={link.href} 
-                  className="transition-colors p-2 rounded-lg hover:bg-white/10"
-                  style={{ color: COLOR_PALETTE.gray[300] }}
-                  onMouseEnter={(e) => e.currentTarget.style.color = 'white'}
-                  onMouseLeave={(e) => e.currentTarget.style.color = COLOR_PALETTE.gray[300]}
-                >
-                  {link.href === '/privacy' ? (
-                    <Shield className="w-5 h-5" style={{ color: 'inherit' }} />
-                  ) : (
-                    <FileText className="w-5 h-5" style={{ color: 'inherit' }} />
-                  )}
-                </Link>
-              ))}
-            </div>
-          </div>
-
-          {/* Enlaces dinámicos según el variant */}
-          <div>
-            <h4 className="text-lg font-semibold mb-4">
-              {isLanding ? 'Servicios' : 'Enlaces Rápidos'}
-            </h4>
-            <ul className="space-y-2">
-              {(isLanding ? FOOTER_CONFIG.services : FOOTER_CONFIG.systemLinks).map((link, index) => (
-                <li key={`${isLanding ? 'service' : 'system'}-${index}-${link.label}`}>
-                  <Link 
-                    href={link.href} 
-                    className="transition-colors"
-                    style={{ color: isLanding ? COLOR_PALETTE.gray[400] : COLOR_PALETTE.gray[300] }}
-                    onMouseEnter={(e) => e.currentTarget.style.color = 'white'}
-                    onMouseLeave={(e) => e.currentTarget.style.color = isLanding ? COLOR_PALETTE.gray[400] : COLOR_PALETTE.gray[300]}
-                  >
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
+          {/* Logo y nombre */}
+          <div className="flex items-center space-x-2">
+            <Stethoscope 
+              className="h-5 w-5" 
+              style={{ color: COLOR_PALETTE.primary[500] }} 
+            />
+            <span className="text-sm font-medium text-foreground">
+              {FOOTER_CONFIG.company.name}
+            </span>
           </div>
 
-          {/* Información de contacto */}
-          <div>
-            <h4 className="text-lg font-semibold mb-4">Contacto</h4>
-            <div className="space-y-3">
-              <div 
-                className="flex items-center"
-                style={{ color: isLanding ? COLOR_PALETTE.gray[400] : COLOR_PALETTE.gray[300] }}
+          {/* Enlaces legales y copyright */}
+          <div className="flex items-center space-x-6 text-sm text-muted-foreground">
+            {FOOTER_CONFIG.legalLinks.map((link) => (
+              <Link 
+                key={link.href}
+                href={link.href} 
+                className="hover:text-foreground transition-colors"
               >
-                <Phone className="w-4 h-4 mr-2" style={{ color: 'inherit' }} />
-                <span>{FOOTER_CONFIG.contact.phone}</span>
-              </div>
-              <div 
-                className="flex items-center"
-                style={{ color: isLanding ? COLOR_PALETTE.gray[400] : COLOR_PALETTE.gray[300] }}
-              >
-                <Mail className="w-4 h-4 mr-2" style={{ color: 'inherit' }} />
-                <span>{FOOTER_CONFIG.contact.email}</span>
-              </div>
-              <div 
-                className="flex items-center"
-                style={{ color: isLanding ? COLOR_PALETTE.gray[400] : COLOR_PALETTE.gray[300] }}
-              >
-                <MapPin className="w-4 h-4 mr-2" style={{ color: 'inherit' }} />
-                <span>{FOOTER_CONFIG.contact.address}</span>
-              </div>
-            </div>
+                {link.label}
+              </Link>
+            ))}
+            <span className="text-muted-foreground/50">|</span>
+            <span>
+              © {new Date().getFullYear()} {FOOTER_CONFIG.company.name}
+            </span>
           </div>
         </div>
-
-        {/* Separador y copyright */}
-        <div 
-          className={`border-t mt-6 pt-6 ${isLanding ? 'mt-12 pt-8 text-center' : ''}`}
-          style={{ 
-            borderTopColor: isLanding ? COLOR_PALETTE.gray[800] : COLOR_PALETTE.gray[700],
-            color: isLanding ? COLOR_PALETTE.gray[400] : 'inherit'
-          }}
-        >
-          {isLanding ? (
-            <div className="text-center" style={{ color: COLOR_PALETTE.gray[400] }}>
-              <p>&copy; {new Date().getFullYear()} {FOOTER_CONFIG.company.name}. Todos los derechos reservados.</p>
-              <p className="mt-1">{FOOTER_CONFIG.company.disclaimer}</p>
-            </div>
-          ) : (
-            <div className="flex flex-col md:flex-row justify-between items-center">
-              <div className="text-sm mb-4 md:mb-0" style={{ color: COLOR_PALETTE.gray[400] }}>
-                <p>&copy; {new Date().getFullYear()} {FOOTER_CONFIG.company.name}. Todos los derechos reservados.</p>
-                <p className="mt-1" style={{ color: COLOR_PALETTE.gray[500] }}>{FOOTER_CONFIG.company.disclaimer}</p>
-              </div>
-              <div className="flex space-x-6 text-sm">
-                {FOOTER_CONFIG.legalLinks.map((link) => (
-                  <Link 
-                    key={link.href}
-                    href={link.href} 
-                    className="transition-colors px-3 py-1 rounded-lg hover:bg-white/10"
-                    style={{ color: COLOR_PALETTE.gray[400] }}
-                    onMouseEnter={(e) => e.currentTarget.style.color = 'white'}
-                    onMouseLeave={(e) => e.currentTarget.style.color = COLOR_PALETTE.gray[400]}
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-                <span style={{ color: COLOR_PALETTE.gray[600] }}>|</span>
-                <span 
-                  className="px-2 py-1 rounded text-xs"
-                  style={{ 
-                    color: COLOR_PALETTE.gray[400],
-                    backgroundColor: COLOR_PALETTE.gray[800]
-                  }}
-                >
-                  {FOOTER_CONFIG.company.version}
-                </span>
-              </div>
-            </div>
-          )}
-        </div>
       </div>
     </footer>
   )