@imansi/templates 0.1.0

package/src/extra/OnboardingPage.jsx

@@ -0,0 +1,197 @@
+import { useState } from 'react';
+import {
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Label,
+  Progress,
+  Separator,
+  cn,
+} from '@imansi/ui';
+
+export function OnboardingPage({
+  brandName = 'Imansi',
+  brandLogo,
+  steps = [],
+  // [{ title, description, content: ({form, setForm}) => JSX, optional }]
+  currentStep: externalStep,
+  onStepChange,
+  onComplete,
+  onSkip,
+  onBack,
+  finishText = 'Finalizar',
+  nextText = 'Siguiente',
+  backText = 'Atrás',
+  skipText = 'Saltar',
+  welcomeTitle = '¡Bienvenido a Imansi!',
+  welcomeSubtitle = 'Vamos a configurar tu cuenta en pocos pasos.',
+  className,
+}) {
+  const [internalStep, setInternalStep] = useState(0);
+  const [form, setForm] = useState({});
+  const step = externalStep ?? internalStep;
+  const totalSteps = steps.length;
+  const currentData = steps[step] || {};
+  const isFirst = step === 0;
+  const isLast = step === totalSteps - 1;
+  const progress = ((step + 1) / totalSteps) * 100;
+
+  function goTo(next) {
+    if (onStepChange) onStepChange(next);
+    else setInternalStep(next);
+  }
+
+  function handleNext() {
+    if (isLast) {
+      onComplete?.(form);
+    } else {
+      goTo(step + 1);
+    }
+  }
+
+  function handleBack() {
+    if (isFirst) {
+      onBack?.();
+    } else {
+      goTo(step - 1);
+    }
+  }
+
+  return (
+    <div className={cn('min-h-dvh bg-background text-foreground flex flex-col', className)}>
+      {/* Header */}
+      <header className="border-b border-border bg-card shrink-0">
+        <div className="imansi-container h-16 flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            {brandLogo || (
+              <div className="h-9 w-9 rounded-lg bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                {brandName.charAt(0)}
+              </div>
+            )}
+            <span className="text-h4 font-semibold tracking-tight">{brandName}</span>
+          </div>
+          {onSkip && (
+            <button
+              onClick={onSkip}
+              className="text-small text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {skipText}
+            </button>
+          )}
+        </div>
+      </header>
+
+      {/* Progress bar */}
+      <div className="h-1 bg-muted shrink-0">
+        <div
+          className="h-full bg-primary transition-all duration-500"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+
+      {/* Contenido */}
+      <main className="flex-1 flex items-center justify-center p-6 sm:p-10">
+        <div className="w-full max-w-2xl">
+          {/* Stepper dots */}
+          <div className="flex items-center justify-center gap-2 mb-10">
+            {steps.map((s, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <div
+                  className={cn(
+                    'flex h-8 w-8 items-center justify-center rounded-full text-caption font-semibold transition-colors',
+                    i < step && 'bg-primary text-primary-foreground',
+                    i === step && 'bg-primary text-primary-foreground ring-4 ring-primary/20',
+                    i > step && 'bg-muted text-muted-foreground'
+                  )}
+                >
+                  {i < step ? (
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="2,6 5,9 10,3" />
+                    </svg>
+                  ) : (
+                    i + 1
+                  )}
+                </div>
+                {i < totalSteps - 1 && (
+                  <div
+                    className={cn(
+                      'h-0.5 w-8 sm:w-12 transition-colors',
+                      i < step ? 'bg-primary' : 'bg-border'
+                    )}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Card */}
+          <Card>
+            <CardContent className="p-8 sm:p-10 space-y-8">
+              {/* Header */}
+              <div className="space-y-2 text-center">
+                {step === 0 && !currentData.title ? (
+                  <>
+                    <h1 className="text-h2 font-bold tracking-tight">
+                      {welcomeTitle}
+                    </h1>
+                    <p className="text-small text-muted-foreground">
+                      {welcomeSubtitle}
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <p className="text-caption uppercase tracking-widest text-muted-foreground">
+                      Paso {step + 1} de {totalSteps}
+                    </p>
+                    <h1 className="text-h2 font-bold tracking-tight">
+                      {currentData.title}
+                    </h1>
+                    {currentData.description && (
+                      <p className="text-small text-muted-foreground leading-relaxed max-w-md mx-auto">
+                        {currentData.description}
+                      </p>
+                    )}
+                  </>
+                )}
+              </div>
+
+              {/* Contenido del paso */}
+              {currentData.content && (
+                <div className="pt-2">
+                  {currentData.content({ form, setForm })}
+                </div>
+              )}
+
+              <Separator />
+
+              {/* Navegación */}
+              <div className="flex items-center justify-between gap-3">
+                <Button
+                  variant="ghost"
+                  onClick={handleBack}
+                  disabled={isFirst && !onBack}
+                >
+                  {backText}
+                </Button>
+                <Button onClick={handleNext}>
+                  {isLast ? finishText : nextText}
+                  {!isLast && (
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M5 3L9 7L5 11" />
+                    </svg>
+                  )}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Hint de paso actual */}
+          <p className="text-center text-caption text-muted-foreground mt-6">
+            {step + 1} / {totalSteps} pasos completados
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}

package/src/extra/StatusPage.jsx

@@ -0,0 +1,181 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  Separator,
+  cn,
+} from '@imansi/ui';
+
+export function StatusPage({
+  brandName = 'Imansi',
+  brandLogo,
+
+  title = 'Estado del sistema',
+  subtitle = 'Información en tiempo real sobre el funcionamiento de nuestros servicios.',
+  overallStatus = 'operational',
+  overallMap = {
+    operational: { label: 'Todos los sistemas operativos', color: 'bg-success', textColor: 'text-success' },
+    degraded: { label: 'Rendimiento degradado', color: 'bg-warning', textColor: 'text-warning' },
+    outage: { label: 'Interrupción del servicio', color: 'bg-destructive', textColor: 'text-destructive' },
+    maintenance: { label: 'Mantenimiento programado', color: 'bg-info', textColor: 'text-info' },
+  },
+
+  services = [],
+  // [{ name, description, status: 'operational'|'degraded'|'outage'|'maintenance', uptime, responseTime }]
+
+  incidentsTitle = 'Historial de incidentes',
+  incidents = [],
+  // [{ date, title, status: 'resolved'|'monitoring'|'investigating', description }]
+
+  statusLabels = {
+    operational: { label: 'Operativo', variant: 'success', color: 'bg-success' },
+    degraded: { label: 'Degradado', variant: 'warning', color: 'bg-warning' },
+    outage: { label: 'Interrumpido', variant: 'destructive', color: 'bg-destructive' },
+    maintenance: { label: 'Mantenimiento', variant: 'info', color: 'bg-info' },
+  },
+}) {
+  const overall = overallMap[overallStatus] || overallMap.operational;
+
+  return (
+    <div className="min-h-dvh bg-background text-foreground">
+      {/* Header */}
+      <header className="border-b border-border bg-card">
+        <div className="imansi-container h-16 flex items-center gap-2.5">
+          {brandLogo || (
+            <div className="h-9 w-9 rounded-lg bg-primary text-primary-foreground flex items-center justify-center font-bold">
+              {brandName.charAt(0)}
+            </div>
+          )}
+          <span className="text-h4 font-semibold tracking-tight">{brandName}</span>
+        </div>
+      </header>
+
+      <main className="imansi-container py-12 max-w-4xl">
+        {/* Hero */}
+        <div className="text-center mb-10 space-y-3">
+          <h1 className="text-h1 font-bold tracking-tight">{title}</h1>
+          <p className="text-small text-muted-foreground">{subtitle}</p>
+        </div>
+
+        {/* Estado general */}
+        <Card className="mb-10">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <span className={cn('relative flex h-3 w-3', overall.color, 'rounded-full')}>
+                {overallStatus === 'operational' && (
+                  <span className={cn('absolute inset-0 rounded-full animate-ping', overall.color, 'opacity-75')} />
+                )}
+              </span>
+              <span className={cn('text-h4 font-semibold', overall.textColor)}>
+                {overall.label}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Servicios */}
+        {services.length > 0 && (
+          <section className="mb-12">
+            <h2 className="text-h3 font-semibold mb-5">Servicios</h2>
+            <Card>
+              <CardContent className="p-0">
+                <ul className="divide-y divide-border">
+                  {services.map((service, i) => {
+                    const statusInfo = statusLabels[service.status] || statusLabels.operational;
+                    return (
+                      <li key={i} className="p-5">
+                        <div className="flex flex-wrap items-center justify-between gap-4">
+                          <div className="space-y-1 min-w-0 flex-1">
+                            <div className="flex items-center gap-2">
+                              <span className={cn('h-2.5 w-2.5 rounded-full', statusInfo.color)} />
+                              <p className="text-small font-semibold">{service.name}</p>
+                            </div>
+                            {service.description && (
+                              <p className="text-caption text-muted-foreground">
+                                {service.description}
+                              </p>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-4 text-right">
+                            {service.uptime && (
+                              <div>
+                                <p className="text-caption text-muted-foreground">Uptime</p>
+                                <p className="text-small font-medium tabular-nums">{service.uptime}</p>
+                              </div>
+                            )}
+                            {service.responseTime && (
+                              <div>
+                                <p className="text-caption text-muted-foreground">Latencia</p>
+                                <p className="text-small font-medium tabular-nums">{service.responseTime}</p>
+                              </div>
+                            )}
+                            <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
+                          </div>
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </CardContent>
+            </Card>
+          </section>
+        )}
+
+        {/* Incidentes */}
+        {incidents.length > 0 && (
+          <section>
+            <h2 className="text-h3 font-semibold mb-5">{incidentsTitle}</h2>
+            <div className="space-y-4">
+              {incidents.map((incident, i) => (
+                <Card key={i}>
+                  <CardContent className="p-5 space-y-3">
+                    <div className="flex flex-wrap items-center justify-between gap-3">
+                      <h3 className="text-small font-semibold">{incident.title}</h3>
+                      <Badge
+                        variant={
+                          incident.status === 'resolved'
+                            ? 'success'
+                            : incident.status === 'monitoring'
+                            ? 'warning'
+                            : 'info'
+                        }
+                      >
+                        {incident.status === 'resolved'
+                          ? 'Resuelto'
+                          : incident.status === 'monitoring'
+                          ? 'Monitoreando'
+                          : 'Investigando'}
+                      </Badge>
+                    </div>
+                    <p className="text-caption text-muted-foreground">
+                      {incident.date}
+                    </p>
+                    {incident.description && (
+                      <>
+                        <Separator />
+                        <p className="text-small text-muted-foreground leading-relaxed">
+                          {incident.description}
+                        </p>
+                      </>
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Footer */}
+        <footer className="mt-16 pt-8 border-t border-border text-center text-caption text-muted-foreground">
+          ¿Problemas? Escribinos a{' '}
+          <a
+            href="mailto:soporte@imansi.com"
+            className="text-primary hover:underline underline-offset-4"
+          >
+            soporte@imansi.com
+          </a>
+        </footer>
+      </main>
+    </div>
+  );
+}

package/src/index.js

@@ -0,0 +1,53 @@
+// ============================================================
+// @imansi/templates — Entry point
+// ============================================================
+
+// Layouts
+export { AuthLayout } from './layouts/AuthLayout.jsx';
+export { MarketingLayout } from './layouts/MarketingLayout.jsx';
+export { DashboardLayout } from './layouts/DashboardLayout.jsx';
+
+// ============================================================
+// Auth
+// ============================================================
+export { LoginPage } from './auth/LoginPage.jsx';
+export { RegisterPage } from './auth/RegisterPage.jsx';
+export { ForgotPasswordPage } from './auth/ForgotPasswordPage.jsx';
+export { ResetPasswordPage } from './auth/ResetPasswordPage.jsx';
+export { Verify2FAPage } from './auth/Verify2FAPage.jsx';
+
+// ============================================================
+// Marketing
+// ============================================================
+export { LandingPage } from './marketing/LandingPage.jsx';
+export { HomePage } from './marketing/HomePage.jsx';
+export { PricingPage } from './marketing/PricingPage.jsx';
+export { BlogPage } from './marketing/BlogPage.jsx';
+export { BlogPostPage } from './marketing/BlogPostPage.jsx';
+export { ContactPage } from './marketing/ContactPage.jsx';
+export { AboutPage } from './marketing/AboutPage.jsx';
+export { DocsPage } from './marketing/DocsPage.jsx';
+
+// ============================================================
+// Dashboard
+// ============================================================
+export { DashboardHome } from './dashboard/DashboardHome.jsx';
+export { UsersTablePage } from './dashboard/UsersTablePage.jsx';
+export { SettingsPage } from './dashboard/SettingsPage.jsx';
+export { ProfilePage } from './dashboard/ProfilePage.jsx';
+export { BillingPage } from './dashboard/BillingPage.jsx';
+export { NotificationsPage } from './dashboard/NotificationsPage.jsx';
+
+// ============================================================
+// Extra
+// ============================================================
+export { ErrorPage } from './extra/ErrorPage.jsx';
+export { ComingSoonPage } from './extra/ComingSoonPage.jsx';
+export { MaintenancePage } from './extra/MaintenancePage.jsx';
+export { OnboardingPage } from './extra/OnboardingPage.jsx';
+export { CheckoutPage } from './extra/CheckoutPage.jsx';
+export { InvoicePage } from './extra/InvoicePage.jsx';
+export { ChangelogPage } from './extra/ChangelogPage.jsx';
+export { CareersPage } from './extra/CareersPage.jsx';
+export { LegalPage } from './extra/LegalPage.jsx';
+export { StatusPage } from './extra/StatusPage.jsx';

package/src/layouts/AuthLayout.jsx

@@ -0,0 +1,104 @@
+import { cn } from '@imansi/ui';
+
+export function AuthLayout({
+  children,
+  brandName = 'Imansi',
+  brandTagline = 'Autenticación moderna para tus apps.',
+  brandLogo,
+  footer,
+  className,
+}) {
+  return (
+    <div
+      className={cn(
+        'h-dvh flex bg-background text-foreground overflow-hidden',
+        className
+      )}
+    >
+      {/* Panel de branding (izquierda) */}
+      <aside className="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-primary text-primary-foreground">
+        <div
+          className="absolute inset-0 opacity-[0.08]"
+          style={{
+            backgroundImage: `
+              radial-gradient(circle at 20% 30%, currentColor 0, transparent 40%),
+              radial-gradient(circle at 80% 70%, currentColor 0, transparent 40%),
+              radial-gradient(circle at 50% 90%, currentColor 0, transparent 30%)
+            `,
+          }}
+          aria-hidden="true"
+        />
+
+        <div className="relative z-10 flex flex-col justify-between p-12 xl:p-16 w-full">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            {brandLogo || (
+              <div className="h-11 w-11 rounded-xl bg-primary-foreground/20 backdrop-blur flex items-center justify-center font-bold text-lg">
+                {brandName.charAt(0)}
+              </div>
+            )}
+            <span className="text-h4 font-semibold">{brandName}</span>
+          </div>
+
+          {/* Contenido central */}
+          <div className="space-y-6 max-w-lg">
+            <h1 className="text-h1 font-bold leading-[1.1] tracking-tight">
+              {brandTagline}
+            </h1>
+            <p className="text-small opacity-80 leading-relaxed">
+              Construido sobre Tailwind CSS, con 6 temas y modo oscuro automático.
+              Componentes accesibles y una experiencia premium desde el primer clic.
+            </p>
+
+            <ul className="space-y-2.5 pt-2">
+              {[
+                '6 temas listos para usar',
+                'Componentes accesibles (WCAG AA)',
+                'Modo oscuro automático',
+              ].map((item) => (
+                <li
+                  key={item}
+                  className="flex items-center gap-3 text-small opacity-90"
+                >
+                  <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary-foreground/20 shrink-0">
+                    <svg
+                      width="10"
+                      height="10"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="2,6 5,9 10,3" />
+                    </svg>
+                  </span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Footer */}
+          <div className="text-caption opacity-60">
+            © {new Date().getFullYear()} {brandName}. Todos los derechos reservados.
+          </div>
+        </div>
+      </aside>
+
+      {/* Panel del formulario (derecha) — scroll interno solo si es necesario */}
+      <main className="flex-1 relative overflow-y-auto">
+        {/* Círculo decorativo */}
+        <div
+          className="absolute top-1/4 -right-32 h-96 w-96 rounded-full bg-primary/5 blur-3xl pointer-events-none"
+          aria-hidden="true"
+        />
+
+        <div className="relative min-h-full flex items-center justify-center p-6 sm:p-8 lg:p-10">
+          <div className="w-full max-w-md">{children}</div>
+        </div>
+      </main>
+    </div>
+  );
+}