66 lines
3.5 KiB
Markdown
66 lines
3.5 KiB
Markdown
# 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.
|