@imansi/templates 0.1.0

package/src/layouts/DashboardLayout.jsx

@@ -0,0 +1,249 @@
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  Input,
+  cn,
+} from '@imansi/ui';
+
+export function DashboardLayout({
+  children,
+  brandName = 'Imansi',
+  brandLogo,
+  navSections = [],
+  // [{ title, items: [{ href, label, icon, badge }] }]
+  user,
+  // { name, email, avatar }
+  userMenuItems = [],
+  // [{ label, href, icon, variant }]
+  title,
+  breadcrumb = [],
+  actions,
+  notificationsCount = 0,
+  onLogout,
+  className,
+}) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const location = useLocation();
+
+  const SidebarContent = (
+    <div className="flex h-full flex-col bg-card border-r border-border">
+      {/* Logo */}
+      <div className="flex h-16 items-center gap-2.5 px-5 border-b border-border shrink-0">
+        {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>
+
+      {/* Nav sections */}
+      <nav className="flex-1 overflow-y-auto p-4 space-y-6">
+        {navSections.map((section, i) => (
+          <div key={i} className="space-y-1">
+            {section.title && (
+              <p className="px-3 pb-2 text-caption uppercase tracking-wider font-semibold text-muted-foreground">
+                {section.title}
+              </p>
+            )}
+            {section.items.map((item) => {
+              const isActive = location.pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  to={item.href}
+                  onClick={() => setSidebarOpen(false)}
+                  className={cn(
+                    'flex items-center gap-3 rounded-md px-3 py-2 text-small transition-colors',
+                    isActive
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  )}
+                >
+                  {item.icon && (
+                    <span className="shrink-0 [&_svg]:size-4">
+                      {item.icon}
+                    </span>
+                  )}
+                  <span className="flex-1 truncate">{item.label}</span>
+                  {item.badge && (
+                    <Badge variant="primary" size="sm">
+                      {item.badge}
+                    </Badge>
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+        ))}
+      </nav>
+
+      {/* User */}
+      {user && (
+        <div className="border-t border-border p-3 shrink-0">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="w-full flex items-center gap-3 rounded-md p-2 text-left transition-colors hover:bg-muted">
+                <Avatar size="sm">
+                  {user.avatar ? (
+                    <img src={user.avatar} alt={user.name} />
+                  ) : (
+                    <AvatarFallback>
+                      {user.name?.charAt(0)?.toUpperCase() || 'U'}
+                    </AvatarFallback>
+                  )}
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-small font-medium truncate">{user.name}</p>
+                  <p className="text-caption text-muted-foreground truncate">
+                    {user.email}
+                  </p>
+                </div>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="top" className="w-56">
+              <DropdownMenuLabel>Mi cuenta</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {userMenuItems.map((item, i) => (
+                <DropdownMenuItem key={i} variant={item.variant} asChild>
+                  <Link to={item.href || '#'}>
+                    {item.icon && (
+                      <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
+                    )}
+                    {item.label}
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+              {onLogout && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    variant="destructive"
+                    onClick={onLogout}
+                  >
+                    Cerrar sesión
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={cn('h-dvh flex bg-background text-foreground overflow-hidden', className)}>
+      {/* Sidebar desktop */}
+      <aside className="hidden lg:block w-64 shrink-0">{SidebarContent}</aside>
+
+      {/* Sidebar mobile */}
+      {sidebarOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-overlay backdrop-blur-sm lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+            aria-hidden="true"
+          />
+          <aside className="fixed inset-y-0 left-0 z-50 w-64 lg:hidden">
+            {SidebarContent}
+          </aside>
+        </>
+      )}
+
+      {/* Main */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        {/* Topbar */}
+        <header className="h-16 flex items-center gap-3 border-b border-border bg-card px-4 sm:px-6 shrink-0">
+          {/* Hamburger mobile */}
+          <button
+            type="button"
+            onClick={() => setSidebarOpen(true)}
+            className="lg:hidden inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-muted"
+            aria-label="Abrir menú"
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <line x1="3" y1="6" x2="17" y2="6" />
+              <line x1="3" y1="10" x2="17" y2="10" />
+              <line x1="3" y1="14" x2="17" y2="14" />
+            </svg>
+          </button>
+
+          {/* Título / breadcrumb */}
+          <div className="flex-1 min-w-0">
+            {breadcrumb.length > 0 ? (
+              <nav className="flex items-center gap-1.5 text-small text-muted-foreground">
+                {breadcrumb.map((crumb, i) => (
+                  <span key={i} className="flex items-center gap-1.5">
+                    {i > 0 && <span className="opacity-50">/</span>}
+                    {crumb.href ? (
+                      <Link
+                        to={crumb.href}
+                        className="hover:text-foreground transition-colors"
+                      >
+                        {crumb.label}
+                      </Link>
+                    ) : (
+                      <span className="text-foreground font-medium truncate">
+                        {crumb.label}
+                      </span>
+                    )}
+                  </span>
+                ))}
+              </nav>
+            ) : title ? (
+              <h1 className="text-h4 font-semibold truncate">{title}</h1>
+            ) : null}
+          </div>
+
+          {/* Search desktop */}
+          <div className="hidden md:block w-72">
+            <Input
+              type="search"
+              placeholder="Buscar..."
+              className="h-9"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-1">
+            {/* Notificaciones */}
+            <Link
+              to="/panel/notificaciones"
+              className="relative inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-muted transition-colors"
+              aria-label="Notificaciones"
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+              </svg>
+              {notificationsCount > 0 && (
+                <span className="absolute top-1 right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground">
+                  {notificationsCount > 9 ? '9+' : notificationsCount}
+                </span>
+              )}
+            </Link>
+
+            {/* Actions custom */}
+            {actions}
+          </div>
+        </header>
+
+        {/* Content */}
+        <main className="flex-1 overflow-y-auto">
+          <div className="p-4 sm:p-6 lg:p-8">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/layouts/MarketingLayout.jsx

@@ -0,0 +1,184 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { cn } from '@imansi/ui';
+
+export function MarketingLayout({
+  children,
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footer,
+  footerColumns = [],
+  footerNote,
+  className,
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <div className={cn('min-h-screen flex flex-col bg-background text-foreground', className)}>
+      {/* Header */}
+      <header className="sticky top-0 z-40 w-full border-b border-border bg-background/80 backdrop-blur-lg">
+        <div className="imansi-container flex h-16 items-center justify-between gap-6">
+          {/* Logo */}
+          <Link to="/" className="flex items-center gap-2.5 shrink-0">
+            {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>
+
+          {/* Nav desktop */}
+          <nav className="hidden md:flex items-center gap-1">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                to={link.href}
+                className="rounded-md px-3 py-2 text-small font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+
+          {/* CTAs desktop */}
+          <div className="hidden md:flex items-center gap-2">
+            {headerSecondaryCTA && (
+              <Link
+                to={headerSecondaryCTA.href}
+                className="rounded-md px-3 py-2 text-small font-medium text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {headerSecondaryCTA.label}
+              </Link>
+            )}
+            {headerCTA && (
+              <Link
+                to={headerCTA.href}
+                className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-small font-medium transition-opacity hover:opacity-90"
+              >
+                {headerCTA.label}
+              </Link>
+            )}
+          </div>
+
+          {/* Botón menú mobile */}
+          <button
+            type="button"
+            onClick={() => setMenuOpen((v) => !v)}
+            className="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-muted"
+            aria-label="Abrir menú"
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              {menuOpen ? (
+                <>
+                  <line x1="5" y1="5" x2="15" y2="15" />
+                  <line x1="15" y1="5" x2="5" y2="15" />
+                </>
+              ) : (
+                <>
+                  <line x1="3" y1="6" x2="17" y2="6" />
+                  <line x1="3" y1="10" x2="17" y2="10" />
+                  <line x1="3" y1="14" x2="17" y2="14" />
+                </>
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Nav mobile */}
+        {menuOpen && (
+          <div className="md:hidden border-t border-border bg-background">
+            <nav className="imansi-container py-4 flex flex-col gap-1">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  to={link.href}
+                  onClick={() => setMenuOpen(false)}
+                  className="rounded-md px-3 py-2 text-small font-medium hover:bg-muted"
+                >
+                  {link.label}
+                </Link>
+              ))}
+              <div className="flex flex-col gap-2 pt-3 border-t border-border mt-2">
+                {headerSecondaryCTA && (
+                  <Link
+                    to={headerSecondaryCTA.href}
+                    className="rounded-md px-3 py-2 text-small font-medium text-center hover:bg-muted"
+                  >
+                    {headerSecondaryCTA.label}
+                  </Link>
+                )}
+                {headerCTA && (
+                  <Link
+                    to={headerCTA.href}
+                    className="rounded-md bg-primary text-primary-foreground px-3 py-2 text-small font-medium text-center"
+                  >
+                    {headerCTA.label}
+                  </Link>
+                )}
+              </div>
+            </nav>
+          </div>
+        )}
+      </header>
+
+      {/* Main */}
+      <main className="flex-1">{children}</main>
+
+      {/* Footer */}
+      <footer className="border-t border-border bg-muted/30">
+        <div className="imansi-container py-12">
+          {footerColumns.length > 0 && (
+            <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4 mb-10">
+              {/* Columna de marca */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2.5">
+                  {brandLogo || (
+                    <div className="h-8 w-8 rounded-lg bg-primary text-primary-foreground flex items-center justify-center font-bold text-small">
+                      {brandName.charAt(0)}
+                    </div>
+                  )}
+                  <span className="text-small font-semibold">{brandName}</span>
+                </div>
+                <p className="text-caption text-muted-foreground max-w-xs">
+                  Plataforma moderna para construir aplicaciones SaaS.
+                </p>
+              </div>
+
+              {/* Columnas de links */}
+              {footerColumns.map((col) => (
+                <div key={col.title} className="space-y-3">
+                  <h4 className="text-caption uppercase tracking-wider font-semibold text-foreground">
+                    {col.title}
+                  </h4>
+                  <ul className="space-y-2">
+                    {col.links.map((link) => (
+                      <li key={link.href}>
+                        <Link
+                          to={link.href}
+                          className="text-small text-muted-foreground hover:text-foreground transition-colors"
+                        >
+                          {link.label}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {footer}
+
+          <div className="pt-6 border-t border-border flex flex-col sm:flex-row justify-between gap-3 text-caption text-muted-foreground">
+            <span>© {new Date().getFullYear()} {brandName}. Todos los derechos reservados.</span>
+            {footerNote && <span>{footerNote}</span>}
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/src/marketing/AboutPage.jsx

@@ -0,0 +1,189 @@
+import { Link } from 'react-router-dom';
+import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function AboutPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  // Hero
+  heroBadge = 'Sobre nosotros',
+  heroTitle = 'Construimos herramientas para creadores',
+  heroSubtitle = 'Creemos que construir software debería ser simple, rápido y accesible para todos.',
+
+  // Historia
+  storyTitle = 'Nuestra historia',
+  storyParagraphs = [],
+
+  // Valores
+  valuesTitle = 'Nuestros valores',
+  valuesSubtitle = 'Lo que nos guía en cada decisión.',
+  values = [],
+
+  // Stats
+  stats = [],
+
+  // Equipo
+  teamTitle = 'Nuestro equipo',
+  teamSubtitle = 'Un grupo pequeño con una gran misión.',
+  team = [],
+
+  // CTA
+  ctaTitle = '¿Querés trabajar con nosotros?',
+  ctaSubtitle = 'Estamos buscando gente talentosa que quiera cambiar la forma de construir software.',
+  ctaPrimary = { label: 'Ver posiciones', href: '/contacto' },
+  ctaSecondary = { label: 'Contactanos', href: '/contacto' },
+}) {
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* Hero */}
+      <section className="imansi-container py-20 sm:py-24 text-center max-w-3xl mx-auto space-y-6">
+        {heroBadge && <Badge variant="outline" className="px-4 py-1.5">{heroBadge}</Badge>}
+        <h1 className="text-display font-bold tracking-tight leading-[1.1]">
+          {heroTitle}
+        </h1>
+        <p className="text-body text-muted-foreground leading-relaxed">
+          {heroSubtitle}
+        </p>
+      </section>
+
+      {/* Stats */}
+      {stats.length > 0 && (
+        <section className="imansi-container pb-16">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
+            {stats.map((stat, i) => (
+              <div key={i} className="text-center space-y-1">
+                <p className="text-display font-bold tracking-tight text-primary">
+                  {stat.value}
+                </p>
+                <p className="text-caption text-muted-foreground uppercase tracking-wider">
+                  {stat.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Historia */}
+      {storyParagraphs.length > 0 && (
+        <section className="imansi-container py-16 border-t border-border">
+          <div className="max-w-3xl mx-auto space-y-6">
+            <h2 className="text-h1 font-bold tracking-tight">{storyTitle}</h2>
+            <div className="space-y-4">
+              {storyParagraphs.map((p, i) => (
+                <p key={i} className="text-body text-muted-foreground leading-relaxed">
+                  {p}
+                </p>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Valores */}
+      {values.length > 0 && (
+        <section className="border-y border-border bg-muted/20">
+          <div className="imansi-container py-20">
+            <div className="text-center max-w-2xl mx-auto space-y-4 mb-14">
+              <h2 className="text-h1 font-bold tracking-tight">{valuesTitle}</h2>
+              <p className="text-body text-muted-foreground">{valuesSubtitle}</p>
+            </div>
+
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto">
+              {values.map((value, i) => (
+                <div
+                  key={i}
+                  className="rounded-lg border border-border bg-card p-6 space-y-3"
+                >
+                  {value.icon && (
+                    <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                      {value.icon}
+                    </div>
+                  )}
+                  <h3 className="text-h4 font-semibold">{value.title}</h3>
+                  <p className="text-small text-muted-foreground leading-relaxed">
+                    {value.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Equipo */}
+      {team.length > 0 && (
+        <section className="imansi-container py-20">
+          <div className="text-center max-w-2xl mx-auto space-y-4 mb-14">
+            <h2 className="text-h1 font-bold tracking-tight">{teamTitle}</h2>
+            <p className="text-body text-muted-foreground">{teamSubtitle}</p>
+          </div>
+
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 max-w-5xl mx-auto">
+            {team.map((member, i) => (
+              <div key={i} className="text-center space-y-3">
+                <Avatar size="2xl" className="mx-auto">
+                  {member.image ? (
+                    <AvatarImage src={member.image} alt={member.name} />
+                  ) : null}
+                  <AvatarFallback>
+                    {member.name?.split(' ').map((n) => n[0]).join('').slice(0, 2)}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-small font-semibold">{member.name}</p>
+                  <p className="text-caption text-muted-foreground">
+                    {member.role}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* CTA */}
+      <section className="imansi-container pb-20">
+        <div className="rounded-2xl bg-primary text-primary-foreground p-10 sm:p-14 text-center space-y-5">
+          <h2 className="text-h1 font-bold tracking-tight">{ctaTitle}</h2>
+          <p className="text-body opacity-80 max-w-2xl mx-auto">{ctaSubtitle}</p>
+          <div className="flex flex-wrap justify-center gap-3 pt-2">
+            {ctaPrimary && (
+              <Link to={ctaPrimary.href}>
+                <Button
+                  size="lg"
+                  className="!bg-primary-foreground !text-primary hover:opacity-90"
+                >
+                  {ctaPrimary.label}
+                </Button>
+              </Link>
+            )}
+            {ctaSecondary && (
+              <Link to={ctaSecondary.href}>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="!bg-transparent !text-primary-foreground !border-primary-foreground/30 hover:!bg-primary-foreground/10"
+                >
+                  {ctaSecondary.label}
+                </Button>
+              </Link>
+            )}
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+}