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>
117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
const ICONS: Record<string, React.ReactNode> = {
|
|
پرمیکس: (
|
|
<path
|
|
d="M9 2h6v5.5l4.3 8.6A2 2 0 0 1 17.5 19h-11a2 2 0 0 1-1.8-2.9L9 7.5V2Zm2 2v4h2V4h-2Zm-1.4 6-1.6 3.2h8l-1.6-3.2H9.6Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
مکمل: (
|
|
<path
|
|
d="M7.8 3.8a5 5 0 0 1 7.1 0l5.3 5.3a5 5 0 0 1-7.1 7.1L7.8 11a5 5 0 0 1 0-7.2Zm1.4 1.4a3 3 0 0 0 0 4.2l1.4 1.4 4.2-4.2-1.4-1.4a3 3 0 0 0-4.2 0Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
کنستانتره: (
|
|
<path
|
|
d="M8 2h8l1 4-2 1v13a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V7l-2-1 1-4Zm2 7v10h4V9h-4Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
گندم: (
|
|
<path
|
|
d="M12 2c1 2 1 3.5 0 5-1-1.5-1-3 0-5Zm-3 3c1.4 1.4 1.4 3.2 0 4.6C7.6 8.2 7.6 6.4 9 5Zm6 0c1.4 1.4 1.4 3.2 0 4.6C13.6 8.2 13.6 6.4 15 5Zm-3 3c1.4 1.6 1.4 3.4 0 5-1.4-1.6-1.4-3.4 0-5Zm-4 4c1.4 1.4 1.4 3.2 0 4.6C6.6 15.2 6.6 13.4 8 12Zm8 0c1.4 1.4 1.4 3.2 0 4.6-1.4-1.4-1.4-3.2 0-4.6Zm-4 2c1 2 1 4 0 6-1-2-1-4 0-6Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
برنج: (
|
|
<path
|
|
d="M4 13c0-4.4 3.6-8 8-8s8 3.6 8 8v1a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-1Zm4 3h8v-3a4 4 0 0 0-8 0v3Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
سبوس: (
|
|
<path
|
|
d="M12 2c1 2 1 3.5 0 5-1-1.5-1-3 0-5ZM6 9c4.4-2 9.6-2 12 0-3.2 3-8.8 3-12 0Zm-2 5c5.4-2.6 10.6-2.6 16 0-4 3.4-12 3.4-16 0Zm3 5c3.4-1.4 6.6-1.4 10 0-2.4 1.7-7.6 1.7-10 0Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
آبزیان: (
|
|
<path
|
|
d="M3 12c3-3.5 8-5.5 13-4.3-.3-1-.9-1.9-1.6-2.7a10 10 0 0 1 6.1 5c-1.3 1.6-3.4 2.7-5.5 3.4a10 10 0 0 1-3 5.6c.7-.8 1.3-1.7 1.6-2.7C8.6 17.5 3.6 15.5 3 12Zm14.5-.8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
طیور: (
|
|
<path
|
|
d="M13 3c3.9 0 7 3.1 7 7 0 2.6-1.4 4.9-3.5 6.1V19a2 2 0 0 1-2 2h-1v-2h-3v2H9a2 2 0 0 1-2-2v-1.5A7 7 0 0 1 6 10c0-.6.1-1.1.2-1.6C4.9 8.9 3.9 9.9 3.5 11.2 3.2 8.1 6 5 9.5 5c.9 0 1.7.2 2.5.5A7 7 0 0 1 13 3Zm2 5.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
دام: (
|
|
<path
|
|
d="M6 4c1.5 0 2.5 1 2.8 2.3C9.6 6.1 10.8 6 12 6s2.4.1 3.2.3C15.5 5 16.5 4 18 4c1.7 0 3 1.3 3 3 0 1.2-.7 2.2-1.7 2.7C19.7 10.9 20 12.2 20 13.5 20 17.6 16.4 21 12 21s-8-3.4-8-7.5c0-1.3.3-2.6.7-3.8C3.7 9.2 3 8.2 3 7c0-1.7 1.3-3 3-3Zm3 9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
زنبور: (
|
|
<path
|
|
d="M12 2a3 3 0 0 1 3 3v1.2A5 5 0 0 1 17 10v3a5 5 0 0 1-10 0v-3a5 5 0 0 1 2-4.8V5a3 3 0 0 1 3-3Zm-3 8h6v1H9v-1Zm0 2.5h6v1H9v-1ZM5 10l-2.5-1.5M19 10l2.5-1.5"
|
|
stroke="currentColor"
|
|
strokeWidth="1.4"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
/>
|
|
),
|
|
اسیدیفایر: (
|
|
<path
|
|
d="M12 2 6 12.5A6 6 0 1 0 18 12.5L12 2Zm0 4.4 3.8 6.7a3.8 3.8 0 1 1-7.6 0L12 6.4Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
توکسین: (
|
|
<path
|
|
d="M12 2 3 6v6c0 5 3.8 8.7 9 10 5.2-1.3 9-5 9-10V6l-9-4Zm0 2.2 7 3.1v4.7c0 3.9-2.9 6.8-7 7.9-4.1-1.1-7-4-7-7.9V7.3l7-3.1Zm-1 4.3v5h2v-5h-2Zm0 6.5v2h2v-2h-2Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
آنزیم: (
|
|
<path
|
|
d="M12 2a5 5 0 0 1 5 5c0 1.6-.8 3-2 3.9V13h2a5 5 0 1 1-5 5v-2a3 3 0 1 0 3-3h-2v-2.1A5 5 0 0 1 7 7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3Z"
|
|
fill="currentColor"
|
|
/>
|
|
),
|
|
};
|
|
|
|
const DEFAULT_ICON = (
|
|
<path
|
|
d="M12 2c5 2 8 5 8 10a8 8 0 0 1-16 0c0-5 3-8 8-10Zm0 4c-2.5 1.5-4 3.5-4 6a4 4 0 0 0 8 0c0-2.5-1.5-4.5-4-6Z"
|
|
fill="currentColor"
|
|
/>
|
|
);
|
|
|
|
export function categoryIcon(name: string) {
|
|
const key = Object.keys(ICONS).find((k) => name.includes(k));
|
|
return (
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none">
|
|
{key ? ICONS[key] : DEFAULT_ICON}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/** Curated photo per category name for the homepage category showcase. */
|
|
const CATEGORY_IMAGES: Record<string, string> = {
|
|
کنستانتره: "/images/category-photo-concentrate.jpg",
|
|
پرمیکس: "/images/category-photo-premix.jpg",
|
|
مکمل: "/images/category-photo-supplement.jpg",
|
|
گندم: "/images/category-photo-wheat.jpg",
|
|
برنج: "/images/category-photo-rice.jpg",
|
|
سبوس: "/images/category-photo-rice.jpg",
|
|
دام: "/images/category-photo-concentrate.jpg",
|
|
طیور: "/images/category-photo-supplement.jpg",
|
|
};
|
|
|
|
export function categoryFallbackImage(name: string): string {
|
|
const key = Object.keys(CATEGORY_IMAGES).find((k) => name.includes(k));
|
|
return key ? CATEGORY_IMAGES[key] : "/images/category-photo-supplement.jpg";
|
|
}
|