@imansi/templates 0.1.0

package/src/dashboard/UsersTablePage.jsx

@@ -0,0 +1,317 @@
+import { useState } from 'react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Checkbox,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Input,
+  PaginationBar,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  cn,
+} from '@imansi/ui';
+import { DashboardLayout } from '../layouts/DashboardLayout.jsx';
+
+export function UsersTablePage({
+  brandName,
+  brandLogo,
+  navSections,
+  user,
+  userMenuItems,
+  notificationsCount,
+  onLogout,
+
+  title = 'Usuarios',
+  subtitle = 'Gestioná los usuarios de tu organización.',
+  addButtonText = 'Agregar usuario',
+  onAddClick,
+
+  // Tabs
+  tabs = [
+    { value: 'all', label: 'Todos' },
+    { value: 'active', label: 'Activos' },
+    { value: 'pending', label: 'Pendientes' },
+    { value: 'blocked', label: 'Bloqueados' },
+  ],
+
+  // Tabla
+  users = [],
+  // [{ id, name, email, avatar, role, status: 'active'|'pending'|'blocked', joinedAt }]
+
+  statusMap = {
+    active: { label: 'Activo', variant: 'success' },
+    pending: { label: 'Pendiente', variant: 'warning' },
+    blocked: { label: 'Bloqueado', variant: 'destructive' },
+  },
+
+  pageSize = 10,
+  currentPage: externalPage,
+  totalPages: externalTotal,
+  onPageChange,
+  onRowAction,
+  rowActions = [
+    { label: 'Ver perfil' },
+    { label: 'Editar' },
+    { label: 'Eliminar', variant: 'destructive' },
+  ],
+}) {
+  const [activeTab, setActiveTab] = useState('all');
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState([]);
+
+  // Filtros
+  const filtered = users.filter((u) => {
+    const matchTab = activeTab === 'all' || u.status === activeTab;
+    const matchSearch =
+      !search ||
+      u.name.toLowerCase().includes(search.toLowerCase()) ||
+      u.email.toLowerCase().includes(search.toLowerCase());
+    return matchTab && matchSearch;
+  });
+
+  const allSelected =
+    filtered.length > 0 && selected.length === filtered.length;
+  const someSelected = selected.length > 0 && !allSelected;
+
+  function toggleAll() {
+    if (allSelected) {
+      setSelected([]);
+    } else {
+      setSelected(filtered.map((u) => u.id));
+    }
+  }
+
+  function toggleOne(id) {
+    setSelected((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  }
+
+  return (
+    <DashboardLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navSections={navSections}
+      user={user}
+      userMenuItems={userMenuItems}
+      notificationsCount={notificationsCount}
+      onLogout={onLogout}
+      title={title}
+    >
+      <div className="space-y-6 max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="space-y-1">
+            <h1 className="text-h2 font-bold tracking-tight">{title}</h1>
+            <p className="text-small text-muted-foreground">{subtitle}</p>
+          </div>
+          {onAddClick && (
+            <Button onClick={onAddClick}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              {addButtonText}
+            </Button>
+          )}
+        </div>
+
+        {/* Barra de filtros */}
+        <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList>
+              {tabs.map((tab) => {
+                const count =
+                  tab.value === 'all'
+                    ? users.length
+                    : users.filter((u) => u.status === tab.value).length;
+                return (
+                  <TabsTrigger key={tab.value} value={tab.value}>
+                    {tab.label}
+                    <span className="ml-1.5 text-caption text-muted-foreground">
+                      {count}
+                    </span>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </Tabs>
+
+          <div className="w-full lg:w-72">
+            <Input
+              type="search"
+              placeholder="Buscar usuario..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="h-9"
+            />
+          </div>
+        </div>
+
+        {/* Selección múltiple */}
+        {selected.length > 0 && (
+          <div className="flex items-center gap-3 rounded-md border border-border bg-muted/50 px-4 py-2.5">
+            <span className="text-small font-medium">
+              {selected.length} seleccionados
+            </span>
+            <div className="flex gap-2 ml-auto">
+              <Button variant="ghost" size="sm">
+                Exportar
+              </Button>
+              <Button variant="ghost" size="sm" className="text-destructive">
+                Eliminar
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Tabla */}
+        <Card>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[40px]">
+                    <Checkbox
+                      checked={allSelected || (someSelected ? 'indeterminate' : false)}
+                      onCheckedChange={toggleAll}
+                    />
+                  </TableHead>
+                  <TableHead>Usuario</TableHead>
+                  <TableHead>Rol</TableHead>
+                  <TableHead>Estado</TableHead>
+                  <TableHead>Registro</TableHead>
+                  <TableHead className="w-[60px] text-right">
+                    <span className="sr-only">Acciones</span>
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filtered.length > 0 ? (
+                  filtered.map((u) => {
+                    const status = statusMap[u.status] || statusMap.active;
+                    return (
+                      <TableRow
+                        key={u.id}
+                        data-state={selected.includes(u.id) ? 'selected' : undefined}
+                      >
+                        <TableCell>
+                          <Checkbox
+                            checked={selected.includes(u.id)}
+                            onCheckedChange={() => toggleOne(u.id)}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            <Avatar size="sm">
+                              {u.avatar ? (
+                                <AvatarImage src={u.avatar} alt={u.name} />
+                              ) : null}
+                              <AvatarFallback>
+                                {u.name?.charAt(0)?.toUpperCase() || 'U'}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="min-w-0">
+                              <p className="text-small font-medium truncate">
+                                {u.name}
+                              </p>
+                              <p className="text-caption text-muted-foreground truncate">
+                                {u.email}
+                              </p>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant="secondary">{u.role}</Badge>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant={status.variant}>
+                            {status.label}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-small text-muted-foreground">
+                          {u.joinedAt}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <button className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted transition-colors">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                                  <circle cx="12" cy="12" r="1" />
+                                  <circle cx="12" cy="5" r="1" />
+                                  <circle cx="12" cy="19" r="1" />
+                                </svg>
+                              </button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-40">
+                              {rowActions.map((action, i) => (
+                                <div key={i}>
+                                  {action.variant === 'destructive' && i > 0 && (
+                                    <DropdownMenuSeparator />
+                                  )}
+                                  <DropdownMenuItem
+                                    variant={action.variant}
+                                    onClick={() => onRowAction?.(u, action)}
+                                  >
+                                    {action.label}
+                                  </DropdownMenuItem>
+                                </div>
+                              ))}
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center py-16">
+                      <div className="space-y-2">
+                        <p className="text-small font-medium text-muted-foreground">
+                          No se encontraron usuarios
+                        </p>
+                        <p className="text-caption text-muted-foreground">
+                          Probá ajustar los filtros o la búsqueda.
+                        </p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+
+            {/* Paginación */}
+            {externalPage != null && externalTotal != null && (
+              <div className="border-t border-border p-4 flex items-center justify-between">
+                <p className="text-caption text-muted-foreground">
+                  Mostrando {filtered.length} de {users.length} usuarios
+                </p>
+                <PaginationBar
+                  currentPage={externalPage}
+                  totalPages={externalTotal}
+                  onPageChange={onPageChange}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+}

package/src/extra/CareersPage.jsx

@@ -0,0 +1,166 @@
+import { Badge, Button, Card, CardContent, cn } from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function CareersPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  badge = 'Carreras',
+  title = 'Trabajá con nosotros',
+  subtitle = 'Estamos construyendo el futuro del desarrollo de software. Sumate al equipo.',
+
+  // Beneficios
+  benefitsTitle = '¿Por qué Imansi?',
+  benefits = [],
+  // [{ title, description, icon }]
+
+  // Posiciones
+  positionsTitle = 'Posiciones abiertas',
+  positionsSubtitle = 'Todas las posiciones son remotas.',
+  positions = [],
+  // [{ id, title, department, location, type, level, description, tags }]
+
+  // Empty state
+  emptyMessage = 'No hay posiciones abiertas en este momento.',
+
+  // CTA
+  ctaTitle = '¿No encontrás tu rol?',
+  ctaSubtitle = 'Escribinos igual. Siempre estamos buscando gente talentosa.',
+  ctaPrimary = { label: 'Contactanos', href: '/contacto' },
+}) {
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* Hero */}
+      <section className="imansi-container pt-20 pb-16 text-center max-w-2xl mx-auto space-y-4">
+        <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>
+        <h1 className="text-display font-bold tracking-tight leading-[1.1]">
+          {title}
+        </h1>
+        <p className="text-body text-muted-foreground leading-relaxed">
+          {subtitle}
+        </p>
+      </section>
+
+      {/* Beneficios */}
+      {benefits.length > 0 && (
+        <section className="imansi-container pb-20">
+          <h2 className="text-h2 font-bold tracking-tight text-center mb-10">
+            {benefitsTitle}
+          </h2>
+          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto">
+            {benefits.map((benefit, i) => (
+              <div key={i} className="rounded-xl border border-border bg-card p-6 space-y-3">
+                {benefit.icon && (
+                  <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                    {benefit.icon}
+                  </div>
+                )}
+                <h3 className="text-h4 font-semibold">{benefit.title}</h3>
+                <p className="text-small text-muted-foreground leading-relaxed">
+                  {benefit.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Posiciones */}
+      <section className="border-t border-border bg-muted/20">
+        <div className="imansi-container py-20">
+          <div className="text-center max-w-2xl mx-auto space-y-3 mb-12">
+            <h2 className="text-h2 font-bold tracking-tight">{positionsTitle}</h2>
+            <p className="text-body text-muted-foreground">{positionsSubtitle}</p>
+          </div>
+
+          {positions.length > 0 ? (
+            <div className="max-w-4xl mx-auto space-y-4">
+              {positions.map((position) => (
+                <Card key={position.id} className="transition-shadow hover:shadow-md">
+                  <CardContent className="p-6">
+                    <div className="flex flex-wrap items-start justify-between gap-4">
+                      <div className="space-y-3 flex-1 min-w-0">
+                        <div className="space-y-1">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <h3 className="text-h4 font-semibold">{position.title}</h3>
+                            {position.level && (
+                              <Badge variant="outline">{position.level}</Badge>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap items-center gap-3 text-caption text-muted-foreground">
+                            <span>{position.department}</span>
+                            <span>·</span>
+                            <span>{position.location}</span>
+                            <span>·</span>
+                            <span>{position.type}</span>
+                          </div>
+                        </div>
+
+                        {position.description && (
+                          <p className="text-small text-muted-foreground leading-relaxed">
+                            {position.description}
+                          </p>
+                        )}
+
+                        {position.tags?.length > 0 && (
+                          <div className="flex flex-wrap gap-1.5 pt-1">
+                            {position.tags.map((tag, j) => (
+                              <Badge key={j} variant="secondary" size="sm">
+                                {tag}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+
+                      <Button asChild>
+                        <a href={position.applyHref || '#'}>Aplicar</a>
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12 max-w-md mx-auto">
+              <p className="text-small text-muted-foreground">{emptyMessage}</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="imansi-container py-20">
+        <div className="rounded-2xl bg-primary text-primary-foreground p-10 sm:p-14 text-center space-y-5">
+          <h2 className="text-h2 font-bold tracking-tight">{ctaTitle}</h2>
+          <p className="text-body opacity-80 max-w-xl mx-auto">{ctaSubtitle}</p>
+          {ctaPrimary && (
+            <div className="pt-2">
+              <a href={ctaPrimary.href}>
+                <Button
+                  size="lg"
+                  className="!bg-primary-foreground !text-primary hover:opacity-90"
+                >
+                  {ctaPrimary.label}
+                </Button>
+              </a>
+            </div>
+          )}
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+}

package/src/extra/ChangelogPage.jsx

@@ -0,0 +1,127 @@
+import { Badge, Button, cn } from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function ChangelogPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  badge = 'Changelog',
+  title = 'Novedades',
+  subtitle = 'Todas las actualizaciones del producto, versión por versión.',
+
+  releases = [],
+  // [{ version, date, type: 'major'|'minor'|'patch'|'hotfix', title,
+  //    changes: [{ type: 'added'|'changed'|'fixed'|'removed', text }] }]
+
+  typeMap = {
+    major: { label: 'Major', variant: 'primary' },
+    minor: { label: 'Minor', variant: 'success' },
+    patch: { label: 'Patch', variant: 'muted' },
+    hotfix: { label: 'Hotfix', variant: 'warning' },
+  },
+
+  changeLabels = {
+    added: { label: 'Nuevo', color: 'text-success bg-success/10' },
+    changed: { label: 'Cambiado', color: 'text-info bg-info/10' },
+    fixed: { label: 'Arreglado', color: 'text-warning bg-warning/10' },
+    removed: { label: 'Eliminado', color: 'text-destructive bg-destructive/10' },
+  },
+
+  subscribeCTA = { label: 'Suscribirme a novedades', href: '#' },
+}) {
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* Hero */}
+      <section className="imansi-container pt-20 pb-16 text-center max-w-2xl mx-auto space-y-4">
+        <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>
+        <h1 className="text-display font-bold tracking-tight leading-[1.1]">
+          {title}
+        </h1>
+        <p className="text-body text-muted-foreground leading-relaxed">
+          {subtitle}
+        </p>
+        {subscribeCTA && (
+          <div className="pt-2">
+            <Button>{subscribeCTA.label}</Button>
+          </div>
+        )}
+      </section>
+
+      {/* Timeline */}
+      <section className="imansi-container pb-24">
+        <div className="max-w-3xl mx-auto">
+          <div className="relative">
+            {/* Línea vertical */}
+            <div className="absolute left-[15px] top-3 bottom-3 w-px bg-border" aria-hidden="true" />
+
+            <div className="space-y-12">
+              {releases.map((release, i) => {
+                const typeInfo = typeMap[release.type] || typeMap.minor;
+                return (
+                  <article key={i} className="relative pl-12">
+                    {/* Dot */}
+                    <div className="absolute left-0 top-1.5 flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-primary text-primary-foreground">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                        <circle cx="12" cy="12" r="4" />
+                      </svg>
+                    </div>
+
+                    {/* Header */}
+                    <div className="flex flex-wrap items-center gap-3 mb-3">
+                      <h2 className="text-h3 font-bold tracking-tight font-mono">
+                        {release.version}
+                      </h2>
+                      <Badge variant={typeInfo.variant}>{typeInfo.label}</Badge>
+                      <span className="text-caption text-muted-foreground">
+                        {release.date}
+                      </span>
+                    </div>
+
+                    {release.title && (
+                      <h3 className="text-h4 font-semibold mb-4">{release.title}</h3>
+                    )}
+
+                    {/* Cambios */}
+                    <ul className="space-y-2.5">
+                      {release.changes.map((change, j) => {
+                        const changeInfo = changeLabels[change.type] || changeLabels.changed;
+                        return (
+                          <li key={j} className="flex items-start gap-3">
+                            <span
+                              className={cn(
+                                'shrink-0 inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider',
+                                changeInfo.color
+                              )}
+                            >
+                              {changeInfo.label}
+                            </span>
+                            <span className="text-small text-muted-foreground leading-relaxed pt-0.5">
+                              {change.text}
+                            </span>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </article>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+}