@imansi/templates 0.1.0

package/src/marketing/BlogPage.jsx

@@ -0,0 +1,182 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Badge, Button, Input, cn } from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function BlogPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  title = 'Blog',
+  subtitle = 'Ideas, tutoriales y novedades del ecosistema Imansi.',
+  searchPlaceholder = 'Buscar artículos...',
+
+  categories = [],
+  posts = [],
+  categoriesLabel = 'Todas',
+  emptyMessage = 'No hay artículos que coincidan con tu búsqueda.',
+
+  // Post fields: { id, title, excerpt, category, author, date, readTime, image, href }
+}) {
+  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [search, setSearch] = useState('');
+
+  const filtered = posts.filter((p) => {
+    const matchCategory =
+      selectedCategory === 'all' || p.category === selectedCategory;
+    const matchSearch =
+      !search ||
+      p.title.toLowerCase().includes(search.toLowerCase()) ||
+      p.excerpt?.toLowerCase().includes(search.toLowerCase());
+    return matchCategory && matchSearch;
+  });
+
+  const featured = filtered[0];
+  const rest = filtered.slice(1);
+
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* Header */}
+      <section className="imansi-container py-16 sm:py-20 text-center max-w-2xl mx-auto space-y-4">
+        <h1 className="text-display font-bold tracking-tight">{title}</h1>
+        <p className="text-body text-muted-foreground">{subtitle}</p>
+      </section>
+
+      {/* Filtros */}
+      <section className="imansi-container pb-10">
+        <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
+          <div className="flex flex-wrap gap-2">
+            <button
+              onClick={() => setSelectedCategory('all')}
+              className={cn(
+                'rounded-full px-4 py-1.5 text-small font-medium transition-colors',
+                selectedCategory === 'all'
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:bg-secondary hover:text-secondary-foreground'
+              )}
+            >
+              {categoriesLabel}
+            </button>
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setSelectedCategory(cat)}
+                className={cn(
+                  'rounded-full px-4 py-1.5 text-small font-medium transition-colors',
+                  selectedCategory === cat
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-secondary hover:text-secondary-foreground'
+                )}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+
+          <div className="w-full lg:w-72">
+            <Input
+              type="search"
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Post destacado */}
+      {featured && (
+        <section className="imansi-container pb-12">
+          <Link to={featured.href || '#'} className="group block">
+            <div className="grid gap-6 md:grid-cols-2 items-center rounded-2xl border border-border bg-card overflow-hidden transition-shadow hover:shadow-lg">
+              <div className="aspect-[16/10] md:aspect-square bg-muted flex items-center justify-center text-muted-foreground">
+                {featured.image ? (
+                  <img src={featured.image} alt="" className="w-full h-full object-cover" />
+                ) : (
+                  <span className="text-caption">Sin imagen</span>
+                )}
+              </div>
+              <div className="p-8 space-y-4">
+                <div className="flex items-center gap-3">
+                  <Badge variant="primary">Destacado</Badge>
+                  {featured.category && (
+                    <Badge variant="outline">{featured.category}</Badge>
+                  )}
+                </div>
+                <h2 className="text-h2 font-bold tracking-tight group-hover:text-primary transition-colors">
+                  {featured.title}
+                </h2>
+                <p className="text-small text-muted-foreground leading-relaxed">
+                  {featured.excerpt}
+                </p>
+                <div className="flex items-center gap-3 text-caption text-muted-foreground pt-2">
+                  {featured.author && <span>{featured.author}</span>}
+                  {featured.date && <span>·</span>}
+                  {featured.date && <span>{featured.date}</span>}
+                  {featured.readTime && <span>·</span>}
+                  {featured.readTime && <span>{featured.readTime}</span>}
+                </div>
+              </div>
+            </div>
+          </Link>
+        </section>
+      )}
+
+      {/* Grid de posts */}
+      <section className="imansi-container pb-20">
+        {rest.length > 0 ? (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {rest.map((post) => (
+              <Link key={post.id} to={post.href || '#'} className="group">
+                <article className="rounded-xl border border-border bg-card overflow-hidden h-full flex flex-col transition-shadow hover:shadow-lg">
+                  <div className="aspect-[16/9] bg-muted flex items-center justify-center text-muted-foreground">
+                    {post.image ? (
+                      <img src={post.image} alt="" className="w-full h-full object-cover" />
+                    ) : (
+                      <span className="text-caption">Sin imagen</span>
+                    )}
+                  </div>
+                  <div className="p-5 flex-1 flex flex-col gap-3">
+                    {post.category && (
+                      <Badge variant="outline" className="self-start">
+                        {post.category}
+                      </Badge>
+                    )}
+                    <h3 className="text-h4 font-semibold leading-tight group-hover:text-primary transition-colors">
+                      {post.title}
+                    </h3>
+                    <p className="text-small text-muted-foreground line-clamp-2 flex-1">
+                      {post.excerpt}
+                    </p>
+                    <div className="flex items-center gap-2 text-caption text-muted-foreground pt-2 border-t border-border">
+                      {post.author && <span>{post.author}</span>}
+                      {post.date && <span>·</span>}
+                      {post.date && <span>{post.date}</span>}
+                    </div>
+                  </div>
+                </article>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          !featured && (
+            <div className="text-center py-16 text-muted-foreground">
+              <p className="text-small">{emptyMessage}</p>
+            </div>
+          )
+        )}
+      </section>
+    </MarketingLayout>
+  );
+}

package/src/marketing/BlogPostPage.jsx

@@ -0,0 +1,192 @@
+import { Link } from 'react-router-dom';
+import { Avatar, AvatarFallback, Badge, Button } from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function BlogPostPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  post = { title: '', excerpt: '', content: null },
+  author,
+  categories = [],
+  readTime,
+  date,
+  backLink = { href: '/blog', label: 'Volver al blog' },
+  tocItems = [],
+  sidebarCta,
+  relatedPosts = [],
+
+  children,
+}) {
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* Back link */}
+      <div className="imansi-container pt-8">
+        <Link
+          to={backLink.href}
+          className="inline-flex items-center gap-1.5 text-small text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M8.75 3.5L5.25 7L8.75 10.5" />
+          </svg>
+          {backLink.label}
+        </Link>
+      </div>
+
+      {/* Header del post */}
+      <article className="imansi-container pt-6 pb-16">
+        <header className="max-w-3xl mx-auto space-y-6 text-center">
+          {categories.length > 0 && (
+            <div className="flex justify-center gap-2 flex-wrap">
+              {categories.map((cat) => (
+                <Badge key={cat} variant="outline">{cat}</Badge>
+              ))}
+            </div>
+          )}
+
+          <h1 className="text-display font-bold tracking-tight leading-[1.1]">
+            {post.title}
+          </h1>
+
+          {post.excerpt && (
+            <p className="text-body text-muted-foreground leading-relaxed">
+              {post.excerpt}
+            </p>
+          )}
+
+          <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
+            {author && (
+              <div className="flex items-center gap-3">
+                <Avatar size="sm">
+                  {author.avatar ? (
+                    <img src={author.avatar} alt="" />
+                  ) : (
+                    <AvatarFallback>
+                      {author.name?.charAt(0) || 'A'}
+                    </AvatarFallback>
+                  )}
+                </Avatar>
+                <div className="text-left">
+                  <p className="text-small font-medium">{author.name}</p>
+                  {author.role && (
+                    <p className="text-caption text-muted-foreground">
+                      {author.role}
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {(date || readTime) && (
+              <div className="flex items-center gap-2 text-caption text-muted-foreground">
+                {date && <span>{date}</span>}
+                {date && readTime && <span>·</span>}
+                {readTime && <span>{readTime}</span>}
+              </div>
+            )}
+          </div>
+        </header>
+
+        {/* Imagen de portada */}
+        {post.image && (
+          <div className="mt-12 max-w-5xl mx-auto">
+            <div className="aspect-[21/9] rounded-2xl overflow-hidden bg-muted">
+              <img src={post.image} alt="" className="w-full h-full object-cover" />
+            </div>
+          </div>
+        )}
+
+        {/* Contenido + Sidebar */}
+        <div className="mt-16 grid gap-12 lg:grid-cols-[1fr_280px] max-w-6xl mx-auto">
+          <div className="prose-imansi min-w-0">
+            {post.content || children}
+          </div>
+
+          <aside className="hidden lg:block">
+            <div className="sticky top-24 space-y-8">
+              {tocItems.length > 0 && (
+                <div className="space-y-3">
+                  <h4 className="text-caption uppercase tracking-wider font-semibold text-muted-foreground">
+                    En esta página
+                  </h4>
+                  <nav className="space-y-2 border-l border-border">
+                    {tocItems.map((item, i) => (
+                      <a
+                        key={i}
+                        href={item.href}
+                        className="block pl-4 text-small text-muted-foreground hover:text-foreground transition-colors border-l-2 border-transparent hover:border-primary -ml-px"
+                      >
+                        {item.label}
+                      </a>
+                    ))}
+                  </nav>
+                </div>
+              )}
+
+              {sidebarCta && (
+                <div className="rounded-lg border border-border bg-card p-5 space-y-3">
+                  <h4 className="text-small font-semibold">
+                    {sidebarCta.title}
+                  </h4>
+                  <p className="text-caption text-muted-foreground">
+                    {sidebarCta.description}
+                  </p>
+                  <Link to={sidebarCta.href || '#'}>
+                    <Button size="sm" fullWidth>
+                      {sidebarCta.label}
+                    </Button>
+                  </Link>
+                </div>
+              )}
+            </div>
+          </aside>
+        </div>
+      </article>
+
+      {/* Posts relacionados */}
+      {relatedPosts.length > 0 && (
+        <section className="border-t border-border bg-muted/20">
+          <div className="imansi-container py-16">
+            <h2 className="text-h2 font-bold tracking-tight mb-8">
+              Artículos relacionados
+            </h2>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {relatedPosts.map((post) => (
+                <Link key={post.id} to={post.href || '#'} className="group">
+                  <article className="rounded-xl border border-border bg-card overflow-hidden transition-shadow hover:shadow-lg">
+                    <div className="aspect-[16/9] bg-muted flex items-center justify-center text-muted-foreground">
+                      {post.image ? (
+                        <img src={post.image} alt="" className="w-full h-full object-cover" />
+                      ) : (
+                        <span className="text-caption">Sin imagen</span>
+                      )}
+                    </div>
+                    <div className="p-5 space-y-2">
+                      <h3 className="text-h4 font-semibold leading-tight group-hover:text-primary transition-colors">
+                        {post.title}
+                      </h3>
+                      <p className="text-caption text-muted-foreground">
+                        {post.excerpt}
+                      </p>
+                    </div>
+                  </article>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+    </MarketingLayout>
+  );
+}