@imansi/templates

v0.1.1

Published

13 days ago

Páginas completas listas para usar del ecosistema Imansi: landing, blog, login, dashboard y más. Puramente visuales.

0High
0Medium
0Low

imansi

imansi templates react landing blog login dashboard tailwind design-system spanish

@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.

Tabla de contenidos

¿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

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

npm install -D tailwindcss @tailwindcss/vite

// 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:

@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 lang="es" data-theme="modern" data-mode="light">

O desde JavaScript:

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

Uso

Ejemplo mínimo

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

import { useState } from 'react';
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:

<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:

<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:

<DashboardHome
  brandName="Mi App"
  user={{ name: 'Juan', email: '[email protected]' }}
  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:

<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:

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

<DashboardLayout
  brandName="Mi App"
  navSections={[...]}
  user={{ name: 'Juan', email: '[email protected]' }}
  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:

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

<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

<LoginPage
  registerHref="/registro"
  forgotPasswordHref="/recuperar"
  twoFactorHref="/verificar-2fa"
/>

Callbacks

<LoginPage
  onSubmit={async ({ correo, contrasena, recordarme }) => {
    // tu lógica de login
  }}
  onOAuthClick={(provider) => {
    // tu lógica de OAuth
  }}
  error={errorExterno}
  loading={loadingExterno}
/>

Branding

<LoginPage
  brandName="Mi Empresa"
  brandTagline="Autenticación moderna"
  brandLogo={<img src="/logo.svg" alt="Logo" />}
/>

Footer

<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
│   │
│   ├── components/        (helpers internos)
│   └── index.js           (entry point)
│
├── package.json
├── README.md
└── LICENSE

Total: 29 páginas + 3 layouts + helpers internos.

Arquitectura

@imansi/templates es la tercera capa del ecosistema. Consume @imansi/ui y @imansi/tailwind sin modificarlos.

@imansi/tailwind              ← Tokens + 6 temas + base
      ↓
@imansi/ui                    ← Componentes React accesibles
      ↓
@imansi/templates             ← Este paquete (páginas completas)
      ↓
create-imansi-app             ← CLI de scaffolding

Reglas arquitectónicas:

@imansi/templates no define estilos propios. Todo viene de @imansi/ui y @imansi/tailwind.
Nunca usa colores crudos (bg-blue-500). Solo tokens semánticos (bg-primary).
Puramente visual: sin lógica de negocio, sin fetch, sin estado global.
Cada página recibe props para personalizar textos, rutas y callbacks.

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 — Componentes React accesibles
[x] @imansi/templates — Este paquete (29 páginas + 3 layouts)
[x] imansi-auth-node — Servidor de autenticación (Express + PostgreSQL)
[x] imansi-auth-react — Hooks de autenticación para React
[x] imansi-correos-node — 26 plantillas de correo con SMTP
[x] @imansi/templates-auth — Variantes visuales de auth
[x] @imansi/templates-dashboard — Variantes visuales de dashboard
[x] create-imansi-app — CLI de scaffolding

Licencia

Soporte

Documentación: docs.imansi.pro/templates
Issues: github.com/imansi-pro/imansi-templates/issues

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@imansi/templates

Tabla de contenidos

¿Qué es?

¿Por qué?

Instalación

Configuración

1. Tailwind CSS v4 + Vite

2. Importar estilos

3. Configurar tema y modo en <html>

Uso

Ejemplo mínimo

Conectar un backend

Páginas disponibles

Auth (5)

Marketing (8)

Dashboard (6)

Extras (10)

Layouts (3)

Temas y modos

Personalización

Textos

Rutas

Callbacks

Branding

Footer

Anatomía

Arquitectura

Roadmap

✅ v0.1.0 — Primera versión (actual)

⏭️ Próximas versiones

🌱 Ecosistema Imansi completo

Licencia

Soporte

3. Configurar tema y modo en `<html>`