feat: AI SEO generator, full admin panel, i18n sweep, new logo + auth/RTL fixes

AI SEO content generator
- content-svc: per-tenant OpenAI config (ai_settings) + /v1/ai endpoints
  (settings GET/PUT, seo-post) with SEO-expert prompt → structured article
- admin UI to configure token/base-url/model and generate + save as blog
- configurable base URL for restricted networks

Full data-driven admin panel
- generic /api/admin/resource proxy + reusable AdminResource component
- categories/tags/fonts/blogs (CRUD), users (list + ban), plans/slides
- AI content section; nav + i18n

i18n localization sweep
- localized 116 user-facing + studio/editor components to next-intl (fa+en)
  under the auto.* namespace; merge tooling in scripts/merge-i18n.js

Branding + assets
- Monoline F logo (LogoMark + favicon)
- offline SVG placeholder generator (/api/placeholder), dropped picsum.photos

Fixes
- JWT issuer mismatch on content/studio (flatrender → flatrender-identity)
- missing role claim → [Authorize(Roles="Admin")] now works (RBAC)
- Secure cookies broke HTTP sessions → gated behind AUTH_COOKIE_SECURE
- Radix RTL via DirectionProvider (right-aligned menus in fa)

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

src/app/[locale]/admin/ai/page.tsx

@@ -0,0 +1,7 @@
+import { AiContentStudio } from "@/components/admin/AiContentStudio";
+
+export const dynamic = "force-dynamic";
+
+export default function AdminAiPage() {
+  return <AiContentStudio />;
+}

src/app/[locale]/admin/blogs/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { AdminResource } from "@/components/admin/AdminResource";
+import { blogsConfig } from "@/components/admin/admin-resources";
+
+export default function Page() {
+  return <AdminResource config={blogsConfig} />;
+}

src/app/[locale]/admin/categories/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { AdminResource } from "@/components/admin/AdminResource";
+import { categoriesConfig } from "@/components/admin/admin-resources";
+
+export default function Page() {
+  return <AdminResource config={categoriesConfig} />;
+}

src/app/[locale]/admin/fonts/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { AdminResource } from "@/components/admin/AdminResource";
+import { fontsConfig } from "@/components/admin/admin-resources";
+
+export default function Page() {
+  return <AdminResource config={fontsConfig} />;
+}

src/app/[locale]/admin/layout.tsx

@@ -1,4 +1,5 @@
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 
 import { getCurrentUser } from "@/lib/auth/session";
 
@@ -13,28 +14,38 @@ export default async function AdminLayout({
   if (!user || !user.is_admin) {
     redirect("/dashboard");
   }
+  const t = await getTranslations("auto.appAdminLayout");
+  const links: { href: string; label: string }[] = [
+    { href: "/admin/categories", label: t("categories") },
+    { href: "/admin/tags", label: t("tags") },
+    { href: "/admin/fonts", label: t("fonts") },
+    { href: "/admin/blogs", label: t("blogs") },
+    { href: "/admin/slides", label: t("slides") },
+    { href: "/admin/ai", label: t("aiContent") },
+    { href: "/admin/users", label: t("users") },
+    { href: "/admin/plans", label: t("plans") },
+    { href: "/admin/nodes", label: t("nodes") },
+    { href: "/admin/renders", label: t("renderQueue") },
+  ];
   return (
     <div className="min-h-screen bg-[#0c0e1a] text-gray-200">
       <nav className="border-b border-[#1e2235] bg-[#0f1120] px-6 py-3">
-        <div className="mx-auto flex max-w-7xl items-center gap-6">
-          <span className="text-sm font-semibold text-white">FlatRender Admin</span>
-          <a
-            href="/admin/nodes"
-            className="text-sm text-gray-400 hover:text-white transition-colors"
-          >
-            Nodes
-          </a>
-          <a
-            href="/admin/renders"
-            className="text-sm text-gray-400 hover:text-white transition-colors"
-          >
-            Render Queue
-          </a>
+        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-5 gap-y-2">
+          <span className="text-sm font-semibold text-white">{t("brand")}</span>
+          {links.map((l) => (
+            <a
+              key={l.href}
+              href={l.href}
+              className="text-sm text-gray-400 transition-colors hover:text-white"
+            >
+              {l.label}
+            </a>
+          ))}
           <a
             href="/dashboard"
-            className="ml-auto text-xs text-gray-500 hover:text-gray-300 transition-colors"
+            className="ml-auto text-xs text-gray-500 transition-colors hover:text-gray-300"
           >
-            ← Back to Dashboard
+            {t("backToDashboard")}
           </a>
         </div>
       </nav>

src/app/[locale]/admin/nodes/page.tsx

@@ -1,3 +1,5 @@
+import { getTranslations } from "next-intl/server";
+
 import { adminGet } from "@/lib/api/admin-gateway";
 import { NodesTable } from "@/components/admin/NodesTable";
 
@@ -24,14 +26,15 @@ interface V2NodeList {
 export default async function AdminNodesPage() {
   const data = await adminGet<V2NodeList>("/v1/nodes?pageSize=100");
   const nodes = data?.items ?? [];
+  const t = await getTranslations("auto.appAdminNodesPage");
 
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-semibold text-white">Render Nodes</h1>
+          <h1 className="text-xl font-semibold text-white">{t("title")}</h1>
           <p className="mt-1 text-sm text-gray-500">
-            {nodes.length} node{nodes.length !== 1 ? "s" : ""} registered
+            {t("registered", { count: nodes.length })}
           </p>
         </div>
       </div>

src/app/[locale]/admin/plans/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { AdminResource } from "@/components/admin/AdminResource";
+import { plansConfig } from "@/components/admin/admin-resources";
+
+export default function Page() {
+  return <AdminResource config={plansConfig} />;
+}

src/app/[locale]/admin/renders/page.tsx

@@ -1,3 +1,5 @@
+import { getTranslations } from "next-intl/server";
+
 import { adminGet } from "@/lib/api/admin-gateway";
 import { RenderQueueTable } from "@/components/admin/RenderQueueTable";
 
@@ -35,15 +37,25 @@ export default async function AdminRendersPage({
   const data = await adminGet<V2RenderList>(`/v1/renders${qs}`);
   const jobs = data?.items ?? [];
   const total = data?.total ?? 0;
+  const t = await getTranslations("auto.appAdminRendersPage");
 
   const steps = ["Queued", "Preparing", "Rendering", "Uploading", "Done", "Failed", "Cancelled"];
+  const stepLabels: Record<string, string> = {
+    Queued: t("stepQueued"),
+    Preparing: t("stepPreparing"),
+    Rendering: t("stepRendering"),
+    Uploading: t("stepUploading"),
+    Done: t("stepDone"),
+    Failed: t("stepFailed"),
+    Cancelled: t("stepCancelled"),
+  };
 
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-semibold text-white">Render Queue</h1>
-          <p className="mt-1 text-sm text-gray-500">{total} total jobs</p>
+          <h1 className="text-xl font-semibold text-white">{t("title")}</h1>
+          <p className="mt-1 text-sm text-gray-500">{t("totalJobs", { total })}</p>
         </div>
       </div>
 
@@ -57,7 +69,7 @@ export default async function AdminRendersPage({
               : "border-[#1e2235] text-gray-400 hover:text-white hover:border-[#2a3050]"
           }`}
         >
-          All
+          {t("filterAll")}
         </a>
         {steps.map((s) => (
           <a
@@ -69,7 +81,7 @@ export default async function AdminRendersPage({
                 : "border-[#1e2235] text-gray-400 hover:text-white hover:border-[#2a3050]"
             }`}
           >
-            {s}
+            {stepLabels[s] ?? s}
           </a>
         ))}
       </div>

src/app/[locale]/admin/slides/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { AdminResource } from "@/components/admin/AdminResource";
+import { slidesConfig } from "@/components/admin/admin-resources";
+
+export default function Page() {
+  return <AdminResource config={slidesConfig} />;
+}

src/app/[locale]/admin/tags/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { AdminResource } from "@/components/admin/AdminResource";
+import { tagsConfig } from "@/components/admin/admin-resources";
+
+export default function Page() {
+  return <AdminResource config={tagsConfig} />;
+}

src/app/[locale]/admin/users/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { AdminResource } from "@/components/admin/AdminResource";
+import { usersConfig } from "@/components/admin/admin-resources";
+
+export default function Page() {
+  return <AdminResource config={usersConfig} />;
+}

src/app/[locale]/auth/page.tsx

@@ -1,23 +1,28 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
+import { getTranslations } from "next-intl/server";
 
 import { AuthLoadingSpinner } from "@/components/auth/AuthLoadingSpinner";
 import { AuthPageContent } from "@/components/auth/AuthPageContent";
 import { createPageMetadata } from "@/lib/metadata";
 
-export const metadata: Metadata = createPageMetadata({
-  title: "Sign In",
-  description: "Sign in or create your CreatorStudio account.",
-  path: "/auth",
-});
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("auto.appAuthPage");
+  return createPageMetadata({
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    path: "/auth",
+  });
+}
 
-export default function AuthPage() {
+export default async function AuthPage() {
+  const t = await getTranslations("auto.appAuthPage");
   return (
     <main className="min-h-screen bg-neutral-50">
       <Suspense
         fallback={
           <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center py-20">
-            <AuthLoadingSpinner label="Loading..." />
+            <AuthLoadingSpinner label={t("loading")} />
           </div>
         }
       >

src/app/[locale]/dashboard/settings/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 
 import { SettingsBilling } from "@/components/dashboard/settings/SettingsBilling";
 import { SettingsNotifications } from "@/components/dashboard/settings/SettingsNotifications";
@@ -17,6 +18,7 @@ export const metadata: Metadata = createPageMetadata({
 export const dynamic = "force-dynamic";
 
 export default async function DashboardSettingsPage() {
+  const t = await getTranslations("auto.appDashboardSettingsPage");
   // Auth is served by the V2 Identity service (JWT cookie), not Supabase.
   const user = await getCurrentUser();
 
@@ -31,9 +33,9 @@ export default async function DashboardSettingsPage() {
     <div className="flex flex-1 flex-col">
       {/* Page header */}
       <header className="border-b border-gray-100 bg-white px-6 py-4">
-        <h1 className="font-heading text-xl font-bold text-neutral-900">Settings</h1>
+        <h1 className="font-heading text-xl font-bold text-neutral-900">{t("title")}</h1>
         <p className="mt-0.5 text-sm text-neutral-500">
-          Manage your account, security, and notification preferences.
+          {t("subtitle")}
         </p>
       </header>
 
@@ -47,15 +49,15 @@ export default async function DashboardSettingsPage() {
 
           {/* Danger zone */}
           <div className="rounded-xl border border-red-100 bg-white p-6">
-            <h2 className="font-heading text-base font-semibold text-red-600">Danger zone</h2>
+            <h2 className="font-heading text-base font-semibold text-red-600">{t("dangerZoneTitle")}</h2>
             <p className="mt-1 text-sm text-neutral-500">
-              Permanently delete your account and all your projects. This cannot be undone.
+              {t("dangerZoneDescription")}
             </p>
             <button
               type="button"
               className="mt-4 rounded-lg border border-red-200 px-4 py-2 text-sm font-semibold text-red-600 transition-colors hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
             >
-              Delete account
+              {t("deleteAccount")}
             </button>
           </div>
         </div>

src/app/[locale]/error.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useEffect } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -10,6 +11,8 @@ interface ErrorPageProps {
 }
 
 export default function ErrorPage({ error, reset }: ErrorPageProps) {
+  const t = useTranslations("auto.appError");
+
   useEffect(() => {
     // Surface to monitoring in production when configured
   }, [error]);
@@ -17,17 +20,17 @@ export default function ErrorPage({ error, reset }: ErrorPageProps) {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center bg-white px-4 text-center">
       <h1 className="font-heading text-2xl font-bold text-neutral-900 sm:text-3xl">
-        Something went wrong
+        {t("title")}
       </h1>
       <p className="mt-3 max-w-md text-sm text-neutral-600 sm:text-base">
-        An unexpected error occurred. Try reloading the page.
+        {t("description")}
       </p>
       <Button
         type="button"
         className="mt-8 bg-blue-600 hover:bg-blue-700"
         onClick={() => reset()}
       >
-        Reload page
+        {t("reloadButton")}
       </Button>
     </main>
   );

src/app/[locale]/image-maker/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 
 import { ImageMakerCta } from "@/components/image-maker/ImageMakerCta";
 import { ImageMakerFeatures } from "@/components/image-maker/ImageMakerFeatures";
@@ -7,12 +8,14 @@ import { ImageMakerHero } from "@/components/image-maker/ImageMakerHero";
 import { ImageMakerUseCases } from "@/components/image-maker/ImageMakerUseCases";
 import { createPageMetadata } from "@/lib/metadata";
 
-export const metadata: Metadata = createPageMetadata({
-  title: "AI Image Maker",
-  description:
-    "Design professional visuals instantly with AI generation, templates, brand kits, and batch export.",
-  path: "/image-maker",
-});
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("auto.appImageMakerPage");
+  return createPageMetadata({
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    path: "/image-maker",
+  });
+}
 
 export default function ImageMakerPage() {
   return (

src/app/[locale]/layout.tsx

@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
 import { getMessages, getTranslations } from "next-intl/server";
 import { NextIntlClientProvider } from "next-intl";
 
+import { DirectionProvider } from "@/components/layout/DirectionProvider";
 import { SiteChrome } from "@/components/layout/SiteChrome";
 import { routing } from "@/i18n/routing";
 import type { Locale } from "@/i18n/routing";
@@ -102,7 +103,6 @@ export default async function LocaleLayout({
     >
       <head>
         <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-        <link rel="preconnect" href="https://picsum.photos" />
       </head>
       <body
         className={`min-h-screen bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-50 ${
@@ -110,7 +110,9 @@ export default async function LocaleLayout({
         }`}
       >
         <NextIntlClientProvider messages={messages} locale={locale}>
-          <SiteChrome>{children}</SiteChrome>
+          <DirectionProvider dir={isRtl ? "rtl" : "ltr"}>
+            <SiteChrome>{children}</SiteChrome>
+          </DirectionProvider>
         </NextIntlClientProvider>
       </body>
     </html>

src/app/[locale]/not-found.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 
 import { Button } from "@/components/ui/button";
@@ -10,17 +11,19 @@ export const metadata: Metadata = createPageMetadata({
   path: "/404",
 });
 
-export default function NotFoundPage() {
+export default async function NotFoundPage() {
+  const t = await getTranslations("auto.appNotFound");
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-center bg-white px-4 text-center">
       <h1 className="font-heading text-2xl font-bold text-neutral-900 sm:text-3xl">
-        Page not found
+        {t("title")}
       </h1>
       <p className="mt-3 max-w-md text-sm text-neutral-600 sm:text-base">
-        The page you are looking for does not exist or may have been moved.
+        {t("description")}
       </p>
       <Button asChild className="mt-8 bg-blue-600 hover:bg-blue-700">
-        <Link href="/">Go home</Link>
+        <Link href="/">{t("goHome")}</Link>
       </Button>
     </main>
   );

src/app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 
 import { Hero } from "@/components/sections/Hero";
 import { HowItWorks } from "@/components/sections/HowItWorks";
@@ -10,12 +11,14 @@ import { Testimonials } from "@/components/sections/Testimonials";
 import { createPageMetadata } from "@/lib/metadata";
 import { fetchProjects } from "@/lib/admin-api";
 
-export const metadata: Metadata = createPageMetadata({
-  title: "Create Pro Videos & Images with AI",
-  description:
-    "FlatRender helps creators and brands make professional videos and images with AI templates, editors, and one-click export.",
-  path: "/",
-});
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("auto.appPage");
+  return createPageMetadata({
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    path: "/",
+  });
+}
 
 export default async function Home() {
   // Fetch up to 8 published projects from the admin service.

src/app/[locale]/studio/image/[projectId]/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useTranslations } from "next-intl";
 
 const ImageEditorLayout = dynamic(
   () =>
@@ -9,14 +10,19 @@ const ImageEditorLayout = dynamic(
     ),
   {
     ssr: false,
-    loading: () => (
-      <div className="flex h-screen w-screen items-center justify-center bg-gray-950 text-sm text-gray-500">
-        Loading editor…
-      </div>
-    ),
+    loading: () => <ImageEditorLoading />,
   }
 );
 
+function ImageEditorLoading() {
+  const t = useTranslations("auto.appStudioImageProjectIdPage");
+  return (
+    <div className="flex h-screen w-screen items-center justify-center bg-gray-950 text-sm text-gray-500">
+      {t("loadingEditor")}
+    </div>
+  );
+}
+
 interface ImageStudioPageProps {
   params: {
     projectId: string;

src/app/[locale]/studio/trimmer/page.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { ArrowLeft, Scissors } from "lucide-react";
 
 import { TrimmerExportSection } from "@/components/trimmer/TrimmerExportSection";
@@ -22,6 +23,7 @@ import { parseFfmpegProgress } from "@/lib/trimmer-utils";
 const INITIAL_CROP: CropBox = { x: 0, y: 0, w: 320, h: 180 };
 
 export default function VideoTrimmerPage() {
+  const t = useTranslations("auto.appStudioTrimmerPage");
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [videoUrl, setVideoUrl] = useState<string | null>(null);
   const [duration, setDuration] = useState(0);
@@ -47,16 +49,14 @@ export default function VideoTrimmerPage() {
       })
       .catch(() => {
         if (!cancelled) {
-          setFfmpegError(
-            "Failed to load FFmpeg. Check your connection and try again."
-          );
+          setFfmpegError(t("ffmpegLoadError"));
         }
       });
 
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [t]);
 
   useEffect(() => {
     return () => {
@@ -130,7 +130,7 @@ export default function VideoTrimmerPage() {
 
       setOutputUrl(URL.createObjectURL(blob));
     } catch {
-      setFfmpegError("Processing failed. Try a shorter clip or different format.");
+      setFfmpegError(t("processingError"));
     } finally {
       setIsProcessing(false);
     }
@@ -144,6 +144,7 @@ export default function VideoTrimmerPage() {
     videoSize,
     exportFormat,
     outputUrl,
+    t,
   ]);
 
   return (
@@ -155,11 +156,11 @@ export default function VideoTrimmerPage() {
             className="flex items-center gap-1 rounded-md text-sm text-gray-400 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           >
             <ArrowLeft className="h-4 w-4" aria-hidden />
-            Back
+            {t("back")}
           </Link>
           <Scissors className="h-5 w-5 text-blue-500" aria-hidden />
           <h1 className="font-heading text-lg font-semibold text-white">
-            Video Trimmer & Cropper
+            {t("title")}
           </h1>
         </div>
       </header>

src/app/[locale]/studio/video/[projectId]/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useTranslations } from "next-intl";
 
 const VideoStudioLayout = dynamic(
   () =>
@@ -9,14 +10,19 @@ const VideoStudioLayout = dynamic(
     ),
   {
     ssr: false,
-    loading: () => (
-      <div className="flex h-screen w-screen items-center justify-center bg-gray-900 text-sm text-gray-500">
-        Loading studio…
-      </div>
-    ),
+    loading: () => <VideoStudioLoading />,
   }
 );
 
+function VideoStudioLoading() {
+  const t = useTranslations("auto.appStudioVideoProjectIdPage");
+  return (
+    <div className="flex h-screen w-screen items-center justify-center bg-gray-900 text-sm text-gray-500">
+      {t("loading")}
+    </div>
+  );
+}
+
 interface VideoStudioPageProps {
   params: {
     projectId: string;

src/app/[locale]/video-maker/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 
 import { VideoMakerCta } from "@/components/video-maker/VideoMakerCta";
 import { VideoMakerFeatures } from "@/components/video-maker/VideoMakerFeatures";
@@ -7,12 +8,14 @@ import { VideoMakerTemplateCarousel } from "@/components/video-maker/VideoMakerT
 import { VideoMakerUseCases } from "@/components/video-maker/VideoMakerUseCases";
 import { createPageMetadata } from "@/lib/metadata";
 
-export const metadata: Metadata = createPageMetadata({
-  title: "AI Video Maker",
-  description:
-    "Create stunning videos in minutes with AI scripts, auto-subtitles, 500+ templates, and 1-click export.",
-  path: "/video-maker",
-});
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("auto.appVideoMakerPage");
+  return createPageMetadata({
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    path: "/video-maker",
+  });
+}
 
 export default function VideoMakerPage() {
   return (

src/app/api/admin/ai/_aiProxy.ts

@@ -0,0 +1,50 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+import { gatewayUrl } from "@/lib/api/gateway";
+import { getAccessToken } from "@/lib/auth/session";
+import { decodeJwt } from "@/lib/auth/jwt";
+
+/**
+ * Forward an admin AI request to the V2 gateway, passing the request body through
+ * and returning the gateway's JSON response (status preserved). Admin-gated.
+ */
+export async function aiProxy(
+  req: NextRequest,
+  gatewayPath: string,
+  method: "GET" | "PUT" | "POST"
+): Promise<NextResponse> {
+  const token = await getAccessToken();
+  if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const claims = decodeJwt(token);
+  const isAdmin =
+    String(claims?.is_admin) === "true" ||
+    claims?.is_admin === true ||
+    String(claims?.is_tenant_admin) === "true";
+  if (!isAdmin) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+
+  let body: string | undefined;
+  if (method !== "GET") {
+    const json = await req.json().catch(() => ({}));
+    body = JSON.stringify(json);
+  }
+
+  const res = await fetch(gatewayUrl(gatewayPath), {
+    method,
+    cache: "no-store",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body,
+  });
+
+  const data = await res.json().catch(() => null);
+  if (!res.ok) {
+    const message =
+      (data && (data.error?.message ?? data.message)) || "Gateway error";
+    return NextResponse.json({ error: message }, { status: res.status });
+  }
+  return NextResponse.json(data ?? {}, { status: 200 });
+}

src/app/api/admin/ai/generate/route.ts

@@ -0,0 +1,9 @@
+import { type NextRequest } from "next/server";
+
+import { aiProxy } from "../_aiProxy";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(req: NextRequest) {
+  return aiProxy(req, "/v1/ai/seo-post", "POST");
+}

src/app/api/admin/ai/save/route.ts

@@ -0,0 +1,10 @@
+import { type NextRequest } from "next/server";
+
+import { aiProxy } from "../_aiProxy";
+
+export const dynamic = "force-dynamic";
+
+// Save a generated article as a blog post (content-svc BlogsController, admin-gated).
+export async function POST(req: NextRequest) {
+  return aiProxy(req, "/v1/blogs", "POST");
+}

src/app/api/admin/ai/settings/route.ts

@@ -0,0 +1,13 @@
+import { type NextRequest } from "next/server";
+
+import { aiProxy } from "../_aiProxy";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  return aiProxy(req, "/v1/ai/settings", "GET");
+}
+
+export async function PUT(req: NextRequest) {
+  return aiProxy(req, "/v1/ai/settings", "PUT");
+}

src/app/api/admin/resource/[...path]/route.ts

@@ -0,0 +1,96 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+import { gatewayUrl } from "@/lib/api/gateway";
+import { getAccessToken } from "@/lib/auth/session";
+import { decodeJwt } from "@/lib/auth/jwt";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Generic admin proxy: forwards GET/POST/PUT/DELETE for any admin resource to the V2
+ * gateway under /v1/<path>, attaching the admin's bearer token. Admin-gated server-side.
+ *
+ *   /api/admin/resource/categories          → /v1/categories
+ *   /api/admin/resource/categories/<id>     → /v1/categories/<id>
+ *   /api/admin/resource/users?page=1        → /v1/users?page=1
+ *
+ * Query string is preserved.
+ */
+async function forward(
+  req: NextRequest,
+  path: string[],
+  method: "GET" | "POST" | "PUT" | "DELETE"
+): Promise<NextResponse> {
+  const token = await getAccessToken();
+  if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const claims = decodeJwt(token);
+  const isAdmin =
+    String(claims?.is_admin) === "true" ||
+    claims?.is_admin === true ||
+    String(claims?.is_tenant_admin) === "true";
+  if (!isAdmin) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+
+  const search = req.nextUrl.search ?? "";
+  // Trailing slash on the collection root avoids the gateway's 307 redirect.
+  const joined = path.join("/");
+  const gwPath = `/v1/${joined}${path.length === 1 && method === "GET" ? "/" : ""}${search}`;
+
+  let body: string | undefined;
+  if (method === "POST" || method === "PUT") {
+    const json = await req.json().catch(() => ({}));
+    body = JSON.stringify(json);
+  }
+
+  const res = await fetch(gatewayUrl(gwPath), {
+    method,
+    cache: "no-store",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body,
+    redirect: "follow",
+  });
+
+  const text = await res.text();
+  const data = text ? safeJson(text) : null;
+  if (!res.ok) {
+    const errObj = data?.error;
+    const message =
+      (typeof errObj === "object" && errObj?.message) ||
+      (typeof errObj === "string" ? errObj : undefined) ||
+      data?.message ||
+      "Gateway error";
+    return NextResponse.json({ error: message }, { status: res.status });
+  }
+  return NextResponse.json(data ?? {}, { status: 200 });
+}
+
+interface GatewayResponse {
+  error?: { message?: string } | string;
+  message?: string;
+  [key: string]: unknown;
+}
+
+function safeJson(t: string): GatewayResponse | null {
+  try {
+    return JSON.parse(t) as GatewayResponse;
+  } catch {
+    return null;
+  }
+}
+
+export async function GET(req: NextRequest, ctx: { params: { path: string[] } }) {
+  return forward(req, ctx.params.path, "GET");
+}
+export async function POST(req: NextRequest, ctx: { params: { path: string[] } }) {
+  return forward(req, ctx.params.path, "POST");
+}
+export async function PUT(req: NextRequest, ctx: { params: { path: string[] } }) {
+  return forward(req, ctx.params.path, "PUT");
+}
+export async function DELETE(req: NextRequest, ctx: { params: { path: string[] } }) {
+  return forward(req, ctx.params.path, "DELETE");
+}

src/app/api/placeholder/[width]/[height]/route.ts

@@ -0,0 +1,51 @@
+import { type NextRequest } from "next/server";
+
+// Deterministic, dependency-free placeholder image generator. Returns an SVG gradient
+// derived from the `seed` query param so each placeholder is stable and distinct.
+// Same-origin and offline — replaces external picsum.photos in restricted networks.
+
+function hashString(s: string): number {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = (h << 5) - h + s.charCodeAt(i);
+    h |= 0; // force 32-bit
+  }
+  return Math.abs(h);
+}
+
+function clampDim(raw: string, fallback: number): number {
+  const n = parseInt(raw, 10);
+  if (!Number.isFinite(n)) return fallback;
+  return Math.min(2000, Math.max(1, n));
+}
+
+export function GET(
+  req: NextRequest,
+  context: { params: { width: string; height: string } }
+) {
+  const { width, height } = context.params;
+  const w = clampDim(width, 400);
+  const h = clampDim(height, 300);
+  const seed = req.nextUrl.searchParams.get("seed") ?? "flatrender";
+
+  const hash = hashString(seed);
+  const hue1 = hash % 360;
+  const hue2 = (hue1 + 40 + (hash % 80)) % 360;
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="hsl(${hue1} 64% 58%)"/>
+      <stop offset="100%" stop-color="hsl(${hue2} 58% 42%)"/>
+    </linearGradient>
+  </defs>
+  <rect width="${w}" height="${h}" fill="url(#g)"/>
+</svg>`;
+
+  return new Response(svg, {
+    headers: {
+      "Content-Type": "image/svg+xml",
+      "Cache-Control": "public, max-age=31536000, immutable",
+    },
+  });
+}

src/components/admin/AdminResource.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+
+export interface FieldDef {
+  key: string;
+  label: string;
+  type?: "text" | "textarea" | "number" | "checkbox" | "select";
+  options?: { value: string; label: string }[];
+  required?: boolean;
+  placeholder?: string;
+  defaultValue?: string | number | boolean;
+}
+
+export interface ColumnDef {
+  key: string;
+  label: string;
+  render?: (row: Record<string, unknown>) => ReactNode;
+}
+
+export interface ResourceConfig {
+  title: string;
+  description?: string;
+  basePath: string; // e.g. "categories"
+  idKey?: string; // default "id"
+  listKey?: string; // wrap key, e.g. "items"; omit if response is a bare array
+  columns: ColumnDef[];
+  fields?: FieldDef[];
+  canCreate?: boolean;
+  canEdit?: boolean;
+  canDelete?: boolean;
+  rowActions?: (row: Record<string, unknown>, reload: () => void) => ReactNode;
+}
+
+const card = "rounded-xl border border-[#1e2235] bg-[#0f1120]";
+const btn = "rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50";
+const btnGhost = "rounded-lg border border-[#262b40] px-3 py-1.5 text-xs text-gray-300 hover:bg-[#161a2e]";
+const inputCls = "w-full rounded-lg border border-[#262b40] bg-[#0c0e1a] px-3 py-2 text-sm text-gray-100 outline-none focus:border-indigo-500";
+
+export function AdminResource({ config }: { config: ResourceConfig }) {
+  const idKey = config.idKey ?? "id";
+  const [rows, setRows] = useState<Record<string, unknown>[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editing, setEditing] = useState<Record<string, unknown> | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState<Record<string, unknown>>({});
+  const [saving, setSaving] = useState(false);
+
+  const url = (suffix = "") => `/api/admin/resource/${config.basePath}${suffix}`;
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(url(), { cache: "no-store" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data?.error ?? "Failed to load");
+      const list = config.listKey ? data?.[config.listKey] : data;
+      setRows(Array.isArray(list) ? list : (data?.items ?? []));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load");
+    } finally {
+      setLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.basePath, config.listKey]);
+
+  useEffect(() => {
+    reload();
+  }, [reload]);
+
+  const openCreate = () => {
+    const init: Record<string, unknown> = {};
+    config.fields?.forEach((f) => (init[f.key] = f.defaultValue ?? (f.type === "checkbox" ? false : "")));
+    setForm(init);
+    setCreating(true);
+    setEditing(null);
+  };
+
+  const openEdit = (row: Record<string, unknown>) => {
+    const init: Record<string, unknown> = {};
+    config.fields?.forEach((f) => (init[f.key] = row[f.key] ?? (f.type === "checkbox" ? false : "")));
+    setForm(init);
+    setEditing(row);
+    setCreating(false);
+  };
+
+  const closeForm = () => {
+    setCreating(false);
+    setEditing(null);
+    setForm({});
+  };
+
+  const submit = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const isEdit = !!editing;
+      const res = await fetch(isEdit ? url(`/${editing![idKey]}`) : url(), {
+        method: isEdit ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      const data = await res.json().catch(() => null);
+      if (!res.ok) throw new Error(data?.error ?? "Save failed");
+      closeForm();
+      reload();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (row: Record<string, unknown>) => {
+    if (!confirm(`Delete this ${config.title.replace(/s$/, "").toLowerCase()}?`)) return;
+    const res = await fetch(url(`/${row[idKey]}`), { method: "DELETE" });
+    if (res.ok) reload();
+    else {
+      const d = await res.json().catch(() => null);
+      setError(d?.error ?? "Delete failed");
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-white">{config.title}</h1>
+          {config.description && <p className="mt-1 text-sm text-gray-400">{config.description}</p>}
+        </div>
+        {config.canCreate && config.fields && (
+          <button className={btn} onClick={openCreate}>+ New</button>
+        )}
+      </div>
+
+      {error && <p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-300">{error}</p>}
+
+      <div className={`${card} overflow-hidden`}>
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-[#1e2235] text-left text-xs text-gray-500">
+              {config.columns.map((c) => (
+                <th key={c.key} className="px-4 py-3 font-medium">{c.label}</th>
+              ))}
+              {(config.canEdit || config.canDelete || config.rowActions) && (
+                <th className="px-4 py-3 text-right font-medium">Actions</th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td className="px-4 py-8 text-center text-gray-500" colSpan={99}>Loading…</td></tr>
+            ) : rows.length === 0 ? (
+              <tr><td className="px-4 py-8 text-center text-gray-500" colSpan={99}>No records.</td></tr>
+            ) : (
+              rows.map((row, i) => (
+                <tr key={String(row[idKey] ?? i)} className="border-b border-[#161a2e] hover:bg-[#12152a]">
+                  {config.columns.map((c) => (
+                    <td key={c.key} className="px-4 py-3 text-gray-200">
+                      {c.render ? c.render(row) : formatCell(row[c.key])}
+                    </td>
+                  ))}
+                  {(config.canEdit || config.canDelete || config.rowActions) && (
+                    <td className="px-4 py-3">
+                      <div className="flex items-center justify-end gap-2">
+                        {config.rowActions?.(row, reload)}
+                        {config.canEdit && config.fields && (
+                          <button className={btnGhost} onClick={() => openEdit(row)}>Edit</button>
+                        )}
+                        {config.canDelete && (
+                          <button
+                            className="rounded-lg border border-red-500/30 px-3 py-1.5 text-xs text-red-300 hover:bg-red-500/10"
+                            onClick={() => remove(row)}
+                          >
+                            Delete
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  )}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {(creating || editing) && config.fields && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={closeForm}>
+          <div className={`${card} w-full max-w-lg p-5`} onClick={(e) => e.stopPropagation()}>
+            <h2 className="text-sm font-semibold text-white">
+              {editing ? "Edit" : "New"} {config.title.replace(/s$/, "")}
+            </h2>
+            <div className="mt-4 grid max-h-[60vh] gap-3 overflow-y-auto pr-1">
+              {config.fields.map((f) => (
+                <div key={f.key}>
+                  {f.type !== "checkbox" && (
+                    <label className="mb-1 block text-xs font-medium text-gray-400">
+                      {f.label}{f.required && <span className="text-red-400"> *</span>}
+                    </label>
+                  )}
+                  {f.type === "textarea" ? (
+                    <textarea className={`${inputCls} min-h-[80px]`} placeholder={f.placeholder}
+                      value={String(form[f.key] ?? "")} onChange={(e) => setForm({ ...form, [f.key]: e.target.value })} />
+                  ) : f.type === "select" ? (
+                    <select className={inputCls} value={String(form[f.key] ?? "")}
+                      onChange={(e) => setForm({ ...form, [f.key]: e.target.value })}>
+                      <option value="">—</option>
+                      {f.options?.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+                    </select>
+                  ) : f.type === "checkbox" ? (
+                    <label className="flex items-center gap-2 text-sm text-gray-300">
+                      <input type="checkbox" checked={!!form[f.key]} onChange={(e) => setForm({ ...form, [f.key]: e.target.checked })} />
+                      {f.label}
+                    </label>
+                  ) : (
+                    <input type={f.type === "number" ? "number" : "text"} className={inputCls} placeholder={f.placeholder}
+                      value={String(form[f.key] ?? "")}
+                      onChange={(e) => setForm({ ...form, [f.key]: f.type === "number" ? Number(e.target.value) : e.target.value })} />
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="mt-5 flex items-center justify-end gap-2">
+              <button className={btnGhost} onClick={closeForm}>Cancel</button>
+              <button className={btn} onClick={submit} disabled={saving}>{saving ? "Saving…" : "Save"}</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatCell(v: unknown): ReactNode {
+  if (v === null || v === undefined || v === "") return <span className="text-gray-600">—</span>;
+  if (typeof v === "boolean") return v ? "✓" : "✗";
+  if (Array.isArray(v)) return v.join(", ");
+  if (typeof v === "object") return JSON.stringify(v).slice(0, 40);
+  const s = String(v);
+  return s.length > 60 ? s.slice(0, 60) + "…" : s;
+}

src/components/admin/AiContentStudio.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+
+interface AiSettings {
+  provider: string;
+  base_url: string;
+  model: string;
+  enabled: boolean;
+  has_api_key: boolean;
+  api_key_masked: string | null;
+}
+
+interface SeoPost {
+  title: string;
+  slug: string;
+  meta_title: string;
+  meta_description: string;
+  keywords: string[];
+  short_description: string;
+  content_html: string;
+}
+
+const card = "rounded-xl border border-[#1e2235] bg-[#0f1120] p-5";
+const label = "block text-xs font-medium text-gray-400 mb-1";
+const input =
+  "w-full rounded-lg border border-[#262b40] bg-[#0c0e1a] px-3 py-2 text-sm text-gray-100 outline-none focus:border-indigo-500";
+const btn =
+  "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50";
+const btnGhost =
+  "rounded-lg border border-[#262b40] px-4 py-2 text-sm text-gray-300 hover:bg-[#161a2e] disabled:opacity-50";
+
+export function AiContentStudio() {
+  const t = useTranslations("auto.adminAi");
+
+  const [settings, setSettings] = useState<AiSettings | null>(null);
+  const [apiKey, setApiKey] = useState("");
+  const [savingSettings, setSavingSettings] = useState(false);
+  const [settingsMsg, setSettingsMsg] = useState<string | null>(null);
+
+  // Generation form
+  const [description, setDescription] = useState("");
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState("");
+  const [tags, setTags] = useState("");
+  const [keyword, setKeyword] = useState("");
+  const [audience, setAudience] = useState("");
+  const [locale, setLocale] = useState("fa");
+
+  const [generating, setGenerating] = useState(false);
+  const [genError, setGenError] = useState<string | null>(null);
+  const [post, setPost] = useState<SeoPost | null>(null);
+  const [publishNow, setPublishNow] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saveMsg, setSaveMsg] = useState<string | null>(null);
+
+  const loadSettings = useCallback(async () => {
+    const res = await fetch("/api/admin/ai/settings", { cache: "no-store" });
+    if (res.ok) setSettings(await res.json());
+  }, []);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  const saveSettings = async () => {
+    if (!settings) return;
+    setSavingSettings(true);
+    setSettingsMsg(null);
+    const res = await fetch("/api/admin/ai/settings", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        provider: settings.provider,
+        base_url: settings.base_url,
+        model: settings.model,
+        enabled: settings.enabled,
+        api_key: apiKey.trim() === "" ? null : apiKey.trim(),
+      }),
+    });
+    if (res.ok) {
+      setSettings(await res.json());
+      setApiKey("");
+      setSettingsMsg(t("settingsSaved"));
+    } else {
+      setSettingsMsg(t("settingsError"));
+    }
+    setSavingSettings(false);
+  };
+
+  const generate = async () => {
+    setGenerating(true);
+    setGenError(null);
+    setSaveMsg(null);
+    const res = await fetch("/api/admin/ai/generate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        description,
+        title: title || null,
+        type: type || null,
+        tags: tags ? tags.split(",").map((s) => s.trim()).filter(Boolean) : null,
+        keyword: keyword || null,
+        audience: audience || null,
+        locale,
+      }),
+    });
+    const data = await res.json().catch(() => null);
+    if (res.ok) setPost(data);
+    else setGenError(data?.error ?? t("generateError"));
+    setGenerating(false);
+  };
+
+  const saveAsBlog = async () => {
+    if (!post) return;
+    setSaving(true);
+    setSaveMsg(null);
+    const res = await fetch("/api/admin/ai/save", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        slug: post.slug,
+        title: post.title,
+        short_description: post.short_description,
+        content: post.content_html,
+        meta_title: post.meta_title,
+        meta_description: post.meta_description,
+        meta_keywords: post.keywords.join(", "),
+        include_in_site_map: true,
+        is_published: publishNow,
+      }),
+    });
+    setSaveMsg(res.ok ? t("savedAsBlog") : t("saveError"));
+    setSaving(false);
+  };
+
+  const setPostField = (k: keyof SeoPost, v: string) =>
+    setPost((p) => (p ? { ...p, [k]: v } : p));
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold text-white">{t("pageTitle")}</h1>
+        <p className="mt-1 text-sm text-gray-400">{t("pageDesc")}</p>
+      </div>
+
+      {/* ── Settings ─────────────────────────────────────────── */}
+      <section className={card}>
+        <h2 className="text-sm font-semibold text-white">{t("settingsTitle")}</h2>
+        <p className="mt-1 text-xs text-gray-500">{t("settingsDesc")}</p>
+        {settings && (
+          <div className="mt-4 grid gap-4 sm:grid-cols-2">
+            <div className="sm:col-span-2">
+              <label className={label}>{t("apiKeyLabel")}</label>
+              <input
+                className={input}
+                type="password"
+                placeholder={settings.api_key_masked ?? t("apiKeyPlaceholder")}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+              />
+              <p className="mt-1 text-[11px] text-gray-500">
+                {settings.has_api_key ? `✓ ${t("keyConfigured")}` : t("noKey")}
+              </p>
+            </div>
+            <div>
+              <label className={label}>{t("baseUrlLabel")}</label>
+              <input
+                className={input}
+                value={settings.base_url}
+                onChange={(e) => setSettings({ ...settings, base_url: e.target.value })}
+              />
+            </div>
+            <div>
+              <label className={label}>{t("modelLabel")}</label>
+              <input
+                className={input}
+                value={settings.model}
+                onChange={(e) => setSettings({ ...settings, model: e.target.value })}
+              />
+            </div>
+            <label className="flex items-center gap-2 text-sm text-gray-300">
+              <input
+                type="checkbox"
+                checked={settings.enabled}
+                onChange={(e) => setSettings({ ...settings, enabled: e.target.checked })}
+              />
+              {t("enabledLabel")}
+            </label>
+            <div className="flex items-center gap-3 sm:col-span-2">
+              <button className={btn} onClick={saveSettings} disabled={savingSettings}>
+                {savingSettings ? t("saving") : t("saveSettings")}
+              </button>
+              {settingsMsg && <span className="text-xs text-gray-400">{settingsMsg}</span>}
+            </div>
+          </div>
+        )}
+      </section>
+
+      {/* ── Generator ────────────────────────────────────────── */}
+      <section className={card}>
+        <h2 className="text-sm font-semibold text-white">{t("generateTitle")}</h2>
+        <p className="mt-1 text-xs text-gray-500">{t("generateDesc")}</p>
+        {settings && !settings.enabled && (
+          <p className="mt-3 rounded-lg bg-amber-500/10 px-3 py-2 text-xs text-amber-300">
+            {t("mustConfigure")}
+          </p>
+        )}
+        <div className="mt-4 grid gap-4">
+          <div>
+            <label className={label}>{t("descriptionLabel")}</label>
+            <textarea
+              className={`${input} min-h-[100px]`}
+              placeholder={t("descriptionPlaceholder")}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className={label}>{t("titleLabel")}</label>
+              <input className={input} value={title} onChange={(e) => setTitle(e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("typeLabel")}</label>
+              <input className={input} placeholder={t("typePlaceholder")} value={type} onChange={(e) => setType(e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("keywordLabel")}</label>
+              <input className={input} value={keyword} onChange={(e) => setKeyword(e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("audienceLabel")}</label>
+              <input className={input} value={audience} onChange={(e) => setAudience(e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("tagsLabel")}</label>
+              <input className={input} value={tags} onChange={(e) => setTags(e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("localeLabel")}</label>
+              <select className={input} value={locale} onChange={(e) => setLocale(e.target.value)}>
+                <option value="fa">{t("localeFa")}</option>
+                <option value="en">{t("localeEn")}</option>
+              </select>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <button className={btn} onClick={generate} disabled={generating || !description.trim()}>
+              {generating ? t("generating") : t("generate")}
+            </button>
+            {genError && <span className="text-xs text-red-400">{genError}</span>}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Result ───────────────────────────────────────────── */}
+      {post && (
+        <section className={card}>
+          <h2 className="text-sm font-semibold text-white">{t("resultTitle")}</h2>
+          <div className="mt-4 grid gap-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label className={label}>{t("fTitle")}</label>
+                <input className={input} value={post.title} onChange={(e) => setPostField("title", e.target.value)} />
+              </div>
+              <div>
+                <label className={label}>{t("fSlug")}</label>
+                <input className={input} value={post.slug} onChange={(e) => setPostField("slug", e.target.value)} />
+              </div>
+              <div>
+                <label className={label}>{t("fMetaTitle")}</label>
+                <input className={input} value={post.meta_title} onChange={(e) => setPostField("meta_title", e.target.value)} />
+              </div>
+              <div>
+                <label className={label}>{t("fKeywords")}</label>
+                <input className={input} value={post.keywords.join(", ")} onChange={(e) => setPost({ ...post, keywords: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) })} />
+              </div>
+            </div>
+            <div>
+              <label className={label}>{t("fMetaDesc")}</label>
+              <textarea className={`${input} min-h-[60px]`} value={post.meta_description} onChange={(e) => setPostField("meta_description", e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("fShortDesc")}</label>
+              <textarea className={`${input} min-h-[60px]`} value={post.short_description} onChange={(e) => setPostField("short_description", e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("fContent")}</label>
+              <textarea className={`${input} min-h-[200px] font-mono text-xs`} value={post.content_html} onChange={(e) => setPostField("content_html", e.target.value)} />
+            </div>
+            <div>
+              <label className={label}>{t("preview")}</label>
+              <div
+                className="prose prose-invert max-w-none rounded-lg border border-[#262b40] bg-white p-4 text-black"
+                dangerouslySetInnerHTML={{ __html: post.content_html }}
+              />
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <label className="flex items-center gap-2 text-sm text-gray-300">
+                <input type="checkbox" checked={publishNow} onChange={(e) => setPublishNow(e.target.checked)} />
+                {t("publishNow")}
+              </label>
+              <button className={btnGhost} onClick={saveAsBlog} disabled={saving}>
+                {saving ? t("saving") : t("saveAsBlog")}
+              </button>
+              {saveMsg && <span className="text-xs text-gray-400">{saveMsg}</span>}
+            </div>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

src/components/admin/NodesTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { apiFetch } from "@/lib/api/fetch";
 import { useRouter } from "next/navigation";
 
@@ -31,6 +32,7 @@ function heartbeatAge(iso: string): string {
 }
 
 export function NodesTable({ nodes }: { nodes: V2Node[] }) {
+  const t = useTranslations("auto.componentsAdminNodesTable");
   const router = useRouter();
   const [loading, setLoading] = useState<Record<string, boolean>>({});
 
@@ -47,7 +49,7 @@ export function NodesTable({ nodes }: { nodes: V2Node[] }) {
   if (nodes.length === 0) {
     return (
       <div className="rounded-xl border border-[#1e2235] bg-[#0f1120] px-6 py-16 text-center text-sm text-gray-500">
-        No nodes registered. Start the node agent on a render machine to see it here.
+        {t("emptyState")}
       </div>
     );
   }
@@ -57,13 +59,13 @@ export function NodesTable({ nodes }: { nodes: V2Node[] }) {
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-[#1e2235] bg-[#0f1120] text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-            <th className="px-4 py-3">Node</th>
-            <th className="px-4 py-3">Status</th>
-            <th className="px-4 py-3">Slots</th>
-            <th className="px-4 py-3">Heartbeat</th>
-            <th className="px-4 py-3">Active Job</th>
-            <th className="px-4 py-3">Tags</th>
-            <th className="px-4 py-3">Actions</th>
+            <th className="px-4 py-3">{t("colNode")}</th>
+            <th className="px-4 py-3">{t("colStatus")}</th>
+            <th className="px-4 py-3">{t("colSlots")}</th>
+            <th className="px-4 py-3">{t("colHeartbeat")}</th>
+            <th className="px-4 py-3">{t("colActiveJob")}</th>
+            <th className="px-4 py-3">{t("colTags")}</th>
+            <th className="px-4 py-3">{t("colActions")}</th>
           </tr>
         </thead>
         <tbody className="divide-y divide-[#1e2235] bg-[#0c0e1a]">
@@ -103,14 +105,14 @@ export function NodesTable({ nodes }: { nodes: V2Node[] }) {
                     disabled={loading[node.id] || node.status === "Offline"}
                     className="rounded px-2.5 py-1 text-xs text-yellow-300 border border-yellow-500/30 hover:bg-yellow-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   >
-                    Drain
+                    {t("actionDrain")}
                   </button>
                   <button
                     onClick={() => action(node.id, "release")}
                     disabled={loading[node.id]}
                     className="rounded px-2.5 py-1 text-xs text-red-300 border border-red-500/30 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   >
-                    Release
+                    {t("actionRelease")}
                   </button>
                 </div>
               </td>

src/components/admin/RenderQueueTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api/fetch";
 import type { V2RenderJob } from "@/app/[locale]/admin/renders/page";
@@ -33,6 +34,7 @@ function relativeTime(iso: string): string {
 }
 
 export function RenderQueueTable({ jobs }: { jobs: V2RenderJob[] }) {
+  const t = useTranslations("auto.componentsAdminRenderQueueTable");
   const router = useRouter();
   const [loading, setLoading] = useState<Record<string, boolean>>({});
 
@@ -59,7 +61,7 @@ export function RenderQueueTable({ jobs }: { jobs: V2RenderJob[] }) {
   if (jobs.length === 0) {
     return (
       <div className="rounded-xl border border-[#1e2235] bg-[#0f1120] px-6 py-16 text-center text-sm text-gray-500">
-        No render jobs found for the selected filter.
+        {t("emptyState")}
       </div>
     );
   }
@@ -69,14 +71,14 @@ export function RenderQueueTable({ jobs }: { jobs: V2RenderJob[] }) {
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-[#1e2235] bg-[#0f1120] text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-            <th className="px-4 py-3">Job ID</th>
-            <th className="px-4 py-3">Project</th>
-            <th className="px-4 py-3">Step</th>
-            <th className="px-4 py-3">Progress</th>
-            <th className="px-4 py-3">Quality</th>
-            <th className="px-4 py-3">Node</th>
-            <th className="px-4 py-3">Created</th>
-            <th className="px-4 py-3">Actions</th>
+            <th className="px-4 py-3">{t("colJobId")}</th>
+            <th className="px-4 py-3">{t("colProject")}</th>
+            <th className="px-4 py-3">{t("colStep")}</th>
+            <th className="px-4 py-3">{t("colProgress")}</th>
+            <th className="px-4 py-3">{t("colQuality")}</th>
+            <th className="px-4 py-3">{t("colNode")}</th>
+            <th className="px-4 py-3">{t("colCreated")}</th>
+            <th className="px-4 py-3">{t("colActions")}</th>
           </tr>
         </thead>
         <tbody className="divide-y divide-[#1e2235] bg-[#0c0e1a]">
@@ -133,7 +135,7 @@ export function RenderQueueTable({ jobs }: { jobs: V2RenderJob[] }) {
                         disabled={loading[job.id]}
                         className="rounded px-2.5 py-1 text-xs text-emerald-300 border border-emerald-500/30 hover:bg-emerald-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                       >
-                        Retry
+                        {t("actionRetry")}
                       </button>
                     )}
                     {canCancel && (
@@ -142,7 +144,7 @@ export function RenderQueueTable({ jobs }: { jobs: V2RenderJob[] }) {
                         disabled={loading[job.id]}
                         className="rounded px-2.5 py-1 text-xs text-red-300 border border-red-500/30 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                       >
-                        Cancel
+                        {t("actionCancel")}
                       </button>
                     )}
                   </div>

src/components/admin/admin-resources.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import type { ResourceConfig } from "@/components/admin/AdminResource";
+
+const badge = (ok: boolean, yes: string, no: string) =>
+  ok ? (
+    <span className="rounded bg-emerald-500/15 px-1.5 py-0.5 text-[11px] text-emerald-300">{yes}</span>
+  ) : (
+    <span className="rounded bg-gray-500/15 px-1.5 py-0.5 text-[11px] text-gray-400">{no}</span>
+  );
+
+const banAction = (row: Record<string, unknown>, reload: () => void) => {
+  const banned = !!row.ban_account;
+  return (
+    <button
+      className={
+        banned
+          ? "rounded-lg border border-emerald-500/30 px-3 py-1.5 text-xs text-emerald-300 hover:bg-emerald-500/10"
+          : "rounded-lg border border-red-500/30 px-3 py-1.5 text-xs text-red-300 hover:bg-red-500/10"
+      }
+      onClick={async () => {
+        const reason = banned ? "" : prompt("Ban reason?") ?? "";
+        if (!banned && !reason) return;
+        const res = await fetch(`/api/admin/resource/users/${row.id}/ban`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ reason: banned ? "unban" : reason, unbanned: banned }),
+        });
+        if (res.ok) reload();
+      }}
+    >
+      {banned ? "Unban" : "Ban"}
+    </button>
+  );
+};
+
+export const categoriesConfig: ResourceConfig = {
+  title: "Categories",
+  description: "Taxonomy used across templates and the public site.",
+  basePath: "categories",
+  canCreate: true,
+  canEdit: true,
+  canDelete: true,
+  columns: [
+    { key: "name", label: "Name" },
+    { key: "slug", label: "Slug" },
+    { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },
+    { key: "sort", label: "Sort" },
+  ],
+  fields: [
+    { key: "name", label: "Name", required: true },
+    { key: "slug", label: "Slug", required: true },
+    { key: "description", label: "Description", type: "textarea" },
+    { key: "image_url", label: "Image URL" },
+    { key: "icon", label: "Icon" },
+  ],
+};
+
+export const tagsConfig: ResourceConfig = {
+  title: "Tags",
+  description: "Keyword tags for templates and content.",
+  basePath: "tags",
+  listKey: "items",
+  canCreate: true,
+  canEdit: true,
+  canDelete: true,
+  columns: [
+    { key: "name", label: "Name" },
+    { key: "slug", label: "Slug" },
+    { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },
+  ],
+  fields: [
+    { key: "name", label: "Name", required: true },
+    { key: "latin_name", label: "Latin name" },
+    { key: "slug", label: "Slug", required: true },
+    { key: "is_active", label: "Active", type: "checkbox", defaultValue: true },
+  ],
+};
+
+export const fontsConfig: ResourceConfig = {
+  title: "Fonts",
+  description: "Fonts available in the studio editors.",
+  basePath: "fonts",
+  listKey: "items",
+  canCreate: true,
+  canEdit: true,
+  canDelete: true,
+  columns: [
+    { key: "name", label: "Name" },
+    { key: "family", label: "Family" },
+    { key: "weight", label: "Weight" },
+    { key: "style", label: "Style" },
+  ],
+  fields: [
+    { key: "name", label: "Name", required: true },
+    { key: "original_name", label: "Original name" },
+    { key: "system_name", label: "System name" },
+    { key: "family", label: "Family" },
+    { key: "weight", label: "Weight", type: "number" },
+    { key: "style", label: "Style" },
+  ],
+};
+
+export const blogsConfig: ResourceConfig = {
+  title: "Blog Posts",
+  description: "CMS articles (also created by the AI SEO generator).",
+  basePath: "blogs",
+  listKey: "items",
+  canCreate: true,
+  canEdit: true,
+  canDelete: true,
+  columns: [
+    { key: "title", label: "Title" },
+    { key: "slug", label: "Slug" },
+    { key: "is_published", label: "Published", render: (r) => badge(!!r.is_published, "live", "draft") },
+    { key: "view_count", label: "Views" },
+  ],
+  fields: [
+    { key: "title", label: "Title", required: true },
+    { key: "slug", label: "Slug", required: true },
+    { key: "short_description", label: "Short description", type: "textarea" },
+    { key: "content", label: "Content (HTML)", type: "textarea", required: true },
+    { key: "meta_title", label: "Meta title" },
+    { key: "meta_description", label: "Meta description", type: "textarea" },
+    { key: "meta_keywords", label: "Meta keywords" },
+    { key: "is_published", label: "Published", type: "checkbox" },
+    { key: "include_in_site_map", label: "Include in sitemap", type: "checkbox", defaultValue: true },
+  ],
+};
+
+export const slidesConfig: ResourceConfig = {
+  title: "Home Slides",
+  description: "Hero/promo slides on the homepage.",
+  basePath: "slides",
+  canDelete: true,
+  columns: [
+    { key: "title", label: "Title" },
+    { key: "slide_type", label: "Type" },
+    { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },
+  ],
+};
+
+export const usersConfig: ResourceConfig = {
+  title: "Users",
+  description: "Accounts in this tenant. Ban or unban below.",
+  basePath: "users",
+  listKey: "data",
+  columns: [
+    { key: "email", label: "Email" },
+    { key: "full_name", label: "Name" },
+    { key: "is_admin", label: "Admin", render: (r) => badge(!!r.is_admin, "admin", "—") },
+    { key: "register_mode", label: "Source" },
+    { key: "ban_account", label: "Status", render: (r) => badge(!r.ban_account, "active", "banned") },
+  ],
+  rowActions: banAction,
+};
+
+export const plansConfig: ResourceConfig = {
+  title: "Plans",
+  description: "Subscription plans (read-only view).",
+  basePath: "plans",
+  listKey: "data",
+  columns: [
+    { key: "code", label: "Code" },
+    { key: "name", label: "Name" },
+    { key: "price_minor", label: "Price (minor)" },
+    { key: "billing_period", label: "Period" },
+    { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "off") },
+  ],
+};

src/components/auth/AuthPageContent.tsx

@@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import { useForm } from "react-hook-form";
+import { useTranslations } from "next-intl";
 
 import { AuthLoadingSpinner } from "@/components/auth/AuthLoadingSpinner";
 import { authFormSchema, type AuthFormValues } from "@/components/auth/auth-schemas";
@@ -22,6 +23,7 @@ function safeNext(next: string | null): string {
 }
 
 export function AuthPageContent() {
+  const t = useTranslations("auto.componentsAuthAuthPageContent");
   const router = useRouter();
   const searchParams = useSearchParams();
   const nextPath = safeNext(searchParams.get("next"));
@@ -107,7 +109,7 @@ export function AuthPageContent() {
       const data = await res.json().catch(() => null);
 
       if (!res.ok) {
-        setFormError(data?.error ?? "Something went wrong. Please try again.");
+        setFormError(data?.error ?? t("genericError"));
         setSubmitting(false);
         return;
       }
@@ -115,8 +117,8 @@ export function AuthPageContent() {
       if (data?.registered && !data?.user) {
         setFormMessage(
           data.verificationRequired
-            ? "Account created. Check your email to verify, then sign in."
-            : "Account created. Please sign in."
+            ? t("accountCreatedVerify")
+            : t("accountCreatedSignIn")
         );
         setActiveTab("sign-in");
         reset();
@@ -127,7 +129,7 @@ export function AuthPageContent() {
       router.replace(nextPath);
       router.refresh();
     } catch {
-      setFormError("Network error. Please try again.");
+      setFormError(t("networkError"));
       setSubmitting(false);
     }
   };
@@ -146,9 +148,9 @@ export function AuthPageContent() {
       });
       // Always succeed (anti-enumeration)
       setView("reset-confirm");
-      setFormMessage("If that email is registered, we sent a reset code.");
+      setFormMessage(t("resetCodeSent"));
     } catch {
-      setFormError("Network error. Please try again.");
+      setFormError(t("networkError"));
     } finally {
       setSubmitting(false);
     }
@@ -168,13 +170,13 @@ export function AuthPageContent() {
       });
       const data = await res.json().catch(() => null) as { error?: string } | null;
       if (!res.ok) {
-        setFormError(data?.error ?? "Invalid or expired code.");
+        setFormError(data?.error ?? t("invalidCode"));
       } else {
-        setFormMessage("Password updated. You can now sign in.");
+        setFormMessage(t("passwordUpdated"));
         goBack();
       }
     } catch {
-      setFormError("Network error. Please try again.");
+      setFormError(t("networkError"));
     } finally {
       setSubmitting(false);
     }
@@ -183,7 +185,7 @@ export function AuthPageContent() {
   if (authLoading) {
     return (
       <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center py-20">
-        <AuthLoadingSpinner label="Checking authentication..." />
+        <AuthLoadingSpinner label={t("checkingAuth")} />
       </div>
     );
   }
@@ -194,12 +196,12 @@ export function AuthPageContent() {
       <div className="mx-auto w-full max-w-md px-4 py-12 sm:py-16">
         <div className="text-center">
           <h1 className="font-heading text-2xl font-bold text-neutral-900">
-            {view === "forgot-password" ? "Reset your password" : "Enter reset code"}
+            {view === "forgot-password" ? t("resetTitle") : t("enterCodeTitle")}
           </h1>
           <p className="mt-2 text-sm text-neutral-600">
             {view === "forgot-password"
-              ? "We'll send a one-time code to your email."
-              : `Check your email for the code sent to ${resetEmail}`}
+              ? t("resetSubtitle")
+              : t("enterCodeSubtitle", { email: resetEmail })}
           </p>
         </div>
 
@@ -208,7 +210,7 @@ export function AuthPageContent() {
             <form onSubmit={handleForgotRequest} className="space-y-4" noValidate>
               <div>
                 <label htmlFor="reset-email" className="block text-sm font-medium text-neutral-700">
-                  Email address
+                  {t("emailAddressLabel")}
                 </label>
                 <input
                   id="reset-email"
@@ -223,14 +225,14 @@ export function AuthPageContent() {
               {formError && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{formError}</p>}
               <Button type="submit" className="w-full" disabled={submitting || !resetEmail}>
                 {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
-                Send reset code
+                {t("sendResetCode")}
               </Button>
             </form>
           ) : (
             <form onSubmit={handleResetConfirm} className="space-y-4" noValidate>
               <div>
                 <label htmlFor="reset-otp" className="block text-sm font-medium text-neutral-700">
-                  Reset code
+                  {t("resetCodeLabel")}
                 </label>
                 <input
                   id="reset-otp"
@@ -240,13 +242,13 @@ export function AuthPageContent() {
                   onChange={(e) => setResetOtp(e.target.value)}
                   disabled={submitting}
                   required
-                  placeholder="6-digit code"
+                  placeholder={t("resetCodePlaceholder")}
                   className="mt-1.5 w-full rounded-lg border border-gray-100 bg-white px-3 py-2.5 text-sm text-neutral-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 disabled:opacity-50"
                 />
               </div>
               <div>
                 <label htmlFor="new-password" className="block text-sm font-medium text-neutral-700">
-                  New password
+                  {t("newPasswordLabel")}
                 </label>
                 <input
                   id="new-password"
@@ -264,14 +266,14 @@ export function AuthPageContent() {
               {formMessage && <p className="rounded-lg bg-primary-50 px-3 py-2 text-sm text-primary-700">{formMessage}</p>}
               <Button type="submit" className="w-full" disabled={submitting || !resetOtp || !resetNewPassword}>
                 {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
-                Set new password
+                {t("setNewPassword")}
               </Button>
             </form>
           )}
         </div>
 
         <button type="button" onClick={goBack} className="mt-4 block w-full text-center text-sm text-neutral-500 hover:text-neutral-700 transition-colors">
-          ← Back to sign in
+          ← {t("backToSignIn")}
         </button>
       </div>
     );
@@ -282,12 +284,12 @@ export function AuthPageContent() {
     <div className="mx-auto w-full max-w-md px-4 py-12 sm:py-16">
       <div className="text-center">
         <h1 className="font-heading text-3xl font-bold text-neutral-900">
-          Welcome to FlatRender
+          {t("welcomeTitle")}
         </h1>
         <p className="mt-2 text-sm text-neutral-600">
           {activeTab === "sign-in"
-            ? "Sign in to continue to your dashboard"
-            : "Create a free account to get started"}
+            ? t("signInSubtitle")
+            : t("signUpSubtitle")}
         </p>
       </div>
 
@@ -304,7 +306,7 @@ export function AuthPageContent() {
                 : "text-neutral-600 hover:text-neutral-900"
             )}
           >
-            {tab === "sign-in" ? "Sign In" : "Sign Up"}
+            {tab === "sign-in" ? t("signInTab") : t("signUpTab")}
           </button>
         ))}
       </div>
@@ -313,7 +315,7 @@ export function AuthPageContent() {
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
           <div>
             <label htmlFor="email" className="block text-sm font-medium text-neutral-700">
-              Email
+              {t("emailLabel")}
             </label>
             <input
               id="email"
@@ -334,7 +336,7 @@ export function AuthPageContent() {
           <div>
             <div className="flex items-center justify-between">
               <label htmlFor="password" className="block text-sm font-medium text-neutral-700">
-                Password
+                {t("passwordLabel")}
               </label>
               {activeTab === "sign-in" && (
                 <button
@@ -342,7 +344,7 @@ export function AuthPageContent() {
                   onClick={() => { setView("forgot-password"); setFormError(null); setFormMessage(null); }}
                   className="text-xs text-primary-600 hover:underline focus-visible:outline-none"
                 >
-                  Forgot password?
+                  {t("forgotPassword")}
                 </button>
               )}
             </div>
@@ -371,16 +373,24 @@ export function AuthPageContent() {
 
           <Button type="submit" className="w-full" disabled={submitting}>
             {submitting ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden /> : null}
-            {activeTab === "sign-in" ? "Sign In" : "Create Account"}
+            {activeTab === "sign-in" ? t("signInTab") : t("createAccount")}
           </Button>
         </form>
       </div>
 
       <p className="mt-6 text-center text-xs text-neutral-500">
-        By continuing, you agree to our{" "}
-        <Link href="/terms" className="text-primary-600 hover:underline">Terms</Link>{" "}
-        and{" "}
-        <Link href="/privacy" className="text-primary-600 hover:underline">Privacy Policy</Link>.
+        {t.rich("legalNotice", {
+          terms: (chunks) => (
+            <Link href="/terms" className="text-primary-600 hover:underline">
+              {chunks}
+            </Link>
+          ),
+          privacy: (chunks) => (
+            <Link href="/privacy" className="text-primary-600 hover:underline">
+              {chunks}
+            </Link>
+          ),
+        })}
       </p>
     </div>
   );

src/components/auth/SupabaseSetupNotice.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 
@@ -10,6 +11,7 @@ interface SupabaseSetupNoticeProps {
 }
 
 export function SupabaseSetupNotice({ nextPath }: SupabaseSetupNoticeProps) {
+  const t = useTranslations("auto.componentsAuthSupabaseSetupNotice");
   const router = useRouter();
   const isDev = process.env.NODE_ENV === "development";
   const continueHref = nextPath?.startsWith("/") ? nextPath : "/dashboard";
@@ -18,15 +20,23 @@ export function SupabaseSetupNotice({ nextPath }: SupabaseSetupNoticeProps) {
     <div className="mx-auto w-full max-w-md px-4 py-12 sm:py-16">
       <div className="rounded-xl border border-amber-200 bg-amber-50 p-6 text-center shadow-sm">
         <h1 className="font-heading text-xl font-bold text-neutral-900">
-          Supabase not configured
+          {t("title")}
         </h1>
         <p className="mt-3 text-sm text-neutral-600">
-          Copy <code className="rounded bg-white px-1.5 py-0.5 text-xs">.env.example</code>{" "}
-          to <code className="rounded bg-white px-1.5 py-0.5 text-xs">.env.local</code> and set{" "}
-          <code className="rounded bg-white px-1.5 py-0.5 text-xs">NEXT_PUBLIC_SUPABASE_URL</code>{" "}
-          and{" "}
-          <code className="rounded bg-white px-1.5 py-0.5 text-xs">NEXT_PUBLIC_SUPABASE_ANON_KEY</code>
-          , then restart the dev server.
+          {t.rich("instructions", {
+            envExample: () => (
+              <code className="rounded bg-white px-1.5 py-0.5 text-xs">.env.example</code>
+            ),
+            envLocal: () => (
+              <code className="rounded bg-white px-1.5 py-0.5 text-xs">.env.local</code>
+            ),
+            supabaseUrl: () => (
+              <code className="rounded bg-white px-1.5 py-0.5 text-xs">NEXT_PUBLIC_SUPABASE_URL</code>
+            ),
+            supabaseAnonKey: () => (
+              <code className="rounded bg-white px-1.5 py-0.5 text-xs">NEXT_PUBLIC_SUPABASE_ANON_KEY</code>
+            ),
+          })}
         </p>
         {isDev ? (
           <Button
@@ -34,11 +44,11 @@ export function SupabaseSetupNotice({ nextPath }: SupabaseSetupNoticeProps) {
             className="mt-6 w-full"
             onClick={() => router.push(continueHref)}
           >
-            Continue without signing in (dev only)
+            {t("continueDev")}
           </Button>
         ) : (
           <Button type="button" className="mt-6 w-full" asChild>
-            <Link href="/">Back to home</Link>
+            <Link href="/">{t("backToHome")}</Link>
           </Button>
         )}
       </div>

src/components/dashboard/DashboardEmptyState.tsx

@@ -1,24 +1,25 @@
 "use client";
 
 import { FolderOpen } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { NewProjectMenu } from "@/components/dashboard/NewProjectMenu";
 
 export function DashboardEmptyState() {
+  const t = useTranslations("auto.componentsDashboardDashboardEmptyState");
   return (
     <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-neutral-50 px-6 py-20 text-center">
       <div className="flex h-20 w-20 items-center justify-center rounded-full bg-primary-50 text-primary-600">
         <FolderOpen className="h-10 w-10" aria-hidden />
       </div>
       <h3 className="mt-6 font-heading text-xl font-semibold text-neutral-900">
-        No projects yet
+        {t("title")}
       </h3>
       <p className="mt-2 max-w-sm text-sm text-neutral-600">
-        Create a video, image, or trim project to see it here. Everything you
-        save appears in this workspace.
+        {t("description")}
       </p>
       <NewProjectMenu
-        triggerLabel="Create your first project"
+        triggerLabel={t("createFirstProject")}
         triggerClassName="mt-8 gap-2"
         align="center"
       />

src/components/dashboard/DashboardPlanBadge.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 
 import { Button } from "@/components/ui/button";
 import { getUserProfile } from "@/lib/profiles";
@@ -16,6 +17,7 @@ interface DashboardPlanBadgeProps {
 }
 
 export async function DashboardPlanBadge({ userId }: DashboardPlanBadgeProps) {
+  const t = await getTranslations("auto.componentsDashboardDashboardPlanBadge");
   const profile = await getUserProfile(userId);
 
   return (
@@ -30,7 +32,7 @@ export async function DashboardPlanBadge({ userId }: DashboardPlanBadgeProps) {
       </p>
       {profile.plan !== "business" ? (
         <Button size="sm" className="mt-3 w-full" asChild>
-          <Link href="/#pricing">Upgrade plan</Link>
+          <Link href="/#pricing">{t("upgradePlan")}</Link>
         </Button>
       ) : null}
     </>

src/components/dashboard/DashboardProjectsSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
 
 import { DashboardEmptyState } from "@/components/dashboard/DashboardEmptyState";
 import { DashboardTopBar } from "@/components/dashboard/DashboardTopBar";
@@ -19,6 +20,7 @@ export function DashboardProjectsSection({
   projects = [],
   isLoading = false,
 }: DashboardProjectsSectionProps) {
+  const t = useTranslations("auto.componentsDashboardDashboardProjectsSection");
   const [searchQuery, setSearchQuery] = useState("");
 
   const filteredProjects = useMemo(() => {
@@ -42,7 +44,7 @@ export function DashboardProjectsSection({
 
       <div className="flex-1 overflow-auto p-6">
         <h2 className="font-heading text-xl font-bold text-neutral-900">
-          Recent Projects
+          {t("recentProjects")}
         </h2>
 
         {showEmpty && (
@@ -62,10 +64,10 @@ export function DashboardProjectsSection({
         {showNoResults && (
           <div className="mt-8 rounded-xl border border-dashed border-gray-200 bg-neutral-50 px-6 py-12 text-center">
             <p className="font-heading text-lg font-semibold text-neutral-900">
-              No projects match your search
+              {t("noResultsTitle")}
             </p>
             <p className="mt-2 text-sm text-neutral-600">
-              Try a different keyword or clear the search bar.
+              {t("noResultsDescription")}
             </p>
           </div>
         )}

src/components/dashboard/DashboardSidebar.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Suspense } from "react";
+import { getTranslations } from "next-intl/server";
 import { LogoMark } from "@/components/ui/LogoMark";
 
 import {
@@ -26,11 +27,12 @@ function getInitials(email: string, name?: string | null): string {
   return email.slice(0, 2).toUpperCase();
 }
 
-export function DashboardSidebar({
+export async function DashboardSidebar({
   userEmail,
   userName,
   userId,
 }: DashboardSidebarProps) {
+  const t = await getTranslations("auto.componentsDashboardDashboardSidebar");
   const initials = getInitials(userEmail, userName);
 
   return (
@@ -52,7 +54,7 @@ export function DashboardSidebar({
       <div className="border-t border-gray-100 p-4">
         <div className="mb-3 rounded-lg border border-gray-100 bg-neutral-50 p-3">
           <p className="text-xs font-medium uppercase tracking-wide text-neutral-500">
-            Current plan
+            {t("currentPlan")}
           </p>
           <Suspense fallback={<DashboardPlanBadgeSkeleton />}>
             <DashboardPlanBadge userId={userId} />
@@ -78,7 +80,7 @@ export function DashboardSidebar({
             type="submit"
             className="w-full rounded-lg px-3 py-2 text-left text-sm text-neutral-600 transition-colors hover:bg-neutral-50 hover:text-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
           >
-            Sign out
+            {t("signOut")}
           </button>
         </form>
       </div>

src/components/dashboard/DashboardSidebarNav.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
 import {
   FolderOpen,
   LayoutTemplate,
@@ -12,17 +13,18 @@ import {
 import { cn } from "@/lib/utils";
 
 const navItems = [
-  { label: "My Projects", href: "/dashboard", icon: FolderOpen },
-  { label: "Templates", href: "/templates", icon: LayoutTemplate },
-  { label: "Upgrade", href: "/#pricing", icon: Zap },
-  { label: "Settings", href: "/dashboard/settings", icon: Settings },
+  { labelKey: "myProjects", href: "/dashboard", icon: FolderOpen },
+  { labelKey: "templates", href: "/templates", icon: LayoutTemplate },
+  { labelKey: "upgrade", href: "/#pricing", icon: Zap },
+  { labelKey: "settings", href: "/dashboard/settings", icon: Settings },
 ] as const;
 
 export function DashboardSidebarNav() {
   const pathname = usePathname();
+  const t = useTranslations("auto.componentsDashboardDashboardSidebarNav");
 
   return (
-    <nav className="flex-1 space-y-1 px-3 py-4" aria-label="Dashboard">
+    <nav className="flex-1 space-y-1 px-3 py-4" aria-label={t("navLabel")}>
       {navItems.map((item) => {
         const Icon = item.icon;
         const isActive =
@@ -32,7 +34,7 @@ export function DashboardSidebarNav() {
 
         return (
           <Link
-            key={item.label}
+            key={item.labelKey}
             href={item.href}
             className={cn(
               "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
@@ -42,7 +44,7 @@ export function DashboardSidebarNav() {
             )}
           >
             <Icon className="h-4 w-4 shrink-0" aria-hidden />
-            {item.label}
+            {t(item.labelKey)}
           </Link>
         );
       })}

src/components/dashboard/DashboardTopBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Search } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { NewProjectMenu } from "@/components/dashboard/NewProjectMenu";
 
@@ -13,6 +14,8 @@ export function DashboardTopBar({
   searchQuery,
   onSearchChange,
 }: DashboardTopBarProps) {
+  const t = useTranslations("auto.componentsDashboardDashboardTopBar");
+
   return (
     <header className="flex flex-col gap-4 border-b border-gray-100 bg-white px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
       <label className="relative max-w-md flex-1">
@@ -24,7 +27,7 @@ export function DashboardTopBar({
           type="search"
           value={searchQuery}
           onChange={(event) => onSearchChange(event.target.value)}
-          placeholder="Search projects..."
+          placeholder={t("searchPlaceholder")}
           className="w-full rounded-lg border border-gray-100 bg-neutral-50 py-2.5 pl-10 pr-4 text-sm text-neutral-900 placeholder:text-neutral-400 focus-visible:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
         />
       </label>

src/components/dashboard/NewProjectMenu.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { ChevronDown, Clapperboard, ImageIcon, Plus, Scissors } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -20,12 +21,14 @@ interface NewProjectMenuProps {
 }
 
 export function NewProjectMenu({
-  triggerLabel = "New Project",
+  triggerLabel,
   triggerClassName,
   align = "end",
 }: NewProjectMenuProps) {
+  const t = useTranslations("auto.componentsDashboardNewProjectMenu");
   const router = useRouter();
   const [isCreating, setIsCreating] = useState(false);
+  const label = triggerLabel ?? t("newProject");
 
   const createProject = async (type: ProjectType) => {
     setIsCreating(true);
@@ -64,7 +67,7 @@ export function NewProjectMenu({
       <DropdownMenuTrigger asChild>
         <Button className={triggerClassName} disabled={isCreating}>
           <Plus className="h-4 w-4" aria-hidden />
-          {isCreating ? "Creating…" : triggerLabel}
+          {isCreating ? t("creating") : label}
           <ChevronDown className="h-4 w-4 opacity-80" aria-hidden />
         </Button>
       </DropdownMenuTrigger>
@@ -74,21 +77,21 @@ export function NewProjectMenu({
           onClick={() => router.push("/studio/video/new")}
         >
           <Clapperboard className="h-4 w-4 text-primary-600" />
-          Video Project
+          {t("videoProject")}
         </DropdownMenuItem>
         <DropdownMenuItem
           className="cursor-pointer gap-2"
           onClick={() => createProject("image")}
         >
           <ImageIcon className="h-4 w-4 text-violet-600" />
-          Image Project
+          {t("imageProject")}
         </DropdownMenuItem>
         <DropdownMenuItem
           className="cursor-pointer gap-2"
           onClick={() => createProject("trimmer")}
         >
           <Scissors className="h-4 w-4 text-amber-600" />
-          Trim/Crop Video
+          {t("trimCropVideo")}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

src/components/dashboard/ProjectCard.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useState } from "react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { AnimatePresence, motion } from "framer-motion";
 import { Copy, Download, ExternalLink, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
 
@@ -39,14 +40,14 @@ function statusBadgeClass(status: DashboardProject["status"]): string {
   }
 }
 
-function statusLabel(status: DashboardProject["status"]): string {
+function statusLabelKey(status: DashboardProject["status"]): "statusRendering" | "statusReady" | "statusDraft" {
   switch (status) {
     case "rendering":
-      return "Rendering";
+      return "statusRendering";
     case "ready":
-      return "Ready";
+      return "statusReady";
     default:
-      return "Draft";
+      return "statusDraft";
   }
 }
 
@@ -66,6 +67,7 @@ function typeBadgeClass(type: DashboardProject["type"]): string {
 const fadeTransition = { duration: 0.25, ease: "easeOut" as const };
 
 export function ProjectCard({ project }: ProjectCardProps) {
+  const t = useTranslations("auto.componentsDashboardProjectCard");
   const studioPath = getProjectStudioPath(project);
   const showRenderStatus = project.type === "video";
 
@@ -133,7 +135,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           >
             <Link href={studioPath}>
               <ExternalLink className="h-3.5 w-3.5" />
-              Open in Studio
+              {t("openInStudio")}
             </Link>
           </Button>
           {project.status === "ready" && project.renderUrl ? (
@@ -145,7 +147,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
             >
               <a href={project.renderUrl} download>
                 <Download className="h-3.5 w-3.5" />
-                Download
+                {t("download")}
               </a>
             </Button>
           ) : null}
@@ -173,7 +175,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
                   statusBadgeClass(project.status)
                 )}
               >
-                {statusLabel(project.status)}
+                {t(statusLabelKey(project.status))}
               </span>
             ) : null}
             <span className="text-xs text-neutral-500">
@@ -185,7 +187,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
         <DropdownMenu>
           <DropdownMenuTrigger
             className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
-            aria-label={`Actions for ${project.name}`}
+            aria-label={t("actionsFor", { name: project.name })}
           >
             <MoreHorizontal className="h-4 w-4" />
           </DropdownMenuTrigger>
@@ -193,30 +195,30 @@ export function ProjectCard({ project }: ProjectCardProps) {
             <DropdownMenuItem asChild>
               <Link href={studioPath} className="gap-2">
                 <ExternalLink className="h-4 w-4" />
-                Open in Studio
+                {t("openInStudio")}
               </Link>
             </DropdownMenuItem>
             {project.renderUrl ? (
               <DropdownMenuItem asChild>
                 <a href={project.renderUrl} download className="gap-2">
                   <Download className="h-4 w-4" />
-                  Download
+                  {t("download")}
                 </a>
               </DropdownMenuItem>
             ) : null}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2">
               <Pencil className="h-4 w-4" />
-              Rename
+              {t("rename")}
             </DropdownMenuItem>
             <DropdownMenuItem className="gap-2">
               <Copy className="h-4 w-4" />
-              Duplicate
+              {t("duplicate")}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 text-red-600 focus:text-red-600">
               <Trash2 className="h-4 w-4" />
-              Delete
+              {t("delete")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

src/components/dashboard/settings/SettingsBilling.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { CreditCard, Loader2, Zap } from "lucide-react";
 
 import { apiFetch } from "@/lib/api/fetch";
@@ -10,10 +11,10 @@ interface SettingsBillingProps {
   plan: PlanId;
 }
 
-const PLAN_LABELS: Record<PlanId, string> = {
-  free:     "Free",
-  pro:      "Pro",
-  business: "Business",
+const PLAN_LABEL_KEYS: Record<PlanId, string> = {
+  free:     "planFree",
+  pro:      "planPro",
+  business: "planBusiness",
 };
 
 const PLAN_COLORS: Record<PlanId, string> = {
@@ -22,32 +23,33 @@ const PLAN_COLORS: Record<PlanId, string> = {
   business: "bg-violet-50 text-violet-700",
 };
 
-const PLAN_FEATURES: Record<PlanId, string[]> = {
-  free:     ["5 projects", "720p export", "Community templates"],
-  pro:      ["Unlimited projects", "4K export", "All templates", "Priority render queue", "Custom fonts"],
-  business: ["Everything in Pro", "Team seats", "White-label export", "API access", "Dedicated support"],
+const PLAN_FEATURE_KEYS: Record<PlanId, string[]> = {
+  free:     ["featureFree5Projects", "featureFree720pExport", "featureFreeCommunityTemplates"],
+  pro:      ["featureProUnlimitedProjects", "featurePro4kExport", "featureProAllTemplates", "featureProPriorityRenderQueue", "featureProCustomFonts"],
+  business: ["featureBusinessEverythingInPro", "featureBusinessTeamSeats", "featureBusinessWhiteLabelExport", "featureBusinessApiAccess", "featureBusinessDedicatedSupport"],
 };
 
 export function SettingsBilling({ plan }: SettingsBillingProps) {
+  const t = useTranslations("auto.componentsDashboardSettingsSettingsBilling");
   const isPaid = plan !== "free";
   const [cancelling, setCancelling] = useState(false);
   const [cancelled, setCancelled] = useState(false);
   const [cancelError, setCancelError] = useState<string | null>(null);
 
   const handleCancel = async () => {
-    if (!confirm("Cancel your plan? You'll keep access until the current period ends.")) return;
+    if (!confirm(t("cancelConfirm"))) return;
     setCancelling(true);
     setCancelError(null);
     try {
       const res = await apiFetch("/api/billing/cancel", { method: "POST" });
       if (!res.ok) {
         const data = (await res.json().catch(() => null)) as { error?: string } | null;
-        setCancelError(data?.error ?? "Failed to cancel plan. Please try again.");
+        setCancelError(data?.error ?? t("cancelFailed"));
       } else {
         setCancelled(true);
       }
     } catch {
-      setCancelError("Network error. Please try again.");
+      setCancelError(t("networkError"));
     } finally {
       setCancelling(false);
     }
@@ -55,8 +57,8 @@ export function SettingsBilling({ plan }: SettingsBillingProps) {
 
   return (
     <div className="rounded-xl border border-gray-100 bg-white p-6">
-      <h2 className="font-heading text-base font-semibold text-neutral-900">Billing &amp; Plan</h2>
-      <p className="mt-1 text-sm text-neutral-500">Manage your subscription and payment method.</p>
+      <h2 className="font-heading text-base font-semibold text-neutral-900">{t("title")}</h2>
+      <p className="mt-1 text-sm text-neutral-500">{t("subtitle")}</p>
 
       {/* Current plan card */}
       <div className="mt-6 rounded-lg border border-gray-100 bg-neutral-50 p-4">
@@ -66,11 +68,11 @@ export function SettingsBilling({ plan }: SettingsBillingProps) {
               <Zap className="h-5 w-5" aria-hidden />
             </div>
             <div>
-              <p className="text-xs font-medium uppercase tracking-wide text-neutral-500">Current plan</p>
+              <p className="text-xs font-medium uppercase tracking-wide text-neutral-500">{t("currentPlan")}</p>
               <div className="flex items-center gap-2">
-                <p className="font-heading text-lg font-bold text-neutral-900">{PLAN_LABELS[plan]}</p>
+                <p className="font-heading text-lg font-bold text-neutral-900">{t(PLAN_LABEL_KEYS[plan])}</p>
                 <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${PLAN_COLORS[plan]}`}>
-                  {cancelled ? "Cancels at period end" : isPaid ? "Active" : "Free tier"}
+                  {cancelled ? t("statusCancelsAtPeriodEnd") : isPaid ? t("statusActive") : t("statusFreeTier")}
                 </span>
               </div>
             </div>
@@ -81,17 +83,17 @@ export function SettingsBilling({ plan }: SettingsBillingProps) {
               className="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
             >
               <Zap className="h-4 w-4" aria-hidden />
-              Upgrade
+              {t("upgrade")}
             </a>
           )}
         </div>
 
         {/* Features list */}
         <ul className="mt-4 space-y-1.5">
-          {PLAN_FEATURES[plan].map((f) => (
-            <li key={f} className="flex items-center gap-2 text-sm text-neutral-600">
+          {PLAN_FEATURE_KEYS[plan].map((key) => (
+            <li key={key} className="flex items-center gap-2 text-sm text-neutral-600">
               <span className="h-1.5 w-1.5 rounded-full bg-primary-500" aria-hidden />
-              {f}
+              {t(key)}
             </li>
           ))}
         </ul>
@@ -105,7 +107,7 @@ export function SettingsBilling({ plan }: SettingsBillingProps) {
             className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
           >
             <CreditCard className="h-4 w-4" aria-hidden />
-            Change plan
+            {t("changePlan")}
           </a>
           <button
             type="button"
@@ -114,7 +116,7 @@ export function SettingsBilling({ plan }: SettingsBillingProps) {
             className="inline-flex items-center gap-1.5 rounded-lg border border-red-200 px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {cancelling ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-            {cancelling ? "Cancelling…" : "Cancel plan"}
+            {cancelling ? t("cancelling") : t("cancelPlan")}
           </button>
         </div>
       )}
@@ -127,13 +129,13 @@ export function SettingsBilling({ plan }: SettingsBillingProps) {
 
       {cancelled && (
         <p className="mt-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700">
-          Your plan has been cancelled. You&apos;ll keep access until the end of your billing period.
+          {t("cancelledNotice")}
         </p>
       )}
 
       {!isPaid && (
         <p className="mt-4 text-xs text-neutral-400">
-          Upgrade to unlock unlimited projects, 4K export, and premium templates.
+          {t("upgradeHint")}
         </p>
       )}
     </div>

src/components/dashboard/settings/SettingsNotifications.tsx

@@ -1,42 +1,44 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 
 interface Toggle {
   id: string;
-  label: string;
-  description: string;
+  labelKey: string;
+  descriptionKey: string;
   defaultOn: boolean;
 }
 
 const TOGGLES: Toggle[] = [
   {
     id: "render-complete",
-    label: "Render complete",
-    description: "Get notified when your video export finishes.",
+    labelKey: "renderCompleteLabel",
+    descriptionKey: "renderCompleteDescription",
     defaultOn: true,
   },
   {
     id: "project-shared",
-    label: "Project shared with you",
-    description: "When a team member shares a project.",
+    labelKey: "projectSharedLabel",
+    descriptionKey: "projectSharedDescription",
     defaultOn: true,
   },
   {
     id: "weekly-digest",
-    label: "Weekly digest",
-    description: "Summary of new templates and platform updates.",
+    labelKey: "weeklyDigestLabel",
+    descriptionKey: "weeklyDigestDescription",
     defaultOn: false,
   },
   {
     id: "product-news",
-    label: "Product news",
-    description: "New features, tips, and announcements.",
+    labelKey: "productNewsLabel",
+    descriptionKey: "productNewsDescription",
     defaultOn: false,
   },
 ];
 
 export function SettingsNotifications() {
+  const t = useTranslations("auto.componentsDashboardSettingsSettingsNotifications");
   const [prefs, setPrefs] = useState<Record<string, boolean>>(
     Object.fromEntries(TOGGLES.map((t) => [t.id, t.defaultOn]))
   );
@@ -55,15 +57,15 @@ export function SettingsNotifications() {
 
   return (
     <div className="rounded-xl border border-gray-100 bg-white p-6">
-      <h2 className="font-heading text-base font-semibold text-neutral-900">Notifications</h2>
-      <p className="mt-1 text-sm text-neutral-500">Choose which emails you receive from FlatRender.</p>
+      <h2 className="font-heading text-base font-semibold text-neutral-900">{t("title")}</h2>
+      <p className="mt-1 text-sm text-neutral-500">{t("subtitle")}</p>
 
       <div className="mt-6 divide-y divide-gray-100">
         {TOGGLES.map((item) => (
           <div key={item.id} className="flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0">
             <div>
-              <p className="text-sm font-medium text-neutral-900">{item.label}</p>
-              <p className="mt-0.5 text-xs text-neutral-500">{item.description}</p>
+              <p className="text-sm font-medium text-neutral-900">{t(item.labelKey)}</p>
+              <p className="mt-0.5 text-xs text-neutral-500">{t(item.descriptionKey)}</p>
             </div>
             <button
               type="button"
@@ -90,9 +92,9 @@ export function SettingsNotifications() {
           onClick={save}
           className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
         >
-          Save preferences
+          {t("savePreferences")}
         </button>
-        {saved && <span className="text-sm text-green-600">Saved!</span>}
+        {saved && <span className="text-sm text-green-600">{t("saved")}</span>}
       </div>
     </div>
   );

src/components/dashboard/settings/SettingsProfile.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { User } from "lucide-react";
 
 interface SettingsProfileProps {
@@ -9,6 +10,7 @@ interface SettingsProfileProps {
 }
 
 export function SettingsProfile({ email, displayName }: SettingsProfileProps) {
+  const t = useTranslations("auto.componentsDashboardSettingsSettingsProfile");
   const [name, setName] = useState(displayName ?? "");
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
@@ -27,12 +29,12 @@ export function SettingsProfile({ email, displayName }: SettingsProfileProps) {
       });
       const data = (await res.json().catch(() => null)) as { error?: string } | null;
       if (!res.ok) {
-        setMessage({ type: "error", text: data?.error ?? "Could not update profile." });
+        setMessage({ type: "error", text: data?.error ?? t("updateFailed") });
       } else {
-        setMessage({ type: "success", text: "Profile updated successfully." });
+        setMessage({ type: "success", text: t("updateSuccess") });
       }
     } catch {
-      setMessage({ type: "error", text: "Network error. Please try again." });
+      setMessage({ type: "error", text: t("networkError") });
     } finally {
       setSaving(false);
     }
@@ -40,8 +42,8 @@ export function SettingsProfile({ email, displayName }: SettingsProfileProps) {
 
   return (
     <div className="rounded-xl border border-gray-100 bg-white p-6">
-      <h2 className="font-heading text-base font-semibold text-neutral-900">Profile</h2>
-      <p className="mt-1 text-sm text-neutral-500">Your public name and account email.</p>
+      <h2 className="font-heading text-base font-semibold text-neutral-900">{t("title")}</h2>
+      <p className="mt-1 text-sm text-neutral-500">{t("subtitle")}</p>
 
       <div className="mt-6 flex items-center gap-4">
         <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-primary-100 font-heading text-xl font-bold text-primary-700">
@@ -56,25 +58,25 @@ export function SettingsProfile({ email, displayName }: SettingsProfileProps) {
       <form onSubmit={(e) => void handleSave(e)} className="mt-6 space-y-4">
         <div>
           <label htmlFor="display-name" className="block text-sm font-medium text-neutral-700">
-            Display name
+            {t("displayNameLabel")}
           </label>
           <input
             id="display-name"
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            placeholder="Your name"
+            placeholder={t("displayNamePlaceholder")}
             className="mt-1.5 block w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
           />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-neutral-700">Email</label>
+          <label className="block text-sm font-medium text-neutral-700">{t("emailLabel")}</label>
           <div className="mt-1.5 flex items-center gap-2 rounded-lg border border-gray-200 bg-neutral-50 px-3 py-2">
             <User className="h-4 w-4 text-neutral-400" aria-hidden />
             <span className="text-sm text-neutral-500">{email}</span>
           </div>
-          <p className="mt-1 text-xs text-neutral-400">Email cannot be changed here. Contact support.</p>
+          <p className="mt-1 text-xs text-neutral-400">{t("emailHint")}</p>
         </div>
 
         {message && (
@@ -88,7 +90,7 @@ export function SettingsProfile({ email, displayName }: SettingsProfileProps) {
           disabled={saving}
           className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-700 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
         >
-          {saving ? "Saving…" : "Save changes"}
+          {saving ? t("saving") : t("saveChanges")}
         </button>
       </form>
     </div>

src/components/dashboard/settings/SettingsSecurity.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Eye, EyeOff } from "lucide-react";
 
 export function SettingsSecurity() {
+  const t = useTranslations("auto.componentsDashboardSettingsSettingsSecurity");
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [confirm, setConfirm] = useState("");
@@ -16,11 +18,11 @@ export function SettingsSecurity() {
     setMessage(null);
 
     if (next.length < 8) {
-      setMessage({ type: "error", text: "New password must be at least 8 characters." });
+      setMessage({ type: "error", text: t("errorMinLength") });
       return;
     }
     if (next !== confirm) {
-      setMessage({ type: "error", text: "Passwords do not match." });
+      setMessage({ type: "error", text: t("errorMismatch") });
       return;
     }
 
@@ -35,13 +37,13 @@ export function SettingsSecurity() {
       });
       const data = (await res.json().catch(() => null)) as { error?: string } | null;
       if (!res.ok) {
-        setMessage({ type: "error", text: data?.error ?? "Could not change password." });
+        setMessage({ type: "error", text: data?.error ?? t("errorChangeFailed") });
       } else {
-        setMessage({ type: "success", text: "Password changed successfully." });
+        setMessage({ type: "success", text: t("changeSuccess") });
         setCurrent(""); setNext(""); setConfirm("");
       }
     } catch {
-      setMessage({ type: "error", text: "Network error. Please try again." });
+      setMessage({ type: "error", text: t("networkError") });
     } finally {
       setSaving(false);
     }
@@ -64,7 +66,7 @@ export function SettingsSecurity() {
             type="button"
             onClick={() => setShowPw((v) => !v)}
             className="absolute inset-y-0 right-2 flex items-center text-neutral-400 hover:text-neutral-600"
-            aria-label={showPw ? "Hide password" : "Show password"}
+            aria-label={showPw ? t("hidePassword") : t("showPassword")}
           >
             {showPw ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
           </button>
@@ -75,13 +77,13 @@ export function SettingsSecurity() {
 
   return (
     <div className="rounded-xl border border-gray-100 bg-white p-6">
-      <h2 className="font-heading text-base font-semibold text-neutral-900">Security</h2>
-      <p className="mt-1 text-sm text-neutral-500">Change your account password.</p>
+      <h2 className="font-heading text-base font-semibold text-neutral-900">{t("title")}</h2>
+      <p className="mt-1 text-sm text-neutral-500">{t("subtitle")}</p>
 
       <form onSubmit={(e) => void handleSubmit(e)} className="mt-6 space-y-4">
-        <PwInput id="current-pw" label="Current password" value={current} onChange={setCurrent} />
-        <PwInput id="new-pw"     label="New password"     value={next}    onChange={setNext} />
-        <PwInput id="confirm-pw" label="Confirm new password" value={confirm} onChange={setConfirm} />
+        <PwInput id="current-pw" label={t("currentPasswordLabel")} value={current} onChange={setCurrent} />
+        <PwInput id="new-pw"     label={t("newPasswordLabel")}     value={next}    onChange={setNext} />
+        <PwInput id="confirm-pw" label={t("confirmPasswordLabel")} value={confirm} onChange={setConfirm} />
 
         {message && (
           <p className={`text-sm ${message.type === "success" ? "text-green-600" : "text-red-600"}`}>
@@ -94,7 +96,7 @@ export function SettingsSecurity() {
           disabled={saving}
           className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-700 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
         >
-          {saving ? "Saving…" : "Change password"}
+          {saving ? t("saving") : t("changePassword")}
         </button>
       </form>
     </div>

src/components/image-editor/AiRemoveBgModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Loader2, Sparkles } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -19,6 +20,7 @@ import {
 } from "@/lib/image-editor-store";
 
 export function AiRemoveBgModal() {
+  const t = useTranslations("auto.componentsImageEditorAiRemoveBgModal");
   const isOpen = useImageEditorStore((s) => s.isAiModalOpen);
   const setAiModalOpen = useImageEditorStore((s) => s.setAiModalOpen);
   const replaceBaseImage = useImageEditorStore((s) => s.replaceBaseImage);
@@ -29,7 +31,7 @@ export function AiRemoveBgModal() {
     const stage = getImageEditorStage();
     const base = getBaseImageLayer({ layers });
     if (!stage || !base) {
-      toast({ title: "Open an image first." });
+      toast({ title: t("openImageFirst") });
       return;
     }
 
@@ -48,15 +50,15 @@ export function AiRemoveBgModal() {
       };
 
       if (!response.ok || !payload.image) {
-        toast({ title: payload.error ?? "Background removal failed." });
+        toast({ title: payload.error ?? t("removalFailed") });
         return;
       }
 
       replaceBaseImage(payload.image);
-      toast({ title: "Background removed!" });
+      toast({ title: t("backgroundRemoved") });
       setAiModalOpen(false);
     } catch {
-      toast({ title: "Could not reach background removal service." });
+      toast({ title: t("serviceUnreachable") });
     } finally {
       setIsLoading(false);
     }
@@ -68,12 +70,9 @@ export function AiRemoveBgModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Sparkles className="h-5 w-5 text-primary-400" />
-            AI Background Removal
+            {t("title")}
           </DialogTitle>
-          <DialogDescription>
-            Remove the background from your base image. The result replaces the
-            background layer with a transparent PNG.
-          </DialogDescription>
+          <DialogDescription>{t("description")}</DialogDescription>
         </DialogHeader>
         <Button
           type="button"
@@ -84,10 +83,10 @@ export function AiRemoveBgModal() {
           {isLoading ? (
             <>
               <Loader2 className="h-4 w-4 animate-spin" />
-              Processing…
+              {t("processing")}
             </>
           ) : (
-            "Remove Background"
+            t("removeBackground")
           )}
         </Button>
       </DialogContent>

src/components/image-editor/ImageCropControls.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 import type { ImageCropAspectRatio } from "@/lib/image-editor-types";
@@ -16,6 +17,7 @@ const ASPECT_OPTIONS: { id: ImageCropAspectRatio; label: string }[] = [
 ];
 
 export function ImageCropControls() {
+  const t = useTranslations("auto.componentsImageEditorImageCropControls");
   const [applying, setApplying] = useState(false);
   const activeTool = useImageEditorStore((s) => s.activeTool);
   const cropAspectRatio = useImageEditorStore((s) => s.cropAspectRatio);
@@ -49,7 +51,7 @@ export function ImageCropControls() {
                 : "border-gray-700 bg-gray-800 text-gray-200 hover:border-gray-600"
             )}
           >
-            {option.label}
+            {option.id === "free" ? t("aspectFree") : option.label}
           </button>
         ))}
       </div>
@@ -62,7 +64,7 @@ export function ImageCropControls() {
           onClick={cancelCrop}
           disabled={applying}
         >
-          Cancel
+          {t("cancel")}
         </Button>
         <Button
           type="button"
@@ -71,7 +73,7 @@ export function ImageCropControls() {
           onClick={() => void handleApply()}
           disabled={applying}
         >
-          {applying ? "Applying…" : "Apply Crop"}
+          {applying ? t("applying") : t("applyCrop")}
         </Button>
       </div>
     </div>

src/components/image-editor/ImageEditorRightPanel.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 import { AdjustPanel } from "@/components/image-editor/panels/AdjustPanel";
 import { FiltersPanel } from "@/components/image-editor/panels/FiltersPanel";
 import { LayersPanel } from "@/components/image-editor/panels/LayersPanel";
@@ -7,20 +9,21 @@ import type { ImagePanelTab } from "@/lib/image-editor-types";
 import { useImageEditorStore } from "@/lib/image-editor-store";
 import { cn } from "@/lib/utils";
 
-const TABS: { id: ImagePanelTab; label: string }[] = [
-  { id: "adjust", label: "Adjust" },
-  { id: "filters", label: "Filters" },
-  { id: "layers", label: "Layers" },
+const TAB_IDS: { id: ImagePanelTab; labelKey: string }[] = [
+  { id: "adjust", labelKey: "tabAdjust" },
+  { id: "filters", labelKey: "tabFilters" },
+  { id: "layers", labelKey: "tabLayers" },
 ];
 
 export function ImageEditorRightPanel() {
+  const t = useTranslations("auto.componentsImageEditorImageEditorRightPanel");
   const activePanelTab = useImageEditorStore((s) => s.activePanelTab);
   const setActivePanelTab = useImageEditorStore((s) => s.setActivePanelTab);
 
   return (
     <aside className="flex w-[280px] shrink-0 flex-col border-l border-gray-800 bg-gray-900">
       <div className="flex border-b border-gray-800">
-        {TABS.map((tab) => (
+        {TAB_IDS.map((tab) => (
           <button
             key={tab.id}
             type="button"
@@ -32,7 +35,7 @@ export function ImageEditorRightPanel() {
                 : "text-gray-500 hover:text-gray-300"
             )}
           >
-            {tab.label}
+            {t(tab.labelKey)}
           </button>
         ))}
       </div>

src/components/image-editor/ImageEditorToolbar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import {
   Crop,
   MousePointer2,
@@ -19,23 +20,25 @@ import type { ImageShapeKind, ImageTool } from "@/lib/image-editor-types";
 import { useImageEditorStore } from "@/lib/image-editor-store";
 import { cn } from "@/lib/utils";
 
-const TOOLS: { id: ImageTool; label: string; icon: typeof MousePointer2 }[] = [
-  { id: "select", label: "Select", icon: MousePointer2 },
-  { id: "crop", label: "Crop", icon: Crop },
-  { id: "text", label: "Text", icon: Type },
-  { id: "shape", label: "Shape", icon: Shapes },
-  { id: "draw", label: "Draw", icon: Pencil },
-  { id: "ai", label: "AI", icon: Sparkles },
-];
+const TOOLS: { id: ImageTool; labelKey: string; icon: typeof MousePointer2 }[] =
+  [
+    { id: "select", labelKey: "toolSelect", icon: MousePointer2 },
+    { id: "crop", labelKey: "toolCrop", icon: Crop },
+    { id: "text", labelKey: "toolText", icon: Type },
+    { id: "shape", labelKey: "toolShape", icon: Shapes },
+    { id: "draw", labelKey: "toolDraw", icon: Pencil },
+    { id: "ai", labelKey: "toolAi", icon: Sparkles },
+  ];
 
-const SHAPES: { id: ImageShapeKind; label: string }[] = [
-  { id: "rect", label: "Rectangle" },
-  { id: "circle", label: "Circle" },
-  { id: "line", label: "Line" },
-  { id: "arrow", label: "Arrow" },
+const SHAPES: { id: ImageShapeKind; labelKey: string }[] = [
+  { id: "rect", labelKey: "shapeRectangle" },
+  { id: "circle", labelKey: "shapeCircle" },
+  { id: "line", labelKey: "shapeLine" },
+  { id: "arrow", labelKey: "shapeArrow" },
 ];
 
 export function ImageEditorToolbar() {
+  const t = useTranslations("auto.componentsImageEditorImageEditorToolbar");
   const [shapeOpen, setShapeOpen] = useState(false);
   const activeTool = useImageEditorStore((s) => s.activeTool);
   const setActiveTool = useImageEditorStore((s) => s.setActiveTool);
@@ -52,7 +55,7 @@ export function ImageEditorToolbar() {
               <PopoverTrigger asChild>
                 <button
                   type="button"
-                  title={tool.label}
+                  title={t(tool.labelKey)}
                   onClick={() => setActiveTool("shape")}
                   className={cn(
                     "flex h-10 w-10 items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
@@ -76,7 +79,7 @@ export function ImageEditorToolbar() {
                     }}
                     className="flex w-full rounded-md px-2 py-2 text-left text-sm text-gray-200 hover:bg-gray-700"
                   >
-                    {shape.label}
+                    {t(shape.labelKey)}
                   </button>
                 ))}
               </PopoverContent>
@@ -88,7 +91,7 @@ export function ImageEditorToolbar() {
           <button
             key={tool.id}
             type="button"
-            title={tool.label}
+            title={t(tool.labelKey)}
             onClick={() => {
               if (tool.id === "ai") {
                 setAiModalOpen(true);

src/components/image-editor/ImageEditorTopBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { Download, FolderOpen, Sparkles } from "lucide-react";
 
@@ -28,6 +29,7 @@ export function ImageEditorTopBar({
   saveStatus = "idle",
   onSaveRetry,
 }: ImageEditorTopBarProps) {
+  const t = useTranslations("auto.componentsImageEditorImageEditorTopBar");
   const fileRef = useRef<HTMLInputElement>(null);
   const [exportOpen, setExportOpen] = useState(false);
 
@@ -52,11 +54,11 @@ export function ImageEditorTopBar({
   const handleExport = () => {
     const stage = getImageEditorStage();
     if (!stage) {
-      toast({ title: "Canvas not ready." });
+      toast({ title: t("canvasNotReady") });
       return;
     }
     downloadStageImage(stage, exportFormat, exportQuality);
-    toast({ title: "Export started" });
+    toast({ title: t("exportStarted") });
     setExportOpen(false);
   };
 
@@ -69,7 +71,7 @@ export function ImageEditorTopBar({
         >
           <Sparkles className="h-4 w-4 text-violet-500" />
           <span className="font-heading font-semibold text-white">
-            {projectName ?? "Image Editor"}
+            {projectName ?? t("defaultProjectName")}
           </span>
         </Link>
         {projectId ? (
@@ -95,7 +97,7 @@ export function ImageEditorTopBar({
           onClick={() => fileRef.current?.click()}
         >
           <FolderOpen className="h-4 w-4" />
-          Open
+          {t("open")}
         </Button>
       </div>
 
@@ -108,11 +110,13 @@ export function ImageEditorTopBar({
           onClick={() => setExportOpen((v) => !v)}
         >
           <Download className="h-4 w-4" />
-          Export
+          {t("export")}
         </Button>
         {exportOpen ? (
           <div className="absolute right-0 top-full z-50 mt-2 w-64 rounded-xl border border-gray-700 bg-gray-900 p-4 shadow-xl">
-            <p className="mb-2 text-xs font-semibold text-gray-400">Format</p>
+            <p className="mb-2 text-xs font-semibold text-gray-400">
+              {t("format")}
+            </p>
             <div className="mb-4 flex gap-2">
               {(["png", "jpg", "webp"] as ExportImageFormat[]).map((fmt) => (
                 <button
@@ -133,7 +137,7 @@ export function ImageEditorTopBar({
             {exportFormat !== "png" ? (
               <div className="mb-4">
                 <div className="mb-2 flex justify-between text-xs text-gray-400">
-                  <span>Quality</span>
+                  <span>{t("quality")}</span>
                   <span>{exportQuality}%</span>
                 </div>
                 <Slider
@@ -150,7 +154,7 @@ export function ImageEditorTopBar({
               className="w-full bg-primary-600 hover:bg-primary-700"
               onClick={handleExport}
             >
-              Download
+              {t("download")}
             </Button>
           </div>
         ) : null}

src/components/image-editor/panels/AdjustPanel.tsx

@@ -1,35 +1,38 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 import { Slider } from "@/components/ui/slider";
 import { useImageEditorStore } from "@/lib/image-editor-store";
 
 const SLIDERS = [
-  { key: "brightness" as const, label: "Brightness", min: -100, max: 100 },
-  { key: "contrast" as const, label: "Contrast", min: -100, max: 100 },
-  { key: "saturation" as const, label: "Saturation", min: -100, max: 100 },
-  { key: "hue" as const, label: "Hue", min: -180, max: 180 },
-  { key: "blur" as const, label: "Blur", min: 0, max: 20 },
-  { key: "sharpen" as const, label: "Sharpen", min: 0, max: 10 },
-  { key: "vignette" as const, label: "Vignette", min: 0, max: 100 },
+  { key: "brightness" as const, labelKey: "brightness", min: -100, max: 100 },
+  { key: "contrast" as const, labelKey: "contrast", min: -100, max: 100 },
+  { key: "saturation" as const, labelKey: "saturation", min: -100, max: 100 },
+  { key: "hue" as const, labelKey: "hue", min: -180, max: 180 },
+  { key: "blur" as const, labelKey: "blur", min: 0, max: 20 },
+  { key: "sharpen" as const, labelKey: "sharpen", min: 0, max: 10 },
+  { key: "vignette" as const, labelKey: "vignette", min: 0, max: 100 },
 ];
 
 export function AdjustPanel() {
+  const t = useTranslations("auto.componentsImageEditorPanelsAdjustPanel");
   const adjustments = useImageEditorStore((s) => s.adjustments);
   const setAdjustments = useImageEditorStore((s) => s.setAdjustments);
   const hasBase = useImageEditorStore((s) => s.layers.some((l) => l.type === "image"));
 
   if (!hasBase) {
     return (
-      <p className="text-xs text-gray-500">Open an image to use adjustments.</p>
+      <p className="text-xs text-gray-500">{t("emptyState")}</p>
     );
   }
 
   return (
     <div className="space-y-5">
-      {SLIDERS.map(({ key, label, min, max }) => (
+      {SLIDERS.map(({ key, labelKey, min, max }) => (
         <div key={key}>
           <div className="mb-2 flex justify-between text-xs text-gray-400">
-            <span>{label}</span>
+            <span>{t(labelKey)}</span>
             <span className="tabular-nums text-gray-300">
               {adjustments[key]}
             </span>

src/components/image-editor/panels/FiltersPanel.tsx

@@ -1,16 +1,19 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 import { FILTER_PRESETS } from "@/lib/image-editor-filters";
 import { useImageEditorStore } from "@/lib/image-editor-store";
 import { cn } from "@/lib/utils";
 
 export function FiltersPanel() {
+  const t = useTranslations("auto.componentsImageEditorPanelsFiltersPanel");
   const activeFilterPreset = useImageEditorStore((s) => s.activeFilterPreset);
   const applyFilterPreset = useImageEditorStore((s) => s.applyFilterPreset);
   const hasBase = useImageEditorStore((s) => s.layers.some((l) => l.type === "image"));
 
   if (!hasBase) {
-    return <p className="text-xs text-gray-500">Open an image to apply filters.</p>;
+    return <p className="text-xs text-gray-500">{t("emptyState")}</p>;
   }
 
   return (

src/components/image-editor/panels/LayersPanel.tsx

@@ -17,6 +17,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Eye, EyeOff, GripVertical, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import type { ImageLayer } from "@/lib/image-editor-types";
 import { useImageEditorStore } from "@/lib/image-editor-store";
@@ -38,6 +39,7 @@ function layerIcon(type: ImageLayer["type"]): string {
 }
 
 function SortableLayerRow({ layer }: { layer: ImageLayer }) {
+  const t = useTranslations("auto.componentsImageEditorPanelsLayersPanel");
   const selectedLayerId = useImageEditorStore((s) => s.selectedLayerId);
   const setSelectedLayer = useImageEditorStore((s) => s.setSelectedLayer);
   const toggleLayerVisibility = useImageEditorStore((s) => s.toggleLayerVisibility);
@@ -63,7 +65,7 @@ function SortableLayerRow({ layer }: { layer: ImageLayer }) {
       <button
         type="button"
         className="cursor-grab text-gray-500 hover:text-gray-300"
-        aria-label={`Reorder ${layer.name}`}
+        aria-label={t("reorderLayer", { name: layer.name ?? "" })}
         {...attributes}
         {...listeners}
       >
@@ -81,7 +83,7 @@ function SortableLayerRow({ layer }: { layer: ImageLayer }) {
         type="button"
         onClick={() => toggleLayerVisibility(layer.id)}
         className="text-gray-400 hover:text-white"
-        aria-label={layer.visible ? "Hide layer" : "Show layer"}
+        aria-label={layer.visible ? t("hideLayer") : t("showLayer")}
       >
         {layer.visible ? (
           <Eye className="h-3.5 w-3.5" />
@@ -94,7 +96,7 @@ function SortableLayerRow({ layer }: { layer: ImageLayer }) {
           type="button"
           onClick={() => deleteLayer(layer.id)}
           className="text-gray-400 hover:text-red-400"
-          aria-label={`Delete ${layer.name}`}
+          aria-label={t("deleteLayer", { name: layer.name ?? "" })}
         >
           <Trash2 className="h-3.5 w-3.5" />
         </button>
@@ -106,6 +108,7 @@ function SortableLayerRow({ layer }: { layer: ImageLayer }) {
 }
 
 export function LayersPanel() {
+  const t = useTranslations("auto.componentsImageEditorPanelsLayersPanel");
   const layers = useImageEditorStore((s) => s.layers);
   const reorderLayers = useImageEditorStore((s) => s.reorderLayers);
 
@@ -133,7 +136,7 @@ export function LayersPanel() {
   };
 
   if (layers.length === 0) {
-    return <p className="text-xs text-gray-500">No layers yet.</p>;
+    return <p className="text-xs text-gray-500">{t("emptyState")}</p>;
   }
 
   return (

src/components/image-maker/ImageMakerBeforeAfter.tsx

@@ -1,14 +1,20 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
 import { OptimizedImage } from "@/components/ui/optimized-image";
+import { placeholderSrc } from "@/lib/placeholder";
 
 export function ImageMakerBeforeAfter() {
+  const t = useTranslations("auto.componentsImageMakerImageMakerBeforeAfter");
   return (
     <div className="overflow-hidden rounded-xl border border-gray-100 bg-white shadow-xl">
       <div className="grid grid-cols-2 divide-x divide-gray-100">
         <div className="relative">
           <div className="relative aspect-[4/5] sm:aspect-square">
             <OptimizedImage
-              src="https://picsum.photos/seed/im-before/400/500"
-              alt="Before editing"
+              src={placeholderSrc("im-before", 400, 500)}
+              alt={t("beforeAlt")}
               fill
               priority
               sizes="(max-width: 1024px) 50vw, 320px"
@@ -16,14 +22,14 @@ export function ImageMakerBeforeAfter() {
             />
           </div>
           <span className="absolute left-3 top-3 rounded-md bg-neutral-900/70 px-2 py-1 text-xs font-semibold text-white backdrop-blur-sm">
-            Before
+            {t("beforeLabel")}
           </span>
         </div>
         <div className="relative">
           <div className="relative aspect-[4/5] sm:aspect-square">
             <OptimizedImage
-              src="https://picsum.photos/seed/im-after/400/500"
-              alt="After editing with AI"
+              src={placeholderSrc("im-after", 400, 500)}
+              alt={t("afterAlt")}
               fill
               priority
               sizes="(max-width: 1024px) 50vw, 320px"
@@ -31,12 +37,12 @@ export function ImageMakerBeforeAfter() {
             />
           </div>
           <span className="absolute left-3 top-3 rounded-md bg-violet-600 px-2 py-1 text-xs font-semibold text-white">
-            After
+            {t("afterLabel")}
           </span>
         </div>
       </div>
       <p className="border-t border-gray-100 bg-neutral-50 px-4 py-3 text-center text-xs text-neutral-500">
-        AI-enhanced color, layout, and brand styling applied in one click
+        {t("caption")}
       </p>
     </div>
   );

src/components/image-maker/ImageMakerGallery.tsx

@@ -1,19 +1,23 @@
+import { getTranslations } from "next-intl/server";
+
 import { OptimizedImage } from "@/components/ui/optimized-image";
 import { SectionReveal } from "@/components/sections/SectionReveal";
+import { placeholderSrc } from "@/lib/placeholder";
 
 import { GALLERY_ITEMS } from "./image-maker-gallery-data";
 
-export function ImageMakerGallery() {
+export async function ImageMakerGallery() {
+  const t = await getTranslations("auto.componentsImageMakerImageMakerGallery");
+
   return (
     <section id="gallery" className="bg-neutral-50 py-20 sm:py-28">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <SectionReveal>
           <h2 className="text-center font-heading text-3xl font-bold text-neutral-900 sm:text-4xl">
-            Example outputs from creators
+            {t("title")}
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-center text-neutral-600">
-            Real-world layouts and styles you can recreate—or use as inspiration
-            for your next project.
+            {t("subtitle")}
           </p>
         </SectionReveal>
 
@@ -25,7 +29,7 @@ export function ImageMakerGallery() {
             >
               <div className={`relative w-full ${item.aspectClass}`}>
                 <OptimizedImage
-                  src={`https://picsum.photos/seed/${item.id}/600/800`}
+                  src={placeholderSrc(item.id, 600, 800)}
                   alt={item.alt}
                   fill
                   sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"

src/components/layout/DirectionProvider.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { DirectionProvider as RadixDirectionProvider } from "@radix-ui/react-direction";
+
+/**
+ * Propagates the document direction to all Radix UI primitives (dropdown menus,
+ * selects, popovers, sheets…). Radix portals its content out of the DOM tree and
+ * assumes LTR unless told otherwise — without this, RTL menus render left-aligned
+ * with `align="start"` resolving to the wrong side.
+ */
+export function DirectionProvider({
+  dir,
+  children,
+}: {
+  dir: "rtl" | "ltr";
+  children: React.ReactNode;
+}) {
+  return <RadixDirectionProvider dir={dir}>{children}</RadixDirectionProvider>;
+}

src/components/layout/NavbarMenuDropdown.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { ChevronDown, LayoutGrid } from "lucide-react";
 
 import {
@@ -68,11 +69,14 @@ interface NavbarLearnDropdownProps {
   label?: string;
 }
 
-export function NavbarLearnDropdown({ items, label = "Learn" }: NavbarLearnDropdownProps) {
+export function NavbarLearnDropdown({ items, label }: NavbarLearnDropdownProps) {
+  const t = useTranslations("auto.componentsLayoutNavbarMenuDropdown");
+  const resolvedLabel = label ?? t("learn");
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className={triggerClassName}>
-        {label}
+        {resolvedLabel}
         <ChevronDown className="h-3.5 w-3.5 text-gray-500" aria-hidden />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className={cn(panelClassName, "min-w-[180px]")}>

src/components/layout/NavbarMobileMenu.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { LayoutGrid } from "lucide-react";
 
 import {
@@ -17,11 +18,13 @@ const linkClass =
   "flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900";
 
 export function NavbarMobileMenu({ onNavigate }: NavbarMobileMenuProps) {
+  const t = useTranslations("auto.componentsLayoutNavbarMobileMenu");
+
   return (
     <div className="flex flex-1 flex-col gap-6 overflow-y-auto">
       <section>
         <p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
-          Video Maker
+          {t("videoMaker")}
         </p>
         <Link
           href={VIDEO_MAKER_NAV.browseHref}
@@ -44,7 +47,7 @@ export function NavbarMobileMenu({ onNavigate }: NavbarMobileMenuProps) {
 
       <section>
         <p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
-          Image Maker
+          {t("imageMaker")}
         </p>
         <Link
           href={IMAGE_MAKER_NAV.browseHref}
@@ -67,13 +70,13 @@ export function NavbarMobileMenu({ onNavigate }: NavbarMobileMenuProps) {
 
       <section>
         <Link href="/pricing" onClick={onNavigate} className={linkClass}>
-          Pricing
+          {t("pricing")}
         </Link>
       </section>
 
       <section>
         <p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
-          Learn
+          {t("learn")}
         </p>
         <ul className="mt-1 space-y-0.5">
           {LEARN_NAV_ITEMS.map((item) => (

src/components/sections/HeroPreviewCards.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { motion, type Variants } from "framer-motion";
 
 import { VideoPlayOverlay } from "@/components/sections/VideoPlayOverlay";
@@ -8,10 +9,10 @@ import { getHeroPreviewVideoSrc } from "@/lib/template-preview-media";
 import { cn } from "@/lib/utils";
 
 const previewTemplates = [
-  { id: "hero-3d", title: "Factory of 3D Animations" },
-  { id: "hero-whiteboard", title: "Whiteboard Animation Toolkit" },
-  { id: "hero-explainer", title: "3D Explainer Video Toolkit" },
-  { id: "hero-trendy", title: "Trendy Explainer Toolkit" },
+  { id: "hero-3d", titleKey: "template3dTitle" },
+  { id: "hero-whiteboard", titleKey: "templateWhiteboardTitle" },
+  { id: "hero-explainer", titleKey: "templateExplainerTitle" },
+  { id: "hero-trendy", titleKey: "templateTrendyTitle" },
 ] as const;
 
 const containerVariants: Variants = {
@@ -37,6 +38,8 @@ interface HeroVideoThumbProps {
 }
 
 function HeroVideoThumb({ videoSrc, label }: HeroVideoThumbProps) {
+  const t = useTranslations("auto.componentsSectionsHeroPreviewCards");
+
   return (
     <div className="group/thumb relative aspect-[4/3] overflow-hidden rounded-xl border border-neutral-200/80 bg-neutral-100 shadow-sm transition-shadow duration-300 hover:shadow-md">
       <video
@@ -47,7 +50,7 @@ function HeroVideoThumb({ videoSrc, label }: HeroVideoThumbProps) {
         playsInline
         preload="metadata"
         className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover/thumb:scale-[1.02]"
-        aria-label={`${label} preview`}
+        aria-label={t("previewAriaLabel", { label })}
       />
       <VideoPlayOverlay
         size="lg"
@@ -58,6 +61,8 @@ function HeroVideoThumb({ videoSrc, label }: HeroVideoThumbProps) {
 }
 
 export function HeroPreviewCards() {
+  const t = useTranslations("auto.componentsSectionsHeroPreviewCards");
+
   return (
     <motion.div
       variants={containerVariants}
@@ -67,29 +72,32 @@ export function HeroPreviewCards() {
       className="mx-auto mt-14 w-full max-w-7xl sm:mt-16"
     >
       <p className="text-center font-heading text-xl font-bold tracking-tight text-neutral-900 sm:text-2xl">
-        Made by world-class motion designers
+        {t("heading")}
       </p>
 
       <div className="mt-8 grid grid-cols-2 gap-4 sm:gap-5 lg:grid-cols-4 lg:gap-6">
-        {previewTemplates.map((template, index) => (
-          <motion.div key={template.id} variants={cardVariants}>
-            <Link
-              href="/templates"
-              className={cn(
-                "group block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rf-blue focus-visible:ring-offset-2",
-                "transition-transform duration-300 hover:-translate-y-0.5"
-              )}
-            >
-              <HeroVideoThumb
-                videoSrc={getHeroPreviewVideoSrc(index)}
-                label={template.title}
-              />
-              <p className="mt-3 text-center font-heading text-sm font-semibold text-neutral-900 sm:text-[15px]">
-                {template.title}
-              </p>
-            </Link>
-          </motion.div>
-        ))}
+        {previewTemplates.map((template, index) => {
+          const title = t(template.titleKey);
+          return (
+            <motion.div key={template.id} variants={cardVariants}>
+              <Link
+                href="/templates"
+                className={cn(
+                  "group block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rf-blue focus-visible:ring-offset-2",
+                  "transition-transform duration-300 hover:-translate-y-0.5"
+                )}
+              >
+                <HeroVideoThumb
+                  videoSrc={getHeroPreviewVideoSrc(index)}
+                  label={title}
+                />
+                <p className="mt-3 text-center font-heading text-sm font-semibold text-neutral-900 sm:text-[15px]">
+                  {title}
+                </p>
+              </Link>
+            </motion.div>
+          );
+        })}
       </div>
     </motion.div>
   );

src/components/sections/PricingAnimatedPrice.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
+import { useTranslations } from "next-intl";
 
 import { cn } from "@/lib/utils";
 
@@ -22,6 +23,7 @@ export function PricingAnimatedPrice({
   size = "default",
 }: PricingAnimatedPriceProps) {
   const isCompact = size === "compact";
+  const t = useTranslations("auto.componentsSectionsPricingAnimatedPrice");
 
   return (
     <div className={isCompact ? "mt-2" : "mt-4"}>
@@ -53,7 +55,7 @@ export function PricingAnimatedPrice({
             ${formatPrice(price)}
           </motion.span>
         </AnimatePresence>
-        <span className="ml-1 text-sm font-normal text-neutral-500">/ month</span>
+        <span className="ml-1 text-sm font-normal text-neutral-500">{t("perMonth")}</span>
       </div>
     </div>
   );

src/components/sections/PricingBillingToggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
 
 import type { BillingPeriod } from "@/components/sections/pricing-data";
 import { ANNUAL_SAVINGS_PERCENT } from "@/components/sections/pricing-data";
@@ -17,12 +18,13 @@ export function PricingBillingToggle({
   onChange,
   layoutId = "pricing-billing-pill",
 }: PricingBillingToggleProps) {
+  const t = useTranslations("auto.componentsSectionsPricingBillingToggle");
   return (
     <div className="flex flex-col items-center gap-2">
       <div className="inline-flex rounded-full border border-gray-200 bg-white p-1 shadow-sm">
         {(["monthly", "annual"] as const).map((period) => {
           const isActive = billing === period;
-          const label = period === "monthly" ? "Monthly" : "Yearly";
+          const label = period === "monthly" ? t("monthly") : t("yearly");
           return (
             <button
               key={period}
@@ -47,10 +49,10 @@ export function PricingBillingToggle({
       </div>
       {billing === "annual" ? (
         <span className="rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-700">
-          Save {ANNUAL_SAVINGS_PERCENT}%
+          {t("savePercent", { percent: ANNUAL_SAVINGS_PERCENT })}
         </span>
       ) : (
-        <p className="text-sm text-neutral-400">Switch to Yearly to save more</p>
+        <p className="text-sm text-neutral-400">{t("switchToYearly")}</p>
       )}
     </div>
   );

src/components/sections/PricingCard.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { Tag } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { PricingAnimatedPrice } from "@/components/sections/PricingAnimatedPrice";
 import { PricingCheckoutButton } from "@/components/sections/PricingCheckoutButton";
@@ -22,6 +23,7 @@ export interface PricingCardProps {
 }
 
 export function PricingCard({ tier, billing }: PricingCardProps) {
+  const t = useTranslations("auto.componentsSectionsPricingCard");
   const price = getDisplayPrice(tier, billing);
   const compareAt = getCompareAtPrice(tier, billing);
   const highlighted = tier.highlighted ?? false;
@@ -38,7 +40,7 @@ export function PricingCard({ tier, billing }: PricingCardProps) {
     >
       {highlighted ? (
         <div className="bg-gradient-to-r from-rose-400 via-violet-500 to-violet-600 px-4 py-2 text-center text-sm font-semibold text-white">
-          Most Popular
+          {t("mostPopular")}
         </div>
       ) : null}
 

src/components/sections/PricingCheckoutButton.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { Loader2 } from "lucide-react";
 
 import type { BillingPeriod } from "@/components/sections/pricing-data";
@@ -25,6 +26,7 @@ export function PricingCheckoutButton({
   variant = "default",
 }: PricingCheckoutButtonProps) {
   const router = useRouter();
+  const t = useTranslations("auto.componentsSectionsPricingCheckoutButton");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -46,7 +48,7 @@ export function PricingCheckoutButton({
           router.push(`/auth?tab=sign-up&plan=${plan}`);
           return;
         }
-        throw new Error(data.error ?? "Checkout failed.");
+        throw new Error(data.error ?? t("checkoutFailed"));
       }
 
       if (data.url) {
@@ -54,12 +56,12 @@ export function PricingCheckoutButton({
         return;
       }
 
-      throw new Error("No checkout URL returned.");
+      throw new Error(t("noCheckoutUrl"));
     } catch (checkoutError) {
       setError(
         checkoutError instanceof Error
           ? checkoutError.message
-          : "Checkout failed."
+          : t("checkoutFailed")
       );
     } finally {
       setLoading(false);

src/components/sections/PricingCompareTable.tsx

@@ -2,6 +2,7 @@
 
 import { Fragment } from "react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 import { PricingAnimatedPrice } from "@/components/sections/PricingAnimatedPrice";
 import { PricingBillingToggle } from "@/components/sections/PricingBillingToggle";
@@ -62,6 +63,7 @@ function PlanHeaderCell({
   tier: PricingTier;
   billing: BillingPeriod;
 }) {
+  const t = useTranslations("auto.componentsSectionsPricingCompareTable");
   const highlighted = tier.highlighted ?? false;
   const isStripePlan = tier.id === "pro" || tier.id === "business";
 
@@ -74,7 +76,7 @@ function PlanHeaderCell({
     >
       {highlighted ? (
         <span className="mb-2 inline-block rounded-full bg-gradient-to-r from-violet-500 to-blue-600 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white">
-          Most Popular
+          {t("mostPopular")}
         </span>
       ) : (
         <span className="mb-2 block h-5" aria-hidden />
@@ -118,6 +120,7 @@ export function PricingCompareTable({
   billing,
   onBillingChange,
 }: PricingCompareTableProps) {
+  const t = useTranslations("auto.componentsSectionsPricingCompareTable");
   const lite = PRICING_TIERS.find((t) => t.id === "lite");
   const pro = PRICING_TIERS.find((t) => t.id === "pro");
   const business = PRICING_TIERS.find((t) => t.id === "business");
@@ -131,7 +134,7 @@ export function PricingCompareTable({
           <tr className="border-b border-gray-100">
             <th className="w-[38%] px-6 pb-4 pt-6 text-left align-top">
               <h3 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text font-heading text-lg font-bold text-transparent sm:text-xl">
-                Compare Plans &amp; Features
+                {t("compareHeading")}
               </h3>
               <div className="mt-4 items-start">
                 <PricingBillingToggle
@@ -141,7 +144,7 @@ export function PricingCompareTable({
                 />
               </div>
               <p className="mt-3 flex items-center gap-1 text-xs font-bold uppercase tracking-wide text-blue-600">
-                Save up to {COMPARE_ANNUAL_SAVINGS_BADGE}%
+                {t("saveUpTo", { percent: COMPARE_ANNUAL_SAVINGS_BADGE })}
                 <SavingsArrowIcon />
               </p>
             </th>

src/components/sections/PricingCreditsBanner.tsx

@@ -1,11 +1,16 @@
+"use client";
+
 import { Zap } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 export function PricingCreditsBanner() {
+  const t = useTranslations("auto.componentsSectionsPricingCreditsBanner");
+
   return (
     <div className="flex items-start gap-2 rounded-lg bg-sky-50 px-3 py-2.5 text-left">
       <Zap className="mt-0.5 h-4 w-4 shrink-0 text-rf-blue" aria-hidden />
       <p className="text-xs leading-snug text-neutral-700">
-        You can refill AI credits anytime with an active plan
+        {t("refillCredits")}
       </p>
     </div>
   );

src/components/sections/PricingFeatureList.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import { Check, Info } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import type { PricingFeature } from "@/components/sections/pricing-data";
 
@@ -11,6 +14,8 @@ export function PricingFeatureList({
   heading,
   features,
 }: PricingFeatureListProps) {
+  const t = useTranslations("auto.componentsSectionsPricingFeatureList");
+
   return (
     <div className="mt-6">
       {heading ? (
@@ -36,7 +41,7 @@ export function PricingFeatureList({
               {feature.info ? (
                 <Info
                   className="h-3.5 w-3.5 shrink-0 text-neutral-400"
-                  aria-label="More information"
+                  aria-label={t("moreInformation")}
                 />
               ) : null}
             </span>

src/components/sections/PricingFreeBanner.tsx

@@ -1,17 +1,21 @@
+"use client";
+
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 
 export function PricingFreeBanner() {
+  const t = useTranslations("auto.componentsSectionsPricingFreeBanner");
+
   return (
     <div className="flex flex-col items-start justify-between gap-6 rounded-xl border border-gray-100 bg-white px-6 py-6 shadow-sm sm:flex-row sm:items-center sm:px-8">
       <div className="max-w-xl">
         <h3 className="font-heading text-lg font-bold text-neutral-900 sm:text-xl">
-          Always Free to Try
+          {t("title")}
         </h3>
         <p className="mt-2 text-sm leading-relaxed text-neutral-600 sm:text-[15px]">
-          Explore CreatorStudio with a Free plan — create HD videos with a
-          watermark, try basic features, and experiment before you subscribe.
+          {t("description")}
         </p>
       </div>
       <Button
@@ -20,7 +24,7 @@ export function PricingFreeBanner() {
         className="shrink-0 rounded-lg border-2 border-rf-blue bg-white px-8 text-rf-blue hover:bg-rf-blue-light"
         asChild
       >
-        <Link href="/auth?tab=sign-up">Get Started</Link>
+        <Link href="/auth?tab=sign-up">{t("ctaLabel")}</Link>
       </Button>
     </div>
   );

src/components/sections/TemplateCard.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useState } from "react";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
+import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 import { OptimizedImage } from "@/components/ui/optimized-image";
@@ -40,9 +41,12 @@ export function TemplateCard({
   priority = false,
   onUseTemplate,
   isUsingTemplate = false,
-  useTemplateLabel = "Use Template",
-  openingLabel = "Opening…",
+  useTemplateLabel,
+  openingLabel,
 }: TemplateCardProps) {
+  const t = useTranslations("auto.componentsSectionsTemplateCard");
+  const resolvedUseTemplateLabel = useTemplateLabel ?? t("useTemplateLabel");
+  const resolvedOpeningLabel = openingLabel ?? t("openingLabel");
   const [isHovered, setIsHovered] = useState(false);
   const seed = previewSeed ?? name;
   const videoSrc = previewVideoUrl ?? getTemplatePreviewVideoSrc(seed);
@@ -64,7 +68,7 @@ export function TemplateCard({
         <Link
           href={detailHref}
           className="absolute inset-0 z-0 block no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
-          aria-label={`View ${name} template`}
+          aria-label={t("viewTemplateAriaLabel", { name })}
         >
           <OptimizedImage
             src={imageSrc}
@@ -120,7 +124,7 @@ export function TemplateCard({
                   onUseTemplate?.();
                 }}
               >
-                {isUsingTemplate ? openingLabel : useTemplateLabel}
+                {isUsingTemplate ? resolvedOpeningLabel : resolvedUseTemplateLabel}
               </Button>
             </motion.div>
           ) : null}

src/components/sections/TestimonialCard.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import { Star } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { cn } from "@/lib/utils";
 
@@ -13,6 +16,7 @@ export function TestimonialCard({
   testimonial,
   className,
 }: TestimonialCardProps) {
+  const t = useTranslations("auto.componentsSectionsTestimonialCard");
   const { name, role, company, quote, initials } = testimonial;
 
   return (
@@ -22,7 +26,7 @@ export function TestimonialCard({
         className
       )}
     >
-      <p className="sr-only">Rated 5 out of 5 stars</p>
+      <p className="sr-only">{t("ratingLabel")}</p>
       <div className="flex items-center gap-1" aria-hidden>
         {Array.from({ length: 5 }).map((_, index) => (
           <Star

src/components/sections/template-gallery-data.ts

@@ -1,3 +1,5 @@
+import { placeholderSrc } from "@/lib/placeholder";
+
 export const FILTER_TABS = [
   "All",
   "Videos",
@@ -78,7 +80,7 @@ export function filterTemplates(
 }
 
 export function getTemplateImageSrc(id: string): string {
-  return `https://picsum.photos/seed/${id}/400/300`;
+  return placeholderSrc(id, 400, 300);
 }
 
 /** Video presets for /studio/video/new onboarding */
@@ -94,49 +96,49 @@ export const TEMPLATE_GALLERY_ITEMS: TemplateGalleryItem[] = [
   {
     id: "promo-reel",
     name: "Animated Inspirational Video",
-    imageSrc: "https://picsum.photos/seed/promo-reel/400/280",
+    imageSrc: placeholderSrc("promo-reel", 400, 280),
     previewVideoUrl: MIXKIT.sunsetPlateaus,
   },
   {
     id: "product-launch",
     name: "Cybersecurity Company Promo",
-    imageSrc: "https://picsum.photos/seed/product-launch/400/280",
+    imageSrc: placeholderSrc("product-launch", 400, 280),
     previewVideoUrl: MIXKIT.cityTraffic,
   },
   {
     id: "brand-story",
     name: "Get to Know Your Customers Day",
-    imageSrc: "https://picsum.photos/seed/brand-story/400/280",
+    imageSrc: placeholderSrc("brand-story", 400, 280),
     previewVideoUrl: MIXKIT.cloudsRunner,
   },
   {
     id: "instagram-carousel",
     name: "SEO Agency Introduction",
-    imageSrc: "https://picsum.photos/seed/instagram/400/280",
+    imageSrc: placeholderSrc("instagram", 400, 280),
     previewVideoUrl: MIXKIT.meadow,
   },
   {
     id: "tiktok-hook",
     name: "Tech Startup Promo",
-    imageSrc: "https://picsum.photos/seed/tiktok/400/280",
+    imageSrc: placeholderSrc("tiktok", 400, 280),
     previewVideoUrl: MIXKIT.skyscrapers,
   },
   {
     id: "pitch-deck",
     name: "Corporate Explainer",
-    imageSrc: "https://picsum.photos/seed/pitch-deck/400/280",
+    imageSrc: placeholderSrc("pitch-deck", 400, 280),
     previewVideoUrl: MIXKIT.cityTraffic,
   },
   {
     id: "hero-promo",
     name: "Hero Product Launch",
-    imageSrc: "https://picsum.photos/seed/hero-promo/400/280",
+    imageSrc: placeholderSrc("hero-promo", 400, 280),
     previewVideoUrl: MIXKIT.sunsetPlateaus,
   },
   {
     id: "event-recap",
     name: "Event Recap Highlight",
-    imageSrc: "https://picsum.photos/seed/event-recap/400/280",
+    imageSrc: placeholderSrc("event-recap", 400, 280),
     previewVideoUrl: MIXKIT.meadow,
   },
 ];

src/components/studio/AddSceneMenu.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { FilePlus, LayoutTemplate, Plus } from "lucide-react";
 
 import {
@@ -16,6 +17,7 @@ interface AddSceneMenuProps {
 }
 
 export function AddSceneMenu({ onAddBlank, variant = "footer" }: AddSceneMenuProps) {
+  const t = useTranslations("auto.componentsStudioAddSceneMenu");
   const [open, setOpen] = useState(false);
   const isHeader = variant === "header";
 
@@ -26,8 +28,8 @@ export function AddSceneMenu({ onAddBlank, variant = "footer" }: AddSceneMenuPro
           <button
             type="button"
             className="flex h-7 w-7 items-center justify-center rounded-md text-[#8b91a7] transition-colors hover:bg-[#1f2234] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
-            aria-label="Add scene"
-            title="Add scene"
+            aria-label={t("addScene")}
+            title={t("addScene")}
           >
             <Plus className="h-4 w-4" />
           </button>
@@ -37,7 +39,7 @@ export function AddSceneMenu({ onAddBlank, variant = "footer" }: AddSceneMenuPro
             className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-[#2a2d3e] bg-[#1a1d2e]/50 px-3 py-2 text-xs font-medium text-gray-300 transition-colors hover:border-[#3d4260] hover:bg-[#1f2234] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
           >
             <Plus className="h-3.5 w-3.5" aria-hidden />
-            Add Scene
+            {t("addScene")}
           </button>
         )}
       </PopoverTrigger>
@@ -51,14 +53,14 @@ export function AddSceneMenu({ onAddBlank, variant = "footer" }: AddSceneMenuPro
           className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-gray-200 hover:bg-[#252938] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
         >
           <FilePlus className="h-4 w-4 shrink-0" aria-hidden />
-          Blank Scene
+          {t("blankScene")}
         </button>
         <Link
           href="/templates"
           className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-gray-200 hover:bg-[#252938] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
         >
           <LayoutTemplate className="h-4 w-4 shrink-0" aria-hidden />
-          From Template
+          {t("fromTemplate")}
         </Link>
       </PopoverContent>
     </Popover>

src/components/studio/DraggableSceneItem.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { GripVertical } from "lucide-react";
@@ -28,6 +29,7 @@ export function DraggableSceneItem({
   onDuplicate,
   onRename,
 }: DraggableSceneItemProps) {
+  const t = useTranslations("auto.componentsStudioDraggableSceneItem");
   const [isEditing, setIsEditing] = useState(false);
   const [editName, setEditName] = useState(scene.name);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -80,7 +82,7 @@ export function DraggableSceneItem({
         type="button"
         ref={setActivatorNodeRef}
         className="flex w-6 shrink-0 cursor-grab items-center justify-center text-gray-500 hover:text-gray-300 active:cursor-grabbing"
-        aria-label={`Drag scene ${scene.name}`}
+        aria-label={t("dragScene", { name: scene.name })}
         {...attributes}
         {...listeners}
       >
@@ -129,7 +131,7 @@ export function DraggableSceneItem({
                 }
               }}
               className="mt-1.5 w-full rounded border border-[#2a2d3e] bg-[#1a1d2e] px-1.5 py-0.5 text-xs text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#4c6ef5]"
-              aria-label="Scene name"
+              aria-label={t("sceneNameLabel")}
             />
           ) : (
             <p

src/components/studio/ProjectSaveIndicator.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Check, Loader2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -17,6 +18,8 @@ export function ProjectSaveIndicator({
   onRetry,
   className,
 }: ProjectSaveIndicatorProps) {
+  const t = useTranslations("auto.componentsStudioProjectSaveIndicator");
+
   if (status === "idle") return null;
 
   if (status === "pending" || status === "saving") {
@@ -29,7 +32,7 @@ export function ProjectSaveIndicator({
         aria-live="polite"
       >
         <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
-        Saving…
+        {t("saving")}
       </span>
     );
   }
@@ -44,7 +47,7 @@ export function ProjectSaveIndicator({
         aria-live="polite"
       >
         <Check className="h-3.5 w-3.5" aria-hidden />
-        Saved
+        {t("saved")}
       </span>
     );
   }
@@ -55,14 +58,14 @@ export function ProjectSaveIndicator({
         className={cn("text-xs font-medium text-gray-400", className)}
         aria-live="polite"
       >
-        Local save
+        {t("localSave")}
       </span>
     );
   }
 
   return (
     <span className={cn("flex items-center gap-2", className)} aria-live="polite">
-      <span className="text-xs text-red-400">Save failed</span>
+      <span className="text-xs text-red-400">{t("saveFailed")}</span>
       {onRetry ? (
         <Button
           type="button"
@@ -71,7 +74,7 @@ export function ProjectSaveIndicator({
           className="h-7 border-[#2a2d3e] bg-[#1a1d2e] px-2 text-xs text-gray-200 hover:bg-[#252938]"
           onClick={onRetry}
         >
-          Retry
+          {t("retry")}
         </Button>
       ) : null}
     </span>

src/components/studio/PropertiesPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { MousePointer2, SlidersHorizontal } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { CommonLayerControls } from "@/components/studio/properties/CommonLayerControls";
 import { ImageLayerProperties } from "@/components/studio/properties/ImageLayerProperties";
@@ -14,6 +15,7 @@ export interface PropertiesPanelProps {
 }
 
 export function PropertiesPanel({ className }: PropertiesPanelProps) {
+  const t = useTranslations("auto.componentsStudioPropertiesPanel");
   const scenes = useStudioStore((state) => state.scenes);
   const activeSceneId = useStudioStore((state) => state.activeSceneId);
   const selectedLayerId = useStudioStore((state) => state.selectedLayerId);
@@ -33,7 +35,7 @@ export function PropertiesPanel({ className }: PropertiesPanelProps) {
     >
       <div className="flex shrink-0 items-center justify-between border-b border-gray-200 px-3 py-3">
         <h2 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-          Properties
+          {t("title")}
         </h2>
         <SlidersHorizontal className="h-4 w-4 text-gray-400" aria-hidden />
       </div>
@@ -44,14 +46,14 @@ export function PropertiesPanel({ className }: PropertiesPanelProps) {
             <MousePointer2 className="h-6 w-6 text-gray-300" aria-hidden />
           </div>
           <p className="text-xs text-gray-400">
-            Select a layer to edit properties
+            {t("emptyState")}
           </p>
         </div>
       ) : (
         <div className="flex min-h-0 flex-1 flex-col">
           <div className="flex-1 space-y-5 overflow-y-auto p-3">
             <p className="text-[11px] font-medium capitalize text-gray-400">
-              {layer.type} layer
+              {t("layerLabel", { type: layer.type })}
             </p>
             {layer.type === "text" ? <TextLayerProperties layer={layer} /> : null}
             {layer.type === "image" ? (

src/components/studio/RenderModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 import { Download, Link2, Loader2, RefreshCw } from "lucide-react";
 
 import { apiFetch } from "@/lib/api/fetch";
@@ -49,6 +50,7 @@ export function RenderModal({
   scenes,
   preset = null,
 }: RenderModalProps) {
+  const t = useTranslations("auto.componentsStudioRenderModal");
   const [resolution, setResolution] =
     useState<RenderSettings["resolution"]>("1080p");
   const [fps, setFps] = useState<RenderSettings["fps"]>(30);
@@ -93,13 +95,13 @@ export function RenderModal({
 
         if (!response.ok) {
           setJobStatus("failed");
-          setErrorMessage("Could not fetch render status.");
+          setErrorMessage(t("errorFetchStatus"));
           return;
         }
 
         setProgress(data.progress ?? 0);
         setProgressMessage(
-          data.progressMessage ?? `Rendering… ${data.progress}%`
+          data.progressMessage ?? t("renderingProgress", { progress: data.progress })
         );
         if (data.previewB64) setPreviewB64(data.previewB64);
 
@@ -112,18 +114,18 @@ export function RenderModal({
 
         if (data.status === "failed") {
           setJobStatus("failed");
-          setErrorMessage(data.errorMessage ?? "Render failed.");
+          setErrorMessage(data.errorMessage ?? t("errorRenderFailed"));
         }
       } catch {
         setJobStatus("failed");
-        setErrorMessage("Network error while polling status.");
+        setErrorMessage(t("errorNetworkPolling"));
       }
     };
 
     poll();
     const intervalId = window.setInterval(poll, 3000);
     return () => window.clearInterval(intervalId);
-  }, [jobStatus, jobId]);
+  }, [jobStatus, jobId, t]);
 
   const startRender = async () => {
     setJobStatus("submitting");
@@ -150,17 +152,17 @@ export function RenderModal({
 
       if (!response.ok || !data.jobId) {
         setJobStatus("failed");
-        setErrorMessage(data.error ?? "Failed to start render.");
+        setErrorMessage(data.error ?? t("errorStartRender"));
         return;
       }
 
       setJobId(data.jobId);
       setJobStatus("polling");
       setProgress(0);
-      setProgressMessage("Queued for rendering…");
+      setProgressMessage(t("queued"));
     } catch {
       setJobStatus("failed");
-      setErrorMessage("Could not reach render API.");
+      setErrorMessage(t("errorReachApi"));
     }
   };
 
@@ -170,17 +172,17 @@ export function RenderModal({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>{presetLabel ?? "Export"}</DialogTitle>
+          <DialogTitle>{presetLabel ?? t("dialogTitle")}</DialogTitle>
           <DialogDescription>
             {preset
               ? RENDER_EXPORT_PRESETS[preset].description
-              : "Export your project as MP4 via the nexrender pipeline."}
+              : t("dialogDescription")}
           </DialogDescription>
         </DialogHeader>
 
         {jobStatus === "completed" && outputUrl ? (
           <div className="space-y-4">
-            <p className="text-sm text-green-400">Your video is ready.</p>
+            <p className="text-sm text-green-400">{t("videoReady")}</p>
             <div className="flex flex-col gap-2">
               <a
                 href={outputUrl}
@@ -188,7 +190,7 @@ export function RenderModal({
                 className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
               >
                 <Download className="h-4 w-4" />
-                Download MP4
+                {t("downloadMp4")}
               </a>
               <a
                 href={outputUrl}
@@ -197,7 +199,7 @@ export function RenderModal({
                 className="inline-flex items-center justify-center gap-2 rounded-lg border border-[#2a2d3e] px-4 py-2.5 text-sm text-gray-200 hover:bg-[#1f2234] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
               >
                 <Link2 className="h-4 w-4" />
-                Share link
+                {t("shareLink")}
               </a>
             </div>
             <Button
@@ -206,13 +208,13 @@ export function RenderModal({
               className="w-full border-[#2a2d3e]"
               onClick={() => onOpenChange(false)}
             >
-              Close
+              {t("close")}
             </Button>
           </div>
         ) : jobStatus === "failed" ? (
           <div className="space-y-4">
             <p className="rounded-lg border border-red-900/50 bg-red-950/40 px-3 py-2 text-sm text-red-300">
-              {errorMessage ?? "Something went wrong."}
+              {errorMessage ?? t("errorGeneric")}
             </p>
             <Button
               type="button"
@@ -220,7 +222,7 @@ export function RenderModal({
               onClick={startRender}
             >
               <RefreshCw className="h-4 w-4" />
-              Retry
+              {t("retry")}
             </Button>
           </div>
         ) : isBusy ? (
@@ -231,7 +233,7 @@ export function RenderModal({
                 // eslint-disable-next-line @next/next/no-img-element
                 <img
                   src={`data:image/png;base64,${previewB64}`}
-                  alt="Render preview"
+                  alt={t("previewAlt")}
                   className="h-full w-full object-cover"
                 />
               ) : (
@@ -241,12 +243,12 @@ export function RenderModal({
               )}
               {/* Step badge */}
               <div className="absolute bottom-2 right-2 rounded-md bg-black/60 px-2 py-0.5 text-[10px] font-medium text-gray-300 backdrop-blur-sm">
-                {progressMessage || "Rendering…"}
+                {progressMessage || t("rendering")}
               </div>
             </div>
             <div>
               <div className="mb-1 flex justify-between text-xs text-gray-500">
-                <span>Progress</span>
+                <span>{t("progress")}</span>
                 <span>{progress}%</span>
               </div>
               <div className="h-2 overflow-hidden rounded-full bg-[#1a1d2e]">
@@ -261,7 +263,7 @@ export function RenderModal({
           <div className="space-y-4">
             <div>
               <p className="mb-2 text-xs font-medium text-gray-400">
-                Resolution
+                {t("resolution")}
               </p>
               <div className="flex gap-2">
                 {RESOLUTIONS.map((item) => (
@@ -282,13 +284,13 @@ export function RenderModal({
               </div>
             </div>
             <div>
-              <p className="mb-2 text-xs font-medium text-gray-400">Format</p>
+              <p className="mb-2 text-xs font-medium text-gray-400">{t("format")}</p>
               <div className="rounded-lg border border-primary-500 bg-primary-600/20 px-3 py-2 text-center text-xs font-medium text-white">
                 MP4
               </div>
             </div>
             <div>
-              <p className="mb-2 text-xs font-medium text-gray-400">FPS</p>
+              <p className="mb-2 text-xs font-medium text-gray-400">{t("fps")}</p>
               <div className="flex gap-2">
                 {FPS_OPTIONS.map((item) => (
                   <button
@@ -313,7 +315,7 @@ export function RenderModal({
               onClick={startRender}
               disabled={scenes.length === 0}
             >
-              Start Rendering
+              {t("startRendering")}
             </Button>
           </div>
         )}

src/components/studio/SceneBrowserCard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Check, Clock, ImageIcon, User } from "lucide-react";
 
 import { getScenePreviewVideoSrc } from "@/lib/template-preview-media";
@@ -52,6 +53,7 @@ export function SceneBrowserCard({
   isSelected,
   onToggle,
 }: SceneBrowserCardProps) {
+  const t = useTranslations("auto.componentsStudioSceneBrowserCard");
   const [hovered, setHovered] = useState(false);
   const videoSrc = getScenePreviewVideoSrc(scene.category, scene.id);
 
@@ -141,7 +143,7 @@ export function SceneBrowserCard({
         {!isSelected && hovered && (
           <div className="absolute inset-0 flex items-center justify-center">
             <span className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-lg">
-              Select
+              {t("selectCta")}
             </span>
           </div>
         )}

src/components/studio/SceneBrowserModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
 import { LayoutGrid, Search, X } from "lucide-react";
 
 import { SceneBrowserCard } from "@/components/studio/SceneBrowserCard";
@@ -34,6 +35,7 @@ export function SceneBrowserModal({
   onOpenChange,
   onScenesAdd,
 }: SceneBrowserModalProps) {
+  const t = useTranslations("auto.componentsStudioSceneBrowserModal");
   const [categoryId, setCategoryId] = useState<SceneBrowserCategoryId>("all");
   const [mediaFilter, setMediaFilter] = useState<SceneBrowserMediaFilter>("all");
   const [search, setSearch] = useState("");
@@ -92,13 +94,13 @@ export function SceneBrowserModal({
         <DialogHeader className="shrink-0 border-b border-gray-200 px-6 py-4">
           <div className="flex items-center justify-between gap-4">
             <DialogTitle className="font-heading text-lg font-semibold text-gray-900">
-              Select Scenes
+              {t("title")}
             </DialogTitle>
             <button
               type="button"
               onClick={handleClose}
               className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600"
-              aria-label="Close"
+              aria-label={t("closeAriaLabel")}
             >
               <X className="h-4 w-4" />
             </button>
@@ -111,9 +113,9 @@ export function SceneBrowserModal({
               onValueChange={(v) => setMediaFilter(v as SceneBrowserMediaFilter)}
             >
               <TabsList className="bg-gray-100">
-                <TabsTrigger value="all">All</TabsTrigger>
-                <TabsTrigger value="video">Video</TabsTrigger>
-                <TabsTrigger value="photo">Photo</TabsTrigger>
+                <TabsTrigger value="all">{t("filterAll")}</TabsTrigger>
+                <TabsTrigger value="video">{t("filterVideo")}</TabsTrigger>
+                <TabsTrigger value="photo">{t("filterPhoto")}</TabsTrigger>
               </TabsList>
             </Tabs>
 
@@ -121,7 +123,7 @@ export function SceneBrowserModal({
               <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" aria-hidden />
               <input
                 type="search"
-                placeholder="Search scenes..."
+                placeholder={t("searchPlaceholder")}
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 className="h-9 w-full rounded-lg border border-gray-200 bg-white pl-9 pr-3 text-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600"
@@ -160,7 +162,7 @@ export function SceneBrowserModal({
               {filteredScenes.length === 0 ? (
                 <div className="flex flex-col items-center gap-3 py-16 text-center text-sm text-gray-500">
                   <LayoutGrid className="h-10 w-10 text-gray-300" aria-hidden />
-                  No scenes match your filters.
+                  {t("emptyState")}
                 </div>
               ) : (
                 <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
@@ -184,7 +186,7 @@ export function SceneBrowserModal({
             {selectedCount > 0 && (
               <span className="text-sm text-gray-600">
                 <span className="font-semibold text-gray-900">{selectedCount}</span>{" "}
-                scene{selectedCount !== 1 ? "s" : ""} selected
+                {t("selectedSuffix", { count: selectedCount })}
               </span>
             )}
             {selectedCount > 0 && (
@@ -193,7 +195,7 @@ export function SceneBrowserModal({
                 onClick={deselectAll}
                 className="text-sm text-gray-500 underline hover:text-gray-700 focus-visible:outline-none"
               >
-                Deselect All
+                {t("deselectAll")}
               </button>
             )}
           </div>
@@ -205,7 +207,7 @@ export function SceneBrowserModal({
               onClick={handleClose}
               className="border-gray-300 text-gray-700 hover:bg-gray-50"
             >
-              Cancel
+              {t("cancel")}
             </Button>
             <Button
               type="button"
@@ -214,8 +216,8 @@ export function SceneBrowserModal({
               className="min-w-[140px] bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
             >
               {selectedCount === 0
-                ? "Add to Video"
-                : `Add to Video (${selectedCount})`}
+                ? t("addToVideo")
+                : t("addToVideoCount", { count: selectedCount })}
             </Button>
           </div>
         </div>

src/components/studio/SceneItemActions.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Copy, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 interface SceneItemActionsProps {
   sceneName: string;
@@ -15,6 +16,7 @@ export function SceneItemActions({
   onDuplicate,
   onDelete,
 }: SceneItemActionsProps) {
+  const t = useTranslations("auto.componentsStudioSceneItemActions");
   return (
     <div
       className="absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100"
@@ -27,7 +29,7 @@ export function SceneItemActions({
           onDuplicate();
         }}
         className="flex h-6 w-6 items-center justify-center rounded bg-[#0f111a]/90 text-gray-300 hover:bg-[#1f2234] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
-        aria-label={`Duplicate ${sceneName}`}
+        aria-label={t("duplicate", { sceneName })}
       >
         <Copy className="h-3 w-3" aria-hidden />
       </button>
@@ -39,7 +41,7 @@ export function SceneItemActions({
             onDelete();
           }}
           className="flex h-6 w-6 items-center justify-center rounded bg-[#0f111a]/90 text-gray-300 hover:bg-red-600/90 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]"
-          aria-label={`Delete ${sceneName}`}
+          aria-label={t("delete", { sceneName })}
         >
           <Trash2 className="h-3 w-3" aria-hidden />
         </button>

src/components/studio/SceneTransitionPicker.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import {
   Popover,
   PopoverContent,
@@ -19,6 +20,7 @@ export function SceneTransitionPicker({
   transitionType,
   onChange,
 }: SceneTransitionPickerProps) {
+  const t = useTranslations("auto.componentsStudioSceneTransitionPicker");
   const [open, setOpen] = useState(false);
   const activeOption =
     SCENE_TRANSITION_OPTIONS.find((option) => option.id === transitionType) ??
@@ -30,8 +32,8 @@ export function SceneTransitionPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          title="Transition"
-          aria-label="Transition"
+          title={t("transition")}
+          aria-label={t("transition")}
           className={cn(
             "flex h-6 w-6 items-center justify-center rounded-full border border-[#2a2d3e] bg-[#1a1d2e] text-[#8b91a7] transition-colors hover:border-[#3d4260] hover:bg-[#252938] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]",
             transitionType !== "none" && "border-[#4c6ef5]/60 text-[#7b9eff]"
@@ -42,7 +44,7 @@ export function SceneTransitionPicker({
       </PopoverTrigger>
       <PopoverContent align="center" className="w-44 p-2">
         <p className="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-[#5c6278]">
-          Transition
+          {t("transition")}
         </p>
         <ul className="space-y-0.5">
           {SCENE_TRANSITION_OPTIONS.map((option) => {

src/components/studio/StudioMobileGate.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Monitor } from "lucide-react";
+import { getTranslations } from "next-intl/server";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -9,11 +10,11 @@ export interface StudioMobileGateProps {
   variant?: "video" | "image";
 }
 
-export function StudioMobileGate({ variant = "video" }: StudioMobileGateProps) {
+export async function StudioMobileGate({ variant = "video" }: StudioMobileGateProps) {
+  const t = await getTranslations("auto.componentsStudioStudioMobileGate");
+
   const title =
-    variant === "video"
-      ? "The Video Studio requires a desktop browser."
-      : "The Image Editor requires a desktop browser.";
+    variant === "video" ? t("titleVideo") : t("titleImage");
 
   return (
     <div
@@ -31,14 +32,14 @@ export function StudioMobileGate({ variant = "video" }: StudioMobileGateProps) {
         {title}
       </h1>
       <p className="mt-3 max-w-sm text-sm leading-relaxed text-gray-400">
-        Please open this project on a desktop or laptop.
+        {t("description")}
       </p>
       <Button
         asChild
         size="lg"
         className="mt-8 bg-blue-600 hover:bg-blue-700 focus-visible:ring-blue-500"
       >
-        <Link href="/dashboard">Go to Dashboard</Link>
+        <Link href="/dashboard">{t("dashboardCta")}</Link>
       </Button>
     </div>
   );

src/components/studio/StudioToolbar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef, useState, type ChangeEvent } from "react";
+import { useTranslations } from "next-intl";
 import {
   ArrowRight,
   Circle,
@@ -23,13 +24,13 @@ import { useStudioStore } from "@/lib/studio-store";
 
 const SHAPE_OPTIONS: {
   kind: ShapeKind;
-  label: string;
+  labelKey: string;
   icon: typeof Square;
   config: AddLayerInput;
 }[] = [
   {
     kind: "rect",
-    label: "Rectangle",
+    labelKey: "shapeRectangle",
     icon: Square,
     config: {
       type: "shape",
@@ -42,7 +43,7 @@ const SHAPE_OPTIONS: {
   },
   {
     kind: "circle",
-    label: "Circle",
+    labelKey: "shapeCircle",
     icon: Circle,
     config: {
       type: "shape",
@@ -55,7 +56,7 @@ const SHAPE_OPTIONS: {
   },
   {
     kind: "line",
-    label: "Line",
+    labelKey: "shapeLine",
     icon: Minus,
     config: {
       type: "shape",
@@ -68,7 +69,7 @@ const SHAPE_OPTIONS: {
   },
   {
     kind: "arrow",
-    label: "Arrow",
+    labelKey: "shapeArrow",
     icon: ArrowRight,
     config: {
       type: "shape",
@@ -87,6 +88,7 @@ const SHAPE_OPTIONS: {
 ];
 
 export function StudioToolbar() {
+  const t = useTranslations("auto.componentsStudioStudioToolbar");
   const addLayer = useStudioStore((state) => state.addLayer);
   const imageInputRef = useRef<HTMLInputElement>(null);
   const videoInputRef = useRef<HTMLInputElement>(null);
@@ -100,7 +102,7 @@ export function StudioToolbar() {
       width: 300,
       height: 60,
       props: {
-        text: "Edit this text",
+        text: t("defaultText"),
         fontSize: 48,
         fill: "#ffffff",
         fontFamily: "Inter, sans-serif",
@@ -162,19 +164,19 @@ export function StudioToolbar() {
         onChange={handleVideoFile}
       />
 
-      <ToolbarIconButton label="Add text" onClick={handleAddText}>
+      <ToolbarIconButton label={t("addText")} onClick={handleAddText}>
         <Type className="h-4 w-4" aria-hidden />
       </ToolbarIconButton>
 
       <ToolbarIconButton
-        label="Add image"
+        label={t("addImage")}
         onClick={() => imageInputRef.current?.click()}
       >
         <ImageIcon className="h-4 w-4" aria-hidden />
       </ToolbarIconButton>
 
       <ToolbarIconButton
-        label="Add video clip"
+        label={t("addVideoClip")}
         onClick={() => videoInputRef.current?.click()}
       >
         <Clapperboard className="h-4 w-4" aria-hidden />
@@ -185,7 +187,7 @@ export function StudioToolbar() {
           <div className="group relative">
             <button
               type="button"
-              aria-label="Add shape"
+              aria-label={t("addShape")}
               className="flex h-9 w-9 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
             >
               <Square className="h-4 w-4" aria-hidden />
@@ -194,12 +196,12 @@ export function StudioToolbar() {
               role="tooltip"
               className="pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 px-2 py-1 text-[10px] font-medium text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
             >
-              Add shape
+              {t("addShape")}
             </span>
           </div>
         </PopoverTrigger>
         <PopoverContent align="center" className="w-40">
-          {SHAPE_OPTIONS.map(({ kind, label, icon: Icon, config }) => (
+          {SHAPE_OPTIONS.map(({ kind, labelKey, icon: Icon, config }) => (
             <button
               key={kind}
               type="button"
@@ -210,7 +212,7 @@ export function StudioToolbar() {
               className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
             >
               <Icon className="h-4 w-4 shrink-0" aria-hidden />
-              {label}
+              {t(labelKey)}
             </button>
           ))}
         </PopoverContent>

src/components/studio/canvas/VideoLayerNode.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Rect, Text } from "react-konva";
+import { useTranslations } from "next-intl";
 import type Konva from "konva";
 
 import type { Layer } from "@/lib/studio-types";
@@ -26,9 +27,12 @@ export function VideoLayerNode({
   onTransformEnd,
   registerNode,
 }: VideoLayerNodeProps) {
+  const t = useTranslations("auto.componentsStudioCanvasVideoLayerNode");
   const hasVideo = Boolean(getVideoSrc(layer.props));
   const fileName =
-    typeof layer.props.fileName === "string" ? layer.props.fileName : "Video";
+    typeof layer.props.fileName === "string"
+      ? layer.props.fileName
+      : t("defaultFileName");
 
   return (
     <>
@@ -62,7 +66,7 @@ export function VideoLayerNode({
         width={layer.width}
         height={20}
         rotation={layer.rotation}
-        text={hasVideo ? fileName : "Video clip"}
+        text={hasVideo ? fileName : t("placeholder")}
         fontSize={14}
         fill="#E5E7EB"
         align="center"

src/components/studio/properties/CommonLayerControls.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
+import { useTranslations } from "next-intl";
 import { ArrowDown, ArrowUp, Trash2 } from "lucide-react";
 
 import {
@@ -17,6 +18,7 @@ interface CommonLayerControlsProps {
 }
 
 export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
+  const t = useTranslations("auto.componentsStudioPropertiesCommonLayerControls");
   const [aspectLocked, setAspectLocked] = useState(false);
   const aspectRatioRef = useRef(layer.width / layer.height || 1);
   const { update } = useLayerUpdater(layer);
@@ -44,7 +46,7 @@ export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
 
   return (
     <>
-      <PanelSection title="Transform">
+      <PanelSection title={t("transformTitle")}>
         <div className="grid grid-cols-2 gap-2">
           <PropertyNumberInput
             label="X"
@@ -60,13 +62,13 @@ export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
         <div className="flex items-end gap-2">
           <div className="grid flex-1 grid-cols-2 gap-2">
             <PropertyNumberInput
-              label="Width"
+              label={t("widthLabel")}
               value={layer.width}
               min={8}
               onChange={setWidth}
             />
             <PropertyNumberInput
-              label="Height"
+              label={t("heightLabel")}
               value={layer.height}
               min={8}
               onChange={setHeight}
@@ -85,13 +87,13 @@ export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
           />
         </div>
         <PropertyNumberInput
-          label="Rotation (°)"
+          label={t("rotationLabel")}
           value={layer.rotation}
           onChange={(rotation) => update({ rotation })}
         />
       </PanelSection>
 
-      <PanelSection title="Layer order">
+      <PanelSection title={t("layerOrderTitle")}>
         <div className="grid grid-cols-2 gap-2">
           <button
             type="button"
@@ -99,7 +101,7 @@ export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
             className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           >
             <ArrowUp className="h-3.5 w-3.5" aria-hidden />
-            To front
+            {t("toFront")}
           </button>
           <button
             type="button"
@@ -107,7 +109,7 @@ export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
             className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           >
             <ArrowDown className="h-3.5 w-3.5" aria-hidden />
-            To back
+            {t("toBack")}
           </button>
         </div>
       </PanelSection>
@@ -118,7 +120,7 @@ export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
         className="flex w-full items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-xs font-medium text-red-500 transition-colors hover:border-red-300 hover:bg-red-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500"
       >
         <Trash2 className="h-3.5 w-3.5" aria-hidden />
-        Delete layer
+        {t("deleteLayer")}
       </button>
     </>
   );

src/components/studio/properties/ImageLayerProperties.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef, type ChangeEvent } from "react";
+import { useTranslations } from "next-intl";
 import { FlipHorizontal, FlipVertical, ImagePlus } from "lucide-react";
 
 import {
@@ -16,6 +17,7 @@ interface ImageLayerPropertiesProps {
 }
 
 export function ImageLayerProperties({ layer }: ImageLayerPropertiesProps) {
+  const t = useTranslations("auto.componentsStudioPropertiesImageLayerProperties");
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { update, updateProps } = useLayerUpdater(layer);
   const image = getImageProps(layer.props);
@@ -35,9 +37,9 @@ export function ImageLayerProperties({ layer }: ImageLayerPropertiesProps) {
   };
 
   return (
-    <PanelSection title="Image">
+    <PanelSection title={t("sectionTitle")}>
       <PropertySlider
-        label="Opacity"
+        label={t("opacity")}
         min={0}
         max={100}
         value={Math.round(layer.opacity * 100)}
@@ -53,7 +55,7 @@ export function ImageLayerProperties({ layer }: ImageLayerPropertiesProps) {
           className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         >
           <FlipHorizontal className="h-3.5 w-3.5" aria-hidden />
-          Flip H
+          {t("flipHorizontal")}
         </button>
         <button
           type="button"
@@ -61,7 +63,7 @@ export function ImageLayerProperties({ layer }: ImageLayerPropertiesProps) {
           className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         >
           <FlipVertical className="h-3.5 w-3.5" aria-hidden />
-          Flip V
+          {t("flipVertical")}
         </button>
       </div>
       <input
@@ -77,10 +79,10 @@ export function ImageLayerProperties({ layer }: ImageLayerPropertiesProps) {
         className="flex w-full items-center justify-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       >
         <ImagePlus className="h-3.5 w-3.5" aria-hidden />
-        Replace image
+        {t("replaceImage")}
       </button>
       <PropertySlider
-        label="Border radius"
+        label={t("borderRadius")}
         min={0}
         max={100}
         value={image.cornerRadius}

src/components/studio/properties/PropertyControls.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
+import { useTranslations } from "next-intl";
 import { Lock, Unlock } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -167,12 +168,13 @@ export function AspectRatioLockButton({
   locked: boolean;
   onToggle: () => void;
 }) {
+  const t = useTranslations("auto.componentsStudioPropertiesPropertyControls");
   return (
     <button
       type="button"
       onClick={onToggle}
       className="flex h-[30px] w-8 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-500 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-      aria-label={locked ? "Unlock aspect ratio" : "Lock aspect ratio"}
+      aria-label={locked ? t("unlockAspectRatio") : t("lockAspectRatio")}
       aria-pressed={locked}
     >
       {locked ? (

src/components/studio/properties/ShapeLayerProperties.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 import {
   PanelSection,
   PropertyColorInput,
@@ -14,23 +16,24 @@ interface ShapeLayerPropertiesProps {
 }
 
 export function ShapeLayerProperties({ layer }: ShapeLayerPropertiesProps) {
+  const t = useTranslations("auto.componentsStudioPropertiesShapeLayerProperties");
   const { update, updateProps } = useLayerUpdater(layer);
   const shape = getShapeProps(layer.props);
 
   return (
-    <PanelSection title="Shape">
+    <PanelSection title={t("sectionTitle")}>
       <PropertyColorInput
-        label="Fill color"
+        label={t("fillColor")}
         value={shape.fill}
         onChange={(fill) => updateProps({ fill })}
       />
       <PropertyColorInput
-        label="Stroke color"
+        label={t("strokeColor")}
         value={shape.stroke}
         onChange={(stroke) => updateProps({ stroke })}
       />
       <PropertySlider
-        label="Stroke width"
+        label={t("strokeWidth")}
         min={0}
         max={40}
         value={shape.strokeWidth}
@@ -38,7 +41,7 @@ export function ShapeLayerProperties({ layer }: ShapeLayerPropertiesProps) {
       />
       {shape.shape === "rect" ? (
         <PropertySlider
-          label="Border radius"
+          label={t("borderRadius")}
           min={0}
           max={100}
           value={shape.cornerRadius}
@@ -46,7 +49,7 @@ export function ShapeLayerProperties({ layer }: ShapeLayerPropertiesProps) {
         />
       ) : null}
       <PropertySlider
-        label="Opacity"
+        label={t("opacity")}
         min={0}
         max={100}
         value={Math.round(layer.opacity * 100)}

src/components/studio/properties/TextLayerProperties.tsx

@@ -8,6 +8,7 @@ import {
   Italic,
   Underline,
 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import {
   PanelSection,
@@ -31,13 +32,14 @@ interface TextLayerPropertiesProps {
 }
 
 export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
+  const t = useTranslations("auto.componentsStudioPropertiesTextLayerProperties");
   const { update, updateProps } = useLayerUpdater(layer);
   const text = getTextProps(layer.props);
 
   return (
-    <PanelSection title="Text">
+    <PanelSection title={t("sectionTitle")}>
       <PropertySelect
-        label="Font family"
+        label={t("fontFamily")}
         value={text.fontFamily}
         options={FONT_FAMILY_OPTIONS.map((item) => ({
           label: item.label,
@@ -46,7 +48,7 @@ export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
         onChange={(fontFamily) => updateProps({ fontFamily })}
       />
       <PropertySlider
-        label="Font size"
+        label={t("fontSize")}
         min={8}
         max={200}
         value={text.fontSize}
@@ -54,21 +56,21 @@ export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
       />
       <div className="flex gap-1">
         <ToggleIconButton
-          label="Bold"
+          label={t("bold")}
           active={text.bold}
           onClick={() => updateProps({ bold: !text.bold })}
         >
           <Bold className="h-3.5 w-3.5" />
         </ToggleIconButton>
         <ToggleIconButton
-          label="Italic"
+          label={t("italic")}
           active={text.italic}
           onClick={() => updateProps({ italic: !text.italic })}
         >
           <Italic className="h-3.5 w-3.5" />
         </ToggleIconButton>
         <ToggleIconButton
-          label="Underline"
+          label={t("underline")}
           active={text.underline}
           onClick={() => updateProps({ underline: !text.underline })}
         >
@@ -76,22 +78,22 @@ export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
         </ToggleIconButton>
       </div>
       <PropertyColorInput
-        label="Text color"
+        label={t("textColor")}
         value={text.fill}
         onChange={(fill) => updateProps({ fill })}
       />
       <div>
-        <p className="mb-1 text-[11px] font-medium text-gray-400">Alignment</p>
+        <p className="mb-1 text-[11px] font-medium text-gray-400">{t("alignment")}</p>
         <div className="flex gap-1">
           {(
             [
-              { value: "left" as TextAlign, icon: AlignLeft, label: "Left" },
+              { value: "left" as TextAlign, icon: AlignLeft, label: t("alignLeft") },
               {
                 value: "center" as TextAlign,
                 icon: AlignCenter,
-                label: "Center",
+                label: t("alignCenter"),
               },
-              { value: "right" as TextAlign, icon: AlignRight, label: "Right" },
+              { value: "right" as TextAlign, icon: AlignRight, label: t("alignRight") },
             ] as const
           ).map(({ value, icon: Icon, label }) => (
             <ToggleIconButton
@@ -106,7 +108,7 @@ export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
         </div>
       </div>
       <PropertySlider
-        label="Letter spacing"
+        label={t("letterSpacing")}
         min={-5}
         max={20}
         step={0.5}
@@ -114,7 +116,7 @@ export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
         onChange={(letterSpacing) => updateProps({ letterSpacing })}
       />
       <PropertySlider
-        label="Line height"
+        label={t("lineHeight")}
         min={0.8}
         max={3}
         step={0.1}
@@ -123,7 +125,7 @@ export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
         onChange={(lineHeight) => updateProps({ lineHeight })}
       />
       <PropertySlider
-        label="Opacity"
+        label={t("opacity")}
         min={0}
         max={100}
         value={Math.round(layer.opacity * 100)}
@@ -131,7 +133,7 @@ export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
         onChange={(opacity) => update({ opacity: opacity / 100 })}
       />
       <PropertySelect<TextAnimation>
-        label="Animation"
+        label={t("animation")}
         value={text.animation}
         options={TEXT_ANIMATION_OPTIONS}
         onChange={(animation) => updateProps({ animation })}

src/components/studio/sidebar/AudioSidebarContent.tsx

@@ -1,11 +1,15 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 import { AudioSidebarMusicTab } from "@/components/studio/sidebar/AudioSidebarMusicTab";
 import { AudioSidebarVoiceoverPane } from "@/components/studio/sidebar/AudioSidebarVoiceoverPane";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 
 export function AudioSidebarContent() {
+  const t = useTranslations("auto.componentsStudioSidebarAudioSidebarContent");
+
   return (
     <aside
       className={cn(
@@ -19,13 +23,13 @@ export function AudioSidebarContent() {
               value="music"
               className="rounded-full text-xs font-medium data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
             >
-              Music
+              {t("musicTab")}
             </TabsTrigger>
             <TabsTrigger
               value="voiceover"
               className="rounded-full text-xs font-medium data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
             >
-              Voiceover
+              {t("voiceoverTab")}
             </TabsTrigger>
           </TabsList>
         </div>

src/components/studio/sidebar/AudioSidebarMusicTab.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useState, type ChangeEvent } from "react";
 import { Box, HardDrive, Search, UploadCloud } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
@@ -11,6 +12,7 @@ import { useStudioStore } from "@/lib/studio-store";
 import { cn } from "@/lib/utils";
 
 export function AudioSidebarMusicTab() {
+  const t = useTranslations("auto.componentsStudioSidebarAudioSidebarMusicTab");
   const inputRef = useRef<HTMLInputElement>(null);
   const setAudioTrack = useStudioStore((state) => state.setAudioTrack);
   const [includeTemplateSfx, setIncludeTemplateSfx] = useState(true);
@@ -51,7 +53,7 @@ export function AudioSidebarMusicTab() {
       <div className="space-y-2">
         <SourceButton
           icon={UploadCloud}
-          label="Upload"
+          label={t("upload")}
           onClick={() => inputRef.current?.click()}
         />
         <SourceButton icon={Box} label="Dropbox" onClick={() => undefined} />
@@ -64,12 +66,12 @@ export function AudioSidebarMusicTab() {
 
       <div className="flex items-center justify-between gap-2">
         <span className="text-[11px] leading-snug text-gray-500">
-          Include template sound effect
+          {t("includeTemplateSfx")}
         </span>
         <Switch
           checked={includeTemplateSfx}
           onCheckedChange={setIncludeTemplateSfx}
-          aria-label="Include template sound effect"
+          aria-label={t("includeTemplateSfx")}
         />
       </div>
 
@@ -80,7 +82,7 @@ export function AudioSidebarMusicTab() {
         />
         <input
           type="search"
-          placeholder="Search music"
+          placeholder={t("searchPlaceholder")}
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           className="h-9 w-full rounded-lg border border-gray-200 bg-white pl-8 pr-3 text-xs text-white placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
@@ -93,13 +95,13 @@ export function AudioSidebarMusicTab() {
             value="library"
             className="rounded-full text-[11px] data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
           >
-            Music library
+            {t("musicLibrary")}
           </TabsTrigger>
           <TabsTrigger
             value="my-music"
             className="rounded-full text-[11px] data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
           >
-            My music
+            {t("myMusic")}
           </TabsTrigger>
         </TabsList>
 
@@ -129,7 +131,7 @@ export function AudioSidebarMusicTab() {
         <TabsContent value="my-music" className="mt-3">
           <div className="flex flex-col items-center rounded-xl border border-dashed border-gray-200 bg-white/40 px-3 py-8 text-center">
             <UploadCloud className="h-8 w-8 text-gray-500" aria-hidden />
-            <p className="mt-3 text-xs text-gray-500">Upload your own music</p>
+            <p className="mt-3 text-xs text-gray-500">{t("uploadOwnMusic")}</p>
             <Button
               type="button"
               size="sm"
@@ -137,7 +139,7 @@ export function AudioSidebarMusicTab() {
               className="mt-3 h-8 border-gray-300 bg-white text-xs text-gray-700 hover:bg-gray-50"
               onClick={() => inputRef.current?.click()}
             >
-              Upload
+              {t("upload")}
             </Button>
           </div>
         </TabsContent>

src/components/studio/sidebar/AudioSidebarVoiceoverPane.tsx

@@ -1,15 +1,20 @@
 "use client";
 
 import { Mic2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 /** Voiceover tab body (same content as legacy TtsSidebarContent). */
 export function AudioSidebarVoiceoverPane() {
+  const t = useTranslations(
+    "auto.componentsStudioSidebarAudioSidebarVoiceoverPane"
+  );
+
   return (
     <div className="flex flex-col items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 px-4 py-10 text-center">
       <Mic2 className="h-10 w-10 text-violet-400" aria-hidden />
-      <p className="mt-4 text-sm font-medium text-gray-300">Coming soon</p>
+      <p className="mt-4 text-sm font-medium text-gray-300">{t("comingSoon")}</p>
       <p className="mt-1 max-w-[180px] text-xs text-gray-500">
-        Generate voiceovers from your script directly in the studio.
+        {t("description")}
       </p>
     </div>
   );

src/components/studio/sidebar/ColorsCustomTab.tsx

@@ -2,8 +2,10 @@
 
 import { Button } from "@/components/ui/button";
 import { useStudioStore } from "@/lib/studio-store";
+import { useTranslations } from "next-intl";
 
 export function ColorsCustomTab() {
+  const t = useTranslations("auto.componentsStudioSidebarColorsCustomTab");
   const sceneBackgroundColor = useStudioStore(
     (state) => state.sceneBackgroundColor
   );
@@ -23,7 +25,7 @@ export function ColorsCustomTab() {
           htmlFor="colors-main"
           className="shrink-0 text-xs text-gray-600"
         >
-          Main Color
+          {t("mainColor")}
         </label>
         <input
           id="colors-main"
@@ -39,7 +41,7 @@ export function ColorsCustomTab() {
           htmlFor="colors-additional"
           className="shrink-0 text-xs text-gray-600"
         >
-          Additional Color
+          {t("additionalColor")}
         </label>
         <input
           id="colors-additional"
@@ -58,7 +60,7 @@ export function ColorsCustomTab() {
           applyPaletteToAllScenes(sceneBackgroundColor, sceneAccentColor)
         }
       >
-        Apply to all scenes
+        {t("applyToAllScenes")}
       </Button>
     </div>
   );

src/components/studio/sidebar/ColorsPalettesTab.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 import { COLOR_PALETTES, PALETTE_NAMES } from "@/lib/studio-color-palettes";
 import { useStudioStore } from "@/lib/studio-store";
 import { cn } from "@/lib/utils";
@@ -13,6 +15,7 @@ export function ColorsPalettesTab({
   activeColorIndex,
   onSelectPalette,
 }: ColorsPalettesTabProps) {
+  const t = useTranslations("auto.componentsStudioSidebarColorsPalettesTab");
   const applyPaletteToAllScenes = useStudioStore(
     (state) => state.applyPaletteToAllScenes
   );
@@ -22,13 +25,14 @@ export function ColorsPalettesTab({
       <ul className="space-y-1.5">
         {COLOR_PALETTES.map((palette, index) => {
           const isActive = activeColorIndex === index;
-          const name = PALETTE_NAMES[index] ?? `Palette ${index + 1}`;
+          const name =
+            PALETTE_NAMES[index] ?? t("paletteFallback", { number: index + 1 });
           return (
             <li key={index}>
               <button
                 type="button"
                 title={name}
-                aria-label={`Apply ${name} palette`}
+                aria-label={t("applyPaletteAriaLabel", { name })}
                 onClick={() => {
                   onSelectPalette(index);
                   applyPaletteToAllScenes(palette[0] ?? "#ffffff", palette[1] ?? "#94a3b8");

src/components/studio/sidebar/ColorsSidebarContent.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 import { ColorsCustomTab } from "@/components/studio/sidebar/ColorsCustomTab";
@@ -10,6 +11,7 @@ import { COLOR_PALETTES } from "@/lib/studio-color-palettes";
 import { cn } from "@/lib/utils";
 
 export function ColorsSidebarContent() {
+  const t = useTranslations("auto.componentsStudioSidebarColorsSidebarContent");
   const [activeColorIndex, setActiveColorIndex] = useState(0);
 
   const activePalette = COLOR_PALETTES[activeColorIndex] ?? COLOR_PALETTES[0]!;
@@ -34,13 +36,13 @@ export function ColorsSidebarContent() {
               value="palettes"
               className="rounded-full text-[11px] data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
             >
-              Palettes
+              {t("palettesTab")}
             </TabsTrigger>
             <TabsTrigger
               value="custom"
               className="rounded-full text-[11px] data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
             >
-              Custom
+              {t("customTab")}
             </TabsTrigger>
           </TabsList>
         </div>

src/components/studio/sidebar/ColorsTemplatePreviewCard.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
 import { PALETTE_NAMES } from "@/lib/studio-color-palettes";
 import { contrastTextColor } from "@/lib/studio-color-palettes";
 
@@ -10,8 +14,13 @@ export function ColorsTemplatePreviewCard({
   palette,
   paletteIndex,
 }: ColorsTemplatePreviewCardProps) {
+  const t = useTranslations(
+    "auto.componentsStudioSidebarColorsTemplatePreviewCard"
+  );
   const [mainColor, accentColor] = palette;
-  const paletteName = PALETTE_NAMES[paletteIndex] ?? `Palette ${paletteIndex + 1}`;
+  const paletteName =
+    PALETTE_NAMES[paletteIndex] ??
+    t("paletteFallback", { number: paletteIndex + 1 });
 
   return (
     <div
@@ -31,7 +40,7 @@ export function ColorsTemplatePreviewCard({
               color: contrastTextColor(mainColor),
             }}
           >
-            Main Color
+            {t("mainColor")}
           </div>
           <div
             className="h-2.5 w-16 rounded-sm text-[8px] leading-none px-1 flex items-center"
@@ -40,7 +49,7 @@ export function ColorsTemplatePreviewCard({
               color: `${contrastTextColor(mainColor)}cc`,
             }}
           >
-            Additional
+            {t("additional")}
           </div>
           <div
             className="h-2 w-14 rounded-sm"

src/components/studio/sidebar/FontSidebarContent.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 import { PropertySelect } from "@/components/studio/properties/PropertyControls";
@@ -9,6 +10,7 @@ import { FONT_FAMILY_OPTIONS } from "@/lib/studio-layer-props";
 import { useStudioStore } from "@/lib/studio-store";
 
 export function FontSidebarContent() {
+  const t = useTranslations("auto.componentsStudioSidebarFontSidebarContent");
   const applyFontFamilyToAllTextLayers = useStudioStore(
     (state) => state.applyFontFamilyToAllTextLayers
   );
@@ -23,14 +25,14 @@ export function FontSidebarContent() {
       className="w-full border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:text-gray-900"
       onClick={() => applyFontFamilyToAllTextLayers(fontFamily)}
     >
-      Apply to all text layers
+      {t("applyToAll")}
     </Button>
   );
 
   return (
-    <SidebarPanelShell title="Font" footer={footer}>
+    <SidebarPanelShell title={t("title")} footer={footer}>
       <PropertySelect
-        label="Font family"
+        label={t("fontFamily")}
         value={fontFamily}
         options={FONT_FAMILY_OPTIONS.map((item) => ({
           label: item.label,

src/components/studio/sidebar/SceneEditSidebarContent.tsx

@@ -2,11 +2,13 @@
 
 import { useRef } from "react";
 import { ImagePlus, Plus, Type } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { getTextProps, mergeLayerProps } from "@/lib/studio-layer-props";
 import { useStudioStore } from "@/lib/studio-store";
 
 export function SceneEditSidebarContent() {
+  const t = useTranslations("auto.componentsStudioSidebarSceneEditSidebarContent");
   const scenes = useStudioStore((state) => state.scenes);
   const activeSceneId = useStudioStore((state) => state.activeSceneId);
   const updateLayer = useStudioStore((state) => state.updateLayer);
@@ -24,7 +26,7 @@ export function SceneEditSidebarContent() {
       width: 800,
       height: 80,
       props: {
-        text: "Your text here",
+        text: t("defaultText"),
         fontSize: 48,
         fill: "#111827",
         fontFamily: "Inter, sans-serif",
@@ -42,7 +44,7 @@ export function SceneEditSidebarContent() {
       {/* Panel header */}
       <div className="shrink-0 border-b border-gray-200 px-4 py-3">
         <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-          Edit Scene
+          {t("panelTitle")}
         </p>
         {activeScene && (
           <p className="mt-0.5 truncate text-[11px] text-gray-500">
@@ -67,7 +69,11 @@ export function SceneEditSidebarContent() {
                   <div className="mb-1.5 flex items-center justify-between">
                     <label className="flex items-center gap-1.5 text-[11px] font-semibold text-gray-600">
                       <Type className="h-3 w-3 text-gray-400" aria-hidden />
-                      {idx === 0 ? "Title" : idx === 1 ? "Subtitle" : `Text ${idx + 1}`}
+                      {idx === 0
+                        ? t("titleLabel")
+                        : idx === 1
+                          ? t("subtitleLabel")
+                          : t("textLabel", { index: idx + 1 })}
                     </label>
                     <span
                       className={
@@ -90,7 +96,7 @@ export function SceneEditSidebarContent() {
                         }),
                       })
                     }
-                    placeholder="Type here…"
+                    placeholder={t("textPlaceholder")}
                     className="w-full resize-none rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-blue-400 focus:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-0"
                   />
                 </div>
@@ -105,7 +111,7 @@ export function SceneEditSidebarContent() {
             {imageLayers.map((layer, idx) => (
               <ImageLayerInput
                 key={layer.id}
-                label={`Image ${idx + 1}`}
+                label={t("imageLabel", { index: idx + 1 })}
                 layerProps={layer.props}
                 onReplace={(src) =>
                   updateLayer(layer.id, {
@@ -122,10 +128,10 @@ export function SceneEditSidebarContent() {
           <div className="px-4 py-8 text-center">
             <Type className="mx-auto mb-3 h-8 w-8 text-gray-300" aria-hidden />
             <p className="text-xs text-gray-500">
-              This scene has no content yet.
+              {t("emptyStateTitle")}
             </p>
             <p className="mt-0.5 text-[11px] text-gray-400">
-              Add a text layer to start editing.
+              {t("emptyStateHint")}
             </p>
           </div>
         )}
@@ -139,7 +145,7 @@ export function SceneEditSidebarContent() {
           className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-blue-300 bg-blue-50 px-3 py-2 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         >
           <Plus className="h-3.5 w-3.5" aria-hidden />
-          Add Text Layer
+          {t("addTextLayer")}
         </button>
       </div>
     </div>
@@ -156,6 +162,7 @@ function ImageLayerInput({
   layerProps: Record<string, unknown>;
   onReplace: (src: string) => void;
 }) {
+  const t = useTranslations("auto.componentsStudioSidebarSceneEditSidebarContent");
   const inputRef = useRef<HTMLInputElement>(null);
   const src = typeof layerProps.src === "string" ? layerProps.src : null;
 
@@ -195,7 +202,7 @@ function ImageLayerInput({
           <ImagePlus className="h-5 w-5 shrink-0 text-gray-300" aria-hidden />
         )}
         <span className="min-w-0 truncate text-gray-500">
-          {src ? "Replace image" : "Upload image"}
+          {src ? t("replaceImage") : t("uploadImage")}
         </span>
       </button>
     </div>

src/components/studio/sidebar/TransitionsSidebarContent.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Info } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { useStudioStore } from "@/lib/studio-store";
 import type { SceneTransition } from "@/lib/studio-types";
@@ -36,10 +37,12 @@ function optionToTransitionType(id: TransitionOptionId): SceneTransition {
 
 function TransitionOptionCard({
   option,
+  label,
   selected,
   onSelect,
 }: {
   option: (typeof TRANSITION_OPTIONS)[number];
+  label: string;
   selected: boolean;
   onSelect: () => void;
 }) {
@@ -63,13 +66,14 @@ function TransitionOptionCard({
         <span className="mx-auto h-2 w-3/4 rounded bg-white/30" aria-hidden />
       </div>
       <p className="bg-gray-100 py-1.5 text-center text-[11px] font-semibold text-gray-700">
-        {option.label}
+        {label}
       </p>
     </button>
   );
 }
 
 export function TransitionsSidebarContent() {
+  const t = useTranslations("auto.componentsStudioSidebarTransitionsSidebarContent");
   const scenes = useStudioStore((state) => state.scenes);
   const applyTransitionToAllScenes = useStudioStore(
     (state) => state.applyTransitionToAllScenes
@@ -91,7 +95,7 @@ export function TransitionsSidebarContent() {
   return (
     <aside className="flex h-full w-full flex-col overflow-hidden bg-white text-gray-900">
       <h2 className="shrink-0 border-b border-gray-200 px-3 py-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
-        Transitions
+        {t("heading")}
       </h2>
 
       <div className="grid grid-cols-2 gap-2 p-2">
@@ -99,6 +103,7 @@ export function TransitionsSidebarContent() {
           <TransitionOptionCard
             key={option.id}
             option={option}
+            label={option.id === "random" ? t("randomTransition") : t("noTransition")}
             selected={selectedOption === option.id}
             onSelect={() => handleSelect(option.id)}
           />
@@ -107,7 +112,7 @@ export function TransitionsSidebarContent() {
 
       <div className="flex items-start gap-2 px-3 py-2 text-[10px] leading-relaxed text-gray-500">
         <Info className="mt-0.5 h-3 w-3 shrink-0 text-gray-600" aria-hidden />
-        <p>Applied transitions will be visible on all scenes after export.</p>
+        <p>{t("exportNote")}</p>
       </div>
     </aside>
   );

src/components/studio/sidebar/TtsSidebarContent.tsx

@@ -1,17 +1,20 @@
 "use client";
 
 import { Mic2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { SidebarPanelShell } from "@/components/studio/sidebar/SidebarPanelShell";
 
 export function TtsSidebarContent() {
+  const t = useTranslations("auto.componentsStudioSidebarTtsSidebarContent");
+
   return (
-    <SidebarPanelShell title="Text to Speech">
+    <SidebarPanelShell title={t("title")}>
       <div className="flex flex-col items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 py-10 text-center">
         <Mic2 className="h-10 w-10 text-violet-400" aria-hidden />
-        <p className="mt-4 text-sm font-medium text-gray-300">Coming soon</p>
+        <p className="mt-4 text-sm font-medium text-gray-300">{t("comingSoon")}</p>
         <p className="mt-1 max-w-[180px] text-xs text-gray-500">
-          Generate voiceovers from your script directly in the studio.
+          {t("description")}
         </p>
       </div>
     </SidebarPanelShell>