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.