feat(F-104): completed feature

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) }}
+    />
+  );
+}