alireza-hassaniandClaude Sonnet 5
26b8b64bf3
- Replace icon-based category tiles with curated photo cards (brown bottom overlay, single-row layout, taller aspect ratio, tighter gaps, no card frame, light brown section background) via new CategoryShowcase component and categoryIcons fallback images. - Add ScrollReveal component for page-enter animations, used across the category showcase and other sections. - Turn the homepage "New Products" grid into a horizontal snap-scroll carousel with prev/next controls (ProductsCarousel). - Extend Pagination and the products page to preserve categoryId filters, and widen aspectRatioToCss to accept undefined. - Document the static-image-slots system and API client conventions in CLAUDE.md. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2.9 KiB
@AGENTS.md
Arad Arisman — Meshkee backend integration
This site is a Next.js storefront for aradarisman.com, backed by the
Meshkee Website API (https://api.meshkee.com/api/v1, docs at
https://api.meshkee.com/docs/website). All backend access goes through
src/lib/meshkee.ts — do not call the API directly from components/pages.
- Products (
getProducts,getProduct) and blog posts (getPosts,getPost) are fetched live, tenant-scoped toTENANT_DOMAIN(aradarisman.com). Blog field names (Posttype) are inferred from the Product/Category naming convention since no tenant has published posts to verify against yet — accessors fall back across plausible field names (postTitle,postContent, etc.). Re-check against a real published post once one exists and simplify the fallbacks if the guess was wrong. - Category tiles are derived from live products (
getCategorySummary), not the raw/categoriesendpoint — that taxonomy has duplicate entries sharing the same display name under different ids (backend data-entry artifact). The summary merges by name and links to whichever id holds the most products under that name.
Static image slots (business-managed overrides)
getStaticImageSlots / getStaticImageSlot(key) read
/tenants/{domain}/website/static-images — named slots the business owner
can fill with their own images from the Meshkee dashboard. Current mapping:
| Slot key | Kind | Component | Fallback when empty/unset |
|---|---|---|---|
slider |
list | HeroSlider |
3 local photos in hero-slider-*.jpg with authored copy |
categories |
list | CategoryShowcase |
icon-based cards derived from live product categories |
four-icon-image |
list(4) | Features |
4 local icons + authored copy, per-index override |
about-us |
single | About |
local hero-2.jpg |
brands |
list | Partners |
6 local partner logos |
Rule: a slot with zero images (or a failed fetch) must never break the
page — always fall back to the existing local/derived content.
getStaticImageSlots already swallows fetch errors and returns [].
Each StaticImageItem carries url, optional titleFa/subtext/
linkUrl, and its own width/height. Respect slot.aspectRatio
("21:9" etc, via aspectRatioToCss) for slot-driven image containers
instead of hardcoding a Tailwind aspect class — if you resize/recrop a
local fallback image during development, update the corresponding
component's fallback styling to match, since slot-driven and fallback
images render through the same container and must not look broken when
swapped.
aradarisman.com currently has zero slots configured, so the site
renders through the fallback path everywhere — this is expected, not a bug.