Add Khiyal Studio homepage clone with Meshkee integration.

Initial Next.js site covering home, about, and contact, matching the live studio layout. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-31 12:40:27 +03:30
commit d2a82849ef
85 changed files with 10231 additions and 0 deletions
@@ -0,0 +1,70 @@
+# Khiyal Studio Website Context
+
+## Project
+
+- English LTR architecture studio site for Khiyal Architecture Studio (Mostafa Heydarhoseini).
+- Next.js 16 App Router, React 19, TypeScript, Tailwind 4, `src/app`.
+- Apex domain: `khiyalstudio.com`.
+- Language: `en`, direction: `ltr`.
+- Local images live in `public/images`; local fonts live in `public/fonts` (Antonio + Plus Jakarta Sans, matching the source site).
+- Public routes in this clone: `/`, `/about-us`, `/contact-us`.
+- Portfolio and blog listing/detail pages are **not** implemented yet; homepage cards use current site data as local placeholders until Meshkee portfolio/blog endpoints are wired.
+
+## Source clone
+
+- Visual language cloned from `https://khiyalstudio.com/` (Crafto Architecture theme: dark gray `#191919`, accent `#efff02`, Antonio headings, Plus Jakarta Sans body).
+- Logo, banners, project photos, about/contact heroes, and partner marks were downloaded from the live theme/storage.
+- Color tokens: `--base-color: #efff02`, `--dark-gray: #191919`, `--nero-grey: #1F1F1F`, `--medium-gray: #737373`, `--charcoal-grey: #3E3E3E`.
+- Footer bottom credit row matches `https://safeteb.com/` (Meshkee animated frame + white logo + “Designed And Developed By Meshkee E-Commerce Team”).
+
+## Meshkee API
+
+- Canonical docs: `https://api.meshkee.com/docs/website`
+- API base: `https://api.meshkee.com/api/v1`
+- Tenant domain: `khiyalstudio.com` (`SITE_DOMAIN` in `src/lib/site.ts`)
+- All public fetches go through `src/lib/meshkee.ts`. Do not call the API from components.
+- Empty or failed static-image slots keep local placeholders.
+- Do not invent dashboard/CMS/upload endpoints.
+- Do not add `public/sitemap.xml`, `public/robots.txt`, `app/sitemap.ts`, or `app/robots.ts`; nginx proxies these URLs to Meshkee.
+
+## Homepage static-image slots
+
+Dashboard import catalog: `GET /meshkee/static-image-slots`.
+
+| Key | Kind | itemCount | Aspect | Width | Used on |
+|---|---|---|---|---|---|
+| `slider` | list | null | 16:9 | 1920 | Hero (`HeroSlider`) |
+| `signature` | single | 1 | 16:5 | 480 | Intro signature |
+| `partners` | list | 4 | 3:2 | 320 | Partner / video logos |
+| `video-cover` | single | 1 | 16:9 | 1200 | Watch-video cover |
+| `recent-projects` | list | 3 | 16:8 | 1600 | Recent projects slider |
+| `news` | list | 3 | 4:5 | 800 | Projects under construction |
+| `about-hero` | single | 1 | 16:6 | 1920 | About header |
+| `about-gallery` | list | 3 | 3:4 | 720 | About photos |
+| `about-owner` | single | 1 | 16:9 | 1400 | Founder portrait |
+| `contact-hero` | single | 1 | 16:6 | 1920 | Contact header |
+
+If a rendered image size or crop ratio changes, update the catalog in `src/app/meshkee/static-image-slots/route.ts` (and `STATIC_IMAGE_SLOT_CATALOG`).
+
+## Sitemap and SEO
+
+- `GET /meshkee/sitemap-config.json` is generated by scanning public static `src/app/**/page.*` routes.
+- Auth, admin, and Meshkee integration routes are excluded.
+- Sitemap base URL uses `NEXT_PUBLIC_SITE_URL`, then `SITE_URL`, with `https://khiyalstudio.com` as the fallback.
+- Future portfolio/blog details must use Meshkee canonical `{id}/{slug}` URLs when those routes are added.
+- Every crawlable page must have unique metadata, exactly one H1, structured headings, and meaningful image alt text.
+
+## Contact
+
+- Phone: `0912 252 50 08` (`09122525008`)
+- Email: `Mostafa.eng@live.com`
+- Instagram: `mostafa_heydar_hoseini`
+- WhatsApp / Telegram / Bale links live in `src/lib/site.ts`
+- Contact form is client-side (success state only) until a Meshkee contact endpoint is connected.
+
+## Verification
+
+- Run `npm run lint` and `npm run build`.
+- Verify `/meshkee/static-image-slots` returns the slot catalog.
+- Verify `/meshkee/sitemap-config.json` lists `/`, `/about-us`, and `/contact-us`.
+- Check homepage, about, and contact on desktop and mobile; hamburger menu, hero slider, and footer Meshkee credit should match the source palette.