Redesign category showcase and convert products section to carousel

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

src/components/About.tsx

@@ -1,16 +1,24 @@
 import Image from "next/image";
 import Container from "./Container";
+import { getStaticImageSlot } from "@/lib/meshkee";
+
+export default async function About() {
+  const slot = await getStaticImageSlot("about-us");
+  const slotImage = slot?.images?.[0];
+
+  const imageSrc = slotImage?.url || "/images/hero-2.jpg";
+  const imageAlt = slotImage?.titleFa || "محصولات آراد آریسمان";
+  const objectPositionClass = slotImage ? "object-center" : "object-left";
 
-export default function About() {
   return (
     <section id="about" className="py-16 sm:py-20 bg-surface">
       <Container className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
         <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-xl order-2 lg:order-1">
           <Image
-            src="/images/hero-2.jpg"
-            alt="محصولات آراد آریسمان"
+            src={imageSrc}
+            alt={imageAlt}
             fill
-            className="object-cover object-left"
+            className={`object-cover ${objectPositionClass}`}
             sizes="(min-width: 1024px) 45vw, 90vw"
           />
         </div>