@imansi/templates 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Imansi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,557 @@
+# @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.
+
+[![npm version](https://img.shields.io/npm/v/@imansi/templates.svg)](https://www.npmjs.com/package/@imansi/templates)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+
+---
+
+## Tabla de contenidos
+
+- [¿Qué es?](#qué-es)
+- [¿Por qué?](#por-qué)
+- [Instalación](#instalación)
+- [Configuración](#configuración)
+- [Uso](#uso)
+- [Páginas disponibles](#páginas-disponibles)
+  - [Auth (5)](#auth-5)
+  - [Marketing (8)](#marketing-8)
+  - [Dashboard (6)](#dashboard-6)
+  - [Extras (10)](#extras-10)
+  - [Layouts (3)](#layouts-3)
+- [Temas y modos](#temas-y-modos)
+- [Personalización](#personalización)
+- [Anatomía](#anatomía)
+- [Roadmap](#roadmap)
+- [Licencia](#licencia)
+
+---
+
+## ¿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 como `Button`, `Input`, `Card`), 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.
+
+---
+
+## ¿Por qué?
+
+Armar un login, un dashboard o una landing desde cero lleva días. Con `@imansi/templates`:
+
+- **Empezás con 29 páginas listas** en vez de partir de cero.
+- **Diseño consistente** entre auth, marketing y dashboard.
+- **6 temas incluidos** (`minimal`, `modern`, `compact`, `warm`, `red`, `yellow`).
+- **Modo oscuro automático** con `prefers-color-scheme`.
+- **100% responsive** — funciona en mobile, tablet y desktop.
+- **Props para todo** — cambiás textos, rutas y callbacks sin tocar el código.
+
+En vez de perder 3 días armando un login con OAuth, 2FA y recuperación de contraseña, importás `LoginPage` y conectás tu backend.
+
+---
+
+## Instalación
+
+```bash
+npm install @imansi/templates @imansi/ui @imansi/tailwind react-router-dom
+```
+
+Requiere:
+
+| Dependencia | Versión mínima |
+|---|---|
+| React | 18 o 19 |
+| React DOM | 18 o 19 |
+| React Router | 6.0 |
+| Tailwind CSS | 4.0 |
+| `@imansi/tailwind` | ^0.1.1 |
+| `@imansi/ui` | ^0.1.1 |
+
+---
+
+## Configuración
+
+### 1. Tailwind CSS v4 + Vite
+
+```bash
+npm install -D tailwindcss @tailwindcss/vite
+```
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  optimizeDeps: {
+    exclude: ['@imansi/ui', '@imansi/templates'],
+  },
+});
+```
+
+### 2. Importar estilos
+
+En `src/index.css`:
+
+```css
+@import "tailwindcss";
+@import "@imansi/tailwind/styles.css";
+
+/* Escanear tu app */
+@source "./**/*.jsx";
+@source "./**/*.js";
+
+/* Escanear los paquetes de Imansi */
+@source "../node_modules/@imansi/ui/src/**/*.jsx";
+@source "../node_modules/@imansi/templates/src/**/*.jsx";
+```
+
+### 3. Configurar tema y modo en `<html>`
+
+```html
+<html lang="es" data-theme="modern" data-mode="light">
+```
+
+O desde JavaScript:
+
+```js
+document.documentElement.dataset.theme = 'modern';
+document.documentElement.dataset.mode = 'dark';
+```
+
+---
+
+## Uso
+
+### Ejemplo mínimo
+
+```jsx
+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>
+  );
+}
+```
+
+### Conectar un backend
+
+```jsx
+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']}
+      onOAuthClick={(provider) => {
+        window.location.href = `/api/auth/oauth/${provider}`;
+      }}
+    />
+  );
+}
+```
+
+---
+
+## Páginas disponibles
+
+**29 páginas + 3 layouts** organizadas en 4 categorías.
+
+### Auth (5)
+
+Páginas de autenticación. Todas usan el `AuthLayout` (split-pane con branding).
+
+| Página | Descripción | Props principales |
+|---|---|---|
+| `LoginPage` | Login con email/password + OAuth + link a 2FA | `onSubmit`, `onOAuthClick`, `oauthProviders`, `loading`, `error` |
+| `RegisterPage` | Registro con validación de contraseña y términos | `onSubmit`, `showName`, `showTerms`, `oauthProviders` |
+| `ForgotPasswordPage` | Solicitud de recuperación con estado de éxito | `onSubmit`, `success`, `backToLoginHref` |
+| `ResetPasswordPage` | Nueva contraseña con validación de coincidencia | `onSubmit`, `loginHref` |
+| `Verify2FAPage` | Verificación de código de 6 dígitos | `onSubmit`, `onResend`, `codeLength`, `cancelHref` |
+
+**Ejemplo:**
+```jsx
+<LoginPage
+  brandName="Mi Empresa"
+  brandTagline="Bienvenido de nuevo"
+  oauthProviders={['github', 'google']}
+  registerHref="/registro"
+  forgotPasswordHref="/recuperar"
+  onSubmit={async ({ correo, contrasena }) => {
+    // tu lógica
+  }}
+/>
+```
+
+---
+
+### Marketing (8)
+
+Páginas públicas para presentar tu producto, captar usuarios y mostrar contenido.
+
+| Página | Descripción | Props principales |
+|---|---|---|
+| `LandingPage` | Hero con mockup + features + tabs de producto + testimonios | `heroTitle`, `heroHighlight`, `features`, `productTabs`, `testimonials` |
+| `HomePage` | Home tipo negocio físico (panadería, restaurante, hotel) | `heroImage`, `aboutText`, `products`, `gallery`, `visitAddress` |
+| `PricingPage` | Planes + tabla comparativa + FAQ | `plans`, `comparisonFeatures`, `faq` |
+| `BlogPage` | Listado con filtros y búsqueda | `posts`, `categories` |
+| `BlogPostPage` | Artículo con TOC + sidebar + related | `post`, `author`, `tocItems`, `relatedPosts` |
+| `ContactPage` | Formulario + métodos + oficinas | `contactMethods`, `infoItems`, `offices`, `onSubmit` |
+| `AboutPage` | Historia + valores + equipo + stats | `storyParagraphs`, `values`, `team`, `stats` |
+| `DocsPage` | Documentación con sidebar + TOC + nav prev/next | `sections`, `tocItems`, `prevPage`, `nextPage` |
+
+**Ejemplo:**
+```jsx
+<LandingPage
+  heroBadge="Nuevo — v0.2.0"
+  heroTitle="Construí tu SaaS en días, no en meses"
+  heroHighlight="en días"
+  features={[
+    { title: 'Rápido', description: '...', icon: <Icon /> },
+    // ...
+  ]}
+  productTabs={[
+    { value: 'components', label: 'Componentes', title: '...', mockupView: 'issues' },
+    // ...
+  ]}
+/>
+```
+
+---
+
+### Dashboard (6)
+
+Páginas administrativas. Todas usan `DashboardLayout` (sidebar + topbar + content).
+
+| Página | Descripción | Props principales |
+|---|---|---|
+| `DashboardHome` | Panel con KPIs + chart + actividad + top items | `stats`, `chartData`, `activityItems`, `topItems` |
+| `UsersTablePage` | Tabla con tabs, búsqueda, bulk actions, paginación | `users`, `tabs`, `statusMap`, `onAddClick`, `onRowAction` |
+| `SettingsPage` | 4 tabs: Perfil, Cuenta, Notificaciones, Seguridad | `onSaveProfile`, `onSaveAccount`, `onSaveNotifications` |
+| `ProfilePage` | Editar perfil con avatar + stats + seguridad | `profile`, `stats`, `onSave`, `onUploadAvatar` |
+| `BillingPage` | Plan actual + tarjeta + planes disponibles + facturas | `currentPlan`, `paymentMethod`, `invoices`, `onUpgrade` |
+| `NotificationsPage` | Centro de notificaciones con tabs y estados | `notifications`, `onMarkAll`, `onMarkRead`, `onNotificationClick` |
+
+**Ejemplo:**
+```jsx
+<DashboardHome
+  brandName="Mi App"
+  user={{ name: 'Juan', email: 'juan@ejemplo.com' }}
+  navSections={[
+    { title: 'Principal', items: [
+      { href: '/panel', label: 'Panel', icon: <Home /> },
+      { href: '/panel/usuarios', label: 'Usuarios', icon: <Users />, badge: '24' },
+    ]},
+  ]}
+  stats={[
+    { label: 'Ingresos', value: '$12,450', change: '+12.5%', trend: 'up' },
+    // ...
+  ]}
+  chartData={[
+    { label: 'Lun', value: 45 },
+    // ...
+  ]}
+/>
+```
+
+---
+
+### Extras (10)
+
+Páginas especiales que cubren todos los casos restantes.
+
+| Página | Descripción | Props principales |
+|---|---|---|
+| `ErrorPage` | 404, 500, 403 con código gigante | `code`, `title`, `subtitle`, `primaryCTA` |
+| `ComingSoonPage` | Badge pulsante + email capture | `title`, `subtitle`, `onSubmit`, `socialLinks` |
+| `MaintenancePage` | Countdown en vivo + status de servicios | `targetDate`, `statusItems`, `contactEmail` |
+| `OnboardingPage` | Stepper de N pasos con contenido custom | `steps`, `onComplete`, `onSkip` |
+| `CheckoutPage` | Formulario de pago + resumen sticky | `items`, `total`, `onSubmit` |
+| `InvoicePage` | Factura imprimible con items y totales | `invoiceNumber`, `customer`, `items`, `total` |
+| `ChangelogPage` | Timeline de releases con cambios tipados | `releases` |
+| `CareersPage` | Beneficios + posiciones abiertas | `benefits`, `positions`, `ctaPrimary` |
+| `LegalPage` | Términos con TOC lateral | `sections`, `contactEmail` |
+| `StatusPage` | Estado de servicios en vivo + incidentes | `services`, `incidents`, `overallStatus` |
+
+**Ejemplo:**
+```jsx
+<CheckoutPage
+  title="Finalizar compra"
+  items={[
+    { id: 1, name: 'Plan Pro', description: 'Suscripción mensual', price: '$29', quantity: 1 },
+  ]}
+  subtotal="$29.00"
+  tax="$6.09"
+  total="$35.09"
+  onSubmit={async (data) => {
+    // procesar pago
+  }}
+/>
+```
+
+---
+
+### Layouts (3)
+
+Layouts base reutilizables para organizar grupos de páginas.
+
+| Layout | Descripción | Usado por |
+|---|---|---|
+| `AuthLayout` | Split-pane: branding a la izquierda, form a la derecha | LoginPage, RegisterPage, etc. |
+| `MarketingLayout` | Header sticky + content + footer con columnas | LandingPage, PricingPage, BlogPage, etc. |
+| `DashboardLayout` | Sidebar colapsable + topbar + content scrollable | DashboardHome, UsersTablePage, etc. |
+
+**Ejemplo:**
+```jsx
+import { DashboardLayout } from '@imansi/templates';
+
+<DashboardLayout
+  brandName="Mi App"
+  navSections={[...]}
+  user={{ name: 'Juan', email: 'juan@ejemplo.com' }}
+  title="Mi página custom"
+>
+  <p>Contenido personalizado</p>
+</DashboardLayout>
+```
+
+---
+
+## Temas y modos
+
+Funciona con los **6 temas** de `@imansi/tailwind`:
+
+| Tema | Descripción |
+|---|---|
+| `minimal` | Monocromo, editorial, sin sombras |
+| `modern` | Índigo vibrante, radius grande |
+| `compact` | Verde esmeralda, dashboard denso |
+| `warm` | Serif, crema y terracota |
+| `red` | Rojo intenso, alta energía |
+| `yellow` | Ámbar brillante, cálido |
+
+Y los **2 modos**:
+
+- `light` — Colores claros
+- `dark` — Colores oscuros
+
+Cambiar tema es instantáneo:
+
+```js
+document.documentElement.dataset.theme = 'warm';
+document.documentElement.dataset.mode = 'dark';
+```
+
+**Recomendación por tipo de página:**
+
+| Tipo | Tema ideal |
+|---|---|
+| Auth | `minimal` o `modern` |
+| Landing SaaS | `modern` o `minimal` |
+| Home negocio físico | `warm` |
+| Dashboard | `compact` |
+| Marca fuerte | `red` o `yellow` |
+
+---
+
+## Personalización
+
+Todas las páginas aceptan props para personalizar **textos, rutas y callbacks**. No hay nada hardcodeado salvo valores por defecto razonables.
+
+### Textos
+
+```jsx
+<LoginPage
+  title="Iniciar sesión"
+  subtitle="Ingresá con tu cuenta"
+  submitText="Entrar"
+  submitLoadingText="Ingresando..."
+  emailLabel="Tu correo"
+  passwordLabel="Tu contraseña"
+  forgotPasswordText="¿La olvidaste?"
+  registerText="¿No tenés cuenta?"
+  registerLinkText="Crear una"
+/>
+```
+
+### Rutas
+
+```jsx
+<LoginPage
+  registerHref="/registro"
+  forgotPasswordHref="/recuperar"
+  twoFactorHref="/verificar-2fa"
+/>
+```
+
+### Callbacks
+
+```jsx
+<LoginPage
+  onSubmit={async ({ correo, contrasena, recordarme }) => {
+    // tu lógica de login
+  }}
+  onOAuthClick={(provider) => {
+    // tu lógica de OAuth
+  }}
+  error={errorExterno}
+  loading={loadingExterno}
+/>
+```
+
+### Branding
+
+```jsx
+<LoginPage
+  brandName="Mi Empresa"
+  brandTagline="Autenticación moderna"
+  brandLogo={<img src="/logo.svg" alt="Logo" />}
+/>
+```
+
+### Footer
+
+```jsx
+<LoginPage
+  footer="Al continuar aceptás nuestros Términos y Privacidad."
+/>
+```
+
+---
+
+## Anatomía
+
+```
+@imansi/templates/
+├── src/
+│   ├── auth/              (5 páginas)
+│   │   ├── LoginPage.jsx
+│   │   ├── RegisterPage.jsx
+│   │   ├── ForgotPasswordPage.jsx
+│   │   ├── ResetPasswordPage.jsx
+│   │   └── Verify2FAPage.jsx
+│   │
+│   ├── marketing/         (8 páginas)
+│   │   ├── LandingPage.jsx
+│   │   ├── HomePage.jsx
+│   │   ├── PricingPage.jsx
+│   │   ├── BlogPage.jsx
+│   │   ├── BlogPostPage.jsx
+│   │   ├── ContactPage.jsx
+│   │   ├── AboutPage.jsx
+│   │   └── DocsPage.jsx
+│   │
+│   ├── dashboard/         (6 páginas)
+│   │   ├── DashboardHome.jsx
+│   │   ├── UsersTablePage.jsx
+│   │   ├── SettingsPage.jsx
+│   │   ├── ProfilePage.jsx
+│   │   ├── BillingPage.jsx
+│   │   └── NotificationsPage.jsx
+│   │
+│   ├── extra/             (10 páginas)
+│   │   ├── ErrorPage.jsx
+│   │   ├── ComingSoonPage.jsx
+│   │   ├── MaintenancePage.jsx
+│   │   ├── OnboardingPage.jsx
+│   │   ├── CheckoutPage.jsx
+│   │   ├── InvoicePage.jsx
+│   │   ├── ChangelogPage.jsx
+│   │   ├── CareersPage.jsx
+│   │   ├── LegalPage.jsx
+│   │   └── StatusPage.jsx
+│   │
+│   ├── layouts/           (3 layouts)
+│   │   ├── AuthLayout.jsx
+│   │   ├── MarketingLayout.jsx
+│   │   └── DashboardLayout.jsx
+│   │
+│   └── index.js           (entry point)
+│
+├── package.json
+├── README.md
+└── LICENSE
+```
+
+**Total: 32 archivos** (29 páginas + 3 layouts).
+
+---
+
+## Roadmap
+
+### ✅ v0.1.0 — Primera versión (actual)
+
+- [x] 5 páginas de auth
+- [x] 8 páginas de marketing
+- [x] 6 páginas de dashboard
+- [x] 10 páginas extras
+- [x] 3 layouts base
+- [x] Compatible con 6 temas × 2 modos
+- [x] 100% responsive
+
+### ⏭️ Próximas versiones
+
+- [ ] `v0.2.0` — Más plantillas (restaurante, hotel, gimnasio, clínica)
+- [ ] `v0.3.0` — Variantes de páginas existentes (dark-first, minimal, etc.)
+- [ ] `v1.0.0` — Estabilización de API
+
+### 🌱 Ecosistema Imansi completo
+
+- [x] `@imansi/tailwind` — Design tokens + 6 temas
+- [x] `@imansi/ui` — 50+ componentes
+- [x] `@imansi/templates` — 29 páginas + 3 layouts
+- [ ] `create-imansi-app` — CLI de scaffolding
+- [ ] `@imansi/auth-react` — Hooks de autenticación (en desarrollo)
+- [ ] `@imansi/dashboard` — Widgets avanzados
+
+---
+
+## Licencia
+
+[MIT](./LICENSE) © 2026 Imansi
+
+---
+
+**Hecho con ❤️ por [Imansi](https://github.com/imansi)**

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@imansi/templates",
+  "version": "0.1.0",
+  "description": "Páginas completas listas para usar del ecosistema Imansi: landing, blog, login, dashboard y más. Puramente visuales.",
+  "keywords": [
+    "imansi",
+    "templates",
+    "react",
+    "landing",
+    "blog",
+    "login",
+    "dashboard",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "author": "Imansi",
+  "type": "module",
+  "main": "./src/index.js",
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@imansi/tailwind": "^0.1.1",
+    "@imansi/ui": "^0.1.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0"
+  }
+}