@imansi/templates 0.1.0

package/src/extra/CheckoutPage.jsx

@@ -0,0 +1,383 @@
+import { useState } from 'react';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Label,
+  Separator,
+  cn,
+} from '@imansi/ui';
+
+export function CheckoutPage({
+  brandName = 'Imansi',
+  brandLogo,
+  title = 'Finalizar compra',
+  steps = ['Información', 'Pago', 'Confirmación'],
+  currentStep = 1,
+
+  // Items
+  items = [],
+  // [{ id, name, description, price, quantity, image }]
+
+  // Totales
+  subtotal,
+  tax = '$0',
+  discount = '$0',
+  total,
+
+  // Formulario
+  emailLabel = 'Correo electrónico',
+  cardNumberLabel = 'Número de tarjeta',
+  cardNameLabel = 'Nombre en la tarjeta',
+  expiryLabel = 'Vencimiento',
+  cvcLabel = 'CVC',
+  billingAddressLabel = 'Dirección de facturación',
+  countryLabel = 'País',
+  submitText = 'Pagar',
+  submitLoadingText = 'Procesando...',
+  successTitle = '¡Pago exitoso!',
+  successMessage = 'Recibirás un correo con los detalles de tu compra.',
+
+  onBack,
+  onSubmit,
+  loading = false,
+  success = false,
+  className,
+}) {
+  const [form, setForm] = useState({
+    email: '',
+    cardNumber: '',
+    cardName: '',
+    expiry: '',
+    cvc: '',
+    address: '',
+    city: '',
+    zip: '',
+    country: 'AR',
+  });
+  const [localError, setLocalError] = useState(null);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+    if (!form.email || !form.cardNumber) {
+      setLocalError('Completá los datos de pago.');
+      return;
+    }
+    if (onSubmit) await onSubmit(form);
+  }
+
+  return (
+    <div className={cn('min-h-dvh bg-background text-foreground flex flex-col', className)}>
+      {/* Header */}
+      <header className="border-b border-border bg-card">
+        <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>
+          <div className="flex items-center gap-1.5 text-caption text-muted-foreground">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="3" y="11" width="18" height="11" rx="2" />
+              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            </svg>
+            Pago seguro
+          </div>
+        </div>
+      </header>
+
+      {/* Stepper */}
+      <div className="border-b border-border bg-card">
+        <div className="imansi-container py-4">
+          <div className="flex items-center justify-center gap-2 sm:gap-4">
+            {steps.map((label, i) => {
+              const stepNumber = i + 1;
+              const isActive = stepNumber === currentStep;
+              const isDone = stepNumber < currentStep;
+              return (
+                <div key={label} className="flex items-center gap-2 sm:gap-4">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={cn(
+                        'flex h-7 w-7 items-center justify-center rounded-full text-caption font-semibold transition-colors',
+                        isDone && 'bg-success text-success-foreground',
+                        isActive && 'bg-primary text-primary-foreground',
+                        !isDone && !isActive && 'bg-muted text-muted-foreground'
+                      )}
+                    >
+                      {isDone ? (
+                        <svg width="11" height="11" 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>
+                      ) : (
+                        stepNumber
+                      )}
+                    </div>
+                    <span
+                      className={cn(
+                        'text-small font-medium hidden sm:block',
+                        isActive ? 'text-foreground' : 'text-muted-foreground'
+                      )}
+                    >
+                      {label}
+                    </span>
+                  </div>
+                  {i < steps.length - 1 && (
+                    <div className={cn('h-0.5 w-6 sm:w-12', isDone ? 'bg-success' : 'bg-border')} />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Contenido */}
+      <main className="flex-1">
+        <div className="imansi-container py-10 max-w-6xl">
+          {success ? (
+            <div className="max-w-lg mx-auto text-center space-y-6">
+              <div className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-success/10 text-success">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="4,12 10,18 20,6" />
+                </svg>
+              </div>
+              <div className="space-y-2">
+                <h1 className="text-h1 font-bold tracking-tight">{successTitle}</h1>
+                <p className="text-body text-muted-foreground">{successMessage}</p>
+              </div>
+              <Button size="lg">Volver al inicio</Button>
+            </div>
+          ) : (
+            <div className="grid gap-8 lg:grid-cols-[1.4fr_1fr]">
+              {/* FORMULARIO */}
+              <form onSubmit={handleSubmit} className="space-y-6">
+                {localError && (
+                  <Alert variant="destructive" title="Error">{localError}</Alert>
+                )}
+
+                {/* Contacto */}
+                <Card>
+                  <CardContent className="p-6 space-y-5">
+                    <h2 className="text-h4 font-semibold">Información de contacto</h2>
+                    <div className="space-y-1.5">
+                      <Label htmlFor="checkout-email">{emailLabel}</Label>
+                      <Input
+                        id="checkout-email"
+                        type="email"
+                        placeholder="tu@correo.com"
+                        value={form.email}
+                        onChange={(e) => setForm({ ...form, email: e.target.value })}
+                        autoComplete="email"
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Pago */}
+                <Card>
+                  <CardContent className="p-6 space-y-5">
+                    <div className="flex items-center justify-between">
+                      <h2 className="text-h4 font-semibold">Método de pago</h2>
+                      <div className="flex gap-1.5">
+                        <span className="h-6 w-10 rounded border border-border bg-card" />
+                        <span className="h-6 w-10 rounded border border-border bg-card" />
+                      </div>
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label htmlFor="checkout-card">{cardNumberLabel}</Label>
+                      <Input
+                        id="checkout-card"
+                        placeholder="1234 5678 9012 3456"
+                        value={form.cardNumber}
+                        onChange={(e) => setForm({ ...form, cardNumber: e.target.value })}
+                        autoComplete="cc-number"
+                        inputMode="numeric"
+                      />
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label htmlFor="checkout-name">{cardNameLabel}</Label>
+                      <Input
+                        id="checkout-name"
+                        placeholder="JUAN PEREZ"
+                        value={form.cardName}
+                        onChange={(e) => setForm({ ...form, cardName: e.target.value })}
+                        autoComplete="cc-name"
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-1.5">
+                        <Label htmlFor="checkout-expiry">{expiryLabel}</Label>
+                        <Input
+                          id="checkout-expiry"
+                          placeholder="MM/AA"
+                          value={form.expiry}
+                          onChange={(e) => setForm({ ...form, expiry: e.target.value })}
+                          autoComplete="cc-exp"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label htmlFor="checkout-cvc">{cvcLabel}</Label>
+                        <Input
+                          id="checkout-cvc"
+                          placeholder="123"
+                          value={form.cvc}
+                          onChange={(e) => setForm({ ...form, cvc: e.target.value })}
+                          autoComplete="cc-csc"
+                        />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Dirección */}
+                <Card>
+                  <CardContent className="p-6 space-y-5">
+                    <h2 className="text-h4 font-semibold">{billingAddressLabel}</h2>
+                    <div className="space-y-1.5">
+                      <Label htmlFor="checkout-address">Dirección</Label>
+                      <Input
+                        id="checkout-address"
+                        placeholder="Av. Corrientes 1234"
+                        value={form.address}
+                        onChange={(e) => setForm({ ...form, address: e.target.value })}
+                        autoComplete="street-address"
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-1.5">
+                        <Label htmlFor="checkout-city">Ciudad</Label>
+                        <Input
+                          id="checkout-city"
+                          value={form.city}
+                          onChange={(e) => setForm({ ...form, city: e.target.value })}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label htmlFor="checkout-zip">Código postal</Label>
+                        <Input
+                          id="checkout-zip"
+                          value={form.zip}
+                          onChange={(e) => setForm({ ...form, zip: e.target.value })}
+                        />
+                      </div>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label htmlFor="checkout-country">{countryLabel}</Label>
+                      <select
+                        id="checkout-country"
+                        value={form.country}
+                        onChange={(e) => setForm({ ...form, country: e.target.value })}
+                        className="flex h-10 w-full rounded-md border border-border bg-input px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-ring"
+                      >
+                        <option value="AR">Argentina</option>
+                        <option value="MX">México</option>
+                        <option value="ES">España</option>
+                        <option value="US">Estados Unidos</option>
+                      </select>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Submit mobile */}
+                <div className="lg:hidden">
+                  <Button type="submit" fullWidth size="lg" disabled={loading}>
+                    {loading ? submitLoadingText : `${submitText} ${total}`}
+                  </Button>
+                </div>
+              </form>
+
+              {/* RESUMEN */}
+              <aside className="space-y-6">
+                <Card className="lg:sticky lg:top-24">
+                  <CardContent className="p-6 space-y-5">
+                    <h2 className="text-h4 font-semibold">Resumen del pedido</h2>
+
+                    <Separator />
+
+                    {/* Items */}
+                    <ul className="space-y-4">
+                      {items.map((item) => (
+                        <li key={item.id} className="flex gap-3">
+                          <div className="h-12 w-12 shrink-0 rounded-md border border-border bg-muted flex items-center justify-center text-muted-foreground">
+                            {item.image ? (
+                              <img src={item.image} alt="" className="h-full w-full object-cover rounded-md" />
+                            ) : (
+                              <span className="text-caption">{item.quantity}×</span>
+                            )}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-small font-medium truncate">{item.name}</p>
+                            {item.description && (
+                              <p className="text-caption text-muted-foreground truncate">
+                                {item.description}
+                              </p>
+                            )}
+                          </div>
+                          <p className="text-small font-medium shrink-0">{item.price}</p>
+                        </li>
+                      ))}
+                    </ul>
+
+                    <Separator />
+
+                    {/* Totales */}
+                    <div className="space-y-2 text-small">
+                      <div className="flex justify-between text-muted-foreground">
+                        <span>Subtotal</span>
+                        <span>{subtotal}</span>
+                      </div>
+                      {discount && discount !== '$0' && (
+                        <div className="flex justify-between text-success">
+                          <span>Descuento</span>
+                          <span>-{discount}</span>
+                        </div>
+                      )}
+                      <div className="flex justify-between text-muted-foreground">
+                        <span>Impuestos</span>
+                        <span>{tax}</span>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="flex justify-between items-baseline">
+                      <span className="text-small font-semibold">Total</span>
+                      <span className="text-h2 font-bold tracking-tight">{total}</span>
+                    </div>
+
+                    {/* Submit desktop */}
+                    <div className="hidden lg:block pt-2">
+                      <Button type="submit" fullWidth size="lg" disabled={loading} onClick={handleSubmit}>
+                        {loading ? submitLoadingText : submitText}
+                      </Button>
+                    </div>
+
+                    {/* Seguridad */}
+                    <div className="flex items-center justify-center gap-2 text-caption text-muted-foreground pt-2">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <rect x="3" y="11" width="18" height="11" rx="2" />
+                        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                      </svg>
+                      Pago encriptado SSL
+                    </div>
+                  </CardContent>
+                </Card>
+              </aside>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}

package/src/extra/ComingSoonPage.jsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { Alert, Button, Input, cn } from '@imansi/ui';
+
+export function ComingSoonPage({
+  brandName = 'Imansi',
+  brandLogo,
+  badge = 'Próximamente',
+  title = 'Algo grande está en camino',
+  subtitle = 'Estamos construyendo algo nuevo. Dejanos tu correo y te avisamos cuando lancemos.',
+  emailPlaceholder = 'tu@correo.com',
+  submitText = 'Avisame',
+  submitLoadingText = 'Enviando...',
+  successTitle = '¡Listo!',
+  successMessage = 'Te avisaremos en cuanto lancemos.',
+  socialLinks = [],
+  footerNote = 'Sin spam. Te avisamos una sola vez cuando esté listo.',
+  onSubmit,
+  className,
+}) {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    if (!email.includes('@')) {
+      setError('Ingresá un correo válido.');
+      return;
+    }
+    setLoading(true);
+    if (onSubmit) await onSubmit({ email });
+    else await new Promise((r) => setTimeout(r, 800));
+    setLoading(false);
+    setSuccess(true);
+  }
+
+  return (
+    <div className={cn('min-h-dvh flex flex-col bg-background text-foreground relative overflow-hidden', className)}>
+      {/* Decoración de fondo */}
+      <div
+        className="absolute inset-0 opacity-[0.04] pointer-events-none"
+        style={{
+          backgroundImage: `
+            radial-gradient(circle at 30% 20%, currentColor 0, transparent 40%),
+            radial-gradient(circle at 70% 80%, currentColor 0, transparent 40%)
+          `,
+        }}
+        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-xl w-full text-center space-y-8">
+          {/* Badge */}
+          <span className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-1.5 text-caption font-medium uppercase tracking-widest text-muted-foreground">
+            <span className="inline-block h-2 w-2 rounded-full bg-primary animate-pulse-soft" />
+            {badge}
+          </span>
+
+          {/* Título */}
+          <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-md mx-auto">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Form o success */}
+          <div className="max-w-md mx-auto pt-4">
+            {success ? (
+              <div className="rounded-lg border border-success/30 bg-success/10 p-6 space-y-2">
+                <div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-success text-success-foreground">
+                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="4,12 10,18 20,6" />
+                  </svg>
+                </div>
+                <h3 className="text-h4 font-semibold text-success">{successTitle}</h3>
+                <p className="text-small text-muted-foreground">{successMessage}</p>
+              </div>
+            ) : (
+              <>
+                <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2">
+                  <Input
+                    type="email"
+                    placeholder={emailPlaceholder}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    disabled={loading}
+                    className="flex-1"
+                  />
+                  <Button type="submit" disabled={loading}>
+                    {loading ? submitLoadingText : submitText}
+                  </Button>
+                </form>
+                {error && (
+                  <Alert variant="destructive" className="mt-4">
+                    {error}
+                  </Alert>
+                )}
+                <p className="text-caption text-muted-foreground mt-3">
+                  {footerNote}
+                </p>
+              </>
+            )}
+          </div>
+
+          {/* Social */}
+          {socialLinks.length > 0 && (
+            <div className="flex justify-center gap-3 pt-6">
+              {socialLinks.map((s, i) => (
+                <a
+                  key={i}
+                  href={s.href}
+                  aria-label={s.label}
+                  className="flex h-10 w-10 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                >
+                  {s.icon}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="relative imansi-container py-6 text-center text-caption text-muted-foreground">
+        © {new Date().getFullYear()} {brandName}
+      </footer>
+    </div>
+  );
+}

package/src/extra/ErrorPage.jsx

@@ -0,0 +1,91 @@
+import { Link } from 'react-router-dom';
+import { Button, cn } from '@imansi/ui';
+
+export function ErrorPage({
+  brandName = 'Imansi',
+  brandLogo,
+  code = '404',
+  title = 'Página no encontrada',
+  subtitle = 'Lo sentimos, la página que buscás no existe o fue movida.',
+  primaryCTA = { label: 'Volver al inicio', href: '/' },
+  secondaryCTA = { label: 'Contactar soporte', href: '/contacto' },
+  helpText,
+  className,
+}) {
+  return (
+    <div className={cn('min-h-dvh flex flex-col bg-background text-foreground', className)}>
+      {/* Header minimal */}
+      <header className="imansi-container py-6">
+        <Link to="/" className="inline-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>
+        </Link>
+      </header>
+
+      {/* Contenido */}
+      <main className="flex-1 flex items-center justify-center p-6">
+        <div className="max-w-lg w-full text-center space-y-8">
+          {/* Código grande */}
+          <div className="relative">
+            <div
+              className="absolute inset-0 blur-3xl opacity-30"
+              style={{
+                background: `radial-gradient(circle, var(--color-primary) 0%, transparent 70%)`,
+              }}
+              aria-hidden="true"
+            />
+            <p className="relative text-[8rem] sm:text-[10rem] font-bold tracking-tighter leading-none text-primary/20 select-none">
+              {code}
+            </p>
+          </div>
+
+          {/* Texto */}
+          <div className="space-y-3">
+            <h1 className="text-h1 font-bold tracking-tight">{title}</h1>
+            <p className="text-body text-muted-foreground leading-relaxed max-w-md mx-auto">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* CTAs */}
+          <div className="flex flex-wrap justify-center gap-3">
+            {primaryCTA && (
+              <Link to={primaryCTA.href}>
+                <Button size="lg">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M3 12L12 3l9 9" />
+                    <path d="M5 10v10h14V10" />
+                  </svg>
+                  {primaryCTA.label}
+                </Button>
+              </Link>
+            )}
+            {secondaryCTA && (
+              <Link to={secondaryCTA.href}>
+                <Button size="lg" variant="outline">
+                  {secondaryCTA.label}
+                </Button>
+              </Link>
+            )}
+          </div>
+
+          {/* Help */}
+          {helpText && (
+            <p className="text-caption text-muted-foreground pt-4">
+              {helpText}
+            </p>
+          )}
+        </div>
+      </main>
+
+      {/* Footer minimal */}
+      <footer className="imansi-container py-6 text-center text-caption text-muted-foreground">
+        © {new Date().getFullYear()} {brandName}. Todos los derechos reservados.
+      </footer>
+    </div>
+  );
+}