# Glassmond project context

## Goal

Persian RTL Next.js recreation of the public Glassmond website. Current scope is:

- Homepage (`/`)
- Products (`/products`) and canonical product details (`/products/{id}/{nameFaSlug}`)
- Product categories (`/products/category/{id}/{nameFaSlug}`)
- Blog (`/blog`) and canonical article details (`/blog/{id}/{titleSlug}`)
- About (`/about`)
- Contact (`/contact`)
- Features (`/features`)

The visual source of truth is `https://www.glassmond.com`. Public copy, logo, product imagery, banners and Iran Yekan font were downloaded from the source site. The footer's final black credit row follows the compact treatment used by `https://brb-store.com`.

## Stack

- Next.js App Router
- TypeScript
- Plain responsive CSS in `app/globals.css`
- Lucide React icons
- Local Iran Yekan font files

## Important architecture

- Shared layout: `app/layout.tsx`
- Navigation: `components/header.tsx`
- Footer: `components/footer.tsx`
- Global intersection-based reveal controller: `components/motion-observer.tsx`
- Responsive five-card product carousel: `components/product-carousel.tsx`
- Typed Meshkee API client and canonical URL helpers: `lib/meshkee.ts`
- Build-time static route discovery: `scripts/generate-sitemap-config.mjs`
- Generated Meshkee sitemap payload: `data/generated-sitemap-pages.ts`
- Product gallery/lightbox: `components/product-gallery.tsx`
- Auth-aware account UI: `components/auth-provider.tsx` and `components/user-menu.tsx`
- Shared authenticated comment UI: `components/entity-comments.tsx`
- Reusable headings, feature grid, video CTA and inner-page hero: `components/sections.tsx`
- Static feature and contact presentation data: `data/site.ts`
- Public source-site assets: `public/images` and `public/fonts`

Products and blogs now come from the Meshkee Website API. The homepage, listing pages, details, approved comments and contact form use the live `glassmond.com` tenant. Local files remain as visual fallbacks only.

The contact form validates in the browser and submits through `app/api/contact/route.ts` to Meshkee's public contact-submission endpoint.

## Meshkee backend

- API base: `https://api.meshkee.com/api/v1`
- Apex tenant domain: `glassmond.com`
- Resolved business ID: `22`
- Public content always uses `/tenants/glassmond.com/...`
- Customer portal: `https://customer.glassmond.com`
- Business/admin portal: `https://business.glassmond.com`
- The account provider recognizes Meshkee bearer tokens from the common browser token keys and validates them with `GET /auth/me`. Logged-in users see `{firstName} عزیز`, profile/logout actions, and the management link when their API role is administrative.
- Comment submission is UI-gated to authenticated users. Approved comments remain publicly readable.
- CMS HTML is sanitized server-side with `sanitize-html` before rendering.
- Remote CMS media is optimized through Next Image and restricted in `next.config.ts` to the tenant's ParsPack media path.
- Meshkee discovery manifests are exposed at `/meshkee/static-image-slots` and `/meshkee/sitemap-config.json`.

## SEO architecture

- `npm run build` executes `npm run seo:generate` first. The generator scans `app/**/page.*`, includes only public static pages, and excludes dynamic segments plus auth, cart, checkout, admin, API and Meshkee utility routes.
- Do not add `public/sitemap.xml`, `public/robots.txt`, `app/sitemap.ts` or `app/robots.ts`. Production nginx proxies the sitemap index, sitemap parts and robots file from the Meshkee API.
- Every public static route has a unique title, description, explicit canonical URL and Open Graph metadata.
- Product/blog search and category-filter query variants are `noindex,follow`; paginated lists have self-referencing canonicals and page-specific metadata.
- Product, product-category and blog detail pages derive metadata and canonical URLs from current CMS fields. The API ID resolves content; the Persian slug is SEO-only and stale slugs redirect.
- All crawlable pages render one H1. Section structure uses H2/H3, including a screen-reader H2 for compact feature sections.
- Content images and gallery thumbnails use descriptive Persian alt text or CMS titles.
- Sanitized CMS body images are allowed only with safe attributes, receive a meaningful title-based fallback alt, and load lazily.

## Design system

- Direction/language: RTL / Persian (`fa`)
- Strict monochrome palette: black accents on light surfaces and white accents on dark/image surfaces; no red
- Main dark: `#1b1b1b`
- Soft dark: `#3b3b3b`
- Warm surface: `#f6f1f0`
- Cream surface: `#fef8f4`
- Font: Iran Yekan
- English section labels use the source site's Montserrat Alternates Light font for a geometric Glassmond-like character. Labels include NEW PRODUCTS, OUR STORY, WHY GLASSMOND, JOURNAL, ABOUT GLASSMOND, OUR SERVICES and contact labels.
- About and contact inner-page heroes use matching English labels. The About page includes a monochrome experience/innovation/support statistics band.
- Square edges, editorial spacing, black/white surfaces and dark feature/footer sections
- Typography is intentionally light and compact. Header links use light weight; only the current route uses regular weight with a thin white underline. The header contains no red.
- Body copy uses light weight while section headings and key labels use bold weight to create hierarchy without color.
- Motion uses staggered hero/page-hero text entry, a header drop-in, one-time scroll reveals for sections/cards and a staggered product carousel transition. It is disabled when `prefers-reduced-motion` is enabled.

## Source contact data

- Mobile/WhatsApp: `0930 129 3902`
- Factory: Qom, Samen industrial town, Alley 23
- Instagram and WhatsApp URLs are stored in `data/site.ts`

## Notes for future work

- Canonical detail links use API IDs; the Persian slug is SEO-only and stale slugs redirect to the current canonical path.
- Canonical product-category pages resolve through `GET /categories/by-id/{id}` and list products by `categoryId`.
- Product list and blog list support server-rendered search, category filtering and pagination.
- Product details include a hover zoom, lightbox gallery, description/comments tabs and related products.
- If the customer portal changes its token handoff/storage convention, update only `components/auth-provider.tsx`.
- The API currently returns no sellable variants or prices for the imported products, so product details use contact/WhatsApp ordering rather than cart actions.
- The portfolio module currently has no published items. Add `/portfolios` and `/portfolios/{id}/{titleFaSlug}` before publishing portfolio content so future sitemap entries resolve.
- The Features page combines source-site feature claims with detailed anti-fog, lighting, touch-control and 12V/IP64 explanations.
- Update this file whenever architecture, routes, backend integration, assets, or project conventions materially change.