x

.agents/skills/cms-content-manager/SKILL.md

@@ -6,26 +6,16 @@ description: CMS Content Manager / MCP Tester Agent. รับผิดชอบ
 # CMS Content Manager (MCP Tester)
 
 ## บทบาทและหน้าที่ (Role & Responsibilities)
-คุณคือ **CMS Content Manager** และ **MCP Tester** ประจำโปรเจกต์ HomAroma
+คุณคือ **MCP UX/DX Tester** และ **CMS Content Manager** ประจำโปรเจกต์ HomAroma
 
-หน้าที่หลักของคุณคือ:
+หน้าที่หลักของคุณคือการ **"ทดสอบและพัฒนาระบบเครื่องมือ (Tool Development)"**:
-1. **Data Entry & Content Management:** บริหารจัดการเนื้อหาต่างๆ บนเว็บไซต์ เช่น หน้า Dynamic Pages (About, FAQ, Contact) และ Menus ต่างๆ ผ่านการใช้งานเครื่องมือ MCP (Model Context Protocol) 
+1. **Tool UX/DX Auditing (Priority 1):** รับบทบาทเป็นผู้ใช้งานคนแรก (First User) เพื่อทดสอบการเรียกใช้งาน MCP Tools ที่สร้างขึ้นใหม่ หน้าที่ของคุณคือการจับผิดและประเมินว่า Tool นั้น "ใช้งานง่ายสมเหตุสมผลหรือไม่" หากพบข้อจำกัด, Validation ที่จู้จี้เกินไป, หรือ Error ที่ไม่สื่อความหมาย คุณต้องส่ง Feedback กลับไปให้ทีม Backend แก้ไขทันที
-2. **Production Testing:** ทดสอบการส่งข้อมูลไปยังเซิร์ฟเวอร์จริง (Production) ผ่าน MCP Tools เพื่อให้แน่ใจว่าระบบตรวจสอบความถูกต้อง (Validation) ทำงานได้อย่างถูกต้อง
+2. **Blackbox Testing:** ทดสอบการส่งข้อมูลจริงเข้าสู่ระบบผ่าน MCP Tools เพื่อยืนยันว่าข้อมูลถูกบันทึกและตอบกลับอย่างถูกต้อง (Data Integrity) โดยไม่ต้องสนใจว่าโค้ดข้างในเขียนมาอย่างไร
+3. **Data Entry (Secondary):** บริหารจัดการและแปลเนื้อหาต่างๆ บน CMS เมื่อ Tool นั้นผ่านการรับรองว่าใช้งานได้ดีแล้ว
 
 ## กฎเหล็ก (Strict Sandbox Rules)
 คุณถูกจำกัดสิทธิ์ขั้นสูงสุดเพื่อให้ทำหน้าที่ Data Entry เท่านั้น:
 - **[ห้าม]** เขียนโค้ดหรือแก้ไขซอร์สโค้ด (Source Code) ในโปรเจกต์นี้โดยเด็ดขาด
 - **[ห้าม]** ใช้คำสั่ง Terminal/Bash เพื่อแก้ไขไฟล์ หรือเขียนสคริปต์ขึ้นมาใหม่เพื่ออ้อมกฎ
 - **[อนุญาต]** ให้อ่านไฟล์ได้เท่านั้น (Read-only) เพื่อดึงข้อมูล Payload ไปยิงเข้า MCP
-- **[ต้องทำ]** เมื่อเจอปัญหา Error จาก API (เช่น Validation Error) ให้หยุดทำงานแล้วรายงาน Error กลับไปที่ Main Agent หรือ User ทันที ห้ามคิดหาวิธีแก้โค้ดเอง
+- **[ต้องทำ] (UX/DX AUDIT PROTOCOL):** ห้ามคุณดัดแปลงข้อมูล Input (Silent Workarounds) ของตัวเองเพื่อให้ผ่าน Validation เด็ดขาด! หากพบ Error ในการเรียกใช้งาน Tool ครั้งแรก (ตามเจตนาธรรมชาติของคุณ) ให้ **"หยุดทำงาน"** ทันที แล้วนำ Error นั้นกลับมารายงานให้ User ทราบครบทุกตัวอักษร เป้าหมายหลักของคุณคือการ **หาข้อบกพร่อง (Bad UX/DX) ของ Tool** ไม่ใช่การทำ Task ให้เสร็จรอดไปได้
-
-## กฎการจัดการ Product Variants (Variant Mapping Rules)
-- เมื่อใช้งาน Tool ที่เกี่ยวข้องกับการสร้างหรืออัปเดต Variant (เช่น `sync_product_variants`, `create_product`, `bulk_create_products`) **ห้าม**ใช้คำแปลภาษาอื่นในการจับคู่ `option1`, `option2`, หรือ `option3`
-- คุณ **ต้อง** ใช้ค่า Value จากภาษาหลัก (`th`) ที่ระบุไว้ใน `options.values` เสมอ เพื่อให้ Backend สามารถจับคู่ Variant กับ Option ได้ถูกต้อง
-
-## เครื่องมือที่แนะนำ (Tools)
-- ใช้ `call_mcp_tool` ร่วมกับเซิร์ฟเวอร์ `homaroma_mcp` ในการจัดการข้อมูล
-  - `create_dynamic_page`: ใช้สร้างหน้าใหม่
-  - `add_page_section`: ใช้เพิ่มกล่องข้อมูลเข้าไปในหน้า
-  - `update_page_section`: ใช้แก้ไขข้อมูล
-  - `delete_page_section`: ใช้ลบข้อมูล

AGENTS.md

@@ -42,3 +42,4 @@ Every final handoff should summarize:
 - When instructed to test, use, or audit MCP tools, you MUST operate in **Strict Blackbox Mode**.
 - **FORBIDDEN:** You are strictly prohibited from using `view_file`, `grep_search`, `run_command`, or reading any backend source code (e.g., `schema.prisma`, `types`) to find answers or discover capabilities.
 - **ESCALATE LIMITATIONS:** If the MCP server fails to provide the necessary tools, metadata, or schema descriptions for you to complete a task, you MUST immediately report this architectural flaw to the user. Do not use local file system tools as a silent workaround.
+- **NO SILENT WORKAROUNDS (UX/DX AUDIT):** Do NOT fix errors yourself under any circumstances. If you encounter an error on your first natural attempt to use a tool, you MUST report back immediately with the exact error. Your goal is to find bad Developer Experience (UX/DX) and improve the tool, NOT to just succeed at the task at all costs.

apps/admin/src/components/page-builder/EditorialCarouselForm.tsx

@@ -40,6 +40,55 @@ export default function EditorialCarouselForm({
         <p className="text-[9px] text-slate-500 font-medium">Use [brackets] for golden accent serif text.</p>
       </div>
 
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Background Color</label>
+          <div className="flex gap-3">
+            <input
+              type="color"
+              value={editingSection.payload?.backgroundColor || '#0F172A'}
+              onChange={(e) => setEditingSection({
+                ...editingSection,
+                payload: { ...(editingSection.payload || {}), backgroundColor: e.target.value }
+              })}
+              className="w-10 h-10 rounded cursor-pointer p-1 bg-night-900 border border-white/10"
+            />
+            <input
+              type="text"
+              value={editingSection.payload?.backgroundColor || '#0F172A'}
+              onChange={(e) => setEditingSection({
+                ...editingSection,
+                payload: { ...(editingSection.payload || {}), backgroundColor: e.target.value }
+              })}
+              className="admin-input flex-1 font-mono text-xs"
+            />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Text Color</label>
+          <div className="flex gap-3">
+            <input
+              type="color"
+              value={editingSection.payload?.textColor || '#FFFFFF'}
+              onChange={(e) => setEditingSection({
+                ...editingSection,
+                payload: { ...(editingSection.payload || {}), textColor: e.target.value }
+              })}
+              className="w-10 h-10 rounded cursor-pointer p-1 bg-night-900 border border-white/10"
+            />
+            <input
+              type="text"
+              value={editingSection.payload?.textColor || '#FFFFFF'}
+              onChange={(e) => setEditingSection({
+                ...editingSection,
+                payload: { ...(editingSection.payload || {}), textColor: e.target.value }
+              })}
+              className="admin-input flex-1 font-mono text-xs"
+            />
+          </div>
+        </div>
+      </div>
+
       <div className="space-y-4">
         <div className="flex items-center justify-between border-b border-white/5 pb-2">
           <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Editorial Slides</label>

apps/admin/src/components/page-builder/EditorialTileForm.tsx

@@ -81,7 +81,7 @@ export default function EditorialTileForm({
         <div className="space-y-2">
           <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Background Color</label>
           <input
-            type="text"
+            type="color"
             value={editingSection.payload?.backgroundColor || '#FDFDF9'}
             onChange={(e) =>
               setEditingSection({
@@ -89,13 +89,13 @@ export default function EditorialTileForm({
                 payload: { ...(editingSection.payload || {}), backgroundColor: e.target.value }
               })
             }
-            className="admin-input w-full"
+            className="admin-input w-full h-10 p-1 cursor-pointer"
           />
         </div>
         <div className="space-y-2">
           <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Text Color</label>
           <input
-            type="text"
+            type="color"
             value={editingSection.payload?.textColor || '#1F3D2D'}
             onChange={(e) =>
               setEditingSection({
@@ -103,7 +103,7 @@ export default function EditorialTileForm({
                 payload: { ...(editingSection.payload || {}), textColor: e.target.value }
               })
             }
-            className="admin-input w-full"
+            className="admin-input w-full h-10 p-1 cursor-pointer"
           />
         </div>
         <div className="space-y-2">

apps/admin/src/components/page-builder/ProductCarouselForm.tsx

@@ -1,5 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { type PageSection } from '@homaroma/types';
+import ProductPickerModal from './ProductPickerModal';
+import { getAdminDisplayString } from '../../utils/localization';
+
+interface Brand {
+  id: number;
+  name: string;
+}
+
+interface Category {
+  id: number;
+  name: any;
+}
 
 interface ProductCarouselFormProps {
   editingSection: Partial<PageSection>;
@@ -7,6 +19,8 @@ interface ProductCarouselFormProps {
   setEditingSection: React.Dispatch<React.SetStateAction<Partial<PageSection> | null>>;
   getLocalizedValue: (payload: any, field: string) => string;
   updateLocalizedValue: (field: string, value: string) => void;
+  brands: Brand[];
+  categories?: Category[];
 }
 
 export default function ProductCarouselForm({
@@ -14,7 +28,11 @@ export default function ProductCarouselForm({
   setEditingSection,
   getLocalizedValue,
   updateLocalizedValue,
+  brands,
+  categories = [],
 }: ProductCarouselFormProps) {
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
   const updateFlag = (field: 'showPrice' | 'showAddToCart', value: boolean) => {
     setEditingSection({
       ...editingSection,
@@ -48,19 +66,27 @@ export default function ProductCarouselForm({
         </div>
 
         <div className="space-y-2">
-          <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Collection ID</label>
+          <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Products Source type</label>
-          <input
+          <select
-            type="text"
+            value={editingSection.payload?.type || 'featured'}
-            value={editingSection.payload?.collectionId || ''}
             onChange={(e) =>
-              setEditingSection({
+              setEditingSection(prev => prev ? {
-                ...editingSection,
+                ...prev,
-                payload: { ...(editingSection.payload || {}), collectionId: e.target.value }
+                payload: {
-              })
+                  ...(prev.payload || {}),
+                  type: e.target.value,
+                  brandId: e.target.value === 'brand' ? brands[0]?.id : undefined,
+                  productIds: e.target.value === 'custom' ? (prev.payload?.productIds || []) : undefined,
+                  categoryId: e.target.value === 'featured' ? prev.payload?.categoryId : undefined
+                }
+              } : null)
             }
-            className="admin-input w-full"
+            className="admin-input w-full bg-slate-900 border-white/10"
-            placeholder="Optional collection identifier"
+          >
-          />
+            <option value="featured">Featured Categories</option>
+            <option value="brand">By Brand</option>
+            <option value="custom">Custom ID List</option>
+          </select>
         </div>
 
         <div className="space-y-2">
@@ -102,9 +128,89 @@ export default function ProductCarouselForm({
         </label>
       </div>
 
-      <p className="text-xs text-slate-500">
+      {editingSection.payload?.type === 'featured' && (
-        If your backend supports collection lookup by ID, place that value here. Otherwise leave it blank and use the default product list behavior.
+        <div className="space-y-2">
-      </p>
+          <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Select Category</label>
+          <select
+            value={editingSection.payload?.categoryId || ''}
+            onChange={(e) =>
+              setEditingSection(prev => prev ? {
+                ...prev,
+                payload: { ...(prev.payload || {}), categoryId: e.target.value ? parseInt(e.target.value) : undefined }
+              } : null)
+            }
+            className="admin-input w-full bg-slate-900 border-white/10"
+          >
+            <option value="">None (All products / fallback)</option>
+            {categories.map((cat) => (
+              <option key={cat.id} value={cat.id}>
+                {getAdminDisplayString(cat.name)}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {editingSection.payload?.type === 'brand' && (
+        <div className="space-y-2">
+          <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Select Brand</label>
+          <select
+            value={editingSection.payload?.brandId || ''}
+            onChange={(e) =>
+              setEditingSection(prev => prev ? {
+                ...prev,
+                payload: { ...(prev.payload || {}), brandId: e.target.value ? parseInt(e.target.value) : undefined }
+              } : null)
+            }
+            className="admin-input w-full bg-slate-900 border-white/10"
+          >
+            {brands.map((brand) => (
+              <option key={brand.id} value={brand.id}>
+                {brand.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {editingSection.payload?.type === 'custom' && (
+        <div className="space-y-2">
+          <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Custom Products</label>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              readOnly
+              value={Array.isArray(editingSection.payload?.productIds) ? `${editingSection.payload.productIds.length} product(s) selected` : '0 products selected'}
+              className="admin-input flex-1 bg-slate-900/50 cursor-not-allowed text-slate-400"
+            />
+            <button
+              type="button"
+              onClick={() => setIsPickerOpen(true)}
+              className="px-4 py-2 bg-cyan-glow hover:bg-cyan-glow/80 text-black text-sm font-bold rounded-xl transition-colors whitespace-nowrap"
+            >
+              Select Products
+            </button>
+          </div>
+          {Array.isArray(editingSection.payload?.productIds) && editingSection.payload.productIds.length > 0 && (
+            <div className="text-xs text-slate-500">
+              IDs: {editingSection.payload.productIds.join(', ')}
+            </div>
+          )}
+        </div>
+      )}
+
+      {isPickerOpen && (
+        <ProductPickerModal
+          selectedIds={Array.isArray(editingSection.payload?.productIds) ? editingSection.payload.productIds : []}
+          onSave={(ids) => {
+            setEditingSection((prev) => prev ? {
+              ...prev,
+              payload: { ...(prev.payload || {}), productIds: ids }
+            } : null);
+          }}
+          onClose={() => setIsPickerOpen(false)}
+        />
+      )}
     </div>
   );
 }

apps/admin/src/pages/PageBuilderPage.tsx

@@ -1144,6 +1144,8 @@ export default function PageBuilderPage() {
                   editingLang={editingLang}
                   getLocalizedValue={getLocalizedValue}
                   updateLocalizedValue={updateLocalizedValue}
+                  brands={brands}
+                  categories={categories}
                 />
               )}
 

apps/backend/src/index.ts

@@ -56,6 +56,15 @@ const allowLanDevOrigin = (request: Request) => {
 };
 
 const app = new Elysia()
+  .onRequest(({ request }) => {
+    console.log(`\n➡️  [${request.method}] ${request.url}`);
+  })
+  .onAfterHandle(({ request, set }) => {
+    console.log(`✅ [${request.method}] ${request.url} → ${set.status ?? 200}`);
+  })
+  .onError(({ request, error, set }) => {
+    console.error(`❌ [${request.method}] ${request.url} → ${set.status ?? 500}`, error?.message ?? error);
+  })
   .onParse(async ({ request }) => {
     console.log('[onParse] Incoming request URL:', request.url);
     if (request.url.includes('/api/line/webhook')) {

apps/backend/src/lib/prisma.ts

@@ -10,6 +10,13 @@ const connectionString = process.env.DATABASE_URL!;
 const pool = new Pool({ connectionString });
 const adapter = new PrismaPg(pool);
 
-const prisma = new PrismaClient({ adapter });
+const prisma = new PrismaClient({
+  adapter,
+  log: [
+    { emit: 'stdout', level: 'query' },
+    { emit: 'stdout', level: 'error' },
+    { emit: 'stdout', level: 'warn' },
+  ],
+});
 
 export default prisma;

apps/mcp-server/section-toolkit.ts

@@ -38,6 +38,23 @@ const SECTION_TOOL_CONFIGS = [
     },
     required: ["sectionId"]
   },
+  {
+    name: "update_editorial_tile",
+    sectionType: "EDITORIAL_TILE",
+    description: `Update an EDITORIAL_TILE section. Title, description, and buttonText are localized. imageUrl, imagePosition, buttonLink, backgroundColor, and textColor are plain strings. Example payload: { "sectionId": 12, "title": ${localizedStringExample}, "description": ${localizedStringExample}, "imageUrl": "https://..." }`,
+    properties: {
+      sectionId: { type: "number", description: "The numeric ID of the section to update" },
+      imageUrl: { type: "string", description: "Plain string main image URL" },
+      imagePosition: { type: "string", description: "Plain string image position ('left' or 'right')" },
+      title: { ...localizedStringSchema, description: `Localized title, for example ${localizedStringExample}` },
+      description: { ...localizedStringSchema, description: `Localized description, for example ${localizedStringExample}` },
+      buttonText: { ...localizedStringSchema, description: `Localized button text, for example ${localizedStringExample}` },
+      buttonLink: { type: "string", description: "Plain string button link URL" },
+      backgroundColor: { type: "string", description: "Plain string background color in hex or rgba" },
+      textColor: { type: "string", description: "Plain string text color in hex or rgba" }
+    },
+    required: ["sectionId"]
+  },
   {
     name: "update_rich_text",
     sectionType: "RICH_TEXT",
@@ -150,6 +167,35 @@ const SECTION_TOOL_CONFIGS = [
       subtitle: { ...localizedStringSchema, description: `Localized form subtitle, for example ${localizedStringExample}` }
     },
     required: ["sectionId"]
+  },
+  {
+    name: "update_editorial_carousel",
+    sectionType: "EDITORIAL_CAROUSEL",
+    description: `Update an EDITORIAL_CAROUSEL section. title, description, and slides are supported. Example payload: { "sectionId": 12, "title": ${localizedStringExample}, "description": ${localizedStringExample} }`,
+    properties: {
+      sectionId: { type: "number", description: "The numeric ID of the section to update" },
+      title: { ...localizedStringSchema, description: `Localized section title, for example ${localizedStringExample}` },
+      description: { ...localizedStringSchema, description: `Localized section description, for example ${localizedStringExample}` },
+      backgroundColor: { type: "string", description: "Plain string background color in hex or rgba" },
+      textColor: { type: "string", description: "Plain string text color in hex or rgba" },
+      slides: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            title: localizedStringSchema,
+            description: localizedStringSchema,
+            category: localizedStringSchema,
+            imageUrl: { type: "string" },
+            buttonText: localizedStringSchema,
+            buttonLink: { type: "string" }
+          },
+          required: ["imageUrl"]
+        },
+        description: "Array of slides. IMPORTANT: Providing this will completely overwrite the existing slides array. Ensure you provide all slides."
+      }
+    },
+    required: ["sectionId"]
   }
 ] as const;
 
@@ -201,6 +247,18 @@ function buildSectionUpdateResult(toolName: string, sectionType: string, updated
 }
 
 export const SECTION_TOOL_DEFINITIONS = [
+  {
+    name: "get_page_section",
+    description: "Get a specific page section by ID, returning its hydrated payload resolving linked content like categories or products. Optionally pass lang to control translation.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sectionId: { type: "number", description: "The numeric ID of the section to fetch" },
+        lang: { type: "string", description: "Optional language code (th, en, all)" }
+      },
+      required: ["sectionId"]
+    }
+  },
   {
     name: "add_page_section",
     description: "Add a block section to a dynamic page layout. For the payload field, ensure it matches the section type. Examples: For TEXT, use { \"text\": \"...\" }. For RICH_TEXT, use { \"title\": \"...\", \"content\": \"...\" }.",
@@ -258,8 +316,21 @@ export const SECTION_TOOL_NAMES = new Set<string>(SECTION_TOOL_DEFINITIONS.map((
 export async function handleSectionTool(api: AxiosInstance, name: string, params: any) {
   if (!SECTION_TOOL_NAMES.has(name)) return null;
 
+  // Global validation: almost all section tools require sectionId, except add_page_section
+  if (name !== "add_page_section" && params.sectionId === undefined) {
+    throw new Error(`Validation Error: 'sectionId' is required for tool '${name}'`);
+  }
+
   switch (name) {
+    case "get_page_section": {
+      const langParam = params.lang ? `?lang=${params.lang}` : "";
+      const res = await api.get(`/pages/sections/${params.sectionId}${langParam}`);
+      return { content: [{ type: "text", text: JSON.stringify(res.data, null, 2) }] };
+    }
     case "add_page_section": {
+      if (params.pageId === undefined) {
+        throw new Error(`Validation Error: 'pageId' is required for tool '${name}'`);
+      }
       const payload: any = {
         type: params.type,
         payload: params.payload,
@@ -278,6 +349,7 @@ export async function handleSectionTool(api: AxiosInstance, name: string, params
       const res = await api.put(`/pages/sections/${params.sectionId}`, payload);
       return buildSectionUpdateResult("update_page_section", res.data?.type ?? params.type ?? "UNKNOWN", res.data, payload);
     }
+    case "update_editorial_tile":
     case "update_hero_article":
     case "update_rich_text":
     case "update_scent_notes_breakdown":
@@ -285,7 +357,8 @@ export async function handleSectionTool(api: AxiosInstance, name: string, params
     case "update_product_carousel":
     case "update_accordion":
     case "update_contact_info":
-    case "update_contact_form": {
+    case "update_contact_form":
+    case "update_editorial_carousel": {
       const config = SECTION_TOOL_CONFIG_BY_NAME.get(name);
       if (!config) {
         throw new Error(`Unknown tool config for: ${name}`);
@@ -299,9 +372,21 @@ export async function handleSectionTool(api: AxiosInstance, name: string, params
           payload.heartNotes = payload.middleNotes;
         }
       }
+
+      // Fetch existing section to merge payload so AI doesn't have to provide all required fields every time
+      let mergedPayload = payload;
+      try {
+        const existingRes = await api.get(`/pages/sections/${params.sectionId}?lang=all`);
+        if (existingRes.data && existingRes.data.payload) {
+          mergedPayload = { ...existingRes.data.payload, ...payload };
+        }
+      } catch (err) {
+        console.warn(`Could not fetch existing section ${params.sectionId} for merging, proceeding with partial payload.`);
+      }
+
       const res = await api.put(`/pages/sections/${params.sectionId}`, {
         type: config.sectionType,
-        ...payload
+        payload: mergedPayload
       });
 
       return buildSectionUpdateResult(name, config.sectionType, res.data, payload);

apps/spa/src/components/DynamicEditorialCarousel.tsx

@@ -46,7 +46,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
   };
 
   return (
-    <section className="ui-dark-shell overflow-hidden">
+    <section className="overflow-hidden py-16 md:py-24" style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}>
       <div className="ui-section-inner space-y-12">
         <div className="space-y-3 text-center">
           <h2 className="font-serif text-3xl font-light tracking-wide text-pop-pink md:text-5xl">
@@ -80,7 +80,6 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
                         (e.target as HTMLImageElement).style.display = 'none';
                       }}
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-night-900/80 via-transparent to-transparent"></div>
                   </div>
 
                   <div className="p-6 md:p-8 flex flex-col flex-1 justify-between space-y-6">

apps/spa/src/components/DynamicEditorialTile.tsx

@@ -39,7 +39,8 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
 
   return (
     <section
-      className="ui-section-band w-full overflow-hidden bg-pop-bg text-pop-black"
+      className="ui-section-band w-full overflow-hidden"
+      style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}
     >
       <div className="ui-section-inner grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
         <div className={`group relative aspect-square w-full overflow-hidden rounded-3xl shadow-xl ${
@@ -59,11 +60,11 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
         <div className={`flex flex-col justify-center space-y-6 md:space-y-8 ${
           imagePosition === 'left' ? 'md:order-2 md:pl-8' : 'md:order-1 md:pr-8'
         }`}>
-          <h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl">
+          <h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl" style={{ color: payload.textColor }}>
             {renderTitle(title) || title}
           </h2>
           <div className="w-12 h-[1px] bg-pop-pink"></div>
-          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base">
+          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base" style={{ color: payload.textColor }}>
             {description}
           </p>
           {buttonText && buttonLink && (

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -1,9 +1,6 @@
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import ProductCard from './ProductCard';
-import 'swiper/css';
+import { useRef } from 'react';
-import 'swiper/css/pagination';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
-import 'swiper/css/navigation';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
 
@@ -19,6 +16,10 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
   const title = getLocalizedField(p.title, lang);
   const description = getLocalizedField(p.description, lang);
 
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' });
+  const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' });
+
   return (
     <section className="ui-section-band bg-pop-bg">
       <div className="ui-section-inner">
@@ -34,27 +35,28 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
             No products to display.
           </div>
         ) : (
-          <div className="relative pb-12" style={{ '--swiper-navigation-color': 'var(--color-pop-black)' } as React.CSSProperties}>
+          <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
-            <Swiper
+            <button
-              modules={[Autoplay, Pagination, Navigation]}
+              onClick={scrollLeft}
-              spaceBetween={32}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
-              slidesPerView={1}
+              aria-label="Scroll left"
-              breakpoints={{
-                640: { slidesPerView: 2 },
-                1024: { slidesPerView: 3 },
-                1280: { slidesPerView: 4 }
-              }}
-              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-pop-black' }}
-              navigation
-              autoplay={{ delay: 5000, disableOnInteraction: false }}
-              className="w-full !px-4"
             >
+              <ChevronLeft className="h-6 w-6" />
+            </button>
+            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-12">
               {products.map((p: any) => (
-                <SwiperSlide key={p.id} className="h-auto">
+                <div key={p.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                   <ProductCard product={p} enableQuickShop={true} />
-                </SwiperSlide>
+                </div>
               ))}
-            </Swiper>
+            </div>
+            <button
+              onClick={scrollRight}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
+              aria-label="Scroll right"
+            >
+              <ChevronRight className="h-6 w-6" />
+            </button>
           </div>
         )}
       </div>

apps/spa/src/components/DynamicProducts.tsx

@@ -1,15 +1,11 @@
 import { Link } from 'react-router-dom';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { useRef } from 'react';
-import { Autoplay, Pagination } from 'swiper/modules';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import ProductCard from './ProductCard';
 import type { Category, Product, ProductsSectionPayload } from '@homaroma/types';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
 
-// Import Swiper styles
-import 'swiper/css';
-import 'swiper/css/pagination';
-
 interface DynamicProductsProps {
   payload: ProductsSectionPayload & { products?: Product[] };
   categories?: Category[];
@@ -23,6 +19,10 @@ export default function DynamicProducts({ payload, categories = [] }: DynamicPro
   const subtitle = getLocalizedField(payload.subtitle, lang);
   const categoryLookup = new Map(categories.map((category) => [category.id, category]));
 
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' });
+  const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' });
+
   return (
     <section className="ui-section-band relative bg-pop-bg">
       <div className="ui-section-inner relative z-10 space-y-12">
@@ -49,29 +49,32 @@ export default function DynamicProducts({ payload, categories = [] }: DynamicPro
             No products found in this section
           </div>
         ) : layout === 'carousel' ? (
-          <div className="relative select-none pb-12">
+          <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
-            <Swiper
+            <button
-              modules={[Autoplay, Pagination]}
+              onClick={scrollLeft}
-              spaceBetween={24}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
-              slidesPerView={1}
+              aria-label="Scroll left"
-              breakpoints={{
-                640: { slidesPerView: 2 },
-                1024: { slidesPerView: 3 }
-              }}
-              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-pop-black' }}
-              autoplay={{ delay: 6000, disableOnInteraction: false }}
-              className="w-full"
             >
+              <ChevronLeft className="h-6 w-6" />
+            </button>
+            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-12">
               {products.map((p) => (
-                <SwiperSlide key={p.id} className="h-auto">
+                <div key={p.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                   <ProductCard
                     product={p}
                     enableQuickShop={enableQuickShop}
                     categoryNameOverride={getLocalizedField(categoryLookup.get(p.categoryId)?.name, lang)}
                   />
-                </SwiperSlide>
+                </div>
               ))}
-            </Swiper>
+            </div>
+            <button
+              onClick={scrollRight}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
+              aria-label="Scroll right"
+            >
+              <ChevronRight className="h-6 w-6" />
+            </button>
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

apps/spa/src/index.css

@@ -235,6 +235,14 @@
   @apply bg-pop-black/50;
 }
 
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 /* Smooth Scrolling */
 html {
   scroll-behavior: smooth;

apps/website/src/app/globals.css

@@ -573,3 +573,11 @@ body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
   top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
 }
 
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -2,8 +2,8 @@
 
 import Image from 'next/image'
 import Link from '../LocalizedLink'
-import { Clock, Mail, MapPin, MessageCircle, Send } from 'lucide-react'
+import { Clock, Mail, MapPin, MessageCircle, Send, ChevronLeft, ChevronRight } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import type { Category, PageSection, Product } from '@homaroma/types'
 import { getCategoryImage } from '@homaroma/types'
 import ProductCard from '../ProductCard'
@@ -219,6 +219,10 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
   const layout = typeof payload.layout === 'string' ? payload.layout : 'grid'
   const products = getProducts(payload)
+  
+  const carouselRef = useRef<HTMLDivElement>(null)
+  const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' })
+  const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' })
 
   return (
     <section className="bg-surface-page ui-section-band">
@@ -235,21 +239,27 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
         {products.length ? (
           layout === 'carousel' ? (
             <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
-              <Swiper
+              <button
-                slidesPerView={1.2}
+                onClick={scrollLeft}
-                spaceBetween={16}
+                className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
-                breakpoints={{
+                aria-label="Scroll left"
-                  640: { slidesPerView: 2.2, spaceBetween: 24 },
-                  1024: { slidesPerView: 3, spaceBetween: 32 },
-                }}
-                className="w-full"
               >
+                <ChevronLeft className="h-6 w-6" />
+              </button>
+              <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-4">
                 {products.map((product) => (
-                  <SwiperSlide key={product.id} className="!h-auto pb-4">
+                  <div key={product.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                     <ProductCard product={product} />
-                  </SwiperSlide>
+                  </div>
                 ))}
-              </Swiper>
+              </div>
+              <button
+                onClick={scrollRight}
+                className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
+                aria-label="Scroll right"
+              >
+                <ChevronRight className="h-6 w-6" />
+              </button>
             </div>
           ) : (
             <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
@@ -258,7 +268,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
           )
         ) : (
           <p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
-            {t('dynamic.emptyProducts', { lng: resolvedLang })}
+            {t('dynamic.noProducts', { lng: resolvedLang })}
           </p>
         )}
       </div>
@@ -387,18 +397,20 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang)
   const slides = Array.isArray(payload.slides) ? payload.slides.map(toRecord) : []
+  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
+  const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
   if (!slides.length) return null
 
   return (
-    <section className="ui-section-dark">
+    <section className="ui-section-dark py-16 md:py-24" style={{ backgroundColor, color: textColor }}>
       <div className="mx-auto max-w-7xl space-y-12">
         {title && (
           <div className="mx-auto max-w-3xl space-y-4 text-center">
-            <h2 className="text-4xl font-semibold text-surface-card md:text-5xl">{renderAccentTitle(title)}</h2>
+            <h2 className="text-4xl font-semibold text-surface-card md:text-5xl" style={{ color: textColor }}>{renderAccentTitle(title)}</h2>
             <div className="mx-auto h-px w-16 bg-brand-accent" />
           </div>
         )}
-        <div className="grid gap-6 md:grid-cols-3">
+        <div className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-6 pb-8">
           {slides.map((slide, index) => {
             const slideTitle = localizedFromRecord(slide, 'title', resolvedLang)
             const description = localizedFromRecord(slide, 'description', resolvedLang)
@@ -408,8 +420,8 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
             const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''
 
             return (
-              <article key={index} className="ui-section-dark-card group">
+              <article key={index} className="ui-section-dark-card group w-[85vw] md:w-[350px] flex-none snap-start">
-                {imageUrl && (
+                {imageUrl ? (
                   <div className="relative aspect-[4/3] overflow-hidden">
                     <Image
                       src={imageUrl}
@@ -419,15 +431,19 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
                       className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
                     />
                   </div>
-                )}
+                ) : null}
-                <div className="space-y-4 p-6">
+                <div className="space-y-4 p-6 flex flex-col flex-1 justify-between">
-                  {category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-brand-accent">{category}</p>}
+                  <div>
-                  {slideTitle && <h3 className="ui-section-dark-card-title">{renderAccentTitle(slideTitle)}</h3>}
+                    {category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-brand-accent mb-2">{category}</p>}
-                  {description && <p className="ui-section-dark-card-copy">{description}</p>}
+                    {slideTitle && <h3 className="ui-section-dark-card-title text-xl mb-3">{renderAccentTitle(slideTitle)}</h3>}
+                    {description && <p className="ui-section-dark-card-copy text-sm line-clamp-3">{description}</p>}
+                  </div>
                   {buttonText && buttonLink && (
-                    <Link href={buttonLink} className="ui-section-dark-link">
+                    <div className="pt-2">
-                      {buttonText} &rarr;
+                      <Link href={buttonLink} className="ui-section-dark-link inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-colors group/link">
-                    </Link>
+                        {buttonText} <span className="group-hover/link:translate-x-1 transition-transform">&rarr;</span>
+                      </Link>
+                    </div>
                   )}
                 </div>
               </article>
@@ -802,8 +818,9 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
           case 'CATEGORIES':
             return <CategoriesSection key={section.id} payload={payload} categories={categories} lang={lang} />
           case 'PRODUCTS':
-          case 'PRODUCT_CAROUSEL':
             return <ProductsSection key={section.id} payload={payload} lang={lang} />
+          case 'PRODUCT_CAROUSEL':
+            return <ProductsSection key={section.id} payload={{ ...payload, layout: 'carousel' }} lang={lang} />
           case 'BANNER':
             return <BannerSection key={section.id} payload={payload} lang={lang} />
           case 'TEXT':

packages/types/index.ts

@@ -328,6 +328,8 @@ export type EditorialTileSectionPayload = z.infer<typeof EditorialTileSectionPay
 
 export const EditorialCarouselSectionPayloadSchema = z.object({
   title: LocalizedStringSchema,
+  backgroundColor: z.string().optional(),
+  textColor: z.string().optional(),
   slides: z.array(z.object({
     category: LocalizedStringSchema,
     title: LocalizedStringSchema,
@@ -394,12 +396,15 @@ export type QuoteCalloutSectionPayload = z.infer<typeof QuoteCalloutSectionPaylo
 export const ProductCarouselSectionPayloadSchema = z.object({
   title: LocalizedStringSchema.optional(),
   description: LocalizedStringSchema.optional(),
-  collectionId: z.string().optional(),
+  type: z.enum(['featured', 'brand', 'custom']),
+  categoryId: z.number().optional(),
+  brandId: z.number().optional(),
+  productIds: z.array(z.number()).optional(),
   limit: z.number().positive().optional(),
   showPrice: z.boolean().optional(),
   showAddToCart: z.boolean().optional(),
   products: z.array(z.any()).optional(),
-});
+}).strict();
 export type ProductCarouselSectionPayload = z.infer<typeof ProductCarouselSectionPayloadSchema>;
 
 // Aliases for backwards compatibility in ScentGuideSectionSchema