@imansi/templates

29 páginas completas + 3 layouts para el ecosistema Imansi. Auth, marketing, dashboard y extras — todas visuales, listas para conectar a tu backend.

---

¿Qué es?

@imansi/templates es el paquete de páginas completas del ecosistema Imansi. Contiene 29 plantillas listas para copiar, pegar y usar: login, landing, dashboard, checkout, blog, docs y más.

A diferencia de @imansi/ui (componentes genéricos), este paquete te da páginas enteras ya armadas con esos componentes.

Son puramente visuales. No tienen lógica de negocio, no llaman APIs, no manejan estado global. Reciben props y callbacks. Vos decidís cómo conectarlas.

---

Instalación

npm install @imansi/templates @imansi/ui @imansi/tailwind react-router-dom

Requiere:

Dependencia	Versión mínima
React	18 o 19
React Router	6.0
Tailwind CSS	4.0
@imansi/tailwind	^0.1.1
@imansi/ui	^0.1.1

---

Uso básico

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { LoginPage, LandingPage, DashboardHome } from '@imansi/templates';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/panel" element={<DashboardHome />} />
      </Routes>
    </BrowserRouter>
  );
}

---

Páginas disponibles

Auth (5)

Todas usan AuthLayout (split-pane con branding).

Página	Descripción
LoginPage	Login con email/password + OAuth + link a 2FA
RegisterPage	Registro con validación y términos
ForgotPasswordPage	Solicitud de recuperación
ResetPasswordPage	Nueva contraseña con token
Verify2FAPage	Verificación de código de 6 dígitos

Marketing (8)

Páginas públicas para presentar tu producto.

Página	Descripción
LandingPage	Hero + features + tabs + testimonios
HomePage	Home tipo negocio físico (panadería, restaurante)
PricingPage	Planes + tabla comparativa + FAQ
BlogPage	Listado con filtros y búsqueda
BlogPostPage	Artículo con TOC + sidebar + related
ContactPage	Formulario + métodos + oficinas
AboutPage	Historia + valores + equipo + stats
DocsPage	Documentación con sidebar + TOC

Dashboard (6)

Todas usan DashboardLayout (sidebar + topbar + content).

Página	Descripción
DashboardHome	KPIs + chart + actividad + top items
UsersTablePage	Tabla con tabs, búsqueda, bulk actions
SettingsPage	4 tabs: Perfil, Cuenta, Notificaciones, Seguridad
ProfilePage	Editar perfil con avatar + stats
BillingPage	Plan actual + tarjeta + facturas
NotificationsPage	Centro de notificaciones

Extras (10)

Página	Descripción
ErrorPage	404, 500, 403 con código gigante
ComingSoonPage	Badge pulsante + email capture
MaintenancePage	Countdown en vivo
OnboardingPage	Stepper de N pasos
CheckoutPage	Formulario de pago + resumen sticky
InvoicePage	Factura imprimible
ChangelogPage	Timeline de releases
CareersPage	Beneficios + posiciones abiertas
LegalPage	Términos con TOC lateral
StatusPage	Estado de servicios + incidentes

Layouts (3)

Layout	Usado por
AuthLayout	LoginPage, RegisterPage, etc.
MarketingLayout	LandingPage, PricingPage, BlogPage
DashboardLayout	DashboardHome, UsersTablePage

---

Conectar un backend

import { LoginPage } from '@imansi/templates';

function LoginRoute() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  async function handleSubmit({ correo, contrasena }) {
    setLoading(true);
    setError(null);

    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ correo, contrasena }),
      });

      if (!res.ok) throw new Error('Credenciales inválidas');

      const { token } = await res.json();
      localStorage.setItem('token', token);
      window.location.href = '/panel';
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <LoginPage
      onSubmit={handleSubmit}
      loading={loading}
      error={error}
      oauthProviders={['github', 'google']}
    />
  );
}

---

Personalización

Todas las páginas aceptan props para personalizar textos, rutas y callbacks.

<LoginPage
  title="Iniciar sesión"
  subtitle="Ingresá con tu cuenta"
  submitText="Entrar"
  brandName="Mi Empresa"
  brandTagline="Autenticación moderna"
  registerHref="/registro"
  forgotPasswordHref="/recuperar"
  onSubmit={async (datos) => { /* ... */ }}
  onOAuthClick={(provider) => { /* ... */ }}
  loading={loading}
  error={error}
/>

---

Temas y modos

Funciona con los 6 temas de @imansi/tailwind:

Tema	Ideal para
minimal	Auth, SaaS profesionales
modern	Productos modernos, tech
compact	Dashboards densos
warm	Home de negocio físico, blog
red	Alertas, monitoreo
yellow	Apps creativas

document.documentElement.dataset.theme = 'warm';
document.documentElement.dataset.mode = 'dark';

---

Próximos pasos

• @imansi/templates-auth — Variantes de auth
• @imansi/templates-dashboard — Variantes de dashboard
• @imansi/ui — Los componentes base