@imansi/templates 0.1.0

package/src/extra/InvoicePage.jsx

@@ -0,0 +1,241 @@
+import { Badge, Button, Card, CardContent, Separator, cn } from '@imansi/ui';
+
+export function InvoicePage({
+  brandName = 'Imansi',
+  brandLogo,
+  brandAddress = '',
+  brandEmail = '',
+  brandPhone = '',
+
+  invoiceNumber = 'INV-0001',
+  invoiceDate = '',
+  dueDate = '',
+  status = 'paid',
+  statusMap = {
+    paid: { label: 'Pagada', variant: 'success' },
+    pending: { label: 'Pendiente', variant: 'warning' },
+    overdue: { label: 'Vencida', variant: 'destructive' },
+  },
+
+  customer = {},
+  // { name, email, address, taxId }
+
+  items = [],
+  // [{ description, quantity, rate, amount }]
+
+  subtotal = '',
+  tax = '',
+  discount = '',
+  total = '',
+
+  notes = '',
+  termsTitle = 'Términos y condiciones',
+  terms = '',
+  onDownload,
+  onPrint,
+  className,
+}) {
+  const statusInfo = statusMap[status] || statusMap.pending;
+
+  return (
+    <div className={cn('min-h-dvh bg-muted/30 p-4 sm:p-8', className)}>
+      <div className="max-w-4xl mx-auto space-y-4">
+        {/* Acciones */}
+        <div className="flex flex-wrap justify-end gap-2 print:hidden">
+          {onDownload && (
+            <Button variant="outline" size="sm" onClick={onDownload}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+              Descargar PDF
+            </Button>
+          )}
+          {onPrint && (
+            <Button variant="outline" size="sm" onClick={onPrint}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="6 9 6 2 18 2 18 9" />
+                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
+                <rect x="6" y="14" width="12" height="8" />
+              </svg>
+              Imprimir
+            </Button>
+          )}
+        </div>
+
+        {/* Documento */}
+        <Card className="shadow-lg print:shadow-none print:border-0">
+          <CardContent className="p-8 sm:p-12">
+            {/* Header */}
+            <div className="flex flex-wrap items-start justify-between gap-6 pb-8">
+              <div className="space-y-3">
+                <div className="flex items-center gap-2.5">
+                  {brandLogo || (
+                    <div className="h-10 w-10 rounded-lg bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                      {brandName.charAt(0)}
+                    </div>
+                  )}
+                  <span className="text-h4 font-bold">{brandName}</span>
+                </div>
+                {(brandAddress || brandEmail || brandPhone) && (
+                  <div className="text-caption text-muted-foreground space-y-0.5">
+                    {brandAddress && <p>{brandAddress}</p>}
+                    {brandEmail && <p>{brandEmail}</p>}
+                    {brandPhone && <p>{brandPhone}</p>}
+                  </div>
+                )}
+              </div>
+
+              <div className="text-right space-y-2">
+                <h1 className="text-h2 font-bold tracking-tight">FACTURA</h1>
+                <div className="space-y-1">
+                  <p className="text-caption text-muted-foreground">
+                    Nº <span className="font-mono font-medium text-foreground">{invoiceNumber}</span>
+                  </p>
+                  <div className="flex justify-end">
+                    <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* Info de cliente + fechas */}
+            <div className="grid gap-8 sm:grid-cols-2 py-8">
+              <div className="space-y-3">
+                <p className="text-caption uppercase tracking-widest font-semibold text-muted-foreground">
+                  Facturar a
+                </p>
+                <div className="space-y-1">
+                  {customer.name && (
+                    <p className="text-small font-semibold">{customer.name}</p>
+                  )}
+                  {customer.email && (
+                    <p className="text-small text-muted-foreground">{customer.email}</p>
+                  )}
+                  {customer.address && (
+                    <p className="text-small text-muted-foreground whitespace-pre-line">
+                      {customer.address}
+                    </p>
+                  )}
+                  {customer.taxId && (
+                    <p className="text-caption text-muted-foreground pt-1">
+                      ID Fiscal: <span className="font-mono">{customer.taxId}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-3 sm:text-right">
+                <p className="text-caption uppercase tracking-widest font-semibold text-muted-foreground">
+                  Detalles
+                </p>
+                <div className="space-y-1.5">
+                  <div className="flex sm:justify-end gap-3 text-small">
+                    <span className="text-muted-foreground">Fecha de emisión:</span>
+                    <span className="font-medium">{invoiceDate}</span>
+                  </div>
+                  {dueDate && (
+                    <div className="flex sm:justify-end gap-3 text-small">
+                      <span className="text-muted-foreground">Vencimiento:</span>
+                      <span className="font-medium">{dueDate}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* Tabla de items */}
+            <div className="py-8 overflow-x-auto">
+              <table className="w-full text-small">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left py-3 font-semibold">Descripción</th>
+                    <th className="text-right py-3 font-semibold w-20">Cant.</th>
+                    <th className="text-right py-3 font-semibold w-28">Precio</th>
+                    <th className="text-right py-3 font-semibold w-28">Importe</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, i) => (
+                    <tr key={i} className="border-b border-border last:border-0">
+                      <td className="py-3 text-foreground">{item.description}</td>
+                      <td className="py-3 text-right text-muted-foreground">{item.quantity}</td>
+                      <td className="py-3 text-right text-muted-foreground">{item.rate}</td>
+                      <td className="py-3 text-right font-medium">{item.amount}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <Separator />
+
+            {/* Totales */}
+            <div className="py-8 flex justify-end">
+              <div className="w-full sm:w-72 space-y-2 text-small">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Subtotal</span>
+                  <span className="font-medium">{subtotal}</span>
+                </div>
+                {discount && (
+                  <div className="flex justify-between text-success">
+                    <span>Descuento</span>
+                    <span className="font-medium">-{discount}</span>
+                  </div>
+                )}
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Impuestos</span>
+                  <span className="font-medium">{tax}</span>
+                </div>
+                <Separator />
+                <div className="flex justify-between pt-1">
+                  <span className="font-semibold">Total</span>
+                  <span className="text-h4 font-bold">{total}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Notas y términos */}
+            {(notes || terms) && (
+              <>
+                <Separator />
+                <div className="pt-8 grid gap-8 sm:grid-cols-2">
+                  {notes && (
+                    <div className="space-y-2">
+                      <p className="text-caption uppercase tracking-widest font-semibold text-muted-foreground">
+                        Notas
+                      </p>
+                      <p className="text-small text-muted-foreground leading-relaxed whitespace-pre-line">
+                        {notes}
+                      </p>
+                    </div>
+                  )}
+                  {terms && (
+                    <div className="space-y-2">
+                      <p className="text-caption uppercase tracking-widest font-semibold text-muted-foreground">
+                        {termsTitle}
+                      </p>
+                      <p className="text-small text-muted-foreground leading-relaxed whitespace-pre-line">
+                        {terms}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            {/* Footer */}
+            <div className="pt-10 text-center text-caption text-muted-foreground">
+              Gracias por tu compra · {brandName}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/extra/LegalPage.jsx

@@ -0,0 +1,115 @@
+import { Link } from 'react-router-dom';
+import { ScrollArea, cn } from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function LegalPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  title = 'Términos y Condiciones',
+  lastUpdated = 'Última actualización: 12 de septiembre, 2026',
+  subtitle = '',
+
+  tocTitle = 'Contenido',
+  sections = [],
+  // [{ id, title, content: string | JSX }]
+
+  contactTitle = '¿Preguntas?',
+  contactDescription = 'Si tenés dudas sobre estos términos, escribinos.',
+  contactEmail = 'legal@imansi.com',
+
+  children,
+}) {
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* Hero */}
+      <section className="imansi-container pt-16 pb-10 border-b border-border">
+        <div className="max-w-3xl mx-auto space-y-3">
+          <h1 className="text-h1 font-bold tracking-tight">{title}</h1>
+          <p className="text-caption text-muted-foreground uppercase tracking-wider">
+            {lastUpdated}
+          </p>
+          {subtitle && (
+            <p className="text-body text-muted-foreground leading-relaxed pt-2">
+              {subtitle}
+            </p>
+          )}
+        </div>
+      </section>
+
+      {/* Contenido */}
+      <section className="imansi-container py-12">
+        <div className="grid gap-12 lg:grid-cols-[240px_1fr] max-w-5xl mx-auto">
+          {/* TOC */}
+          <aside className="hidden lg:block">
+            <div className="sticky top-24">
+              <p className="text-caption uppercase tracking-wider font-semibold text-muted-foreground mb-3">
+                {tocTitle}
+              </p>
+              <nav className="border-l border-border">
+                {sections.map((section) => (
+                  <a
+                    key={section.id}
+                    href={`#${section.id}`}
+                    className="block pl-3 py-1.5 text-small text-muted-foreground hover:text-foreground transition-colors border-l-2 border-transparent hover:border-primary -ml-px"
+                  >
+                    {section.title}
+                  </a>
+                ))}
+              </nav>
+            </div>
+          </aside>
+
+          {/* Documento */}
+          <div className="min-w-0 space-y-10">
+            {sections.map((section) => (
+              <article key={section.id} id={section.id} className="scroll-mt-24 space-y-4">
+                <h2 className="text-h2 font-bold tracking-tight">
+                  {section.title}
+                </h2>
+                <div className="text-body text-muted-foreground leading-relaxed space-y-4">
+                  {typeof section.content === 'string' ? (
+                    section.content.split('\n\n').map((paragraph, i) => (
+                      <p key={i}>{paragraph}</p>
+                    ))
+                  ) : (
+                    section.content
+                  )}
+                </div>
+              </article>
+            ))}
+
+            {children}
+
+            {/* Contacto */}
+            {contactTitle && (
+              <div className="rounded-lg border border-border bg-card p-6 space-y-3 mt-12">
+                <h3 className="text-h4 font-semibold">{contactTitle}</h3>
+                <p className="text-small text-muted-foreground">
+                  {contactDescription}
+                </p>
+                <a
+                  href={`mailto:${contactEmail}`}
+                  className="inline-flex text-small font-medium text-primary hover:underline underline-offset-4"
+                >
+                  {contactEmail}
+                </a>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+}

package/src/extra/MaintenancePage.jsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+import { Button, Separator, cn } from '@imansi/ui';
+
+function useCountdown(targetDate) {
+  const [timeLeft, setTimeLeft] = useState(() => calculate(targetDate));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeLeft(calculate(targetDate));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [targetDate]);
+
+  return timeLeft;
+}
+
+function calculate(target) {
+  const diff = new Date(target).getTime() - Date.now();
+  if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+  return {
+    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((diff / (1000 * 60)) % 60),
+    seconds: Math.floor((diff / 1000) % 60),
+  };
+}
+
+export function MaintenancePage({
+  brandName = 'Imansi',
+  brandLogo,
+  badge = 'Mantenimiento',
+  title = 'Volvemos en breve',
+  subtitle = 'Estamos haciendo mejoras para ofrecerte una mejor experiencia. Gracias por tu paciencia.',
+  targetDate,
+  showCountdown = true,
+  statusItems = [],
+  contactEmail = 'soporte@imansi.com',
+  footerNote,
+  className,
+}) {
+  const countdown = useCountdown(targetDate || Date.now() + 1000 * 60 * 60 * 24);
+
+  const timeBlocks = [
+    { label: 'Días', value: countdown.days },
+    { label: 'Horas', value: countdown.hours },
+    { label: 'Minutos', value: countdown.minutes },
+    { label: 'Segundos', value: countdown.seconds },
+  ];
+
+  return (
+    <div className={cn('min-h-dvh flex flex-col bg-background text-foreground relative overflow-hidden', className)}>
+      {/* Fondo con stripes diagonales */}
+      <div
+        className="absolute inset-0 opacity-[0.03] pointer-events-none"
+        style={{
+          backgroundImage: `repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 20px)`,
+        }}
+        aria-hidden="true"
+      />
+
+      {/* Header */}
+      <header className="relative imansi-container py-6">
+        <div className="flex items-center justify-center gap-2.5">
+          {brandLogo || (
+            <div className="h-10 w-10 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>
+
+      {/* Contenido */}
+      <main className="relative flex-1 flex items-center justify-center p-6">
+        <div className="max-w-2xl w-full text-center space-y-10">
+          {/* Icono + badge */}
+          <div className="space-y-6">
+            <div className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-warning/10 text-warning">
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="3" />
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+              </svg>
+            </div>
+
+            <span className="inline-flex items-center rounded-full border border-border bg-card px-4 py-1.5 text-caption font-medium uppercase tracking-widest text-muted-foreground">
+              {badge}
+            </span>
+          </div>
+
+          {/* Texto */}
+          <div className="space-y-4">
+            <h1 className="text-display font-bold tracking-tight leading-[1.05]">
+              {title}
+            </h1>
+            <p className="text-body text-muted-foreground leading-relaxed max-w-lg mx-auto">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Countdown */}
+          {showCountdown && targetDate && (
+            <div className="pt-2">
+              <div className="grid grid-cols-4 gap-3 max-w-lg mx-auto">
+                {timeBlocks.map((block) => (
+                  <div
+                    key={block.label}
+                    className="rounded-lg border border-border bg-card p-4 text-center"
+                  >
+                    <p className="text-h1 font-bold tracking-tight tabular-nums">
+                      {String(block.value).padStart(2, '0')}
+                    </p>
+                    <p className="text-caption uppercase tracking-wider text-muted-foreground mt-1">
+                      {block.label}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Status items */}
+          {statusItems.length > 0 && (
+            <div className="rounded-lg border border-border bg-card p-5 max-w-lg mx-auto text-left space-y-3">
+              <p className="text-caption uppercase tracking-wider font-semibold text-muted-foreground">
+                Estado del servicio
+              </p>
+              <Separator />
+              <ul className="space-y-2.5">
+                {statusItems.map((item, i) => (
+                  <li key={i} className="flex items-center justify-between gap-3 text-small">
+                    <span className="flex items-center gap-2">
+                      <span
+                        className={cn(
+                          'h-2 w-2 rounded-full',
+                          item.status === 'ok' && 'bg-success',
+                          item.status === 'warning' && 'bg-warning',
+                          item.status === 'down' && 'bg-destructive'
+                        )}
+                      />
+                      {item.label}
+                    </span>
+                    <span className="text-caption text-muted-foreground">
+                      {item.message}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Contact */}
+          {contactEmail && (
+            <p className="text-small text-muted-foreground">
+              ¿Necesitás ayuda urgente? Escribinos a{' '}
+              <a
+                href={`mailto:${contactEmail}`}
+                className="text-primary hover:underline underline-offset-4 font-medium"
+              >
+                {contactEmail}
+              </a>
+            </p>
+          )}
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="relative imansi-container py-6 text-center text-caption text-muted-foreground">
+        {footerNote || `© ${new Date().getFullYear()} ${brandName}`}
+      </footer>
+    </div>
+  );
+}