Initial import: Majd Trading website

Next.js 15 site for گروه بازرگانی بین المللی آریو مجد آسیا, rebuilt from
majdtrading.com. Persian, English and Arabic; RTL and LTR.

- Pages: home, about, contact, six product categories, blog index and detail
- i18n: prose in per-locale JSON, structure in TypeScript, drift checked by
  `npm run i18n:check`. Blog stays single-language by design
- Meshkee backend: blog content, tenant resolution, session via the customer
  portal, and /meshkee/sitemap-config.json
- Live market data from livedata.ir, cached server-side once a minute
- Self-hosted fonts: IRANYekan (fa), IBM Plex Sans Arabic (ar), Space Grotesk
  and BBH Bartle (Latin)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/Reveal.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+type RevealTag = "div" | "li" | "article" | "section";
+
+/**
+ * Fades and lifts its content into place the first time it scrolls into view.
+ * Pass an increasing `delay` across a list to stagger the sequence.
+ *
+ * Renders as whatever element the slot needs (`li` inside a list, `article` in a
+ * grid) so it never introduces a wrapper that would break list semantics or grid
+ * placement. Honours `prefers-reduced-motion` by showing content immediately.
+ *
+ * The starting state is hidden, so every instance carries `data-reveal` and the
+ * layout ships a `<noscript>` rule that forces those elements visible. Without
+ * it, a visitor with JS disabled would get a page of blank sections.
+ */
+export default function Reveal({
+  children,
+  as = "div",
+  delay = 0,
+  className = "",
+  id,
+}: {
+  children: ReactNode;
+  as?: RevealTag;
+  delay?: number;
+  className?: string;
+  id?: string;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    // Show immediately when the animation should not or cannot run.
+    if (
+      !("IntersectionObserver" in window) ||
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      setShown(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        setShown(true);
+        observer.disconnect();
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
+    );
+
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  const Tag = as;
+
+  return (
+    <Tag
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref={ref as any}
+      id={id}
+      data-reveal=""
+      style={{ transitionDelay: shown ? `${delay}ms` : "0ms" }}
+      className={`transition-[opacity,transform] duration-700 ease-out ${
+        shown ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
+      } ${className}`}
+    >
+      {children}
+    </Tag>
+  );
+}