# 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.