x

apps/admin/src/components/CategoryBulkJsonModal.tsx

@@ -75,6 +75,7 @@ export default function CategoryBulkJsonModal({
         id: cat.id,
         name: catBaseName || transMap['th'] || 'Unnamed Category',
         imageUrl: cat.imageUrl || null,
+        layoutType: cat.layoutType || 'split_showcase',
         translations: transMap,
       };
     });
@@ -89,6 +90,7 @@ export default function CategoryBulkJsonModal({
     const sampleItems = exportData.slice(0, 5);
     return `Please translate and optimize our E-commerce Category Names into all 8 supported languages (th, en, ja, zh, vi, ko, lo, it).
 Ensure the tone is elegant, accurate for luxury aromatherapy & lifestyle products.
+Allowed layoutType values: "split_showcase" (default), "editorial_hero", "dense_catalog".
 
 Return ONLY a valid JSON Array conforming to this structure:
 \`\`\`json
@@ -99,6 +101,7 @@ ${JSON.stringify(
         {
           name: 'น้ำมันหอมระเหย',
           imageUrl: '/images/categories/essential-oils.jpg',
+          layoutType: 'split_showcase',
           translations: {
             th: 'น้ำมันหอมระเหย',
             en: 'Essential Oils',
@@ -113,6 +116,7 @@ ${JSON.stringify(
         {
           name: 'ก้านไม้หอมปรับอากาศ',
           imageUrl: '/images/categories/reed-diffusers.jpg',
+          layoutType: 'editorial_hero',
           translations: {
             th: 'ก้านไม้หอมปรับอากาศ',
             en: 'Reed Diffusers',
@@ -165,6 +169,7 @@ ${JSON.stringify(
           id: typeof item.id === 'number' ? item.id : undefined,
           name: baseName,
           imageUrl: item.imageUrl || null,
+          layoutType: typeof item.layoutType === 'string' ? item.layoutType : 'split_showcase',
           translations: trans,
         };
       });

apps/admin/src/pages/CategoryEditPage.tsx

@@ -22,7 +22,10 @@ import {
   FileJson,
   Check,
   Code2,
-  Sparkles
+  Sparkles,
+  LayoutTemplate,
+  Columns,
+  Grid3X3
 } from 'lucide-react'
 import MediaLibraryModal from '../components/MediaLibraryModal'
 
@@ -41,7 +44,7 @@ const SAMPLE_JSON_TEMPLATE = JSON.stringify({
   ja: "アロマキャンドル",
   zh: "芳香香薰蜡烛",
   vi: "Nến thơm thư giãn",
-  ko: "아로마 캔들",
+  ko: "아로มา 캔들",
   lo: "ທຽນຫອມອາໂຣມາ",
   it: "Candele aromatiche profumate"
 }, null, 2)
@@ -76,6 +79,7 @@ export default function CategoryEditPage() {
     it: '',
   })
   const [imageUrl, setImageUrl] = useState<string>('')
+  const [layoutType, setLayoutType] = useState<string>('split_showcase')
   const [categoryMeta, setCategoryMeta] = useState<Category | null>(null)
 
   // Media Library Modal
@@ -91,6 +95,7 @@ export default function CategoryEditPage() {
         const data = await res.json()
         setCategoryMeta(data)
         setImageUrl(data.imageUrl || '')
+        setLayoutType(data.layoutType || 'split_showcase')
 
         if (data.name && typeof data.name === 'object') {
           setName(prev => ({ ...prev, ...data.name }))
@@ -278,7 +283,8 @@ export default function CategoryEditPage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           name: masterName,
-          imageUrl: imageUrl || null
+          imageUrl: imageUrl || null,
+          layoutType: layoutType || 'split_showcase'
         })
       })
 
@@ -657,6 +663,152 @@ export default function CategoryEditPage() {
             )}
           </div>
 
+          {/* Card: Category Layout Archetype */}
+          <div className="admin-card p-6 md:p-8 space-y-6">
+            <div className="flex items-center justify-between border-b border-white/5 pb-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-xl bg-amber-500/10 text-amber-400">
+                  <LayoutTemplate className="w-5 h-5" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-bold text-white">Category Layout & Presentation</h2>
+                  <p className="text-xs text-slate-400">Choose how this category displays on Storefront & Website</p>
+                </div>
+              </div>
+              <span className="px-2.5 py-1 rounded-lg text-xs font-mono font-semibold bg-white/5 text-slate-300 border border-white/10">
+                {layoutType}
+              </span>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* Option 1: Split Showcase */}
+              <div 
+                onClick={() => setLayoutType('split_showcase')}
+                className={`relative p-5 rounded-2xl border-2 transition-all cursor-pointer flex flex-col justify-between group ${
+                  layoutType === 'split_showcase'
+                    ? 'bg-cyan-glow/10 border-cyan-glow shadow-lg shadow-cyan-glow/10'
+                    : 'bg-white/[0.02] border-white/10 hover:border-white/20 hover:bg-white/[0.04]'
+                }`}
+              >
+                <div className="space-y-3">
+                  {/* Visual Layout Mockup */}
+                  <div className="w-full h-24 rounded-xl bg-night-950/80 border border-white/10 p-2.5 flex flex-col justify-between overflow-hidden">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 space-y-1">
+                        <div className="h-2 w-3/4 bg-white/30 rounded" />
+                        <div className="h-1.5 w-1/2 bg-white/15 rounded" />
+                      </div>
+                      <div className="w-8 h-8 rounded-lg bg-cyan-glow/30 border border-cyan-glow/50 shrink-0" />
+                    </div>
+                    <div className="grid grid-cols-3 gap-1 pt-1">
+                      <div className="h-6 rounded bg-white/10" />
+                      <div className="h-6 rounded bg-white/10" />
+                      <div className="h-6 rounded bg-white/10" />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-sm font-bold text-white flex items-center gap-1.5">
+                        <Columns className="w-4 h-4 text-cyan-glow" />
+                        Split Showcase
+                      </h4>
+                      {layoutType === 'split_showcase' && (
+                        <CheckCircle2 className="w-4 h-4 text-cyan-glow" />
+                      )}
+                    </div>
+                    <p className="text-[11px] text-cyan-400 font-medium mt-0.5">ค่าเริ่มต้น (Balanced)</p>
+                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
+                      หัวข้อแบ่ง 2 ฝั่ง (ข้อความซ้าย + รูปเด่นขวา) พร้อมการจัดแสดงสินค้า 3-4 คอลัมน์มาตรฐาน
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Option 2: Editorial Hero */}
+              <div 
+                onClick={() => setLayoutType('editorial_hero')}
+                className={`relative p-5 rounded-2xl border-2 transition-all cursor-pointer flex flex-col justify-between group ${
+                  layoutType === 'editorial_hero'
+                    ? 'bg-amber-500/10 border-amber-400 shadow-lg shadow-amber-500/10'
+                    : 'bg-white/[0.02] border-white/10 hover:border-white/20 hover:bg-white/[0.04]'
+                }`}
+              >
+                <div className="space-y-3">
+                  {/* Visual Layout Mockup */}
+                  <div className="w-full h-24 rounded-xl bg-night-950/80 border border-white/10 p-2 flex flex-col justify-between overflow-hidden">
+                    <div className="w-full h-10 rounded-lg bg-amber-500/20 border border-amber-500/40 flex flex-col items-center justify-center gap-1">
+                      <div className="h-2 w-16 bg-amber-200/80 rounded" />
+                      <div className="h-1 w-10 bg-amber-200/40 rounded" />
+                    </div>
+                    <div className="grid grid-cols-2 gap-1.5 pt-1">
+                      <div className="h-8 rounded-lg bg-white/10 border border-white/5" />
+                      <div className="h-8 rounded-lg bg-white/10 border border-white/5" />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-sm font-bold text-white flex items-center gap-1.5">
+                        <Sparkles className="w-4 h-4 text-amber-400" />
+                        Editorial Hero
+                      </h4>
+                      {layoutType === 'editorial_hero' && (
+                        <CheckCircle2 className="w-4 h-4 text-amber-400" />
+                      )}
+                    </div>
+                    <p className="text-[11px] text-amber-400 font-medium mt-0.5">Cinematic & Luxury</p>
+                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
+                      Hero Banner เต็มจอสไตล์นิตยสารหรูหรา พร้อมการ์ดสินค้าขนาดใหญ่ 2-3 คอลัมน์
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Option 3: Dense Catalog */}
+              <div 
+                onClick={() => setLayoutType('dense_catalog')}
+                className={`relative p-5 rounded-2xl border-2 transition-all cursor-pointer flex flex-col justify-between group ${
+                  layoutType === 'dense_catalog'
+                    ? 'bg-purple-500/10 border-purple-400 shadow-lg shadow-purple-500/10'
+                    : 'bg-white/[0.02] border-white/10 hover:border-white/20 hover:bg-white/[0.04]'
+                }`}
+              >
+                <div className="space-y-3">
+                  {/* Visual Layout Mockup */}
+                  <div className="w-full h-24 rounded-xl bg-night-950/80 border border-white/10 p-2 flex flex-col justify-between overflow-hidden">
+                    <div className="flex items-center justify-between border-b border-white/10 pb-1">
+                      <div className="h-2 w-12 bg-white/40 rounded" />
+                      <div className="h-2 w-6 bg-purple-400/60 rounded" />
+                    </div>
+                    <div className="grid grid-cols-4 gap-1 pt-1">
+                      <div className="h-6 rounded bg-white/10" />
+                      <div className="h-6 rounded bg-white/10" />
+                      <div className="h-6 rounded bg-white/10" />
+                      <div className="h-6 rounded bg-white/10" />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-sm font-bold text-white flex items-center gap-1.5">
+                        <Grid3X3 className="w-4 h-4 text-purple-400" />
+                        Dense Catalog
+                      </h4>
+                      {layoutType === 'dense_catalog' && (
+                        <CheckCircle2 className="w-4 h-4 text-purple-400" />
+                      )}
+                    </div>
+                    <p className="text-[11px] text-purple-400 font-medium mt-0.5">High Density Shopper</p>
+                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
+                      Header ย่อกะทัดรัด พร้อมตารางสินค้าความหนาแน่นสูง 4-5 คอลัมน์ เหมาะสำหรับสินค้าจำนวนมาก
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           {/* Card 3: Associated Products & Quick Link */}
           {!isNew && categoryMeta && (
             <div className="admin-card p-6 flex items-center justify-between gap-4">

apps/backend/prisma/migrations/20260929175500_add_category_layout_type/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Category" ADD COLUMN IF NOT EXISTS "layoutType" TEXT NOT NULL DEFAULT 'split_showcase';

apps/backend/prisma/schema.prisma

@@ -34,6 +34,7 @@ model Category {
   id           Int                   @id @default(autoincrement())
   name         String                @unique
   imageUrl     String?
+  layoutType   String                @default("split_showcase")
   products     Product[]
   attributes   AttributeDefinition[]
   translations CategoryTranslation[]

apps/backend/src/routes/categories.ts

@@ -71,6 +71,7 @@ export const categoriesRoute = new Elysia({ prefix: "/categories" })
           const updateData: any = {};
           if (imageUrl !== undefined) updateData.imageUrl = imageUrl;
           if (item.name) updateData.name = item.name;
+          if (item.layoutType) updateData.layoutType = item.layoutType;
 
           if (Object.keys(updateData).length > 0) {
             category = await prisma.category.update({
@@ -85,6 +86,7 @@ export const categoriesRoute = new Elysia({ prefix: "/categories" })
             data: {
               name: baseName,
               imageUrl,
+              layoutType: item.layoutType || 'split_showcase',
             },
           });
           createdCount++;
@@ -199,6 +201,7 @@ export const categoriesRoute = new Elysia({ prefix: "/categories" })
         id: category.id,
         name: resolveCatName(category, lang),
         imageUrl: category.imageUrl,
+        layoutType: category.layoutType || 'split_showcase',
         _count: category._count,
       },
       data: category.products.map((p: any) => {
@@ -318,6 +321,7 @@ export const categoriesRoute = new Elysia({ prefix: "/categories" })
         data: {
           name: body.name,
           imageUrl: body.imageUrl,
+          layoutType: body.layoutType || 'split_showcase',
           // Auto-seed Thai translation
           translations: { create: { langCode: 'th', name: body.name } },
         },
@@ -333,6 +337,7 @@ export const categoriesRoute = new Elysia({ prefix: "/categories" })
     body: t.Object({
       name: t.String(),
       imageUrl: t.Optional(t.Union([t.String(), t.Null()])),
+      layoutType: t.Optional(t.String()),
     })
   })
   .put("/:id", async ({ params, body, status }) => {
@@ -340,12 +345,14 @@ export const categoriesRoute = new Elysia({ prefix: "/categories" })
     if (isNaN(id)) return status(400, { message: "Invalid category ID" });
 
     try {
+      const updateData: any = {};
+      if (body.name !== undefined) updateData.name = body.name;
+      if (body.imageUrl !== undefined) updateData.imageUrl = body.imageUrl;
+      if (body.layoutType !== undefined) updateData.layoutType = body.layoutType;
+
       const category = await prisma.category.update({
         where: { id, deletedAt: null },
-        data: {
+        data: updateData,
-          name: body.name,
-          imageUrl: body.imageUrl,
-        },
       });
       return category;
     } catch (err: any) {
@@ -362,6 +369,7 @@ export const categoriesRoute = new Elysia({ prefix: "/categories" })
     body: t.Object({
       name: t.Optional(t.String()),
       imageUrl: t.Optional(t.Union([t.String(), t.Null()])),
+      layoutType: t.Optional(t.String()),
     })
   })
   .delete("/:id", async ({ params, status }) => {

apps/spa/src/pages/CategoryPage.tsx

@@ -7,6 +7,7 @@ import ProductCard from '../components/ProductCard'
 import DynamicPageRenderer from '../components/DynamicPageRenderer'
 import { API_BASE, getCategoryImage, type Category, type Product, type PageSection } from '../types'
 import { getLocalizedField } from '../utils/localization'
+import { Sparkles, Layers, Grid3X3, ArrowRight } from 'lucide-react'
 
 export default function CategoryPage() {
   const { id } = useParams<{ id: string }>()
@@ -101,6 +102,20 @@ export default function CategoryPage() {
 
   const categoryName = getLocalizedField(category?.name, lang)
   const categoryImageUrl = category?.imageUrl || (categoryName ? getCategoryImage(categoryName) : '')
+  const layoutType = category?.layoutType || 'split_showcase'
+
+  // Determine Product Grid Class based on layout archetype
+  const getProductGridClass = () => {
+    switch (layoutType) {
+      case 'editorial_hero':
+        return 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-10'
+      case 'dense_catalog':
+        return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4'
+      case 'split_showcase':
+      default:
+        return 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6'
+    }
+  }
 
   return (
     <div className="min-h-screen bg-surface-page text-text-main">
@@ -114,7 +129,7 @@ export default function CategoryPage() {
 
       <Navbar categories={categories} />
 
-      {/* Hero Banner for Category */}
+      {/* Hero / Banner Area */}
       {heroSections.length > 0 ? (
         <div className="pt-20">
           <DynamicPageRenderer
@@ -123,12 +138,97 @@ export default function CategoryPage() {
             categoriesLoading={loading}
           />
         </div>
+      ) : layoutType === 'editorial_hero' ? (
+        /* ── Archetype 2: Editorial Hero Layout ── */
+        <section className="relative overflow-hidden min-h-[380px] md:min-h-[460px] flex items-center justify-center border-b border-white/10 bg-night-950">
+          {/* Immersive Background Image with Dark Gradient Overlays */}
+          {categoryImageUrl && (
+            <div className="absolute inset-0 z-0">
+              <img
+                src={categoryImageUrl}
+                alt={categoryName}
+                className="w-full h-full object-cover object-center filter brightness-[0.45] saturate-125 scale-105 transform transition-transform duration-1000"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-night-950 via-night-950/70 to-night-950/40" />
+              <div className="absolute inset-0 bg-radial-gradient from-transparent via-night-950/40 to-night-950/90" />
+            </div>
+          )}
+
+          <div className="relative z-10 mx-auto max-w-4xl px-6 pt-32 pb-16 text-center space-y-5 animate-fade-in">
+            {/* Breadcrumb */}
+            <div className="flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-300/80">
+              <Link to="/" className="transition hover:text-amber-300">{t('nav.home', 'Home')}</Link>
+              <span>/</span>
+              <Link to="/shop" className="transition hover:text-amber-300">{t('nav.shop', 'Shop')}</Link>
+              <span>/</span>
+              <span className="text-amber-300 font-bold">{categoryName || '...'}</span>
+            </div>
+
+            {/* Exclusive Badge */}
+            <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest bg-amber-500/10 text-amber-300 border border-amber-500/30 backdrop-blur-md shadow-lg shadow-amber-500/10">
+              <Sparkles className="w-3.5 h-3.5 text-amber-300" />
+              <span>Curated Aroma Collection</span>
+            </div>
+
+            {/* Title */}
+            <h1 className="text-4xl sm:text-5xl md:text-6xl font-serif font-bold text-white tracking-tight leading-tight">
+              {loading ? (
+                <div className="h-12 w-64 bg-white/10 animate-pulse rounded-xl mx-auto" />
+              ) : (
+                categoryName
+              )}
+            </h1>
+
+            {/* Subtitle & Item Count */}
+            {!loading && category?._count !== undefined && (
+              <p className="text-slate-300 text-sm md:text-base max-w-xl mx-auto font-light leading-relaxed">
+                Discover {category._count.products} handcrafted scents and artisanal essences designed to elevate your living spaces.
+              </p>
+            )}
+          </div>
+        </section>
+      ) : layoutType === 'dense_catalog' ? (
+        /* ── Archetype 3: Dense Catalog Layout ── */
+        <section className="relative overflow-hidden bg-night-900/80 border-b border-white/5 pt-28 pb-6 md:pt-32 md:pb-8">
+          <div className="mx-auto max-w-7xl px-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+                <Link to="/" className="transition hover:text-cyan-glow">{t('nav.home', 'Home')}</Link>
+                <span>/</span>
+                <Link to="/shop" className="transition hover:text-cyan-glow">{t('nav.shop', 'Shop')}</Link>
+                <span>/</span>
+                <span className="text-cyan-glow font-bold">{categoryName || '...'}</span>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
+                  {loading ? (
+                    <div className="h-8 w-40 bg-white/10 animate-pulse rounded-lg" />
+                  ) : (
+                    categoryName
+                  )}
+                </h1>
+                {!loading && category?._count !== undefined && (
+                  <span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20">
+                    {category._count.products} items
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 text-xs text-slate-400">
+              <Grid3X3 className="w-4 h-4 text-slate-400" />
+              <span>High-Density Catalog View</span>
+            </div>
+          </div>
+        </section>
       ) : (
+        /* ── Archetype 1: Split Showcase Layout (Default) ── */
         <section className="relative overflow-hidden bg-night-900/60 border-b border-white/5">
           <div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-36 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
-            <div className="flex-1 text-center md:text-left">
+            <div className="flex-1 text-center md:text-left space-y-4">
               {/* Breadcrumb */}
-              <div className="mb-4 flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-slate-400">
+              <div className="flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-slate-400">
                 <Link to="/" className="transition hover:text-cyan-glow">{t('nav.home', 'Home')}</Link>
                 <span>/</span>
                 <Link to="/shop" className="transition hover:text-cyan-glow">{t('nav.shop', 'Shop')}</Link>
@@ -136,29 +236,36 @@ export default function CategoryPage() {
                 <span className="text-cyan-glow font-bold">{categoryName || '...'}</span>
               </div>
               
-              <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white tracking-tight">
+              <div className="space-y-2">
-                {loading ? (
+                <div className="inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full text-[11px] font-bold uppercase tracking-wider bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20">
-                  <div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg mx-auto md:mx-0" />
+                  <Layers className="w-3 h-3 text-cyan-glow" />
-                ) : (
+                  <span>Category Showcase</span>
-                  categoryName
+                </div>
-                )}
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white tracking-tight">
-              </h1>
+                  {loading ? (
+                    <div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg mx-auto md:mx-0" />
+                  ) : (
+                    categoryName
+                  )}
+                </h1>
+              </div>
 
               {!loading && category?._count !== undefined && (
-                <p className="text-slate-400 text-sm mt-3">
+                <p className="text-slate-400 text-sm">
-                  {category._count.products} {t('categories.itemCount', 'products available')}
+                  {category._count.products} {t('categories.itemCount', 'products available in this collection')}
                 </p>
               )}
             </div>
 
             {categoryImageUrl && (
-              <div className="relative w-48 h-48 md:w-64 md:h-64 shrink-0 rounded-3xl overflow-hidden shadow-2xl border border-white/10 bg-night-950">
+              <div className="relative w-48 h-48 md:w-64 md:h-64 shrink-0 rounded-3xl overflow-hidden shadow-2xl border border-white/10 bg-night-950 group">
                 <img
                   src={categoryImageUrl}
                   alt={categoryName}
-                  className="absolute inset-0 w-full h-full object-cover"
+                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                   onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                 />
+                <div className="absolute inset-0 bg-gradient-to-t from-night-950/60 via-transparent to-transparent pointer-events-none" />
               </div>
             )}
           </div>
@@ -166,9 +273,9 @@ export default function CategoryPage() {
       )}
 
       {/* Products & Category Navigation */}
-      <div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
+      <div className="mx-auto max-w-7xl space-y-8 px-6 py-10 md:py-12">
-        {/* Other Category Pills */}
+        {/* Category Pills Navigation */}
-        <div className="flex flex-wrap gap-2.5">
+        <div className={`flex flex-wrap gap-2 ${layoutType === 'editorial_hero' ? 'justify-center' : 'justify-start'}`}>
           {categories.map((cat) => {
             const catItemName = getLocalizedField(cat.name, lang)
             const isActive = String(cat.id) === String(id)
@@ -179,7 +286,9 @@ export default function CategoryPage() {
                 to={`/category/${cat.id}`}
                 className={`px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all duration-200 border cursor-pointer ${
                   isActive
-                    ? 'bg-cyan-glow text-night-950 border-cyan-glow shadow-md shadow-cyan-glow/20 font-black'
+                    ? layoutType === 'editorial_hero'
+                      ? 'bg-amber-400 text-night-950 border-amber-400 shadow-lg shadow-amber-500/20 font-black'
+                      : 'bg-cyan-glow text-night-950 border-cyan-glow shadow-md shadow-cyan-glow/20 font-black'
                     : 'bg-night-900/80 text-slate-400 border-white/10 hover:border-cyan-glow/40 hover:text-white'
                 }`}
               >
@@ -198,24 +307,25 @@ export default function CategoryPage() {
             </Link>
           </div>
         ) : loading ? (
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+          <div className={getProductGridClass()}>
-            {Array.from({ length: 8 }).map((_, i) => (
+            {Array.from({ length: layoutType === 'dense_catalog' ? 10 : 8 }).map((_, i) => (
               <div key={i} className="rounded-2xl bg-white/5 animate-pulse h-80 border border-white/5" />
             ))}
           </div>
         ) : products.length === 0 ? (
-          <div className="text-center py-20 bg-night-900/40 rounded-2xl border border-white/5 space-y-3">
+          <div className="text-center py-20 bg-night-900/40 rounded-2xl border border-white/5 space-y-4">
             <p className="text-4xl">📦</p>
             <p className="text-slate-300 font-medium text-base">
               {t('category.noProducts', 'No products in this category yet.')}
             </p>
-            <Link to="/shop" className="text-cyan-glow font-bold text-xs uppercase tracking-wider hover:underline inline-block pt-2">
+            <Link to="/shop" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-cyan-glow font-bold text-xs uppercase tracking-wider transition-all">
-              &larr; {t('shop.exploreAllProducts', 'Explore All Products')}
+              <span>{t('shop.exploreAllProducts', 'Explore All Products')}</span>
+              <ArrowRight className="w-3.5 h-3.5" />
             </Link>
           </div>
         ) : (
           <div>
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+            <div className={getProductGridClass()}>
               {products.slice(0, displayCount).map((p) => (
                 <ProductCard key={p.id} product={p} />
               ))}

apps/website/src/app/[lang]/category/[id]/page.tsx

@@ -93,6 +93,21 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
   const category = categoryProductsResult.data.category
   const products = categoryProductsResult.data.data ?? []
   const categoryName = resolveLocalized(category.name, lang)
+  const categoryImageUrl = category.imageUrl || getCategoryImage(categoryName)
+  const layoutType = category.layoutType || 'split_showcase'
+
+  // Determine Product Grid Class based on layout archetype
+  const getProductGridClass = () => {
+    switch (layoutType) {
+      case 'editorial_hero':
+        return 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10'
+      case 'dense_catalog':
+        return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 md:gap-6'
+      case 'split_showcase':
+      default:
+        return 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8'
+    }
+  }
 
   return (
     <div className="min-h-screen bg-surface-page text-text-main">
@@ -101,23 +116,92 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
       )}
       {heroSections.length > 0 ? (
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
-      ) : (
+      ) : layoutType === 'editorial_hero' ? (
-        <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10">
+        /* ── Archetype 2: Editorial Hero Layout ── */
-          <div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-32 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
+        <section className="relative overflow-hidden min-h-[380px] md:min-h-[460px] flex items-center justify-center border-b border-line-primary/10 bg-black">
-            <div className="flex-1 text-center md:text-left">
+          {categoryImageUrl && (
-              <div className="mb-5 flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
+            <div className="absolute inset-0 z-0">
+              <Image
+                src={categoryImageUrl}
+                alt={categoryName}
+                fill
+                unoptimized
+                className="object-cover object-center filter brightness-[0.45] saturate-125 scale-105"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/40" />
+            </div>
+          )}
+
+          <div className="relative z-10 mx-auto max-w-4xl px-6 pt-32 pb-16 text-center space-y-5">
+            <div className="flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-300">
+              <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+              <span>/</span>
+              <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+              <span>/</span>
+              <span className="text-brand-primary font-bold">{categoryName}</span>
+            </div>
+
+            <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest bg-white/10 text-white border border-white/20 backdrop-blur-md">
+              <span>Curated Aroma Collection</span>
+            </div>
+
+            <h1 className="text-4xl font-serif font-bold text-white md:text-6xl tracking-tight leading-tight">
+              {categoryName}
+            </h1>
+
+            {category._count && (
+              <p className="text-slate-300 text-sm md:text-base max-w-xl mx-auto font-light leading-relaxed">
+                Discover {category._count.products} handcrafted scents and artisanal essences designed to elevate your living spaces.
+              </p>
+            )}
+          </div>
+        </section>
+      ) : layoutType === 'dense_catalog' ? (
+        /* ── Archetype 3: Dense Catalog Layout ── */
+        <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10 pt-28 pb-6 md:pt-32 md:pb-8">
+          <div className="mx-auto max-w-7xl px-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-text">
                 <Link href="/" className="transition hover:text-brand-primary">Home</Link>
                 <span>/</span>
                 <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
                 <span>/</span>
-                <span className="text-text-main">{categoryName}</span>
+                <span className="text-text-main font-bold">{categoryName}</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-bold text-text-main sm:text-3xl tracking-tight">{categoryName}</h1>
+                {category._count && (
+                  <span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-brand-primary/10 text-brand-primary border border-brand-primary/20">
+                    {category._count.products} items
+                  </span>
+                )}
+              </div>
+            </div>
+            <div className="text-xs text-muted-text">
+              High-Density Catalog View
+            </div>
+          </div>
+        </section>
+      ) : (
+        /* ── Archetype 1: Split Showcase Layout (Default) ── */
+        <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10">
+          <div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-32 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
+            <div className="flex-1 text-center md:text-left space-y-4">
+              <div className="flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
+                <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+                <span>/</span>
+                <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+                <span>/</span>
+                <span className="text-text-main font-bold">{categoryName}</span>
+              </div>
+              <div>
+                <h1 className="text-4xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
+                {category._count && <p className="mt-3 text-muted-text text-sm">{category._count.products} products available in this collection</p>}
               </div>
-              <h1 className="text-4xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
-              {category._count && <p className="mt-4 text-muted-text">{category._count.products} products available</p>}
             </div>
             <div className="relative w-48 h-48 md:w-72 md:h-72 shrink-0 rounded-3xl overflow-hidden shadow-lg border border-line-primary/5">
               <Image
-                src={category.imageUrl || getCategoryImage(categoryName)}
+                src={categoryImageUrl}
                 alt={categoryName}
                 fill
                 unoptimized
@@ -129,7 +213,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
       )}
 
       <div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
-        <div className="flex flex-wrap gap-3">
+        <div className={`flex flex-wrap gap-3 ${layoutType === 'editorial_hero' ? 'justify-center' : 'justify-start'}`}>
           {!categoriesResult.ok && (
             <span className="rounded-full border border-rose-100 bg-surface-card px-5 py-2 text-xs font-bold uppercase tracking-widest text-rose-500">
               Categories unavailable
@@ -160,7 +244,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
             <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
           </div>
         ) : (
-          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+          <div className={getProductGridClass()}>
             {products.map((product) => <ProductCard key={product.id} product={product} />)}
           </div>
         )}

packages/types/index.ts

@@ -10,6 +10,7 @@ export interface Category {
   id: number
   name: TranslatableString
   imageUrl?: string | null
+  layoutType?: 'split_showcase' | 'editorial_hero' | 'dense_catalog' | string | null
   _count?: { products: number }
   translations?: { langCode: string; name: string }[]
   createdAt?: string