asphp/context.md

# ASPHP Co Website Context

## Source Prompt

Create a Persian RTL Next.js website for a server parts store from `asphp.ir`. Use banners, images, logo, fonts, icon feel, and color palette from the main website. Clone only the homepage, about us, and contact us pages. Keep the design flat.

## Source Site Data

- Brand: شرکت آریا شبکه پیشرو
- Domain: `https://www.asphp.ir`
- Meshkee backend domain: `asphp.ir`
- Meshkee API base: `https://api.meshkee.com/api/v1`
- Customer login/profile target from backend prompt: `https://customer.asphp.ir.com`
- Business: فروش تجهیزات سرور HP، رم سرور، هارد سرور، CPU، سوئیچ Cisco و تجهیزات شبکه
- Language/direction: Persian, `fa`, `rtl`
- Primary color: `#0097D9`
- Secondary/tertiary color: `#883F3F`
- Header background: `#17214B`
- Main font: Iran Yekan from Meshkee CDN, downloaded into `public/assets`
- Latin/number font: Montserrat from Meshkee CDN, downloaded into `public/assets`
- Contact phones from source: `02177133934`, `02177132293`, `88467222 (021)`, `22459734 (021)`
- Address: تهران، میدان رسالت خیابان هنگام کوچه شیری پلاک 9 واحد 4
- Socials: `https://www.instagram.com/asphp.co/`, `https://t.me/asphpco`

## Local Implementation

- Framework: Next.js App Router
- Routes:
  - `/`
  - `/about-us`
  - `/contact-us`
  - `/store`
  - `/store/[id]`
  - `/blog`
  - `/blog/[slug]`
  - `/aboutus` alias
  - `/contactus` alias
- Shared content lives in `app/data.js`
- Meshkee backend helpers live in `app/meshkee.js`.
- Header login/user/cart behavior lives in `app/HeaderTools.js`.
- Store add-to-cart controls live in `app/StoreActions.js`.
- Contact submission UI lives in `app/ContactForm.js` and posts through `app/api/contact/route.js`.
- Shared layout components live in `app/components.js`
- Global design tokens and responsive CSS live in `app/globals.css`
- Downloaded source HTML is saved under `.source/` for future AI/system reference.
- Downloaded visual assets and fonts are saved under `public/assets/`.
- Dependencies are locked in `package-lock.json`; Next is pinned to `16.3.4` after npm reported a security warning for `15.5.2`.
- `npm install --ignore-scripts --no-audit --no-fund` completed. `npm run build` starts Next but is killed by this runner with exit code `137` immediately after config load; dev server also reports ready and exits in this environment.

## Notes For Future Prompts

- Keep Persian text RTL and avoid converting source phrasing to English.
- Preserve the ASPHP palette unless the user explicitly asks for a redesign.
- Prefer adding or editing structured arrays in `app/data.js` for content changes.
- Update this file whenever future prompts change site goals, content sources, routes, brand rules, or design constraints.

## 2026-09-03 Layout Update

- Header is container-width and boxed, with the top contact bar, logo/nav, and product search input inside the same header box.
- Homepage search was moved from below the hero into the header.
- Homepage slider is container-width rather than full-bleed.
- Slider uses animated transitions and keeps adjacent previous/next banner panels visible around the active slide.
- Slider text overlay was removed so only banner artwork appears.
- Slider card/box styling was removed; banners now slide as flat images inside the container area.
- Three promo banners were added below the slider; each is fixed at `200px` height on desktop.
- `preview-server.mjs` mirrors these layout changes for the lightweight runnable preview.

## 2026-09-03 Header And Slider Refinement

- Slider images now have rounded corners, with the active slide enlarged.
- Site typography was reduced and header navigation uses lighter font weight.
- Header search uses an icon-only search button.
- Logo was moved to the visual left side of the header.
- Navigation now uses a `دسته بندی ها` mega menu, removes `صفحه اصلی` and `محصولات`, and adds `فروش ویژه`.

## 2026-09-03 Special Sale Frame

- Product images are now square (`1:1`) and cover their frame.
- The homepage product section is now a `فروش ویژه` frame with a minimal light blue background.
- A banner card was added as the first card in the special sale grid.

## 2026-09-03 Mega Menu And Header Search

- `دسته بندی ها` is now a large tabbed-style mega menu panel with tabs and grouped columns.
- `فروش ویژه` appears directly after `دسته بندی ها` in the header.
- Header search is now an icon-only control; clicking it opens the search input.
- Header top bar uses only phone and Instagram icons instead of descriptive labels.
- Iran Yekan light was downloaded and set as the base font weight.

## 2026-09-03 Slider Simplification

- Category menu label now has a small icon plus a minimal light-blue border.
- Slider no longer shows previous/next slides; the active slide fills the container width.
- Slider keeps looping through slides with a fade transition.

## 2026-09-03 Section Title And Card Density

- Section titles now use a branded pill, gradient accent line, and small dot detail.
- Special sale card spacing and frame padding were reduced so product cards appear larger and denser.

## 2026-09-03 Special Sale Countdown

- Added a rolling 72-hour countdown to the `فروش ویژه` frame.
- Next source uses `app/Countdown.js`; `preview-server.mjs` mirrors the same countdown with inline JavaScript for the local preview.

## 2026-09-03 Special Sale Band Refinement

- The special sale light-blue background now spans the full page width while keeping content inside the main container.
- The special sale title is aligned to the right and the countdown is aligned to the left.
- The section title dot was moved beside the Persian title and now pulses slowly.
- Special sale card spacing was tightened again.

## 2026-09-03 Flip Clock Countdown

- The special sale countdown now uses compact flip-clock number cards for days, hours, minutes, and seconds.
- The preview server countdown markup and inline timer script were updated to match the React component.

## 2026-09-03 Sale Frame Spacing

- The special sale band now uses reduced vertical padding with outside top/bottom margin.
- Added blue top and bottom rules to the full-width sale frame.
- Flip-clock numbers now use the primary ASPHP blue instead of the dark red accent.
- Product card gaps in the sale frame were tightened further.

## 2026-09-03 Articles Carousel

- Articles are now structured with image, date, title, and abstract fields in `app/data.js`.
- Homepage articles render as a horizontal carousel with square (`1:1`) cover images.
- `preview-server.mjs` mirrors the carousel article cards for the local static preview.

## 2026-09-05 Services Order

- Services section card order is rendered in reverse visual order on the homepage and preview server.
- Corrected the `articles` anchor so it targets the articles carousel section.

## 2026-09-05 Feature Frame Redesign

- Downloaded the six original feature icons from the ASPHP source theme into `public/assets/feature-*.png`.
- Feature data now stores icon/body objects instead of plain strings.
- The `ویژگی ما` frame now uses a source-inspired split layout with a title/copy panel and a six-item icon grid.

## 2026-09-05 Original Banner Frame

- Downloaded the original three-image `infoitems2` banner frame assets into `public/assets/source-frame-*.jpg`.
- Added a homepage frame after `ویژگی ما` with one large hard-drive banner and two stacked right-side banners, matching the original site composition.
- `preview-server.mjs` mirrors the frame for local preview.
- Updated the homepage about-band image to use the same server-room image and image-over-blue-backing treatment.

## 2026-09-05 Contact CTA Row

- Reworked the homepage contact row into a light-blue branded call-to-action panel with consultation copy, a phone icon, and a prominent phone number.
- `preview-server.mjs` mirrors the CTA row for local preview.
- Later refined into a flat full-width row with top/bottom blue rules and corrected the phone number typography to use the Persian site font without letter spacing.

## 2026-09-05 Feature Icon Normalization

- Normalized visual sizing for original feature icons by scaling wider source PNGs inside the same fixed icon box.

## 2026-09-05 Countdown Order

- Reversed the special sale countdown unit order in both the React component and preview server.

## 2026-09-05 Meshkee Backend Integration

- Added `app/meshkee.js` as the central Meshkee Website API helper for tenant, favicon/logo, store items, blogs, contact submissions, authenticated user lookup, and cart item submission.
- Added Meshkee static image slot helpers for `/tenants/asphp.ir/website/static-images`, including key lookup, list/single handling, linkUrl mapping, and CSS-safe aspect ratio parsing.
- Added store list/detail pages connected to `/tenants/asphp.ir/store-items`, with local product fallbacks because the live API currently returns an empty item list.
- Store detail pages include square lightbox-style gallery links, hover zoom, quantity selector, add-to-cart behavior, description/technical/comments tabs, a login prompt for comments, and similar products.
- Added blog list/detail pages connected to `/tenants/asphp.ir/blogs`, with local article fallbacks because the live API currently returns an empty blog list.
- Updated metadata favicon handling to read Meshkee favicon/logo data first and fall back to `/assets/favicon.png`.
- Header now includes customer login/user dropdown behavior and a cart icon with localStorage count/popup support.
- Contact page form now submits through the Meshkee contact submissions API via a local route handler, resets on success, and shows status text.
- `preview-server.mjs` includes static preview equivalents for `/store`, `/store/:id`, `/blog`, and `/blog/:slug`.
- `next.config.mjs` allows Meshkee API/storage/template image hosts for backend-provided images.
- Homepage image placeholders now read static image slots by key: `slider`, `three-banner-below-slider`, `special-sale-banner`, `server-banner`, `aboutus-banner`, and `three-banner`; if the API is empty or fails, keep the current local placeholder. When image size or aspect ratio changes, update the static image reader usage so `slot.aspectRatio` stays respected.

## 2026-09-06 SEO And Sitemap Config

- Do not create or ship `public/sitemap.xml` or `public/robots.txt`; production nginx proxies both to Meshkee.
- Added `/meshkee/sitemap-config.json` as the sitemap config endpoint with static public routes and Meshkee canonical templates for products, categories, blogs, and portfolios.
- Public page metadata now uses unique titles/descriptions, canonical URLs, and Open Graph/Twitter metadata through `app/seo.js`.
- Product detail metadata prefers CMS product fields and canonicalizes to `/products/{id}/{nameFaSlug}`; blog detail metadata canonicalizes to `/blog/{id}/{titleSlug}`.
- The homepage now has exactly one hidden H1 while section titles remain H2/H3.

## 2026-09-05 CTA Position

- The contact CTA row was moved back to its lower homepage position after the project section and before the articles carousel.
- `preview-server.mjs` mirrors the same homepage section order.

## 2026-09-05 Image Pair And Banner Ratio

- Updated the split server-info image pair so the main image uses a 3:2 visual ratio.
- Moved the secondary blue image below the main image instead of overlaying it.
- Made the stacked original banner-frame images taller with a 3:2 ratio.
- Replaced the dark secondary server-info image with the clearer HP G9 product image.
- Restyled the blue rectangle as a backing layer behind the secondary product image instead of a separate visible block.
- Removed the secondary white product image from the server-info pair and moved the blue accent rectangle upward behind the main image.

## 2026-09-03 Header Flattening

- Top contact strip uses its own light-blue boxed background.
- Logo/navigation row uses a separate white boxed card.
- Top contact strip and navigation row are visually attached with shared edges and complementary rounded corners.
- Login button now uses Iran Yekan instead of the Latin/number font.

## 2026-09-05 Header Tools Position

- Moved the login/user and cart tools into the topbar's former login-button position.
- Removed the duplicate header tools from the main nav row and reversed their order so login appears before cart.