# HOM arch studio — AI / Project Context

Persian (fa, RTL) brochure website for **استودیو معماری هوم** (architecture + interior design).
Keep this file current whenever routes, slots, data sources or design rules change.

## Source of truth
- Live domain: `https://homgroup.ir` (`NEXT_PUBLIC_WEBSITE_DOMAIN`, default `homgroup.ir`)
- Backend docs: https://api.meshkee.com/docs/website
- API base: `https://api.meshkee.com/api/v1`
- Tenant: `GET /tenants/homgroup.ir` → business id `53`
- Customer portal: `https://customer.homgroup.ir` (no storefront login pages)
- Business dashboard: `https://business.homgroup.ir`
- Placeholders prompt: `…/ai-prompts/studio-hom/placeholders/576804987514877ec206af60`

## Stack
- Next.js 15 App Router + React 19 + TypeScript; styles in `src/app/globals.css` (no Tailwind)
- `output: "standalone"` required for Meshkee websites VM
- Fonts: IranYekan (FA) + Montserrat (EN / `.latin`)

## Design
- Flat palette: bg `#fff`, surface `#f4f3f1`, fg `#111`, muted `#6b6b6b`, line `#e2e0dc`, accent `#e3002b`
- Sticky header + account menu; dark map band on contact; stats band with pattern

## Static image slots (`STATIC_IMAGE_SLOTS` → `/meshkee/static-image-slots`)
Fetch: `GET /tenants/{domain}/website/static-images?pageKey=…`. Match by **key**. Use all images if `kind=list`, first if `single`. `url` → `<img>`, `linkUrl` → wrap link, `titleFa` / `titleEn` / `subtext` per UI. Empty/fail → local placeholder. Prefer API `aspectRatio`. **If a frame’s size or ratio changes in development, update the matching catalog entry in the same change.**

| key | pageKey | kind | itemCount | aspectRatio | width | UI |
| --- | --- | --- | --- | --- | --- | --- |
| `slider` | home | list | null | `16:9` | 1920 | Full-viewport `HeroSlider` |
| `four-category` | home | list | 4 | `3:4` | 900 | Four hover-expand service panels (`titleFa` / `titleEn` / `subtext`) |
| `project-images` | home | list | null | `3:4` (masonry free height) | 1200 | Selected projects masonry |
| `sticky-frame-bg` | home | single | 1 | `16:9` | 1920 | `OpeningFrame` background |
| `instagram-row` | home | single | 1 | `9:16` | 720 | `InstagramFollow` phone frame (also used on contact) |
| `brands` | home | list | null | `3:2` | 480 | Partner logos row (hidden when empty) |
| `about-us-image` | about | list | 2 | `16:9` | 1600 | About hero (1st) + secondary (2nd) |

## Tags & badges (CMS)
From `GET /tenants/{domain}/website/business-info`:
1. `metaTags: [{ name, content }]` → root `<CmsMeta>` + `generateMetadata.other`
2. `trustBadges: [{ kind, embedHtml }]` → footer `dangerouslySetInnerHTML` (scripts stripped). Empty → omit. Do not hardcode eNamad/Samandehi.

## Auth
Shared cookies `meshkee_customer_*`; login → customer portal; `AccountMenu` shows `{name} عزیز` + پروفایل من / خروج / مدیریت وبسایت (admin + handoff).

## Routes
| Route | Notes |
| --- | --- |
| `/` | Slider, intro, four-category, project-images, sticky frame, process, stats, brands, Instagram, CTA |
| `/portfolio`, `/portfolio/[slug]` | Meshkee portfolios (+ local fallback); lightbox + zoom + similar |
| `/projects*` | Redirect → `/portfolio` |
| `/blog`, `/blog/[slug]` | Meshkee blogs (+ local stubs) |
| `/services*` | Local specialties |
| `/about` | `about-us-image` (2), story, values, stats, CTA |
| `/contact` | Facts + form (API + toast) + Instagram + dark map |
| `/api/contact`, `/api/auth/me`, `/api/auth/handoff` | Proxies |
| `/meshkee/*` | Slot catalog + sitemap-config |

## Components
`Header`/`AccountMenu`, `Footer`, `Providers`, `CmsMeta`, `SlotImage`, `SectionTitle`, `OpeningFrame`, `HeroSlider`, `InstagramFollow`, `MediaGallery`, `ContactForm`

## Deploy
Standalone build on Meshkee websites VM; PM2 → `.next/standalone/server.js`.

## Changelog
- 2026-10-12 — Placeholders prompt: remapped slots (`slider`, `four-category`, `project-images`, `sticky-frame-bg`, `instagram-row`, `brands`, `about-us-image`); brands row; metaTags → `metadata.other`.
- 2026-10-12 — Backend prompt: auth, portfolio/blog, contact toast, Instagram frame, domain `homgroup.ir`.
- 2026-10-11 — Initial site scaffold.