ayoubi-gallery/CONTEXT.md

Ayoubi Gallery — AI / Project Context

Source of truth

• Live domain: https://ayoubi.jewelry
• Design language: black ground, ivory type, gold lines, Doran + Cinzel, flat surfaces
• Backend: https://api.meshkee.com/docs/website
• Domain: ayoubi.jewelry (NEXT_PUBLIC_WEBSITE_DOMAIN)
• API base: https://api.meshkee.com/api/v1 (NEXT_PUBLIC_MESHKEE_API_BASE)
• Tenant business id: 42 (GET /tenants/ayoubi.jewelry, nameFa: گالری ایوبی فخیم)
• Enabled modules: products, blog, finance. specialProductsSource: store_item
• Prompt reference: https://api.meshkee.com/api/v1/public/ai-prompts/ayoubi-gallery/backend/253d39eea2a4047c39296d1a

Stack

• Next.js 15 App Router + React 19 + TypeScript
• output: "standalone" in next.config.ts (required for the Meshkee websites VM)
• Language: fa, direction: rtl
• Fonts: Doran (--font-doran), Cinzel (--font-cinzel)
• Styling: src/app/globals.css only (no Tailwind)

Color palette

• Background: #070708 (--bg)
• Elevated: #101012
• Ivory text: #f3eee6 (--fg)
• Muted: rgba(243, 238, 230, 0.62)
• Gold: #c9a86a (--accent)
• Hairline: rgba(243, 238, 230, 0.14)
• Flat: no shadows, square corners, 1px borders
• Header is fixed. Frosted over the home video; solid #000 after scroll (.header--solid)
• Header tools: account menu, cart (badge + popup), phone, Instagram

Auth (customer dashboard)

• Do not add /login, /register, /cart, or /checkout on this site
• Anonymous account icon → https://customer.ayoubi.jewelry
• Logged in (cookie meshkee_customer_access_token, may be chunked): show {firstName|nameFa|name} عزیز
• Dropdown: پروفایل من, خروج, and if admin مدیریت وبسایت → https://business.ayoubi.jewelry
• Session: src/lib/auth.ts + src/lib/authUser.ts via GET /auth/me

Shopping cart (mini-cart only)

• Header cart icon + quantity badge + popup (CartButton + CartProvider + guestCart.ts)
• Persist meshkee-guest-cart in localStorage + cookie on .ayoubi.jewelry
• Add-to-cart only when GET .../store-items/by-product/{productId} returns in-stock variants
• Line id = storeItemVariantId; price = discountedPrice ?? price
• Continue: logged in → customer.../checkout/cart?guestCart=…; else login with that redirect
• Never call /businesses/{id}/cart* from this site

Pages

Route	Purpose
/	Video hero, category studio, local/CMS gallery, follow, carousel, parallax, visit
/products	Catalog from Meshkee products API + jewelry category filters + pagination
/products/[id]/[nameFaSlug]	Product detail (canonical); redirect if slug drifts
/products/category/[id]/[nameFaSlug]	Category product list
/portfolio	Portfolio list (API; empty until CMS content)
/portfolio/[slug]	Portfolio detail: lightbox gallery, zoom, similar row
/blog	Blog list (API; empty until CMS content)
/blog/[slug]	Blog detail
/about	درباره گالری
/contact	Contact facts + form → POST /api/contact → Meshkee contact-submissions

Product detail requirements

• Media gallery with hover zoom (desktop) + lightbox
• Tabs: توضیحات، مشخصات فنی (via .../technical-info join), دیدگاه‌ها
• Comments: form only when authenticated; else login link to customer portal
• Similar products from relatedProducts
• Emit product.schema.jsonLd when present

Homepage (visual gallery)

• Local images in public/assets/images/ / gallery in src/data/site.ts as fallbacks
• CMS slots: categories, four-banner, masonry-image, instagram-image, last-banner (see Static image slots)
• Homepage masonry is atmospheric; purchasable catalog is /products

Brand copy (fallback)

• Name: گالری طلا و جواهر ایوبی فخیم / Ayoubi Fakhim Jewelry
• Tagline: این طلا همیشه مده
• Address: قم - سالاریه - اریکه ملل
• Phones: ۰۹۹۹ ۱۲۹ ۶۶۶۶ (09991296666), ۰۹۳۷ ۱۴۴ ۸۹۰۵ (09371448905)
• Instagram: https://www.instagram.com/ayoubifakhim/
• Logo / favicon fallback: public/Ayoobi-logo.png

Meshkee helpers

• src/lib/meshkee.ts — business-info, favicon
• src/lib/catalog.ts — products, categories, blogs, portfolios, comments, store-items, /auth/me
• src/lib/slug.ts — canonical product/category/blog/portfolio hrefs
• Favicon: GET /website/favicon → metadata.icons, else /Ayoobi-logo.png

Static image slots

Catalog: GET /meshkee/static-image-slots from STATIC_IMAGE_SLOTS in src/lib/static-images.ts. Fetch per page: GET /tenants/{domain}/website/static-images?pageKey=…. Empty/fail → keep local placeholders. url → <img>; linkUrl → wrap in <a>. Use titleFa / titleEn / subtext to match the original UI labels. Apply slot.aspectRatio from the API (fallback to catalog). If an on-page frame’s size or aspect ratio changes in development, update the matching STATIC_IMAGE_SLOTS entry in the same change.

key	kind	itemCount	aspectRatio	width	UI
categories	list	null	1:1	320	Category row — titleFa/titleEn beside image (icon fallback)
four-banner	list	4	3:4	1440	Sticky “از فلز تا پوشیدن” — Fa/En/subtext + image
masonry-image	list	null	3:4	960	Masonry gallery (free display height)
instagram-image	single	1	4:5	480	Follow frame photo + optional Fa/En/subtext
last-banner	single	1	16:9	1600	Parallax end banner
about-portrait	single	1	3:4	900	About portrait

Helpers: src/lib/home-slots.ts, SlotImage.

Tags & badges

From business-info: metaTags as { html } or { name, content } → root <head> via CmsMeta. trustBadges[].embedHtml → footer (scripts stripped). Empty → omit; do not hardcode eNamad/Samandehi.

SEO

• Do not ship local sitemap.xml / robots.txt / app/sitemap.ts / app/robots.ts
• Static pages: GET /meshkee/sitemap-config.json
• One H1 per page; content images have alt; use seoMetaTitle / seoMetaDescription when set
• Organization JSON-LD from business-info; product/blog detail emit their own schema.jsonLd

Important paths

• Layout / providers: src/app/layout.tsx, src/components/providers/*
• Header / footer: src/components/Header.tsx, AccountMenu.tsx, CartButton.tsx, Footer.tsx
• Catalog UI: MediaGallery.tsx, ProductTabs.tsx, AddToCart.tsx, CatalogCard.tsx, CommentSection.tsx
• Contact: src/components/ContactForm.tsx + toast, src/app/api/contact/route.ts