i18n: wire useTranslations for video-maker, image-maker, and pricing heading

- Add videoMaker + imageMaker namespace to en.json and fa.json
  (hero, features x5, use-cases x4, CTA per section)
- Pricing.tsx: replace hardcoded heading with t('pricing.heading')
- VideoMakerHero/Features/UseCases/Cta: full useTranslations wiring
- ImageMakerHero/Features/UseCases/Cta: full useTranslations wiring
- Features/UseCases arrays moved inside components; icons kept as
  module-level constants to avoid per-render allocation

src/components/video-maker/VideoMakerUseCases.tsx

@@ -2,76 +2,50 @@
 
 import type { LucideIcon } from "lucide-react";
 import { Building2, Megaphone, Smartphone, Tv } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { SectionReveal } from "@/components/sections/SectionReveal";
 
-interface UseCase {
-  title: string;
-  description: string;
-  icon: LucideIcon;
-}
-
-const useCases: UseCase[] = [
-  {
-    title: "YouTube",
-    description:
-      "Intros, outros, and long-form explainers with chapters and thumbnail-ready frames.",
-    icon: Tv,
-  },
-  {
-    title: "Instagram Reels",
-    description:
-      "Vertical templates, bold captions, and beat-synced cuts built for short-form.",
-    icon: Smartphone,
-  },
-  {
-    title: "Ads",
-    description:
-      "High-converting promos for Meta, Google, and TikTok with platform-safe ratios.",
-    icon: Megaphone,
-  },
-  {
-    title: "Corporate Videos",
-    description:
-      "Onboarding, training, and investor updates with consistent brand styling.",
-    icon: Building2,
-  },
-];
+const USE_CASE_ICONS: LucideIcon[] = [Tv, Smartphone, Megaphone, Building2];
 
 export function VideoMakerUseCases() {
+  const t = useTranslations("videoMaker");
+
+  const useCases = USE_CASE_ICONS.map((Icon, i) => ({
+    Icon,
+    title: t(`useCase${i}Title` as Parameters<typeof t>[0]),
+    description: t(`useCase${i}Desc` as Parameters<typeof t>[0]),
+  }));
+
   return (
     <section className="bg-white py-20 sm:py-28">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <SectionReveal className="text-center">
           <h2 className="font-heading text-3xl font-bold text-neutral-900 sm:text-4xl">
-            Built for every channel
+            {t("useCasesHeading")}
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-neutral-600">
-            Pick a format and let templates handle aspect ratio, safe zones, and
-            pacing.
+            {t("useCasesSub")}
           </p>
         </SectionReveal>
 
         <SectionReveal className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {useCases.map((useCase) => {
-            const Icon = useCase.icon;
-            return (
-              <article
-                key={useCase.title}
-                className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
-              >
-                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-50 text-primary-600">
-                  <Icon className="h-6 w-6" aria-hidden />
-                </div>
-                <h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
-                  {useCase.title}
-                </h3>
-                <p className="mt-2 text-sm leading-relaxed text-neutral-600">
-                  {useCase.description}
-                </p>
-              </article>
-            );
-          })}
+          {useCases.map(({ Icon, title, description }) => (
+            <article
+              key={title}
+              className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
+            >
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-50 text-primary-600">
+                <Icon className="h-6 w-6" aria-hidden />
+              </div>
+              <h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
+                {title}
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-neutral-600">
+                {description}
+              </p>
+            </article>
+          ))}
         </SectionReveal>
       </div>
     </section>