feat(F-104): completed feature

project/apps/admin/src/app/(dashboard)/cms/page.tsx

@@ -25,6 +25,15 @@ const EyeOffIcon = (
 
 const EMPTY_FORM = { slug: '', title: '', body: '' };
 
+// Plantillas de páginas principales de la tienda. Cada una se corresponde con
+// una ruta pública que renderiza el contenido CMS si existe (y está publicada).
+const TEMPLATES = [
+  { slug: 'home', label: 'Home', route: '/', icon: '🏠', defaultTitle: 'Bienvenido a Mercado de Vida', hint: 'Sección de bienvenida destacada en la página de inicio.' },
+  { slug: 'products', label: 'Productos', route: '/products', icon: '🛒', defaultTitle: 'Nuestros productos', hint: 'Texto introductorio del listado de productos.' },
+  { slug: 'categories', label: 'Categorías', route: '/categories', icon: '🗂️', defaultTitle: 'Nuestras categorías', hint: 'Texto introductorio del listado de categorías.' },
+  { slug: 'brands', label: 'Marcas', route: '/brands', icon: '🏷️', defaultTitle: 'Nuestras marcas', hint: 'Texto introductorio del listado de marcas.' },
+];
+
 export default function CmsPage() {
   const [items, setItems] = useState<Page[]>([]);
   const [loading, setLoading] = useState(true);
@@ -45,6 +54,13 @@ export default function CmsPage() {
   useEffect(() => { load(); }, [load]);
 
   const openCreate = () => { setEditing(null); setForm(EMPTY_FORM); setShowForm(true); };
+  const openTemplate = (tpl: typeof TEMPLATES[number]) => {
+    const existing = items.find(p => p.slug === tpl.slug);
+    if (existing) { openEdit(existing); return; }
+    setEditing(null);
+    setForm({ slug: tpl.slug, title: tpl.defaultTitle, body: '' });
+    setShowForm(true);
+  };
   const openEdit = (p: Page) => { setEditing(p); setForm({ slug: p.slug, title: p.title, body: p.body }); setShowForm(true); };
 
   const handleSave = async () => {
@@ -82,6 +98,38 @@ export default function CmsPage() {
 
       {msg && <div className={`p-4 rounded-xl text-sm ${msg.startsWith('Error') ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green-700'}`}>{msg}</div>}
 
+      {/* Plantillas de páginas principales */}
+      <div className="bg-white border border-gray-200 rounded-xl p-6">
+        <h2 className="font-semibold text-gray-900 mb-1">Plantillas de la tienda</h2>
+        <p className="text-xs text-gray-400 mb-4">
+          Contenido editable de las páginas principales. Solo se muestra si la página está creada y publicada.
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+          {TEMPLATES.map(tpl => {
+            const existing = items.find(p => p.slug === tpl.slug);
+            return (
+              <button key={tpl.slug} onClick={() => openTemplate(tpl)}
+                className="text-left p-4 border border-gray-200 rounded-xl hover:border-[#2D6A4F] transition-colors group">
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-lg">{tpl.icon}</span>
+                  {existing ? (
+                    <span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${
+                      existing.status === 'published' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'
+                    }`}>
+                      {existing.status === 'published' ? 'Publicada' : 'Borrador'}
+                    </span>
+                  ) : (
+                    <span className="px-2 py-0.5 rounded-full text-[10px] font-medium bg-gray-100 text-gray-500">Sin crear</span>
+                  )}
+                </div>
+                <p className="text-sm font-semibold text-gray-900 group-hover:text-[#2D6A4F]">{tpl.label} <span className="text-xs font-mono text-gray-400">{tpl.route}</span></p>
+                <p className="text-xs text-gray-400 mt-1">{tpl.hint}</p>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       {showForm && (
         <div className="bg-white border border-gray-200 rounded-xl p-6 space-y-4">
           <h2 className="font-semibold text-gray-900">{editing ? 'Editar página' : 'Nueva página'}</h2>

project/frontend/src/app/brands/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import type { Metadata } from 'next';
 import { fetchBrands } from '@/lib/api';
+import { CmsBlock } from '@/components/content/CmsBlock';
 
 export const metadata: Metadata = {
   title: 'Marcas — mercadodevida',
@@ -19,6 +20,8 @@ export default async function BrandsPage() {
         <p className="mt-2 text-gray-600">
           Descubre las marcas de confianza que trabajan con nosotros.
         </p>
+        {/* Plantilla CMS editable desde Admin → CMS (slug: brands) */}
+        <CmsBlock slug="brands" />
       </div>
 
       <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 justify-center">

project/frontend/src/app/categories/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import type { Metadata } from 'next';
 import { fetchCategories } from '@/lib/api';
+import { CmsBlock } from '@/components/content/CmsBlock';
 
 export const metadata: Metadata = {
   title: 'Categorías — mercadodevida',
@@ -33,6 +34,8 @@ export default async function CategoriesPage() {
         <p className="mt-2 text-gray-600">
           Explora nuestra selección de productos naturales y ecológicos organizados por categoría.
         </p>
+        {/* Plantilla CMS editable desde Admin → CMS (slug: categories) */}
+        <CmsBlock slug="categories" />
       </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 justify-center">

project/frontend/src/app/page.tsx

@@ -2,6 +2,7 @@ import { Hero } from '@/components/home/Hero';
 import FeaturedProducts from '@/components/home/FeaturedProducts';
 import CategoriesGrid from '@/components/home/CategoriesGrid';
 import BrandsSection from '@/components/home/BrandsSection';
+import { CmsBlock } from '@/components/content/CmsBlock';
 
 export const revalidate = 3600; // ISR: revalidate every hour
 
@@ -11,6 +12,8 @@ export default async function HomePage() {
       <Hero />
       <FeaturedProducts />
       <CategoriesGrid />
+      {/* Plantilla CMS editable desde Admin → CMS (slug: home) */}
+      <CmsBlock slug="home" variant="section" />
       <BrandsSection />
     </>
   );

project/frontend/src/app/products/page.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import type { Metadata } from 'next';
 import { fetchProducts, fetchBrands, fetchCategories, formatPrice } from '@/lib/api';
 import { formatRichText } from '@/lib/format-rich-text';
+import { CmsBlock } from '@/components/content/CmsBlock';
 
 export const metadata: Metadata = {
   title: 'Productos — mercadodevida',
@@ -38,6 +39,8 @@ export default async function ProductsPage() {
           Todos los productos
         </h1>
         <p className="mt-2 text-gray-600">{products.length} productos disponibles</p>
+        {/* Plantilla CMS editable desde Admin → CMS (slug: products) */}
+        <CmsBlock slug="products" />
       </div>
 
       {products.length === 0 ? (

project/frontend/src/components/content/CmsBlock.tsx

@@ -0,0 +1,46 @@
+import { fetchPage } from '@/lib/api';
+import { formatRichText } from '@/lib/format-rich-text';
+
+/**
+ * Renders the CMS template content (if a published page exists for the slug)
+ * as an intro/content block. Returns null when no CMS page is configured so
+ * pages keep their default layout.
+ */
+export async function CmsBlock({
+  slug,
+  variant = 'intro',
+}: {
+  slug: string;
+  variant?: 'intro' | 'section';
+}) {
+  const page = await fetchPage(slug).catch(() => null);
+  if (!page?.body) return null;
+
+  if (variant === 'section') {
+    return (
+      <section className="py-12 bg-white">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          {page.title && (
+            <h2
+              className="text-2xl font-bold text-gray-900 mb-4 text-center"
+              style={{ fontFamily: 'var(--font-heading)' }}
+            >
+              {page.title}
+            </h2>
+          )}
+          <div
+            className="rich-text text-gray-600 leading-relaxed"
+            dangerouslySetInnerHTML={{ __html: formatRichText(page.body) }}
+          />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <div
+      className="rich-text mt-3 mb-6 max-w-3xl text-gray-600 leading-relaxed"
+      dangerouslySetInnerHTML={{ __html: formatRichText(page.body) }}
+    />
+  );
+}