feat: update header subtitle and add feature list on homepage

- Header hero text: "Comparte secretos y archivos de forma efímera y segura"
  (split across part1/part2 to keep teal highlight on the key phrase)
- HomePage: add 10-item checkmark feature grid below the secret form,
  shown only before a secret is created, 2-col on sm+ screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/i18n/locales/en/en.json

@@ -92,9 +92,9 @@
         "sign_in": "Sign In",
         "sign_up": "Sign Up",
         "dashboard": "Dashboard",
-        "hero_text_part1": "Share secrets securely with encrypted messages that automatically",
-        "hero_text_part2": " self-destruct",
-        "hero_text_part3": " after being read."
+        "hero_text_part1": "Share secrets and files in an ",
+        "hero_text_part2": "ephemeral and secure",
+        "hero_text_part3": " way"
     },
     "dashboard_layout": {
         "secrets": "Secrets",

src/i18n/locales/es/es.json

@@ -92,9 +92,9 @@
         "sign_in": "Iniciar sesión",
         "sign_up": "Registrarse",
         "dashboard": "Panel",
-        "hero_text_part1": "Comparte secretos de forma segura con mensajes cifrados que automáticamente",
-        "hero_text_part2": " se autodestruyen",
-        "hero_text_part3": " después de ser leídos."
+        "hero_text_part1": "Comparte secretos y archivos de forma ",
+        "hero_text_part2": "efímera y segura",
+        "hero_text_part3": ""
     },
     "dashboard_layout": {
         "secrets": "Secretos",
@@ -963,4 +963,4 @@
             "copied": "Copiado al portapapeles"
         }
     }
-}
+}

src/pages/HomePage.tsx

@@ -1,3 +1,4 @@
+import { Check } from 'lucide-react';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ImportantAlert } from '../components/ImportantAlert';
@@ -7,6 +8,49 @@ import { useHemmeligStore } from '../store/hemmeligStore';
 import { useSecretStore } from '../store/secretStore';
 import { useUserStore } from '../store/userStore';
 
+const FEATURES = [
+    {
+        title: 'Cifrado AES-256-GCM del lado del cliente',
+        desc: 'tus datos se cifran antes de salir del navegador',
+    },
+    {
+        title: 'Secretos autodestructivos',
+        desc: 'expiración configurable y límite de vistas',
+    },
+    {
+        title: 'Sin recopilación de datos',
+        desc: 'sin analíticas, sin registros de IP, sin rastreo',
+    },
+    {
+        title: 'Protección por contraseña',
+        desc: 'capa de seguridad adicional opcional',
+    },
+    {
+        title: 'Restricción por IP',
+        desc: 'limita el acceso a rangos de IP específicos',
+    },
+    {
+        title: 'Subida de archivos',
+        desc: 'comparte archivos cifrados (usuarios autenticados)',
+    },
+    {
+        title: 'Editor de texto enriquecido',
+        desc: 'da formato a tus secretos',
+    },
+    {
+        title: 'Códigos QR',
+        desc: 'compartición fácil desde móvil',
+    },
+    {
+        title: 'Soporte multiidioma',
+        desc: 'interfaz disponible en 10 idiomas (español por defecto)',
+    },
+    {
+        title: 'Notificaciones webhook',
+        desc: 'recibe notificaciones cuando se ven o eliminan secretos',
+    },
+];
+
 export function HomePage() {
     const { secretId } = useSecretStore();
     const { settings } = useHemmeligStore();
@@ -24,6 +68,25 @@ export function HomePage() {
             <ImportantAlert />
             {!secretId && <SecretForm />}
             {secretId && <SecretSettings />}
+
+            {!secretId && (
+                <section className="mt-16 mb-4">
+                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3">
+                        {FEATURES.map((f) => (
+                            <li key={f.title} className="flex items-start gap-2.5">
+                                <Check className="w-4 h-4 text-teal-500 dark:text-teal-400 flex-shrink-0 mt-0.5" />
+                                <span className="text-sm text-gray-600 dark:text-slate-400">
+                                    <span className="font-medium text-gray-800 dark:text-slate-200">
+                                        {f.title}
+                                    </span>
+                                    {' — '}
+                                    {f.desc}
+                                </span>
+                            </li>
+                        ))}
+                    </ul>
+                </section>
+            )}
         </div>
     );
 }