feat: admin API integration, LogoMark, settings page, i18n, RTL font, docs

- Wire admin API into homepage + templates page (ISR 60s, null fallback)
- Add src/lib/admin-api.ts with safeFetch helper
- Add adminProjectToTemplateItem + adminProjectToCatalogTemplate mappers
- Add LogoMark SVG component, replace Sparkles icon in Navbar/Footer/Sidebar
- Add public/favicon.svg (SVG brand mark)
- Rewrite opengraph-image.tsx with FlatRender branding
- Add RTL/Persian font cascade: unlayered [dir=rtl] block forces Vazirmatn
- Dashboard Settings page: Profile, Security, Billing, Notifications sections
- Add src/lib/supabase/client.ts browser client
- Admin API: GET /me, PATCH /profile, POST /change-password endpoints
- Admin API DTOs: AdminUserDto, UpdateProfileRequest, ChangePasswordRequest
- Admin UI Settings page with TanStack Query + mutations
- Add CLAUDE.md + README.md to both repos for new-machine onboarding
- Update PROJECT_MEMORY.md with session log
- Add appsettings.Development.json.example template

src/app/opengraph-image.tsx

@@ -2,7 +2,7 @@ import { ImageResponse } from "next/og";
 
 export const runtime = "edge";
 
-export const alt = "CreatorStudio — AI Video & Image Maker";
+export const alt = "FlatRender — AI Video & Image Maker";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
 
@@ -17,41 +17,94 @@ export default function OpenGraphImage() {
           flexDirection: "column",
           alignItems: "flex-start",
           justifyContent: "center",
-          background: "linear-gradient(135deg, #1e40af 0%, #2563EB 50%, #7c3aed 100%)",
-          padding: "80px",
+          background:
+            "linear-gradient(135deg, #1e3a8a 0%, #2563EB 55%, #4f46e5 100%)",
+          padding: "80px 90px",
+          fontFamily: "system-ui, -apple-system, sans-serif",
         }}
       >
-        <div
-          style={{
-            fontSize: 28,
-            fontWeight: 600,
-            color: "rgba(255,255,255,0.85)",
-            marginBottom: 16,
-          }}
-        >
-          CreatorStudio
+        {/* Logo mark row */}
+        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
+          {/* Icon */}
+          <div
+            style={{
+              width: 56,
+              height: 56,
+              borderRadius: 12,
+              background: "rgba(255,255,255,0.15)",
+              border: "1.5px solid rgba(255,255,255,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {/* Play triangle */}
+            <div
+              style={{
+                width: 0,
+                height: 0,
+                borderTop: "11px solid transparent",
+                borderBottom: "11px solid transparent",
+                borderLeft: "18px solid white",
+                marginLeft: 4,
+              }}
+            />
+          </div>
+          <span
+            style={{ fontSize: 28, fontWeight: 700, color: "white", letterSpacing: -0.5 }}
+          >
+            FlatRender
+          </span>
         </div>
+
+        {/* Main headline */}
         <div
           style={{
-            fontSize: 64,
-            fontWeight: 700,
+            fontSize: 62,
+            fontWeight: 800,
             color: "white",
-            lineHeight: 1.1,
+            lineHeight: 1.08,
             maxWidth: 900,
+            letterSpacing: -1.5,
           }}
         >
-          Create pro videos & images with AI
+          Create pro videos &amp; images with AI
         </div>
+
+        {/* Subtitle */}
         <div
           style={{
-            fontSize: 28,
-            color: "rgba(255,255,255,0.9)",
-            marginTop: 24,
-            maxWidth: 800,
+            fontSize: 26,
+            color: "rgba(255,255,255,0.82)",
+            marginTop: 28,
+            maxWidth: 760,
+            lineHeight: 1.4,
           }}
         >
           Templates, editors, and one-click export for every channel
         </div>
+
+        {/* Bottom pill tags */}
+        <div style={{ display: "flex", gap: 12, marginTop: 48 }}>
+          {["Video Maker", "Image Maker", "AI Templates", "One-click Export"].map(
+            (tag) => (
+              <div
+                key={tag}
+                style={{
+                  background: "rgba(255,255,255,0.15)",
+                  border: "1px solid rgba(255,255,255,0.25)",
+                  borderRadius: 100,
+                  padding: "8px 20px",
+                  fontSize: 16,
+                  fontWeight: 600,
+                  color: "rgba(255,255,255,0.9)",
+                }}
+              >
+                {tag}
+              </div>
+            )
+          )}
+        </div>
       </div>
     ),
     { ...size }