feat: páginas de Términos, Soporte y Privacidad con links funcionales

app/(public)/page.tsx

@@ -21,12 +21,12 @@
 import { authOptions } from '@/lib/auth'
 import { ThemeToggle } from '@/components/theme-toggle'
 
 export const metadata: Metadata = {
   title: 'Loki - Gestión Empresarial Completa para Emprendedores',
   description: 'Plataforma de gestión integral para emprendedores. Controla inventario, ventas, producción, gastos y genera reportes PDF.',
   openGraph: {
     title: 'Loki - Gestión Empresarial Completa para Emprendedores',
-description: 'Plataforma de gestión integral para emprendedores. Controla inventario, ventas, producción, gastos, clientes y genera reportes PDF.',
+    description: 'Plataforma de gestión integral para emprendedores. Controla inventario, ventas, producción, gastos, clientes y genera reportes PDF.',
     url: '/',
     images: [{ url: '/og.webp', width: 1200, height: 630, alt: 'Loki - Gestión Empresarial' }],
   },
@@ -170,10 +170,6 @@
         {/* Hero Section */}
         <section className="relative pt-40 pb-24 px-6 overflow-hidden">
           <div className="max-w-5xl mx-auto text-center space-y-8">
-            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/5 border border-primary/20 text-sm font-medium text-primary animate-fade-in">
-              <Zap size={14} className="fill-primary" />
-              <span>Nueva versión 2.0 ya disponible</span>
-            </div>
 
             <h1 className="text-6xl md:text-8xl font-bold tracking-tight text-foreground animate-fade-in [animation-delay:200ms] font-display">
               Controla tu negocio
@@ -325,7 +321,6 @@
             </h2>
             <p className="text-xl text-muted-foreground max-w-xl mx-auto">
               Únete a cientos de emprendedores que ya transformaron su gestión.
-              Sin tarjetas de crédito, empieza gratis en segundos.
             </p>
             <div className="pt-8">
               {session ? (
@@ -342,9 +337,7 @@
                 </Link>
               )}
             </div>
-            <p className="text-sm text-muted-foreground pt-4">
-              Pruébalo gratis por 14 días. No requiere tarjeta.
-            </p>
+
           </div>
         </section>
       </main>
@@ -362,9 +355,9 @@
 
           <div className="flex gap-8 text-sm font-medium text-muted-foreground">
             <Link href="/guia" className="hover:text-foreground transition-colors">Guía de Uso</Link>
-            <a href="#" className="hover:text-foreground transition-colors">Privacidad</a>
-            <a href="#" className="hover:text-foreground transition-colors">Términos</a>
-            <a href="#" className="hover:text-foreground transition-colors">Soporte</a>
+            <Link href="/privacidad" className="hover:text-foreground transition-colors">Privacidad</Link>
+            <Link href="/terminos" className="hover:text-foreground transition-colors">Términos</Link>
+            <Link href="/soporte" className="hover:text-foreground transition-colors">Soporte</Link>
           </div>
 
           <p className="text-sm text-muted-foreground">

app/(public)/privacidad/page.tsx

@@ -0,0 +1,98 @@
+import Link from 'next/link'
+import { Metadata } from 'next'
+import { ChefHat, ArrowLeft, Shield, Eye, Database, Cookie, UserX, Share2 } from 'lucide-react'
+
+export const metadata: Metadata = {
+  title: 'Política de Privacidad',
+  description: 'Política de privacidad de Loki. Conoce cómo recopilamos, usamos y protegemos tu información personal.',
+  openGraph: {
+    title: 'Política de Privacidad - Loki',
+    description: 'Política de privacidad de la plataforma de gestión empresarial Loki.',
+    url: '/privacidad',
+  },
+}
+
+const sections = [
+  {
+    icon: Database,
+    title: 'Información que Recopilamos',
+    content: 'Recopilamos la información necesaria para proporcionar nuestros servicios: nombre, correo electrónico, datos de tu empresa (nombre, dirección, RFC), y la información que ingresas en la plataforma (productos, clientes, ventas, gastos).'
+  },
+  {
+    icon: Shield,
+    title: 'Uso de la Información',
+    content: 'Usamos tu información únicamente para operar y mejorar la plataforma Loki, procesar tus transacciones, generar reportes, y comunicarnos contigo sobre actualizaciones del servicio.'
+  },
+  {
+    icon: Eye,
+    title: 'Protección de Datos',
+    content: 'Implementamos cifrado SSL/TLS, autenticación segura, y almacenamiento en servidores con altos estándares de seguridad. Todos los datos se respaldan diariamente para prevenir pérdidas.'
+  },
+  {
+    icon: Share2,
+    title: 'Compartir Información',
+    content: 'No vendemos ni compartimos tu información personal con terceros, excepto cuando sea necesario para proveer el servicio (procesadores de pago, hosting) o por requerimiento legal.'
+  },
+  {
+    icon: Cookie,
+    title: 'Cookies',
+    content: 'Utilizamos cookies esenciales para el funcionamiento de la plataforma. Puedes configurar tu navegador para rechazarlas, aunque algunas funciones podrían verse afectadas.'
+  },
+  {
+    icon: UserX,
+    title: 'Tus Derechos',
+    content: 'Puedes solicitar la exportación o eliminación de tus datos en cualquier momento desde la configuración de tu cuenta o contactándonos directamente.'
+  },
+]
+
+export default function PrivacidadPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-accent/20">
+      <div className="max-w-3xl mx-auto px-6 py-16">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8"
+        >
+          <ArrowLeft size={16} />
+          Volver al inicio
+        </Link>
+
+        <div className="flex items-center gap-4 mb-8">
+          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+            <ChefHat size={24} className="text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Política de Privacidad</h1>
+            <p className="text-muted-foreground mt-1">Última actualización: 2025</p>
+          </div>
+        </div>
+
+        <p className="text-muted-foreground mb-12 leading-relaxed">
+          En Loki nos comprometemos a proteger tu privacidad. Esta política describe cómo
+          recopilamos, usamos y protegemos tu información personal cuando utilizas nuestra plataforma.
+        </p>
+
+        <div className="space-y-4">
+          {sections.map((section) => (
+            <div key={section.title} className="p-6 rounded-xl border border-border/50 bg-card">
+              <div className="flex items-start gap-4">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
+                  <section.icon size={18} className="text-primary" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold mb-2">{section.title}</h2>
+                  <p className="text-muted-foreground leading-relaxed">{section.content}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <p className="text-sm text-muted-foreground mt-10 text-center">
+          Si tienes dudas sobre nuestra política de privacidad, escríbenos a{' '}
+          <a href="mailto:edwaramayadiaz@gmail.com" className="text-primary hover:underline">edwaramayadiaz@gmail.com</a>
+        </p>
+      </div>
+    </div>
+  )
+}

app/(public)/soporte/page.tsx

@@ -0,0 +1,135 @@
+import Link from 'next/link'
+import { Metadata } from 'next'
+import { ChefHat, ArrowLeft, Mail, BookOpen, HelpCircle } from 'lucide-react'
+
+export const metadata: Metadata = {
+  title: 'Soporte',
+  description: 'Centro de soporte de Loki. Encuentra ayuda sobre la plataforma de gestión empresarial, contacta con nuestro equipo o reporta un problema.',
+  openGraph: {
+    title: 'Soporte - Loki',
+    description: 'Centro de soporte y ayuda para la plataforma de gestión empresarial Loki.',
+    url: '/soporte',
+  },
+}
+
+const channels = [
+  {
+    icon: Mail,
+    title: 'Correo Electrónico',
+    description: 'Escríbenos directamente y te responderemos en menos de 24 horas.',
+    action: 'edwaramayadiaz@gmail.com',
+    href: 'mailto:edwaramayadiaz@gmail.com',
+  },
+  {
+    icon: BookOpen,
+    title: 'Guía de Uso',
+    description: 'Consulta nuestra guía completa con tutoriales detallados de todas las funcionalidades.',
+    action: 'Ver guía',
+    href: '/guia',
+  },
+]
+
+const faqs = [
+  {
+    q: '¿Cómo puedo restablecer mi contraseña?',
+    r: 'Ve a la página de inicio de sesión y haz clic en "¿Olvidaste tu contraseña?". Recibirás un enlace para restablecerla en tu correo.'
+  },
+{
+    q: '¿Cómo exporto mis datos?',
+    r: 'Puedes exportar reportes en PDF desde la sección de Reportes. Si necesitas una exportación completa de tus datos, contáctanos.'
+  },
+  {
+    q: '¿Ofrecen capacitación?',
+    r: 'Sí, contamos con una guía de uso completa y podemos agendar sesiones de capacitación personalizadas.'
+  },
+]
+
+export default function SoportePage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-accent/20">
+      <div className="max-w-3xl mx-auto px-6 py-16">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8"
+        >
+          <ArrowLeft size={16} />
+          Volver al inicio
+        </Link>
+
+        <div className="flex items-center gap-4 mb-8">
+          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+            <ChefHat size={24} className="text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Soporte</h1>
+            <p className="text-muted-foreground mt-1">Estamos aquí para ayudarte</p>
+          </div>
+        </div>
+
+        {/* Canales de soporte */}
+        <div className="grid md:grid-cols-2 gap-4 mb-16">
+          {channels.map((channel) => (
+            <a
+              key={channel.title}
+              href={channel.href}
+              className="p-6 rounded-xl border border-border/50 bg-card hover:border-primary/30 transition-colors group"
+            >
+              <div className="flex items-start gap-4">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+                  <channel.icon size={18} className="text-primary" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h2 className="font-semibold mb-1">{channel.title}</h2>
+                  <p className="text-sm text-muted-foreground leading-relaxed mb-3">
+                    {channel.description}
+                  </p>
+                  <span className="text-sm font-medium text-primary group-hover:underline">
+                    {channel.action} →
+                  </span>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+
+        {/* FAQ */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-6">
+            <HelpCircle size={20} className="text-primary" />
+            <h2 className="text-xl font-bold">Preguntas Frecuentes</h2>
+          </div>
+          <div className="space-y-3">
+            {faqs.map((faq) => (
+              <details key={faq.q} className="group p-4 rounded-xl border border-border/50 bg-card">
+                <summary className="cursor-pointer font-medium text-sm flex items-center justify-between list-none">
+                  {faq.q}
+                  <ChevronDown size={16} className="text-muted-foreground group-open:rotate-180 transition-transform shrink-0 ml-2" />
+                </summary>
+                <p className="mt-3 text-sm text-muted-foreground leading-relaxed">{faq.r}</p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ChevronDown(props: { size: number; className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={props.className}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  )
+}

app/(public)/terminos/page.tsx

@@ -0,0 +1,94 @@
+import Link from 'next/link'
+import { Metadata } from 'next'
+import { ChefHat, ArrowLeft, Shield, FileText, Scale, Lock, AlertTriangle } from 'lucide-react'
+
+export const metadata: Metadata = {
+  title: 'Términos y Condiciones',
+  description: 'Términos y condiciones de uso de Loki. Conoce las reglas y políticas para el uso de nuestra plataforma de gestión empresarial.',
+  openGraph: {
+    title: 'Términos y Condiciones - Loki',
+    description: 'Términos y condiciones de uso de la plataforma de gestión empresarial Loki.',
+    url: '/terminos',
+  },
+}
+
+const sections = [
+  {
+    icon: FileText,
+    title: 'Aceptación de los Términos',
+    content: 'Al acceder y utilizar Loki, aceptas cumplir con estos términos y condiciones. Si no estás de acuerdo con alguna parte, no debes usar el servicio.'
+  },
+  {
+    icon: Scale,
+    title: 'Uso del Servicio',
+    content: 'Loki es una plataforma de gestión empresarial diseñada para emprendedores y pequeñas empresas. Te comprometes a usar el servicio únicamente para fines legales y de acuerdo con todas las leyes aplicables.'
+  },
+  {
+    icon: Lock,
+    title: 'Privacidad y Seguridad',
+    content: 'Nos tomamos muy en serio la seguridad de tus datos. Implementamos medidas técnicas y organizativas para proteger tu información contra acceso no autorizado, pérdida o alteración.'
+  },
+  {
+    icon: AlertTriangle,
+    title: 'Limitación de Responsabilidad',
+    content: 'Loki se proporciona "tal cual". No garantizamos que el servicio sea ininterrumpido o libre de errores. No seremos responsables por daños indirectos derivados del uso de la plataforma.'
+  },
+  {
+    icon: Shield,
+    title: 'Eliminación de Cuenta',
+    content: 'Puedes solicitar la eliminación de tu cuenta y todos los datos asociados en cualquier momento. El proceso se completará dentro de los 30 días posteriores a la solicitud.'
+  },
+]
+
+export default function TerminosPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-accent/20">
+      <div className="max-w-3xl mx-auto px-6 py-16">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8"
+        >
+          <ArrowLeft size={16} />
+          Volver al inicio
+        </Link>
+
+        <div className="flex items-center gap-4 mb-8">
+          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+            <ChefHat size={24} className="text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Términos y Condiciones</h1>
+            <p className="text-muted-foreground mt-1">Última actualización: 2025</p>
+          </div>
+        </div>
+
+        <p className="text-muted-foreground mb-12 leading-relaxed">
+          Estos términos y condiciones rigen el uso de la plataforma Loki. Al registrarte y utilizar
+          nuestros servicios, aceptas estar sujeto a estos términos. Te recomendamos leerlos
+          cuidadosamente.
+        </p>
+
+        <div className="space-y-6">
+          {sections.map((section) => (
+            <div key={section.title} className="p-6 rounded-xl border border-border/50 bg-card">
+              <div className="flex items-start gap-4">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
+                  <section.icon size={18} className="text-primary" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold mb-2">{section.title}</h2>
+                  <p className="text-muted-foreground leading-relaxed">{section.content}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <p className="text-sm text-muted-foreground mt-10 text-center">
+          Si tienes preguntas sobre estos términos, contáctanos en{' '}
+          <a href="mailto:edwaramayadiaz@gmail.com" className="text-primary hover:underline">edwaramayadiaz@gmail.com</a>
+        </p>
+      </div>
+    </div>
+  )
+}