# Original User Request

## 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.