homaroma/.agents/ORIGINAL_REQUEST.md

Original User Request

Historical context: This is an unedited record of an earlier development request for the Split-Screen Editorial Carousel feature. The current platform identity is DBK Platform.

Initial Request — 2026-06-28T10:50:33Z

Implement a Split-Screen Editorial Carousel by extending the existing EDITORIAL_CAROUSEL schema and updating the backend, admin, spa, and website apps.

Working directory: /home/ti/git/homaroma Integrity mode: development

Requirements

R1. Database / Types

Update EditorialCarouselSectionPayloadSchema in packages/types/index.ts to include layout: z.enum(['standard', 'split_screen']).optional() and imagePosition: z.enum(['left', 'right']).optional().

R2. Admin / CMS

Update the Page Builder UI in apps/admin to support the new layout and imagePosition fields for the EDITORIAL_CAROUSEL block.

R3. Frontend / UI (apps/spa & apps/website)

Update the EDITORIAL_CAROUSEL component in apps/spa and apps/website to render the new split_screen layout.

• Desktop: 35% text / 65% image split. Arrows on far edges.
• Mobile: Stacked layout (Image top, text bottom).
• Styling: Do not hardcode colors; use theme tokens.

Acceptance Criteria

Verification

• npm run typecheck passes successfully across the monorepo.
• The Page Builder in apps/admin can successfully save an EDITORIAL_CAROUSEL block with layout: 'split_screen' and imagePosition: 'left'.
• The EDITORIAL_CAROUSEL component in apps/spa and apps/website renders differently based on the layout payload without breaking existing 'standard' layouts.

Follow-up — 2026-06-29T01:16:39Z

Teamwork Project Prompt — Draft

Status: Launched Goal: Teamwork system is currently executing the project.

Implement a Premium Mega Menu featuring 3 distinct 1:1 image placements (Root Image on far left, Column Image next to column title, Link Hover Image on far right) across all four HomAroma applications (apps/spa, apps/admin, apps/backend, apps/website).

Working directory: /home/ti/git/homaroma Integrity mode: development

Requirements

R1. Database and Backend Updates (apps/backend)

Update the Prisma schema (or corresponding data models) to include three new image fields (e.g., rootImage, columnImage, hoverImage). Ensure the backend APIs and MCP server tools correctly process and return these fields in the MegaMenuPayload.

R2. Admin Panels Implementation (apps/admin & apps/spa)

Update the Mega Menu UI in the admin applications to reflect the 3-image layout. Ensure there is a way to configure or pass these new image fields. The layout should match the recent mockup (Root image left, Column images inside the center grid, Hover image far right).

R3. Storefront UI Implementation (apps/website)

Implement the 3-image layout in the Next.js storefront. Images must maintain a 1:1 aspect ratio. The UI should use next/image for performance optimization, lazy loading, and smooth micro-animations (fade-ins) to gracefully handle the visual complexity.

Acceptance Criteria

Data & Architecture

• Prisma schema is migrated successfully without data loss.
• The MegaMenuPayload type definitions across all apps include the 3 new image fields.

Storefront & Admin UI Verification

• Root image renders correctly on the far left of the dropdown panel.
• Column image renders correctly next to or above the column title.
• Hovering a link correctly displays its specific 1:1 image on the far right without causing layout shifts.
• apps/website uses lazy loading for the hover images to protect Core Web Vitals.
• The mobile drawer menu does not break and gracefully hides complex image layouts if necessary.