feat(help): public Help/FAQ page for customers (5.4)

bikontrol-web/src/app/app.routes.ts

@@ -59,6 +59,12 @@ export const routes: Routes = [
       import('./modules/legal/privacy/privacy.component').then((c) => c.PrivacyComponent),
   },
 
+  // Help (public)
+  {
+    path: 'ayuda',
+    loadComponent: () => import('./modules/help/help.component').then((c) => c.HelpComponent),
+  },
+
   // Dashboard
   {
     path: 'dashboard',

bikontrol-web/src/app/modules/auth/pages/login/login.component.html

@@ -107,6 +107,8 @@ <h1 class="text-2xl font-bold text-center mb-6 text-primary">Bikontrol</h1>
     }
 
     <p class="text-center text-xs text-gray-500 mt-6">
+      <a routerLink="/ayuda" class="hover:underline">Ayuda</a>
+      ·
       <a routerLink="/terminos" class="hover:underline">Términos</a>
       ·
       <a routerLink="/privacidad" class="hover:underline">Privacidad</a>

bikontrol-web/src/app/modules/auth/pages/register/register.component.html

@@ -142,6 +142,8 @@ <h1 class="text-2xl font-bold text-center mb-6 text-primary">Crear cuenta</h1>
     }
 
     <p class="text-center text-xs text-gray-500 mt-6">
+      <a routerLink="/ayuda" class="hover:underline">Ayuda</a>
+      ·
       <a routerLink="/terminos" class="hover:underline">Términos</a>
       ·
       <a routerLink="/privacidad" class="hover:underline">Privacidad</a>

bikontrol-web/src/app/modules/dashboard/pages/profile/profile.component.html

@@ -146,6 +146,12 @@ <h3 class="font-semibold text-red-600 mb-1">Zona de peligro</h3>
             Iniciaste sesión con Google, por eso no tienes contraseña que cambiar.
           </p>
         }
+        <a
+          routerLink="/ayuda"
+          class="w-full block text-center py-2 border border-accent text-primary rounded-lg hover:bg-gray-50 transition-colors font-semibold"
+        >
+          Ayuda y preguntas frecuentes
+        </a>
         <button
           (click)="logout()"
           class="w-full py-2 bg-gray-700 text-textlight rounded-lg hover:bg-gray-600 transition-colors font-semibold"

bikontrol-web/src/app/modules/dashboard/pages/profile/profile.component.ts

@@ -8,7 +8,7 @@ import {
   signal,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { UserService } from '../../service/user.service';
 import { SwalService } from '../../../../shared/services/swal.service';
 import { HttpErrorService } from '../../../../shared/services/http-error.service';
@@ -19,7 +19,7 @@ import { firstValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-profile',
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, RouterLink],
   templateUrl: './profile.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrl: './profile.component.scss',

bikontrol-web/src/app/modules/help/help.component.html

@@ -0,0 +1,127 @@
+<div class="min-h-screen bg-bg px-4 py-8">
+  <div class="max-w-2xl mx-auto">
+    <a routerLink="/" class="text-sm text-primary hover:underline">← Volver</a>
+
+    <h1 class="text-2xl font-bold text-primary mt-4 mb-1">Ayuda</h1>
+    <p class="text-sm text-gray-500 mb-6">Cómo usar Bikontrol, paso a paso.</p>
+
+    <div class="space-y-6 text-sm text-gray-800 leading-relaxed">
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Primeros pasos</h2>
+        <ol class="list-decimal pl-5 space-y-1">
+          <li>Creá tu cuenta y, si te lo pedimos, confirmá tu correo desde el enlace del email.</li>
+          <li>
+            En la pantalla de inicio tocá <strong>Comenzar</strong>: cargás tu moto y elegís un plan
+            de mantenimiento en un par de minutos.
+          </li>
+        </ol>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Tu moto</h2>
+        <ul class="list-disc pl-5 space-y-1">
+          <li><strong>Agregar una moto:</strong> desde Inicio, botón “+ Agregar motocicleta”.</li>
+          <li><strong>Editar:</strong> en la tarjeta de la moto, menú “⋮” → Editar.</li>
+          <li>
+            <strong>Actualizar kilometraje:</strong> en el resumen de la moto, ícono de lápiz junto
+            a “Kilometraje Actual”.
+          </li>
+          <li>
+            <strong>Corregir el km:</strong> “¿Te equivocaste con el kilometraje? Reviértelo aquí.”
+          </li>
+        </ul>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Mantenimiento</h2>
+        <ul class="list-disc pl-5 space-y-1">
+          <li>
+            <strong>Seguir uno predefinido:</strong> en “Agregar mantenimientos”, tocá “⋮” en un
+            predeterminado → Seguir, y definí el intervalo.
+          </li>
+          <li>
+            <strong>Crear uno propio:</strong> “+ Agregar mantenimiento personalizado”, con nombre,
+            descripción, tipo (Km o Tiempo) e intervalo.
+          </li>
+          <li>
+            <strong>Registrar un mantenimiento hecho:</strong> en el resumen, “+ Registrar
+            mantenimiento”, elegí cuál, fecha, km y costo (opcional).
+          </li>
+          <li>
+            <strong>Próximos:</strong> el resumen muestra cada mantenimiento con su % de vida; en
+            rojo cuando ya venció.
+          </li>
+        </ul>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Recordatorios</h2>
+        <p>
+          Bikontrol te avisa cuando un mantenimiento está por vencer (por km o por tiempo), por
+          <strong>email</strong> y, si lo activás, por <strong>notificaciones push</strong>. Podés
+          prenderlos o apagarlos en <strong>Perfil</strong>.
+        </p>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Exportar y adjuntar</h2>
+        <ul class="list-disc pl-5 space-y-1">
+          <li>
+            <strong>Libro de mantenimiento:</strong> en el resumen, “Exportar libro (PDF)” o
+            “Exportar (CSV)”.
+          </li>
+          <li>
+            <strong>Fotos y documentos:</strong> en cada registro, “+ Adjuntar” (facturas o fotos).
+          </li>
+        </ul>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Costos y estadísticas</h2>
+        <p>
+          Si cargás el costo al registrar un mantenimiento, en <strong>Estadísticas</strong> ves el
+          gasto total, por moto, por año y el costo por kilómetro.
+        </p>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Tu cuenta</h2>
+        <ul class="list-disc pl-5 space-y-1">
+          <li>
+            <strong>Descargar tus datos:</strong> Perfil → “Descargar mis datos” (archivo JSON).
+          </li>
+          <li><strong>Cambiar contraseña:</strong> Perfil → “Cambiar contraseña”.</li>
+          <li>
+            <strong>Eliminar tu cuenta:</strong> Perfil → “Eliminar mi cuenta” (borra tus datos y es
+            irreversible).
+          </li>
+        </ul>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-3">Preguntas frecuentes</h2>
+        <div class="space-y-2">
+          @for (faq of faqs; track faq.question) {
+            <details class="border border-gray-200 rounded-lg p-3">
+              <summary class="font-semibold text-gray-800 cursor-pointer">
+                {{ faq.question }}
+              </summary>
+              <p class="mt-2 text-gray-700">{{ faq.answer }}</p>
+            </details>
+          }
+        </div>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-sm p-4">
+        <h2 class="font-bold text-gray-900 mb-2">Soporte</h2>
+        <p>¿No encontrás la respuesta? Escribinos a {{ supportContact }}.</p>
+      </section>
+    </div>
+
+    <p class="text-center text-xs text-gray-500 mt-8">
+      <a routerLink="/terminos" class="hover:underline">Términos</a>
+      ·
+      <a routerLink="/privacidad" class="hover:underline">Privacidad</a>
+    </p>
+  </div>
+</div>

bikontrol-web/src/app/modules/help/help.component.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { HelpComponent } from './help.component';
+
+describe('HelpComponent', () => {
+  it('renders the how-to sections and the FAQ', async () => {
+    TestBed.configureTestingModule({ imports: [HelpComponent], providers: [provideRouter([])] });
+    const fixture = TestBed.createComponent(HelpComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const text = (fixture.nativeElement as HTMLElement).textContent ?? '';
+    expect(text).toContain('Cómo usar Bikontrol');
+    expect(text).toContain('Primeros pasos');
+    expect(text).toContain('Preguntas frecuentes');
+  });
+});

bikontrol-web/src/app/modules/help/help.component.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+/**
+ * Public help / FAQ page for customers (how to use Bikontrol). Content mirrors
+ * the real flows: onboarding, motorcycles, maintenance, reminders, exports,
+ * costs and account. Linked from the profile and the login/register footers.
+ */
+@Component({
+  selector: 'app-help',
+  imports: [RouterLink],
+  templateUrl: './help.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HelpComponent {
+  /** Support contact; replace with the definitive address. */
+  readonly supportContact = '[COMPLETAR: contacto de soporte]';
+
+  readonly faqs: readonly { question: string; answer: string }[] = [
+    {
+      question: '¿Bikontrol sirve para talleres?',
+      answer:
+        'No. Es una app para dueños de motos: cada cuenta gestiona sus propias motos y su historial.',
+    },
+    {
+      question: '¿Necesito instalar algo?',
+      answer:
+        'No. Es una aplicación web (PWA): podés usarla desde el navegador y, si querés, “Agregar a la pantalla de inicio” para abrirla como una app.',
+    },
+    {
+      question: '¿Qué es el “porcentaje de vida” de un mantenimiento?',
+      answer:
+        'Es cuánto le queda al intervalo antes de vencer: 100% recién hecho y 0% cuando ya toca (vencido).',
+    },
+    {
+      question: '¿Qué pasa si me equivoco con el kilometraje?',
+      answer:
+        'Desde el resumen de la moto podés revertir el último kilometraje y volver a cargar el valor correcto.',
+    },
+    {
+      question: '¿Puedo usar Bikontrol para varias motos?',
+      answer:
+        'Sí. Agregá todas las motos que quieras; mantenimientos y registros se guardan por moto.',
+    },
+    {
+      question: '¿Cómo cancelo los recordatorios?',
+      answer:
+        'En Perfil podés desactivar los recordatorios por correo y, por dispositivo, las notificaciones push.',
+    },
+  ];
+}

docs/specs/README.md

@@ -8,3 +8,4 @@ Detail specs for Bikontrol. Start with [AGENTS.md](../../AGENTS.md) for the proj
 - [database.md](database.md) — PostgreSQL, EF Core, Persistence migrations
 - [reminders.md](reminders.md) — maintenance reminder engine (due rules, daily job, dedupe, preferences)
 - [legal.md](legal.md) — public Terms/Privacy pages (templates pending legal review)
+- [help.md](help.md) — public Help/FAQ page (how-to + FAQ)

docs/specs/help.md

@@ -0,0 +1,8 @@
+# Help / FAQ
+
+Public, unauthenticated page at `/ayuda` (`modules/help`). Linked from the
+profile ("Ayuda y preguntas frecuentes") and the login/register footers.
+
+It documents the real flows — onboarding, motorcycles, maintenance, reminders,
+exports, costs and account — plus an FAQ and the support contact (currently a
+`[COMPLETAR]` placeholder).